var d;

// IMAGES ARE:  414 x 298
var dimX = 420;
var dimY = 310;
var timingDelay = 5;	// seconds
var aniSpeed = 4.0;		// seconds
var aniFramsSec = 24;	

function buildAnimation(){
	if(!d)d=document;
	
	//  DUPLICATE OF IMAGE 1 , for the appearance of smooth transition
	var obj6 = d.getElementById('imgAni6');
	var ani6 = new objectAnimation(obj6, aniSpeed, aniFramsSec);
	ani6.posStart(0,-dimY);									//		 |
	ani6.posStop(0,0,function(){restart(timingDelay)});		//		\|/
	
	//  O B J E C T   to be animated
	// class contruction 	   O B J E C T  ,  	D U R R A T I O N (seconds) ,   F r a m e s / s e c
	// Starting Mark 		   X ,   Y ,   		function OR script-string
	// Finishing Mark 		   X ,   Y ,   		function OR script-string ,   	function firing Delay
	
	var obj5 = d.getElementById('imgAni5');
	var ani5 = new objectAnimation(obj5, aniSpeed, aniFramsSec);
	ani5.posStart(dimX,-dimY);								//		  /
	ani5.posStop(0,0,ani6.animate,timingDelay);				//		|/_
	
	var obj4 = d.getElementById('imgAni4');
	var ani4 = new objectAnimation(obj4, aniSpeed, aniFramsSec);
	ani4.posStart(-dimX,dimY);								//		Ż/|
	ani4.posStop(0,0,ani5.animate,timingDelay);				//		/
	
	var obj3 = d.getElementById('imgAni3');
	var ani3 = new objectAnimation(obj3, aniSpeed, aniFramsSec);
	ani3.posStart(-dimX,-dimY);								//		\
	ani3.posStop(0,0,ani4.animate,timingDelay);				//		_\|
	
	var obj2 = d.getElementById('imgAni2');
	var ani2 = new objectAnimation(obj2, aniSpeed, aniFramsSec);
	ani2.posStart(dimX,dimY);								//		|\Ż
	ani2.posStop(0,0,ani3.animate,timingDelay);				//		  \
	
	var obj1 = d.getElementById('imgAni1');
	var ani1 = new objectAnimation(obj1, aniSpeed, aniFramsSec);
	ani1.posStart(0,-dimY);									//		 |
	ani1.posStop(0,0,ani2.animate,timingDelay);				//		\|/
	
	ani1.animate();
	
	function restart(dly){
		obj2.style.left = ani2.startX +"px";
		obj2.style.top = ani2.startY +"px";
		ani2.curSTEP = 0;
		
		obj3.style.left = ani3.startX +"px";
		obj3.style.top = ani3.startY +"px";
		ani3.curSTEP = 0;
		
		obj4.style.left = ani4.startX +"px";
		obj4.style.top = ani4.startY +"px";
		ani4.curSTEP = 0;
		
		obj5.style.left = ani5.startX +"px";
		obj5.style.top = ani5.startY +"px";
		ani5.curSTEP = 0;
		
		obj6.style.left = ani6.startX +"px";
		obj6.style.top = ani6.startY +"px";
		ani6.curSTEP = 0;
		setTimeout(ani2.animate,(dly*1000));
	}
}

/*

_______________________________________
|   A N I M A T I O N     C L A S S   |
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
BY:
 ____________________________
|                           /
|  Ninja Monkey   apr'08   /
|____  ___________________/
    / /_     _   ____  __
   / // \   / | / /|| / /
  / ///\ \ //||/ / ||/ /
 / / \\/ /// |  /  |  /
/ /   \_/ Ż  ŻŻŻ   / /
ŻŻ                / /
                  ŻŻ

Main Class:
	objectAnimation		[reference to object] - [durration is seconds] - [frames per second]

Properties:
	NAME:			Value Source:		Description:
	ŻŻŻŻŻ			ŻŻŻŻŻŻŻŻŻŻŻŻ		ŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
	aniOBJ			class ARG			reference to object being animated
	aniDUR			class ARG			seconds for animation durration (start position to stop position)
	aniFPS			class ARG			defines the frames per second for the animation
	aniRATE			internal STATIC		milliseconds between frames (setTimeout arg)
	aniSTEPS		internal STATIC		quantity of steps (frames) the animation will use
	curSTEP			internal (count)	current step of the animation process.

	M O T I O N    V A R S :
	motion			internal BLN		if posStart or posStop is used - will render   M O T I O N.
	startX, startY	method ARG			class.posStart:	X/Y - left/top starting position (absolute)
	startCMD		method ARG			class.posStart:	function or command to call when animation starts
	stopX, stopY	method ARG			class.posStop:	X/Y - left/top finishing position (absolute)
	stopCMP			method ARG			class.posStop:	function or command to call when animation finishes
	curX, curY		internal (math)		current animation step positioning

	F A D E    V A R S :
	fade			internal BLN		if fadeSet method is used, this is set to TRUE, triggering fade rendering.
	startFade		method ARG			value from 0 to 100 determining opacity (percentage: 0 = clear; 100 = solid)
	stopFade		method ARG			value from 0 to 100 determining opacity (percentage: 0 = clear; 100 = solid)
	setFADE			internal Funcion	used to define reference to object's opacity property - browser dependant (IE 4+, NS 6+, FF, Moz)
	
	timingACTION	internal (ref)		referance to current animation setTimeout call
	
Methods:
	posStart		[X position] - [Y position] - [function to execute]
										cleaner way of separating all the required variables. Defines animation presets.
					X Posit				pixels to position from LEFT
					Y Posit				pixels to position from TOP
					Function			a function or string of commands to execute on START of animation
					
	posStop			[X position] - [Y position] - [function to execute] - [stopCommand Delay]
										cleaner way of separating all the required variables. Defines animation presets.
					X Posit				pixels to position from LEFT
					Y Posit				pixels to position from TOP
					Function			a function or string of commands to execute on FINISH of animation
					Delay				seconds after FINISH to wait before executing stopFUNCTION
					
	fadeSet			[start Opacity] - [stop Opacity]
					start Opacity		value from 0 to 100 determining opacity (percentage: 0 = clear; 100 = solid)
					stop Opacity		value from 0 to 100 determining opacity (percentage: 0 = clear; 100 = solid)
	
	animate			Triggers the animation process
	
*/

function objectAnimation(obj, dur, fps){
	var oa = this;
	oa.aniOBJ = obj;
	oa.aniDUR = dur;
	oa.aniFPS = fps;
	oa.aniRATE = 1000/oa.aniFPS;
	oa.aniSTEPS = oa.aniDUR*oa.aniFPS;
	oa.curSTEP = 0;
	oa.stopDelay = 0;
	oa.timingACTION = "";
	oa.curX = "";
	oa.curY = "";
	oa.finishCMD = "";
	oa.startCMD = "";
	oa.motion = false;
	oa.fade = false;
	
	oa.animate = function(){
		if(oa.timingACTION) clearTimeout(oa.timingACTION);
		
		// check for startCommand
		if(oa.curSTEP==0) {
			if (typeof(oa.startCMD)=='function'){
				oa.startCMD();
			}else if (typeof(oa.startCMD)=='string'){
				eval(oa.startCMD);
			}
		}

		if(oa.aniOBJ){
			// motion path animation
			if (oa.motion) {			
				oa.setX(oa.linearRender(oa.startX,oa.stopX));
				oa.setY(oa.linearRender(oa.startY,oa.stopY));
			}
			
			// fade animation
			if (oa.fade) {
				oa.setFADE = oa.linearRender(oa.startFade,oa.stopFade);
			}
		}
			
		// handle steps and check for stopCommand
		if (oa.curSTEP < oa.aniSTEPS) {
			oa.timingACTION = setTimeout(function(){oa.animate()},oa.aniRATE);
			oa.curSTEP++;
		}else{
			if (typeof(oa.stopCMD)=='function'){
				oa.timingACTION = setTimeout(oa.stopCMD, (oa.stopDelay*oa.aniFPS*oa.aniRATE) );
			}else if (typeof(oa.stopCMD)=='string'){
				oa.timingACTION = setTimeout("eval("+oa.stopCMD+")",  (oa.stopDelay*oa.aniFPS*oa.aniRATE) );
			}
		}
	}
}

objectAnimation.prototype.linearRender = function(start,stop){
	return start + ( ((stop - start)/this.aniSTEPS) * this.curSTEP );
}

objectAnimation.prototype.fadeSet = function(stF,endF){
	var oa = this;
	oa.startFade = stF;
	oa.stopFade = endF;
	
	// Transparancy Capacity Check:
	if(oa.aniOBJ.style.MozOpacity){
		oa.fade = true;
		oa.setFADE = function(val){
			oa.aniOBJ.style.MozOpacity = (val/100);
		}
	}else if(oa.aniOBJ.filters.alpha.opacity){
		oa.fade = true;
		oa.setFADE = function(val){
			oa.aniOBJ.filters.alpha.opacity = val;
		}
	}else{
		oa.fade = false;
	}
}

objectAnimation.prototype.posStart = function(posX,posY,fCall){
	this.startX = posX;
	this.startY = posY;
	this.motion = true;
	
	this.setX = function(val){
		this.aniOBJ.style.left=val+"px";
	}
	
	this.setY = function(val){
		this.aniOBJ.style.top=val+"px";
	}
	
	if (typeof(fCall)=='function' || typeof(fCall)=='string'){
		this.startCMD = fCall;
	}else{
		this.startCMD = null;
	}
}

objectAnimation.prototype.posStop = function(posX,posY,fCall,delay){
	this.stopX = posX;
	this.stopY = posY;
	this.motion = true;
	
	if (typeof(fCall)=='function' || typeof(fCall)=='string'){
		this.stopCMD = fCall;
	}else{
		this.stopCMD = null;
	}
	
	if (typeof(delay)=='number'){
		this.stopDelay = delay;
	}else{
		this.stopDelay = 0;
	}
}

/*
objectAnimation.prototype.runCmd = function(cmd){
	if(cmd){
		switch (typeof(cmd)){
			case 'function':
				cmd();
				return true;
				break;
				
			case 'string':
				eval(cmd);
				return true;
				break;
				
			default:
				return false;
		}
	}
}
*/