// 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
				}
			}
			
			window.newsFrame = frame ++; //update the frame count
			elapsedTime += timeOfFrame; //update the elapsed time
		}
		
		return intervalId;
	}


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


/*******************************
*	Image Animation
*******************************/

function animate_image( imageId, firstSrc, secondSrc ){
	
	window.firstImageSrc = firstSrc;
	window.secondImageSrc = secondSrc;
	
	var image = document.getElementById( imageId );
	
	alert( "Animate" );

	if( image ){
			window.setTimeout( function(image){image_fadeOut( obj );}, 2000 );
	}
}

function fade_in( image ){
	image.src = window.mainImage.nextImageObject.src;
	animate( image, 100, 5, FadeIn );
}


function next_image(){
	
	var undefined;
	
	
	if( window.mainImage && window.mainImage.intervalId ){
		window.clearTimeout( window.mainImage.intervalId );
		window.mainImage.intervalId = null;
	}
	

	
	if( window.mainImage && window.mainImage.images ){

		
				
		var image = document.getElementById( window.mainImage.id );

		if( image ){
			animate( image, 100, 5, FadeOut, fade_in );
			
			if( window.mainImage.nextImage == undefined || ++window.mainImage.nextImage >= window.mainImage.images.length ){
				window.mainImage.nextImage = 0;	
			}

			window.mainImage.nextImageObject.src = window.mainImage.images[ window.mainImage.nextImage ];
			
		}
		
		window.mainImage.intervalId = window.setTimeout( "next_image()", window.mainImage.delay );
		
	}
	
}