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



















* File    : JSFX_ElemFader.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 any html element.



















* 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_ElemFader,



















*					JSFX_ImageZoom.



















* 2002-01-27	1.2	Completed development by converting to JSFX namespace



















* 2002-02-21	1.3	Added JSFX.fadeUpElem JSFX.fadeDownElem



















* 2002-01-29	1.4	Make "fade" a seperate object of "elem"



















* 2002-03-12	1.5	Added an auto fade up/down for images 



















*					with class imageFader



















* 2002-08-29	1.6	Thanks to piglet (http://homepage.ntlworld.com/thepiglet/)



















*				I now have a partial fix for NS7 and Mozilla 1.1.



















* 2003-10-02	1.7	First version of ElemFader



















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



















if(!window.JSFX)



















	JSFX=new Object();







































JSFX.FadeElemMinOpacity = 50;



















JSFX.FadeElemAutoUp	 = 20;



















JSFX.FadeElemAutoDown   = 5;



















JSFX.FadeElemSavedOver  = null;



















JSFX.FadeElemSavedOut   = null;



















JSFX.FadeElemIdIndex   = 0;



















document.write('<STYLE TYPE="text/css">.elemFader{ position:relative; filter:alpha(opacity='+JSFX.FadeElemMinOpacity+'); -moz-opacity:'+JSFX.FadeElemMinOpacity/101+'}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader1{ position:relative; filter:alpha(opacity=10); -moz-opacity:0.1}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader2{ position:relative; filter:alpha(opacity=20); -moz-opacity:0.2}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader3{ position:relative; filter:alpha(opacity=30); -moz-opacity:0.3}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader4{ position:relative; filter:alpha(opacity=40); -moz-opacity:0.4}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader5{ position:relative; filter:alpha(opacity=50); -moz-opacity:0.5}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader6{ position:relative; filter:alpha(opacity=60); -moz-opacity:0.6}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader7{ position:relative; filter:alpha(opacity=70); -moz-opacity:0.7}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader8{ position:relative; filter:alpha(opacity=80); -moz-opacity:0.8}</STYLE>');



















document.write('<STYLE TYPE="text/css">.elemFader9{ position:relative; filter:alpha(opacity=90); -moz-opacity:0.9}</STYLE>');



















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



















*



















* Function    : actionOnMouseOver



















*



















* Description : Called automatically whenever an element in the



















*			document is "mousedOver". It checks to see if the



















*			element has the className == "elemFader" and if so



















*			starts fading up the element.



















*



















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



















JSFX.fadeElem_actionOnMouseOver = function(e)



















{



















	srcElement=e ? e.target : event.srcElement;



















	



















	if(srcElement.className && srcElement.className.indexOf("elemFader") != -1)



















		JSFX.fadeUp(srcElement);







































	/*** If the document already had an onMouseOver handler, call it ***/



















	if(JSFX.FadeElemSavedOver != null)



















		JSFX.FadeElemSavedOver(e);



















}







































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



















*



















* Function    : actionOnMouseOut



















*



















* Description : Called automatically whenever an element in the



















*			document is "mousedOut". It checks to see if the



















*			element has the className == "elemFader" and if so



















*			starts fading down the element.



















*



















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



















JSFX.fadeElem_actionOnMouseOut = function(e)



















{



















	srcElement=e ? e.target : event.srcElement;







































	if(srcElement.className && srcElement.className.indexOf("elemFader") != -1)



















		JSFX.fadeDown(srcElement);



















	



















	/*** If the document already had an onMouseOut handler, call it ***/



















	if(JSFX.FadeElemSavedOut != null)



















		JSFX.FadeElemSavedOut(e);



















}



















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



















*



















* Function    :	fadeElemAuto



















*



















* 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.fadeElem



















*



















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



















JSFX.fadeElemAuto = function(minOpacity, stepUp, stepDown)



















{



















	if(minOpacity)



















		JSFX.FadeElemMinOpacity = minOpacity;



















	if(stepUp)



















		JSFX.FadeElemAutoUp	= stepUp;



















	if(stepDown)



















		JSFX.FadeElemAutoDown	= stepDown;







































	/*** Save the original document mouseOver/Out events ***/



















	JSFX.FadeElemSavedOver = document.onmouseover;



















	JSFX.FadeElemSavedOut  = document.onmouseout;







































	document.onmouseover	= JSFX.fadeElem_actionOnMouseOver ;



















	document.onmouseout	= JSFX.fadeElem_actionOnMouseOut ;



















}



















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



















*



















* Function    : fadeUpElem



















*



















* Description : Finds the elem in the document and calls JSFX.fadeUp



















*



















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



















JSFX.fadeUpElem = function(elemName, step)



















{



















	if(document.layers || window.opera)



















		return;







































	elem = document.getElementById(elemName);



















	if(elem)



















		JSFX.fadeUp(elem, step);



















}



















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



















*



















* Function    : fadeUp



















*



















* Description : This function is based on the turn_on() function



















*		      of animate2.js (animated rollovers from www.roy.whittle.com).



















*		      Each fading elem 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(elem, step)



















{







































	if(elem)



















	{



















		if(!step) step=JSFX.FadeElemAutoUp;







































		if(elem.fade == null)



















		{



















			elem.fade = new Object();



















			elem.fade.state	 = "OFF";



















			elem.fade.upStep	 = step;



















			elem.fade.downStep  = step;



















			elem.fade.minOpacity  = JSFX.FadeElemMinOpacity;



















			elem.fade.index = elem.fade.minOpacity;



















			elem.animate=JSFX.FadeElemAnimation;



















			elem.fadeId="JSFX_FadeElem" + JSFX.FadeElemIdIndex++;



















			window[elem.fadeId] = elem;







































			if(elem.filters)



















				elem.fade.minOpacity = elem.filters.alpha.opacity;



















			else



















				elem.fade.minOpacity = document.defaultView.getComputedStyle(elem,'').getPropertyValue('-moz-opacity') * 100;



















			



















		}



















		if(elem.fade.state == "OFF")



















		{



















			elem.fade.upStep  = step;



















			elem.fade.state = "FADE_UP";



















			elem.animate();



















		}



















		else if( elem.fade.state == "FADE_UP_DOWN"



















			|| elem.fade.state == "FADE_DOWN")



















		{



















			elem.fade.upStep  = step;



















			elem.fade.state = "FADE_UP";



















		}



















	}



















}



















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



















*



















* Function    : fadeDownElem



















*



















* Description : Finds the elem in the document and calls JSFX.fadeDown



















*



















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



















JSFX.fadeDownElem = function(elemName, step)



















{



















	if(document.layers || window.opera)



















		return;







































	elem = document.getElementById(elemName);



















	if(elem)



















		JSFX.fadeDown(elem, 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(elem, step)



















{



















	if(elem)



















	{



















		if(!step) step=JSFX.FadeElemAutoDown;







































		if(elem.fade.state=="ON")



















		{



















			elem.fade.downStep  = step;



















			elem.fade.state="FADE_DOWN";



















			elem.animate();



















		}



















		else if(elem.fade.state == "FADE_UP")



















		{



















			elem.fade.downStep  = step;



















			elem.fade.state="FADE_UP_DOWN";



















		}



















	}



















}



















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



















*



















* Function    : FadeElemAnimation



















*



















* 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.FadeElemRunning = false;



















	for(i=0 ; i<document.elems.length ; i++)



















	{



















		var elem = document.elems[i];



















		if(elem.fade)



















		{



















			if(elem.fade.state == "FADE_UP")



















			{



















				elem.fade.index+=elem.fade.upStep;



















				if(elem.fade.index > 100)



















					elem.fade.index = 100;







































				if(elem.filters)



















					elem.filters.alpha.opacity = elem.fade.index;


















				else



















					elem.style.MozOpacity = elem.fade.index/101;







































				if(elem.fade.index == 100)



















					elem.fade.state="ON";



















				else



















					JSFX.FadeElemRunning = true;



















			}



















			else if(elem.fade.state == "FADE_UP_DOWN")



















			{



















				elem.fade.index+=elem.fade.upStep;



















				if(elem.fade.index > 100)



















					elem.fade.index = 100;







































				if(elem.filters)



















					elem.filters.alpha.opacity = elem.fade.index;



















				else



















					elem.style.MozOpacity = elem.fade.index/101;



















	



















				if(elem.fade.index == 100)



















					elem.fade.state="FADE_DOWN";



















				JSFX.FadeElemRunning = true;



















			}



















			else if(elem.fade.state == "FADE_DOWN")



















			{



















				elem.fade.index-=elem.fade.downStep;



















				if(elem.fade.index < elem.fade.minOpacity)



















					elem.fade.index = elem.fade.minOpacity;







































				if(elem.filters)



















					elem.filters.alpha.opacity = elem.fade.index;



















				else



















					elem.style.MozOpacity = elem.fade.index/101;







































				if(elem.fade.index == elem.fade.minOpacity)



















					elem.fade.state="OFF";



















				else



















					JSFX.FadeElemRunning = true;



















			}



















		}



















	}



















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



















	if(JSFX.FadeElemRunning)



















		setTimeout("JSFX.FadeElemAnimation()", 40);



















}







































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



















*



















* Function    : FadeElemAnimation



















*



















* 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.FadeElemAnimation = function()



















{



















	var fadeElemRunning = false;



















	var elem = this;



















	if(elem.fade)



















	{



















		if(elem.fade.state == "FADE_UP")



















		{



















			elem.fade.index+=elem.fade.upStep;







































			if(elem.fade.index > 100)



















				elem.fade.index = 100;







































			if(elem.filters)



















				elem.filters.alpha.opacity = elem.fade.index;



















			else



















				elem.style.MozOpacity = elem.fade.index/101;







































			if(elem.fade.index == 100)



















				elem.fade.state="ON";



















			else



















				fadeElemRunning = true;



















		}



















		else if(elem.fade.state == "FADE_UP_DOWN")



















		{



















			elem.fade.index+=elem.fade.upStep;



















			if(elem.fade.index > 100)



















				elem.fade.index = 100;







































			if(elem.filters)



















				elem.filters.alpha.opacity = elem.fade.index;



















			else



















				elem.style.MozOpacity = elem.fade.index/101;



















	



















			if(elem.fade.index == 100)



















				elem.fade.state="FADE_DOWN";



















			fadeElemRunning = true;



















		}



















		else if(elem.fade.state == "FADE_DOWN")



















		{



















			elem.fade.index-=elem.fade.downStep;



















			if(elem.fade.index < elem.fade.minOpacity)



















				elem.fade.index = elem.fade.minOpacity;







































			if(elem.filters)



















				elem.filters.alpha.opacity = elem.fade.index;



















			else



















				elem.style.MozOpacity = elem.fade.index/101;







































			if(elem.fade.index == elem.fade.minOpacity)



















				elem.fade.state="OFF";



















			else



















				fadeElemRunning = true;



















		}



















	}



















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



















	if(fadeElemRunning)



















		setTimeout("window['"+elem.fadeId+"'].animate()", 40);



















}