/******************************************************************* 
* 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(div, zoomStep, maxZoom)
{
	if(div)
	{
		if(!zoomStep)
		{
			if(div.mode == "EXPAND")
				zoomStep = div.height/10;
			else
				zoomStep = div.width/10;
		}

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


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

		if(div.state == "OFF")
		{
			div.state = "ZOOM_IN";
			start_zooming();
		}
		else if( div.state == "ZOOM_IN_OUT"
			|| div.state == "ZOOM_OUT")
		{
			div.state = "ZOOM_IN";
		}
	}
}
JSFX.zoomIn = function(div, zoomStep, maxZoom)
{
	div.mode = "ZOOM";
	JSFX.zoomOn(div, zoomStep, maxZoom);
}
JSFX.stretchIn = function(div, zoomStep, maxZoom)
{
	div.mode = "STRETCH";
	JSFX.zoomOn(div, zoomStep, maxZoom);
}
JSFX.expandIn = function(div, zoomStep, maxZoom)
{
	div.mode = "EXPAND";
	JSFX.zoomOn(div, 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(div)
{
	if(div)
	{
		if(div.state=="ON")
		{
			div.state="ZOOM_OUT";
			start_zooming();
		}
		else if(div.state == "ZOOM_IN")
		{
			div.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(div)
{
	if(div.mode == "STRETCH")
	{
		div.width  = div.orgWidth  + div.index;
		div.height = div.orgHeight;
	}
	else if(div.mode == "EXPAND")
	{
		div.width  = div.orgWidth;
		div.height = div.orgHeight + div.index;
	}
	else
	{
		div.width  = div.orgWidth   + div.index;
		div.height = div.orgHeight  + (div.index * (div.orgHeight/div.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;
	for(i=0 ; i<document.images.length ; i++)
	{
		var div = document.images[i];
		if(div.state)
		{
			if(div.state == "ZOOM_IN")
			{
				div.index+=div.zoomStep;
				if(div.index > div.maxZoom)
					div.index = div.maxZoom;

				JSFX.setZoom(div);

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

				JSFX.setZoom(div);
	
				if(div.index == div.maxZoom)
					div.state="ZOOM_OUT";
				JSFX.ImageZoomRunning = true;
			}
			else if(div.state == "ZOOM_OUT")
			{
				div.index-=div.zoomStep;
				if(div.index < 0)
					div.index = 0;

				JSFX.setZoom(div);

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