// STEP 1: Create a data set.
//


//
// STEP 2: Define some global variables that will help us deal with the case
//         where the user may rapidly click on items in the master region. We
//         want our effect transitions to be as smooth as possible.
//
var gEffectInProgress = null;
var gPendingSetRowIDRequest = -1;

//
// STEP 3: Define a function observer that will fade-in the detail content
//         whenever the content in the region is re-generated and inserted into the
//         document.
//
//         Note that there is a CSS rule, defined in the style block above, for #description
//         that gives it an opacity of zero, which basically means that when the page
//         is first loaded, the detail region is completely invisible/see-thru. This
//         prevents an initial flash from occuring in some browsers if the content is
//         rendered to the screen before the fade-in effect kicks in.
//
function fadeInContent(notificationType, notifier, data)
{
	if (notificationType != "onPostUpdate")
		return;
	var effect = new Spry.Effect.Fade('description2', { to: 100, from: 0, duration: 500, finish: function() {
		// The region is now showing. Process any pending row change request.
		gEffectInProgress = null;
		if (gPendingSetRowIDRequest >= 0)
		{
			var id = gPendingSetRowIDRequest;
			gPendingSetRowIDRequest = -1;
			fadeOutContentThenSetRow(id);
		}
	}});
	effect.start();
}

//
// STEP 4: Register the function as an observer on the detail region.
//
Spry.Data.Region.addObserver('description2', fadeInContent);

//
// STEP 5: Define a function which will be used to fade-out the detail region. This
//         same function will define a custom finish function, which will be called by
//         the fade-out effect when it is finished, to trigger a call to setCurrentRow().
//         This custom finish function is registered with the effect by passing it as an
//         option to the effect constructor.
//
function fadeOutContentThenSetRow2(rowID)
{
	// If we have an effect already in progress, don't do anything
	// We'll set the rowID when we're done.

	if (gEffectInProgress)
	{
		gPendingSetRowIDRequest = rowID;
		return;
	}

	// If the correct row is already showing, don't do anything!

	if (rowID == ds2.getCurrentRowID())
		return;

	gEffectInProgress = new Spry.Effect.Fade('description2', { to: 0, from: 100, duration: 500, finish: function() {
		ds2.setCurrentRow(rowID);
	}});
	gEffectInProgress.start();
}// JavaScript Document