// JavaScript Document
//define custom cluster effect for parallel fade & grow
FadeGrow = function(element, options)
{
	Spry.Effect.Cluster.call(this, options);
	var duration = 1000;
	var from = 0;
	var to = 100;
	var transition = Spry.fifthTransition;
	var toggle = false;
	if (options)
	{
		if (options.duration != null) duration = options.duration;
		if (options.from != null) from = options.from;
		if (options.to != null) to = options.to;
		if (options.transition != null) transition = options.transition;
		if (options.toggle != null) toggle = options.toggle;
	}
	var fadeEffect = new Spry.Effect.Fade(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
	var growEffect = new Spry.Effect.Grow(element, {duration: duration, from: from, to: to, transition: transition, toggle: toggle});
	this.addParallelEffect(fadeEffect);
	this.addParallelEffect(growEffect);
};
FadeGrow.prototype = new Spry.Effect.Cluster();
FadeGrow.prototype.constructor = FadeGrow;

//image dataset for sample 2
var dsImages2 = new Spry.Data.XMLDataSet("lib/inc/photos.xml", "gallery/photos/photo");

//utility function called by the observer - fade & grow the second image
function fadeInAndGrow()
{
		var img = document.getElementById('img_detail2');
		if (!img)
		{
			return;
		}
			
		//reset styles altered by effects
			img.style.visibility='hidden';
			img.style.width='';
			img.style.height='';
			img.style.opacity='';
			img.style.filter='';
			img.style.top='';
			img.style.left='';
			img.style.fontSize='';
		
		//Use an image loader to make sure we only fade in the new image after
		//it is completely loaded.
		var gImageLoader = new Image();
		gImageLoader.onload = function()
		{
		myFadeGrow2b = new FadeGrow("img_detail2", {from: "0", to: "100%", duration: 1000});
		myFadeGrow2b.start();
}
		var curRow = dsImages2.getCurrentRow();
		var imgPath =  'lib/top/' + curRow["@path"];
		gImageLoader.src = imgPath;
}

//observer object for sample 2
var obs2 = new Object;
obs2.onPostUpdate = function(notifier, data)
{
		//use this flag to avoid the effect running on load
		if (typeof firstTime == 'undefined')
		{
		  firstTime = true;
		}
		else
		{
      fadeInAndGrow();
		}
};

//data region observer for sample 2
Spry.Data.Region.addObserver('img_detail2', obs2);

//store the current image number so I can later detect mouse over on it
var oldRow = 0;

//mouseover handler for sample 2 - fade & shrink the first image
//uses a finish function that sets the current row, causing the observer to call the reverse effect
var changePic = function(row)
{
    //if it's the same picture, do nothing
		if(oldRow==row)
		{
      return;
		}
      
		oldRow = row;
      
		//if any effects are running, cancel them
		if(myFadeGrow2a && myFadeGrow2a.isRunning)
		{
			myFadeGrow2a.cancel();
		}
		if(myFadeGrow2b && myFadeGrow2b.isRunning){
			myFadeGrow2b.cancel();                
		}
		
    myFadeGrow2a = new FadeGrow("img_detail2", {from: "100%", to: "0", duration: 1000, finish: function(){dsImages2.setCurrentRow(row);}});
		myFadeGrow2a.start();
}