/******************************************************************* 
* File    : JSFX_ImageZoom.js  © JavaScript-FX.com
* Created : 2001/08/31 
* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com 
* Purpose : To create a zooming effect for images
* History 
* Date         Version        Description 
* 2001-08-09	1.0		First version
* 2001-08-31	1.1		Code split - others became JSFX_FadingRollovers,
*                             JSFX_ImageFader and JSFX_ImageZoom.
* 2002-01-27	1.2		Completed development by converting to JSFX namespace
* 2002-04-25	1.3		Added the functions stretchIn & expandIn
* 2004-01-06	1.4		Allowed for the image (tag) being forcibly sized
***********************************************************************/ 
/*** Create some global variables ***/
if(!window.JSFX)
	JSFX=new Object();
JSFX.ImageZoomRunning = false;
/*******************************************************************
*
* Function    : zoomIn
*
* Description : This function is based on the turn_on() function
*		      of animate2.js (animated rollovers from www.roy.whittle.com).
*		      Each zoom object is given a state. 
*			OnMouseOver the state is switched depending on the current state.
*			Current state -> Switch to
*			===========================
*			null		->	OFF.
*			OFF		->	ZOOM_IN + start timer
*			ZOOM_OUT	->	ZOOM_IN
*			ZOOM_IN_OUT	->	ZOOM_IN
*****************************************************************/
JSFX.zoomOn = function(obj, zoomStep, maxZoom)
{
	if(obj)
	{
		if(!zoomStep)
		{
			if(obj.mode == "EXPAND")
				zoomStep = obj.height/10;
			else
				zoomStep = obj.width/10;
		}

		if(!maxZoom)
		{
			if(obj.mode == "EXPAND")
				maxZoom = obj.height/2;
			else
				maxZoom = obj.width/2;
		}


		if(obj.parentNode.parentNode.state == null)
		{
			obj.parentNode.parentNode.state = "OFF";
			obj.parentNode.parentNode.index = 0;
			obj.parentNode.parentNode.orgWidth = obj.width;
			obj.parentNode.parentNode.orgHeight = obj.height;
			obj.parentNode.parentNode.zoomStep = zoomStep;
			obj.parentNode.parentNode.maxZoom  = maxZoom;
		}

		if(obj.parentNode.parentNode.state == "OFF")
		{
			obj.parentNode.parentNode.state = "ZOOM_IN";
			start_zooming();
		}
		else if( obj.parentNode.parentNode.state == "ZOOM_IN_OUT"
			|| obj.parentNode.parentNode.state == "ZOOM_OUT")
		{
			obj.parentNode.parentNode.state = "ZOOM_IN";
		}
	}
}
JSFX.zoomIn = function(obj, zoomStep, maxZoom)
{
	obj.parentNode.parentNode.mode = "ZOOM";
	JSFX.zoomOn(obj, zoomStep, maxZoom);
}
JSFX.stretchIn = function(obj, zoomStep, maxZoom)
{
	obj.parentNode.parentNode.mode = "STRETCH";
	JSFX.zoomOn(obj, zoomStep, maxZoom);
}
JSFX.expandIn = function(obj, zoomStep, maxZoom)
{
	obj.parentNode.parentNode.mode = "EXPAND";
	JSFX.zoomOn(obj, zoomStep, maxZoom);
}
/*******************************************************************
*
* Function    : zoomOut
*
* Description : This function is based on the turn_off function
*		      of animate2.js (animated rollovers from www.roy.whittle.com).
*		      Each zoom object is given a state. 
*			OnMouseOut the state is switched depending on the current state.
*			Current state -> Switch to
*			===========================
*			ON		->	ZOOM_OUT + start timer
*			ZOOM_IN	->	ZOOM_IN_OUT.
*****************************************************************/
JSFX.zoomOut = function(obj)
{
	if(obj)
	{
		if(obj.parentNode.parentNode.state=="ON")
		{
			obj.parentNode.parentNode.state="ZOOM_OUT";
			start_zooming();
		}
		else if(obj.parentNode.parentNode.state == "ZOOM_IN")
		{
			obj.parentNode.parentNode.state="ZOOM_IN_OUT";
		}
	}
}
/*******************************************************************
*
* Function    : start_zooming
*
* Description : This function is based on the start_animating() function
*	        	of animate2.js (animated rollovers from www.roy.whittle.com).
*			If the timer is not currently running, it is started.
*			Only 1 timer is used for all objects
*****************************************************************/
function start_zooming()
{
	if(!JSFX.ImageZoomRunning)
		ImageZoomAnimation();
}

JSFX.setZoom = function(obj)
{
	if(obj.parentNode.mode == "STRETCH")
	{
		obj.width  = obj.parentNode.parentNode.orgWidth  + obj.parentNode.parentNode.index;
		obj.height = obj.parentNode.parentNode.orgHeight;
	}
	else if(obj.parentNode.parentNode.mode == "EXPAND")
	{
		obj.width  = obj.parentNode.parentNode.orgWidth;
		obj.height = obj.parentNode.parentNode.orgHeight + obj.parentNode.parentNode.index;
	}
	else
	{
		
		obj.width  = obj.parentNode.parentNode.orgWidth   + obj.parentNode.parentNode.index;
		obj.height = obj.parentNode.parentNode.orgHeight  + (obj.parentNode.parentNode.index * (obj.parentNode.parentNode.orgHeight/obj.parentNode.parentNode.orgWidth));
		
		if(navigator.userAgent.indexOf('MSIE') == -1){
			var objRef = obj.parentNode.parentNode.getElementsByTagName('CANVAS')[0];
			var w = Math.floor(obj.parentNode.parentNode.orgWidth   + obj.parentNode.parentNode.index);
			var h = Math.floor(obj.parentNode.parentNode.orgHeight  + (obj.parentNode.parentNode.index * (obj.parentNode.parentNode.orgHeight/obj.parentNode.parentNode.orgWidth)));
			
			objRef.style.width = w;
			objRef.style.height = h;
			objRef.width = w;
			objRef.height = h;
			var ctx = objRef.getContext("2d");
			ctx.clearRect(0,0,0,h)
			ctx.save();
			ctx.translate(0, objRef.height);
			ctx.scale(1, -1);
			ctx.drawImage(obj.parentNode.parentNode.getElementsByTagName('img')[0],0, 0, w, h);
			//alert(obj.parentNode.parentNode.innerHTML);
			ctx.globalCompositeOperation = "destination-out";
			var gradient = ctx.createLinearGradient(0, 0, 0, h);			
			gradient.addColorStop(1, "rgba(255, 255, 255, 0.7)");
			gradient.addColorStop(0.7, "rgba(255, 255, 255, 1.0)");
			
			ctx.fillStyle = gradient;
			ctx.rect(0, 0, w, h*2);
			ctx.fill();
			/**/
			ctx.restore();

		}else{
			var objRef = obj.parentNode.nextSibling;
			objRef.width  = obj.parentNode.parentNode.orgWidth   + obj.parentNode.parentNode.index;
			objRef.height = obj.parentNode.parentNode.orgHeight  + (obj.parentNode.parentNode.index * (obj.parentNode.parentNode.orgHeight/obj.parentNode.parentNode.orgWidth));
		}
		/**/
	}
}
/*******************************************************************
*
* Function    : ImageZoomAnimation
*
* Description : This function is based on the Animate function
*		    of animate2.js (animated rollovers from www.roy.whittle.com).
*		    Each zoom object has a state. This function
*		    modifies each object and (possibly) changes its state.
*****************************************************************/
function ImageZoomAnimation()
{
	JSFX.ImageZoomRunning = false;	
	//alert(document.images[14].parentNode.parentNode.innerHTML);
	for(i=0 ; i<document.getElementById('divContent_1').getElementsByTagName('div').length ; i++)
	{
		
		var obj = document.getElementById('divContent_1').getElementsByTagName('div')[i];		
		if(obj.state)
		{						
			if(obj.state == "ZOOM_IN")
			{
				obj.index+=obj.zoomStep;
				if(obj.index > obj.maxZoom)
					obj.index = obj.maxZoom;

				JSFX.setZoom(obj.getElementsByTagName('img')[0]);

				if(obj.index == obj.maxZoom)
					obj.state="ON";
				else
					JSFX.ImageZoomRunning = true;
			}
			else if(obj.state == "ZOOM_IN_OUT")
			{
				obj.index+=obj.zoomStep;
				if(obj.index > obj.maxZoom)
					obj.index = obj.maxZoom;

				JSFX.setZoom(obj.getElementsByTagName('img')[0]);
	
				if(obj.index == obj.maxZoom)
					obj.state="ZOOM_OUT";
				JSFX.ImageZoomRunning = true;
			}
			else if(obj.state == "ZOOM_OUT")
			{
				obj.index-=obj.zoomStep;
				if(obj.index < 0)
					obj.index = 0;

				JSFX.setZoom(obj.getElementsByTagName('img')[0]);

				if(obj.index == 0)
					obj.state="OFF";
				else
					JSFX.ImageZoomRunning = true;
			}
		}
	}
	/*** Check to see if we need to animate any more frames. ***/
	if(JSFX.ImageZoomRunning)
		setTimeout("ImageZoomAnimation()", 40);
}