/*********************************************************************** 
* File    : JSFX_ImageFader.js  © JavaScript-FX.com
* Created : 2001/08/31 
* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com 
* Purpose : To create a fading 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,
*					JSFX_ImageZoom.
* 2002-01-27	1.2	Completed development by converting to JSFX namespace
* 2002-02-21	1.3	Added JSFX.fadeUpImg JSFX.fadeDownImg
* 2002-01-29	1.4	Make "fade" a seperate object of "img"
* 2002-03-12	1.5	Added an auto fade up/down for images 
*					with class imageFader
* 2006-09-30	2.0	Added: setOpacity = function(thisObj, opacity)
*			- adds new CSS opacity properties
***********************************************************************/ 
if(!window.JSFX)
	JSFX=new Object();
JSFX.FadeImageRunning    = false;
JSFX.FadeImageMinOpacity = 40;
JSFX.FadeImageAutoUp	 = 10;
JSFX.FadeImageAutoDown   = 10;
JSFX.FadeImageSavedOver  = null;
JSFX.FadeImageSavedOut   = null;

/*******************************************************************
*
* Function    : actionOnMouseOver
*
* Description : Called automatically whenever an element in the
*			document is "mousedOver". It checks to see if the
*			element has the className == "imageFader" and if so
*			starts fading up the element.
*
*****************************************************************/
JSFX.fadeImage_actionOnMouseOver = function(e)
{
	srcElement=e ? e.target : event.srcElement;
	
	if (JSFX.dynamicOpacity(srcElement))
		JSFX.fadeUp(srcElement);

	/*** If the document already had an onMouseOver handler, call it ***/
	if(JSFX.FadeImageSavedOver != null)
		JSFX.FadeImageSavedOver(e);
}

/*******************************************************************
*
* Function    : actionOnMouseOut
*
* Description : Called automatically whenever an element in the
*			document is "mousedOut". It checks to see if the
*			element has the className == "imageFader" and if so
*			starts fading down the element.
*
*****************************************************************/
JSFX.fadeImage_actionOnMouseOut = function(e)
{
	srcElement=e ? e.target : event.srcElement;

	if (JSFX.dynamicOpacity(srcElement))
		JSFX.fadeDown(srcElement);
	
	/*** If the document already had an onMouseOut handler, call it ***/
	if(JSFX.FadeImageSavedOut != null)
		JSFX.FadeImageSavedOut(e);
}
/*******************************************************************
*
* Function    :	fadeImageAuto
*
* Parameters  :	minOpacity	- Minimum opacity to fade down to.
*			stepUp	- fade up speed 	- larger = faster.
*			stepDown 	- fade down speed	- larger = faster.
*
* Description :	Saves the documents original mousOver/Out handlers
*			and installs the actionMouseOver/Out handlers
*			of JSFX.fadeImage
*
*****************************************************************/
JSFX.fadeImageAuto = function(minOpacity, stepUp, stepDown)
{
	if(minOpacity)
		JSFX.FadeImageMinOpacity = minOpacity;
	if(stepUp)
		JSFX.FadeImageAutoUp	= stepUp;
	if(stepDown)
		JSFX.FadeImageAutoDown	= stepDown;

	JSFX.setInitialOpacity();
	/*** Save the original document mouseOver/Out events ***/
	JSFX.FadeImageSavedOver = document.onmouseover;
	JSFX.FadeImageSavedOut  = document.onmouseout;

	document.onmouseover	= JSFX.fadeImage_actionOnMouseOver ;
	document.onmouseout	= JSFX.fadeImage_actionOnMouseOut ;
}

/*******************************************************************
*
* Function    : fadeUpImg
*
* Description : Finds the image in the document and calls JSFX.fadeUp
*
*****************************************************************/
JSFX.fadeUpImg = function(imgName, step)
{
	if(document.layers || window.opera)
		return;

	img = document.images[imgName];
	if(img)
		JSFX.fadeUp(img, step);
}
/*******************************************************************
*
* Function    : stopFadedUP
*
* Description : This function is put here by John Davis
*		It changes CSS class dynamically (ie. onclick=)
*****************************************************************/
JSFX.stopFadedUP = function( img, newClass )
{

	if (img) {

	 JSFX.setOpacity( img, 100 );

	 if (img.className)  img.className = newClass;

	 if (img.fade)	img.fade = null;

	 img.blur();
	}
}
/*******************************************************************
*
* Function    : fadeUp
*
* Description : This function is based on the turn_on() function
*		      of animate2.js (animated rollovers from www.roy.whittle.com).
*		      Each fading image object is given a state. 
*			OnMouseOver the state is switched depending on the current state.
*			Current state -> Switch to
*			===========================
*			null		->	OFF.
*			OFF		->	FADE_UP
*			FADE_DOWN	->	FADE_UP
*			FADE_UP_DOWN->	FADE_UP
*****************************************************************/
JSFX.fadeUp = function(img, step)
{

	if(img)
	{
		if(!step) step=JSFX.FadeImageAutoUp;

		if(img.fade == null)
		{
			img.fade = new Object();
			img.fade.state	 = "OFF";
			img.fade.upStep	 = step;
			img.fade.downStep  = step;
			if(img.filters)
				img.fade.minOpacity =  img.filters.alpha.opacity;
			else
//				img.fade.minOpacity  = parseInt(img.style.MozOpacity); //Why don't this work?
				img.fade.minOpacity  = JSFX.FadeImageMinOpacity;

			img.fade.index = img.fade.minOpacity;
			
		}
		if(img.fade.state == "OFF")
		{
			img.fade.upStep  = step;
			img.fade.state = "FADE_UP";
			JSFX.startImageFading();
		}
		else if( img.fade.state == "FADE_UP_DOWN"
			|| img.fade.state == "FADE_DOWN")
		{
			img.fade.upStep  = step;
			img.fade.state = "FADE_UP";
		}
	}
}
/*******************************************************************
*
* Function    : fadeDownImg
*
* Description : Finds the image in the document and calls JSFX.fadeDown
*
*****************************************************************/
JSFX.fadeDownImg = function(imgName, step)
{
	if(document.layers || window.opera)
		return;

	img = document.images[imgName];
	if(img)
		JSFX.fadeDown(img, step);
}
/*******************************************************************
*
* Function    : fadeDown
*
* 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		->	FADE_DOWN.
*			FADE_UP	->	FADE_UP_DOWN.
*****************************************************************/
JSFX.fadeDown = function(img, step)
{
	if(img)
	{
		if(!step) step=JSFX.FadeImageAutoDown;

		if(img.fade.state=="ON")
		{
			img.fade.downStep  = step;
			img.fade.state="FADE_DOWN";
			JSFX.startImageFading();
		}
		else if(img.fade.state == "FADE_UP")
		{
			img.fade.downStep  = step;
			img.fade.state="FADE_UP_DOWN";
		}
	}
}
/*******************************************************************
*
* Function    : startImageFading
*
* 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
*****************************************************************/
JSFX.startImageFading = function()
{
	if(!JSFX.FadeImageRunning)
		JSFX.FadeImageAnimation();
}
/*******************************************************************
*
* Function    : dynamicOpacity
*
* Description : This function is put here by John Davis
*				It returns TRUE for an object with class='imageFader'
*****************************************************************/
JSFX.dynamicOpacity = function(thisObj)
{
 return (( thisObj.className) && (thisObj.className=="imageFader") );
}
/*******************************************************************
*
* Function    : setInitialOpacity
*
* Description : This function is put here by John Davis
*		It sets object.style.opacity etc. for each obj with class='imageFader'
*****************************************************************/
JSFX.setInitialOpacity = function()
{
	var stopValue = document.images.length;
	
 	for (var i=0 ; i<stopValue ; i++)
	{
		var img = document.images[i];
		
		if ( JSFX.dynamicOpacity(img) ) {

			img.onclick = function() {JSFX.stopFadedUP(this,'fullON');};
			JSFX.setOpacity( img, JSFX.FadeImageMinOpacity );
		}
	}
}
/*******************************************************************
*
* Function    : setOpacity
*
* Description : This function is put here by John Davis
*		It sets object.style.opacity etc. in most browsers.
*****************************************************************/
JSFX.setOpacity = function(thisObj, opacity)
{
 if (thisObj.filters) // IE browser? "alpha(opacity=" + opacity + ")";  // OR..
	thisObj.filters.alpha.opacity = opacity;
 else {
	var normalOpacity = opacity / 100;
	with (thisObj.style) {
	 opacity      = normalOpacity; // CSS3
	 MozOpacity   = normalOpacity; // not (opacity + "%");
	 KhtmlOpacity = normalOpacity; // supported in Safari (Webcore) but not KHTML (Konqueror) !!
	}
 }
}
/*******************************************************************
*
* Function    : FadeImageAnimation
*
* Description : This function is based on the Animate function
*		    of animate2.js (animated rollovers from www.roy.whittle.com).
*		    Each object has a state. This function
*		    modifies each object and (possibly) changes its state.
*****************************************************************/
JSFX.FadeImageAnimation = function()
{
	JSFX.FadeImageRunning = false;
	for(i=0 ; i<document.images.length ; i++)
	{
		var img = document.images[i];
		if(img.fade)
		{
			var newOpacity;

			if(img.fade.state == "FADE_UP")
			{
				newOpacity = img.fade.index + img.fade.upStep;

				if (newOpacity >= 100) {
					img.fade.index = newOpacity = 100;
					img.fade.state = "ON";
				}
				else {
					img.fade.index = newOpacity;
					JSFX.FadeImageRunning = true;
				}
				JSFX.setOpacity( img, newOpacity );
			}
			else if(img.fade.state == "FADE_UP_DOWN")
			{
				JSFX.FadeImageRunning = true;

				newOpacity = img.fade.index + img.fade.upStep;

				if (newOpacity >= 100) {
					img.fade.index = newOpacity = 100;
					img.fade.state = "FADE_DOWN";
				}
				else
					img.fade.index = newOpacity;

				JSFX.setOpacity( img, newOpacity );
			}
			else if(img.fade.state == "FADE_DOWN")
			{
				newOpacity = img.fade.index - img.fade.downStep;

				if (newOpacity <= img.fade.minOpacity) {

					img.fade.index = newOpacity = img.fade.minOpacity;
					img.fade.state = "OFF";
				}
				else {
					img.fade.index = newOpacity;
					JSFX.FadeImageRunning = true;
				}

				JSFX.setOpacity( img, newOpacity );
			}
		}
	}
	/*** Check to see if we need to animate any more frames. ***/
	if(JSFX.FadeImageRunning)
		setTimeout("JSFX.FadeImageAnimation()", 40);
}