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

* File    : JSFX_ImageFadeSwap.js  © JavaScript-FX.com

* Created : 2001/08/31 

* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com 

* Purpose : To create a more dynamic image swap using opacity

* History 

* Date         Version        Description 

* 2001-08-09	1.0		First version

* 2001-08-31	1.1		Got it working with NS6 - You must use opaque

*					GIF's and use a STYLE attrib in the main

*					HTML Page - Thanks Owl.

* 2001-08-31	1.2		Added different FadIn/FadeOut and converted

*					all vars to JSFX name space.

* 2001-09-01	1.3		Make it so you only need one onMouseOver

*					onMouseOut in the main document.

* 2001-09-09	1.4		Allow you to do a "Swap Other Image" so

*					you can swap the same image with different pictures.

* 2001-09-17	1.5		Create the pre-loading object - just like

*					simple rollovers and animated rollovers.

*					allows for a similar interface to all.

* 2001-09-18	1.6		The code contains so much of SimpleRollovers that

*					I added imgOn and imgOff so you can mix rollovers

*					without having to include 2 ".js" files.

* 2002-02-08	1.7		If the ON image is already loaded don't reload it.

*					This should help with the IE bug that reloads images

*					from the server even though they are pre-cached.

*					(will not work for swapping multiple pictures into same Image object)

* 2002-02-13	1.8		Corrected a bug in JSFX.findImg

* 2002-04-23	1.9		Write out the style tag.

* 2002-06-09	1.10		Attempt fix for IE on a Mac

* 2002-08-27	1.11		Fix a bug whereby opacity may go over 100 which

*					may be causing a bug in IE6

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

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

*

* 2002-10-10	2.0!!		Have been reading up on Miscrosoft Filters. Re-wrote most of the

*					script so it used the transition filters (transition in IE only).

* 2002-10-28	2.1		Was trying to use the obj.filter[0].play() and the "onfilterchange" 

*                             event handler... too complex.

*					Found out you could fully control the transition using the "Percent" attribute.

* 2003-03-18	2.2		Correct bug in "remote" rollovers.

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

/****** User may alter these to change the fade effect ********/

var TransInStep 	= 3;

var TransOutStep 	= 3;

/****** Don't alter anything else **************/

if (document.all) 

{

	document.write("<STYLE TYPE='text/css'>.transFade      { filter:progid:DXImageTransform.Microsoft.Fade() }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transBoxIn     { filter:revealTrans(transition=0) }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transBoxOut    { filter:revealTrans(transition=1) }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transCircleIn  { filter:progid:DXImageTransform.Microsoft.Iris(irisStyle='CIRCLE', motion='in') }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transCircleOut { filter:progid:DXImageTransform.Microsoft.Iris(irisStyle='CIRCLE', motion='out') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transWipeUp    { filter:progid:DXImageTransform.Microsoft.Blinds(direction='up', bands='1') }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transWipeDown  { filter:progid:DXImageTransform.Microsoft.Blinds(direction='down', bands='1') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transWipeRight { filter:progid:DXImageTransform.Microsoft.Blinds(direction='right', bands='1') }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transWipeLeft  { filter:progid:DXImageTransform.Microsoft.Blinds(direction='left', bands='1') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transVertBlinds{ filter:progid:DXImageTransform.Microsoft.Blinds(direction='right', bands='10' }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transHorzBlinds{ filter:progid:DXImageTransform.Microsoft.Blinds(direction='down', bands='10' }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transSlide     { filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='PUSH', bands='1') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transSpin      { filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='SPIN') }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transPush      { filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transWheel     { filter:progid:DXImageTransform.Microsoft.Wheel(spokes='20') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transGradWipeLeft { filter:progid:DXImageTransform.Microsoft.GradientWipe(motion='reverse') }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transGradWipeRight{ filter:progid:DXImageTransform.Microsoft.GradientWipe(motion='forward') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transBarnIn    { filter:progid:DXImageTransform.Microsoft.Barn(motion='in', orientation='vertical') }</STYLE>");

	document.write("<STYLE TYPE='text/css'>.transBarnOut    { filter:progid:DXImageTransform.Microsoft.Barn(motion='out', orientation='vertical') }</STYLE>");



	document.write("<STYLE TYPE='text/css'>.transRandom    { filter:revealTrans() }            </STYLE>");

} 



if(!window.JSFX)

	JSFX=new Object();



JSFX.RolloverObjects=new Array();



JSFX.Rollover = function(name, img)

{

	JSFX.RolloverObjects[name]=new Image();

	JSFX.RolloverObjects[name].img_src = img;	

	if(!JSFX.Rollover.postLoad)

		JSFX.RolloverObjects[name].src = img;

}

JSFX.Rollover.postLoad = false;

JSFX.Rollover.loadImages = function()

{

	var i;

	for(i in JSFX.RolloverObjects)

	{

		r=JSFX.RolloverObjects[i];

		r.src=r.img_src;

	}

}

JSFX.Rollover.error = function(n)

{

		alert("JSFX.Rollover - An Error has been detected\n"

			+ "----------------------------------\n"

			+ "You must define a JSFX.Rollover in your document\n"

			+ "JSFX.Rollover(\""+n+"\",\"your_on_img.gif\")\n"

			+ "(check the spelling of your JSFX.Rollovers)");

}

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

*

* Function    : getImg

*

* Description : In Netscape 4 images could be in layers so we might

*		    have to recurse the layers to find the image

*

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

JSFX.getImg = function(n, d) 

{

	var img = d.images[n];

	if(!img && d.layers)  

		for(var i=0 ; !img && i<d.layers.length ; i++)

			img=JSFX.getImg(n,d.layers[i].document);

	return img;

}

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

*

* Function    : findImg

*

* Description : gets the image from the document and reports an

*		    error if it cannot find it.

*

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

JSFX.findImg = function(n, d) 

{

	var img = JSFX.getImg(n, d);



	/*** Stop emails because the image was named incorrectly ***/

	if(!img)

	{

		alert("JSFX.findImg - An Error has been detected\n"

			+ "----------------------------------\n"

			+ "You must define an image in your document\n"

			+ "<IMG SRC=\"your_image.ext\" NAME=\""+n+"\">\n"

			+ "(check the NAME= attribute of your images)");



		return(new Image());

	}

	return img;

}



JSFX.ImageFadeRunning=false;

JSFX.ImageTransInterval=30;



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

*

* Function    : imgTransIn

*

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

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

*		      Each image object is given a state. 

*			OnMouseOver the state is switched depending on the current state.

*			Current state -> Switch to

*			===========================

*			null		->	OFF.

*			OFF		->	FADE_IN

*			FADE_OUT	->	FADE_IN

*			FADE_OUT	->	FADE_OUT_IN (if the new image is different)

*			FADE_IN_OUT->	FADE_IN (if the image is the same)

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

JSFX.imgTransIn = function(img, imgSrc)

{

	if(img) 

	{

		if(img.state == null) 

		{

			img.state = "OFF";

			img.index = 0;

			img.next_on    = null;

			img.filters[0].apply();

			img.src=imgSrc;

		}



		if(img.state == "OFF")

		{

			img.filters[0].Percent = img.index;

			img.filters[0].Enabled = true;



			/*** Vers 2.2 only load the ON image once ever ***/

			if(img.src.indexOf(imgSrc) == -1)

				img.src=imgSrc;



			img.currSrc = imgSrc;

			img.state = "FADE_IN";

			JSFX.startFading();

		}

		else if( img.state == "FADE_IN_OUT"

			|| img.state == "FADE_OUT_IN"

			|| img.state == "FADE_OUT")

		{

			if(img.currSrc == imgSrc)

				img.state = "FADE_IN";

			else

			{



				img.next_on = imgSrc;

				img.state="FADE_OUT_IN";

			}

		}

	}

}

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

*

* Function    : imgTransOut

*

* Description : This function is based on the turn_off function

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

*		      Each image object is given a state. 

*			OnMouseOut the state is switched depending on the current state.

*			Current state -> Switch to

*			===========================

*			ON		->	FADE_OUT.

*			FADE_IN	->	FADE_IN_OUT.

*			FADE_OUT_IN	->	FADE_IN. (after swapping to the next image)

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

JSFX.imgTransOut = function(img)

{

	if(img)

	{

		if(img.state=="ON")

		{

			img.state="FADE_OUT";

			JSFX.startFading();

		}

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

		{

			img.state="FADE_IN_OUT";

		}

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

		{

			img.next_on == null;

			img.state = "FADE_OUT";

		}

	}

}

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

*

* Function    : startFading

*

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

{

	if(!JSFX.ImageFadeRunning)

		JSFX.ImageFadeAnimation();

}



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

*

* Function    : ImageFadeAnimation

*

* Description : This function is based on the Animate function

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

*		    Each image object has a state. This function

*		    modifies each object and (possibly) changes its state.

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

JSFX.ImageFadeAnimation = function()

{

	JSFX.ImageFadeRunning = false;

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

	{

		var img = document.images[i];

		if(img.state)

		{

			if(img.state == "FADE_IN")

			{

				img.index+=TransInStep;



				if(img.index > 100)

					img.index = 100;



				img.filters[0].Percent = img.index;

				img.filters[0].Enabled = true;



				if(img.index == 100)

					img.state="ON";

				else

					JSFX.ImageFadeRunning = true;

			}

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

			{

				img.index+=TransInStep;

				if(img.index > 100)

					img.index = 100;



				img.filters[0].Percent = img.index;

				img.filters[0].Enabled = true;



	

				if(img.index == 100)

					img.state="FADE_OUT";



				JSFX.ImageFadeRunning = true;

			}

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

			{

				img.index-=TransOutStep;

				if(img.index < 0)

					img.index = 0;



				img.filters[0].Percent = img.index;

				img.filters[0].Enabled = true;



				if(img.index == 0)

					img.state="OFF";

				else

					JSFX.ImageFadeRunning = true;

			}

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

			{

				img.index-=TransOutStep;

				if(img.index < 0)

					img.index = 0;



				img.filters[0].Percent = img.index;

				img.filters[0].Enabled = true;



				if(img.index == 0)

				{

					img.src = img.next_on;

					img.currSrc = img.next_on;

					img.state="FADE_IN";

				}

				JSFX.ImageFadeRunning = true;

			}

		}

	}

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

	if(JSFX.ImageFadeRunning)

		setTimeout("JSFX.ImageFadeAnimation()", JSFX.ImageTransInterval);

}

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

*

* Function    : hasFilters

*

* Description : Tests if the browser allows Opacity

*

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

JSFX.hasFilters = function(obj)

{

	if(obj.filters && obj.filters[0] && typeof(obj.filters[0].Enabled) != 'undefined')

		return true;



	return false;

}

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

*

* Function    : transIn /transOut

*

* Description : Detects browser that can do opacity and fades the images

*		    For browsers that do not support opacity it just does an image swap.

*		    (I only know about NS4 but maybe IE on a Mac also ?)

*		    For these functions to work you need to name the image

*			e.g. for an image named "home" you need

*			<IMG .... NAME="home">

*		    and you need 2 images, the on and the off image

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

JSFX.transIn = function(imgName, rollName)

{

	if(rollName == null)

		rollName=imgName;



	/*** Stop emails because the rollover was named incorrectly ***/

	if(!JSFX.RolloverObjects[rollName])

	{

		JSFX.Rollover.error(rollName);

		return;

	}



	var img = JSFX.findImg(imgName, document);

	if(JSFX.hasFilters(img))

		JSFX.imgTransIn(img, JSFX.RolloverObjects[rollName].img_src);

	else

	{

		if(img.offSrc==null)

			img.offSrc=img.src;

		img.src=JSFX.RolloverObjects[rollName].img_src;

	}

}

JSFX.transOut = function(imgName)

{

	var img = JSFX.findImg(imgName, document);

	if(JSFX.hasFilters(img))

		JSFX.imgTransOut(img);

	else

		img.src=img.offSrc;

}

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

*

* Function    : imgOn /imgOff

*

* Description : Included these functions so you can mix simple and

*		    fading rollovers without having to include 2 ".js" files

*

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

JSFX.imgOn = function(imgName, rollName)

{

	if(rollName == null)

		rollName=imgName;



	/*** Stop emails because the rollover was named incorrectly ***/

	if(!JSFX.RolloverObjects[rollName])

	{

		JSFX.Rollover.error(rollName);

		return;

	}

	var img = JSFX.findImg(imgName,document);

	if(img.offSrc==null)

		img.offSrc=img.src;

	img.src=JSFX.RolloverObjects[rollName].img_src;

}

JSFX.imgOff = function(imgName)

{

	var img = JSFX.findImg(imgName,document);

	img.src=img.offSrc;

}