/******************************************************************* 

* 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(img, zoomStep, maxZoom)

{

	if(img)

	{

		if(!zoomStep)

		{

			if(img.mode == "EXPAND")

				zoomStep = img.height/10;

			else

				zoomStep = img.width/10;

		}



		if(!maxZoom)

		{

			if(img.mode == "EXPAND")

				maxZoom = img.height/2;

			else

				maxZoom = img.width/2;

		}





		if(img.state == null)

		{

			img.state = "OFF";

			img.index = 0;

			img.orgWidth =  img.width;

			img.orgHeight = img.height;

			img.zoomStep = zoomStep;

			img.maxZoom  = maxZoom;

		}



		if(img.state == "OFF")

		{

			img.state = "ZOOM_IN";

			start_zooming();

		}

		else if( img.state == "ZOOM_IN_OUT"

			|| img.state == "ZOOM_OUT")

		{

			img.state = "ZOOM_IN";

		}

	}

}

JSFX.zoomIn = function(img, zoomStep, maxZoom)

{

	img.mode = "ZOOM";

	JSFX.zoomOn(img, zoomStep, maxZoom);

}

JSFX.stretchIn = function(img, zoomStep, maxZoom)

{

	img.mode = "STRETCH";

	JSFX.zoomOn(img, zoomStep, maxZoom);

}

JSFX.expandIn = function(img, zoomStep, maxZoom)

{

	img.mode = "EXPAND";

	JSFX.zoomOn(img, 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(img)

{

	if(img)

	{

		if(img.state=="ON")

		{

			img.state="ZOOM_OUT";

			start_zooming();

		}

		else if(img.state == "ZOOM_IN")

		{

			img.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(img)

{

	if(img.mode == "STRETCH")

	{

		img.width  = img.orgWidth  + img.index;

		img.height = img.orgHeight;

	}

	else if(img.mode == "EXPAND")

	{

		img.width  = img.orgWidth;

		img.height = img.orgHeight + img.index;

	}

	else

	{

		img.width  = img.orgWidth   + img.index;

		img.height = img.orgHeight  + (img.index * (img.orgHeight/img.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 img = document.images[i];

		if(img.state)

		{

			if(img.state == "ZOOM_IN")

			{

				img.index+=img.zoomStep;

				if(img.index > img.maxZoom)

					img.index = img.maxZoom;



				JSFX.setZoom(img);



				if(img.index == img.maxZoom)

					img.state="ON";

				else

					JSFX.ImageZoomRunning = true;

			}

			else if(img.state == "ZOOM_IN_OUT")

			{

				img.index+=img.zoomStep;

				if(img.index > img.maxZoom)

					img.index = img.maxZoom;



				JSFX.setZoom(img);

	

				if(img.index == img.maxZoom)

					img.state="ZOOM_OUT";

				JSFX.ImageZoomRunning = true;

			}

			else if(img.state == "ZOOM_OUT")

			{

				img.index-=img.zoomStep;

				if(img.index < 0)

					img.index = 0;



				JSFX.setZoom(img);



				if(img.index == 0)

					img.state="OFF";

				else

					JSFX.ImageZoomRunning = true;

			}

		}

	}

	/*** Check to see if we need to animate any more frames. ***/

	if(JSFX.ImageZoomRunning)

		setTimeout("ImageZoomAnimation()", 40);

}