// JavaScript Document

/*
*	File name: Animation.js
*	Created by: Yossi Shalev of YOSHI Dynamic Design studio.
*	Contact: yossi@yoshi.co.il, http://www.yoshi.co.il
*	Last Modified: 18/12/2007
*
*	This page contain functions and visual effect settings for animating dhtml
*
*	Depandencies:
*
*	Function List:

*/


/******************************************************
*
*		Visual Effects
*
*******************************************************/


/*****************************
*	FadeOut effect definition	
******************************/

//set the opacity from 0% to 100%
	FadeOut = {};
		
	FadeOut.filter = function( frames, frame ){ //IE
							return "progid:DXImageTransform.Microsoft.Alpha(opacity=" + ((frames-frame)/frames) * 100 + " )";
						}
	FadeOut.MozOpacity = function( frames, frame ){ //Mozila
							return ((frames-frame)/frames);
						}	
	FadeOut.opacity = function( frames, frame ){ //CSS 3.0
							return ((frames-frame)/frames);
						}

/*****************************
*	FadeOut effect definition	
******************************/																
//set the opacity from 100% to 0%						
	FadeIn = {};
						
	FadeIn.filter = function( frames, frame ){ //IE
							return "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (frame/frames) * 100  + " )";
						}
	FadeIn.MozOpacity = function( frames, frame ){ //Mozila
							return (frame/frames);
						}	
	FadeIn.opacity = function( frames, frame ){ //CSS 3.0
							return (frame/frames);
						}	



/*****************************
*	RollUp effect definition	
******************************/																
//set the opacity from 100% to 0%						
	RollUp = {};
						
	RollUp.posTop = function( frames, frame ){ //IE
							return (frames/2)-frame;
						}
						
	RollUp.top = function( frames, frame ){ //Gecko
							return (frames/2)-frame + "px";
						}



/*****************************
*	Shrink effect definition	
******************************/																
//set the opacity from 100% to 0%						
	Shrink = {};
						
	Shrink.posTop = function( frames, frame ){
							return -(frame) + "px";
						}
	
	Shrink.top = function( frames, frame ){
							return -(frame) + "px";
						}


/*****************************
*	Expand effect definition	
******************************/																
//set the opacity from 100% to 0%						
	Expand = {};
						
	Expand.posTop = function( frames, frame ){
							return -(frames-frame) + "px";
						}

	Expand.top = function( frames, frame ){
							return -(frames-frame) + "px";
						}

/******************************************************
*
*		END of Visual Effects
*
*******************************************************/




/******************************************************
*
*		Animation proccess
*
*			object 		- the object/element on the page to animate
*			frames 		- number of frames of animation
*			timeOfFrame - the time delay betwwn each frame
*			animation	- the visual effect object
*			nextAction	- what to do when the animation is finished
*
*******************************************************/


//animate an object with the supplied animation to the frames duration by timeOfFrame interval\
// after execution preform the next Action 
function animate( object, frames, timeOfFrame, animation, nextAction, middleAction, middleFrame, startAnimationFrom ){
		
		
		var frame = 0;
		
		if( startAnimationFrom ){
			frame = startAnimationFrom;
		}
		
		var elapsedTime = 0; //initial elapsed time of animation
		
		// set and hold's the interval for clearing when animation is finished
		var intervalId = setInterval( displayNextFrame, timeOfFrame );
		
//alert( "animating:" + object.name + "  From:" + frames);		
		//animate the next frame
		function displayNextFrame(){
			
			//check if middle of animation proccess
			if( frame == middleFrame ){
				if( middleAction ){
					middleAction( object );	
				}
					
			}
			//check if the animation proccess is finished
			if ( frame >= frames ){
				//clear the animation interval
				clearInterval( intervalId  );
				if( nextAction ) {
					//preform the next Action 
					nextAction( object );
					return;
				}
			}
			
			
			//animate the properties
			for( var cssProperty in animation ){
				try{
					object.style[cssProperty] = animation[ cssProperty]( frames, frame );
				} catch (e) {
					//exception handelling
				}
			}
			
			frame ++; //update the frame count
			elapsedTime += timeOfFrame; //update the elapsed time
		}
		
		return intervalId;
	}


/******************************************************
*
*		END of Animation proccess
*
*******************************************************/