/******************************************************************* 
* 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/18;
			else
				zoomStep = img.width/18;
		}

		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));
	}
	
	img.style.zIndex = 20;
	if (img.width > img.orgWidth) { 
	  if (img.style.left=="") { 
	      gap_x = getXY(img)["x"];
	      gap_y = getXY(img)["y"];
	      img.style.position = "absolute";
	      img.style.left=gap_x+"px";
	      img.style.top=(gap_y - img.orgHeight - 5)+"px"; 
	      img.style.border="2px solid #BFBFBF";
	  }	  
// 	  gap = 0;
	  img.style.marginLeft=(0-((img.width - img.orgWidth)/2))+"px";
	} else { 
	  img.style.position = "relative"; img.style.left = "";img.style.top = ""; img.style.border="0px solid #BFBFBF";
	  img.style.marginLeft=(0-((img.width - img.orgWidth)/2))+"px";
	  img.style.margin = "2px";
	}
	
	
}



/**
 * Returns the absolute X and Y positions of an object.
 * @param {HTMLObject} obj HTML Object.
 * @return {Object} Returns an accessor with .x and .y values.
 */
function getXY(obj)
{
  var curleft = 0;
  var curtop = obj.offsetHeight + 0;
  var border;
  if (obj.offsetParent)
  {
    do
    {
      // XXX: If the element is position: relative we have to add borderWidth
      if (getStyle(obj, 'position') !='absolute')
{
if (border = getStyle(obj, 'border-top-width')) curtop += parseInt(border);
if (border = getStyle(obj, 'border-left-width')) curleft += parseInt(border);

if (padding = getStyle(obj, 'padding-top')) curtop += parseInt(padding);
if (padding = getStyle(obj, 'padding-left')) curleft += parseInt(padding);
}
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    }
    while (obj = obj.offsetParent)
  }
  else if (obj.x)
  {
    curleft += obj.x;
    curtop += obj.y;
  }
  return {'x': curleft, 'y': curtop};
}
/**
 * Returns the specified computed style on an object.
 * @param {HTMLObject} obj HTML Object
 * @param {String} styleProp Property name.
 * @return {Mixed} Computed style on object.
 */
function getStyle(obj, styleProp)
{
  if (obj.currentStyle)
    return obj.currentStyle[styleProp];
  else if (window.getComputedStyle)
    return document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleProp);
}


/*******************************************************************
*
* 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.style.zIndex = 0;
					img.state="OFF";										
				} else {JSFX.ImageZoomRunning = true;}
			}
		}
	}
	/*** Check to see if we need to animate any more frames. ***/
	if(JSFX.ImageZoomRunning)
		setTimeout("ImageZoomAnimation()", 20);
}