// effects.js - version 0.2 - Spry Pre-Release 1.6.1



//



// Copyright (c) 2006. Adobe Systems Incorporated.



// All rights reserved.



// Redistribution and use in source and binary forms, with or without



// modification, are permitted provided that the following conditions are met:



//



//   * Redistributions of source code must retain the above copyright notice,



//     this list of conditions and the following disclaimer.



//   * Redistributions in binary form must reproduce the above copyright notice,



//     this list of conditions and the following disclaimer in the documentation



//     and/or other materials provided with the distribution.



//   * Neither the name of Adobe Systems Incorporated nor the names of its



//     contributors may be used to endorse or promote products derived from this



//     software without specific prior written permission.



//



// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"



// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE



// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE



// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE



// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR



// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF



// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS



// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN



// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)



// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE



// POSSIBILITY OF SUCH DAMAGE.







///////////////////////////////////////////////////////////////////////////////////////



// 



//  This file is used in an advanced demo to examplify the Spry Effects functionalities 



//  and interoperability between them. To read more details about different Spry Effects



// 	and their detailed options please see our detailed samples:



//



// 	http://labs.adobe.com/technologies/spry/samples/#effects



//



// 	We had to write the following custom objects and functions to achieve our demo goal:



//  



//  Spry.Effect.FadeBlind 



//			- A custom cluster effect which group together a Fade and a Blind Effect



//



//  Spry.Effect.FadeSlide 



// 			- A custom cluster effect which group together a Fade and a Blind Effect



//



// 	Observer 



//      - A custom observer attached to every effect that will run in page. This observer 



// 			was designed to run any effect a second time in the opposite direction and 



// 			revert at the end any CSS changes that where changed by the effect on the target



// 			element



//



// 	runEffect()



// 			- A custom function that will prepare and run a given effect on a target element



//



//  ExampleHelpText()



// 			- A custom function designed to change the content text of an element.



//  



///////////////////////////////////////////////////////////////////////////////////////











////////////////////////////////////////////////////



//



// 	Global Variables



//



////////////////////////////////////////////////////







// list of effects already run to be reused



var effects = {};



// latest effect ran



var prevEffect = false;



// CSS initial properties for the elements on which we apply the effects



var initialElements = [];



// list of style properties to be monitored



var saveStyle = ['position', 'width', 'height', 'opacity', 'filter', 'top', 'left', 'backgroundColor', 'visibility', 'display'];







////////////////////////////////////////////////////



//



// 	Cluster Effects



//



////////////////////////////////////////////////////







/* 



 * FadeBlind 



 * 		Custom Cluster effect that fade in/out and blind in/out simultanous an element



 * 		by running in parallel the Fade() and Blind() predefined clusters



 */







Spry.Effect.FadeBlind = function(element, options)



{



	Spry.Effect.Cluster.call(this, options);



	



	this.name = 'FadeBlind';



	var duration = 1000;



	var doToggle = false;



	var from = 100;



	var to = 0;







	if (options)



	{



		if (options.duration) duration = options.duration;



		if (options.toggle) doToggle = options.toggle;



		if (options.from) from = options.from;



		if (options.to) to = options.to;



	}







	var options = {duration: duration, from: from, to: to, toggle: doToggle};



	var blind = new Spry.Effect.Blind(element, options); 



	this.addParallelEffect(blind);







	var options = {duration: duration, from: from, to: to, toggle: doToggle};



	var fade = new Spry.Effect.Fade(element, options); 



	this.addParallelEffect(fade);



};







Spry.Effect.FadeBlind.prototype = new Spry.Effect.Cluster();



Spry.Effect.FadeBlind.prototype.constructor = Spry.Effect.FadeBlind; 







/* 



 * FadeSlide 



 * 		Custom Cluster effect that fade in/out and slide simultaneous an element



 * 		by running in parallel the Fade() and Slide() predefined clusters



 */







Spry.Effect.FadeSlide = function(element, options)



{



	Spry.Effect.Cluster.call(this, options);



	



	this.name = 'FadeSlide';



	var duration = 1000;



	var doToggle = false;



	var from = 100;



	var to = 0;







	if (options)



	{



		if (options.duration) duration = options.duration;



		if (options.toggle) doToggle = options.toggle;



		if (options.from) from = options.from;



		if (options.to) to = options.to;



	}







	var options = {duration: duration, from: from, to: to, toggle: doToggle};



	var slide = new Spry.Effect.Slide(element, options);



	this.addParallelEffect(slide);







	var options = {duration: duration, from: from, to: to, toggle: doToggle};



	var fade = new Spry.Effect.Fade(element, options);



	this.addParallelEffect(fade);



};







Spry.Effect.FadeSlide.prototype = new Spry.Effect.Cluster();



Spry.Effect.FadeSlide.prototype.constructor = Spry.Effect.FadeSlide;







///////////////////////////////////////////////////////////////



//



// Generic Observer



//



// 		The observer will save the initial element state, 



// 		restore the effect and the element to their original 



// 		states when the effect finished or canceled.



//



///////////////////////////////////////////////////////////////







var Observer = {};







/*



 * 	Observer.onPreEffect(obj)



 * 		Before running an effect forward the initial CSS values are saved.



 *    We will use later these when the animation will finish or is canceled 



 * 		to restore the animated element to be ready for the next effect.



 *    This function is automatically called by the effect.



 *  Parameters:



 * 		obj - the running effect that calls this function



 */



Observer.onPreEffect = function(obj){



	if (obj.direction && obj.direction == Spry.forwards){



		saveElement(obj.element);



		if (obj.name == 'Slide' || obj.name == 'FadeSlide'){



			saveElement(document.getElementById('content_box'));



		}



	}



};







/*



 * 	Observer.onCancel(obj)



 * 		When an effect is canceled this function will restore the element CSS.



 * 		Also we toggle the effect so the next time will run to go forward again.



 *    This function is automatically called by the effect.



 *  Parameters:



 * 		obj - the running effect that calls this function



 */



Observer.onCancel = function(obj){



	if (obj.direction == Spry.forwards){



		obj.doToggle();



	}



	



	restoreElement(obj.element);







	if (obj.name == 'Slide' || obj.name == 'FadeSlide'){



		var el = document.getElementById('content_box')



		restoreElement(el);



	}



};







/*



 * 	Observer.onPostEffect(obj)



 * 		When a forward effect finish the effect is restarted to toggle the effect. 



 * 		We will use a small timeout to make sure the effect properly finish the 



 * 		animation in forward direction.



 * 		After the second run will restore the element CSS



 *    This function is automatically called by the effect.



 *  Parameters:



 * 		obj - the running effect that calls this function



 */



Observer.onPostEffect = function(obj){



	if (obj.direction == Spry.forwards)



		setTimeout(function(){obj.start()}, 150);



	else



		restoreElement(obj.element);



};







/////////////////////////////////////////////////



//



// Utilities functions



//



/////////////////////////////////////////////////







/* 



 * ExampleHelpText



 * 		change the content text of the text_pane div with the new one received



 * Parameters:



 * 		helpText - the new text to be displayed into the text_pane element



 * 



 */



function ExampleHelpText(helpText)



{



	document.getElementById("text_pane").innerHTML='<p>'+helpText+'</p>';



};







/* 



 * ReloadDocument()



 * 		reload the current page from the server



 * 



 */



function ReloadDocument()



{



	window.location.reload(true);



};







/* 



 * saveElement(el)



 * 		Save into the global array of 'initialElements' some CSS properties 



 * 		of the given element that where altered by the animation running.



 * Parameters:



 *		el - the DOM element for which to save the CSS properties



 */



var saveElement = function(el){



	if (!initialElements[el.id])



	{



		initialElements[el.id] = {};



		for (var i = 0; i < saveStyle.length; i++)



		{



			initialElements[el.id][saveStyle[i]] = Spry.Effect.getStyleProp(el, saveStyle[i]);



		}



	}



};







/* 



 * restoreElement(el)



 * 		Restore from the global array 'initialElements' some CSS properties 



 * 		of the given element to prepare it for the next effect to run.



 * Parameters:



 *		el - the DOM element for which to restore the CSS properties



 */



var restoreElement = function(el){



	for (var i = 0; i < saveStyle.length; i++)



		el.style[saveStyle[i]] = initialElements[el.id][saveStyle[i]];



};







/*



 * runEffect()



 *    This is the dispatcher that will instantiate, if not already done, 



 * 		the given 'effect' with a list of 'options' to run on a given target 'element'.



 *



 *  	The observer defined above will also be attached to the effect to 



 * 		initially save the unaltered 'element' properties, automatically restart 



 *    the animation in backward direction and restore the saved properties at the end.



 *



 * 		The 'effect' is than started and the text from the text_pane is changed



 * 		with the 'helpText'



 *



 * 		The "new Spry.Effect[effect]" is a generic way of initializing a given 'effect'.



 * 		The Spry samples are describing for each effect what is the specific code



 * 		to be included in page and the complete list of supported options. An online version



 * 		of the Spry Effects samples could be accessed here:



 *



 *    http://labs.adobe.com/technologies/spry/samples/#effects



 *



 * 		The function will return false to prevent the href of <a> tag to be followed by the browser.



 *



 * Parameters:



 * 		effect - the name of the effect to run



 * 		element - the element id from page to run this effect on



 * 		options - the options necessary for the effect to run



 * 		helptext - the new status page to be displayed



 */



var runEffect = function(effect, element, options, helptext){



	if (prevEffect && effects[prevEffect].isRunning){



		effects[prevEffect].cancel();



		setTimeout(function(){runEffect(effect, element, options, helptext)}, 150);



		return false;



	}







	if (!effects[effect]){



		effects[effect] = new Spry.Effect[effect](element, options);



		if (effect != 'Highlight' && effect != 'Shake' && effect != 'Pulsate')



			effects[effect].addObserver(Observer);



	}







	effects[effect].start();







	if (helptext)



		ExampleHelpText(helptext);







	prevEffect = effect;



	return false;



};