// JavaScript Document

/********************************************************
*														*
*		www.bilic-eric.hr								*
*		image_animation.js								*
*		author: Ivan Jukić								*
*		contact: jukic2001@yahoo.com					*
*		copy: 2009										*
*		version: v0.1									*
*		description: animates images					*
*		liscence: GNU									*
*														*
*********************************************************/

/* GLOBALS */
//animation speed
var SPEED = 10;
//final width and height
finalHeight = 104;
finalWidth = 104;


//animation setup is done when document is ready for manipulation
window.onload = setAnimate;

function setAnimate()
{
	//get all images with animate-img class
	var aImg = $$( 'img.animate-img' );
	for( i=0; i < aImg.length; i++ ) 
	{
		
			//assing onmouseover function
			aImg[i].onmouseover = 
				function () {
					//event for IE
					if( window.event )
						oEvent = window.event;
					//event fot rest
					else 
						oEvent = arguments[0];
										
					onHover( oEvent );
				}
				
				
			//assing onmouseout function
			aImg[i].onmouseout = 
				function () {
					//event for IE
					if( window.event )
						oEvent = window.event;
					//event fot rest
					else 
						oEvent = arguments[0];
										
					onHoverOut( oEvent );
				}
	}

};

//set on hover function
function onHover( oEvent )
{
	//dependes on IE or DOM implementation
	if( window.event )
		var obj = oEvent.srcElement;
	else
		var obj = oEvent.target;
		
	//cancel any previous timers
	clearTimeout( obj.timer );
		
	//get current height and width
	var curHeight = obj.offsetHeight;
	var curWidth  = obj.offsetWidth;
	
	//save original object width and height if not set already
	if( obj.orgHeight == undefined && obj.orgWidth == undefined ) {
		obj.orgHeight = curHeight;
		obj.orgWidth  = curWidth;
	}
	
	//set some CSS properties before animation
	obj.style.position 	= "absolute";
	obj.style.border	= "1px solid #F00";
	obj.style.top	 	= "0px";
	obj.style.left 		= "0px";
	obj.style.height	= curHeight + "px";
	obj.style.width 	= curWidth + "px";
	//obj.style.zIndex	= "10";
	
	//set timer on object, and animate every speed ms
	obj.timer = setInterval(
		function() 
		{
			if( animate( obj, finalHeight, finalWidth, 1 ) ) {
				//animation finished cancel timeout
				clearTimeout( obj.timer );
			}
		}, 
		SPEED );
	
}


//set on hover finished function
function onHoverOut( oEvent )
{
	//dependes on IE or DOM implementation
	if( window.event )
		var obj = oEvent.srcElement;
	else
		var obj = oEvent.target;
		
	//cancel any previous timers
	clearTimeout( obj.timer );	
	
	//set timer on object, and animate every speed ms
	obj.timer = setInterval(
		function() 
		{
			if( animate( obj, obj.orgHeight, obj.orgWidth, -1 ) ) {
				//animation finished cancel timeout
				clearTimeout( obj.timer );
				obj.style.border	= "0px solid #F00";
				obj.style.position 	= "relative";
				obj.style.top 		= "0px";
				obj.style.left 		= "0px";
				//obj.style.zIndex	= "0";
			}
		}, 
		SPEED );
}



/*
	animation functions, constantly increases/decreases
	image height, width and position until given boundairies
*/
function animate( obj, newH, newW, d )
{
	//change height
	curH = parseInt( obj.style.height );
	var hFin = 0;
	//if new height is less than final height
	if( (d*curH) < (d*newH) ) {
		//increase height for 1px
		curH += (d*2);
		obj.style.height = curH + "px";
		//move 1px up
		curTop = parseInt(obj.style.top);
		curTop -= (d*1);
		obj.style.top = curTop + "px";
	}
	//indicate height increase is finished
	else hFin = 1;
	
	//change height
	curW = parseInt( obj.style.width );
	var wFin = 0;
	//if new height is less than final height
	if( (d*curW) < (d*newW) ) {
		//increase height for 1px
		curW += (d*2);
		obj.style.width = curW + "px";
		//move 1px up
		curLeft = parseInt(obj.style.left);
		curLeft -= (d*1);
		obj.style.left = curLeft + "px";
	}
	
	//indicate height increase is finished
	else wFin = 1;
	
	//if width and height increase finished
	if( hFin && wFin ) return 1;
	//else
	return 0;
}