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

/****** User may alter these to change the fade effect ********/
var FadeInStep 	= 5;
var FadeOutStep = 15;
/****** Don't alter anything else **************/


/*** Create some global variables ***/
if(!window.JSFX)
	JSFX=new Object();

JSFX.ImageFadeRunning=false;
JSFX.ImageFadeInterval=20;

/*******************************************************************
*
* Function    : imgFadeIn
*
* 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.imgFadeIn = function(img, imgSrc)
{
	if(img) 
	{
		if(img.state == null) 
		{
			img.state = "OFF";
			img.index = 0;
			img.next_on    = null;
		}

		if(img.state == "OFF")
		{
			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    : imgFadeOut
*
* 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.imgFadeOut = 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")
			{
				if(img.index < 100)
					img.index+=FadeInStep;
				else
					img.index = 100;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index + "%"

				if(img.index == 100)
					img.state="ON";
				else
					JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_IN_OUT")
			{
				if(img.index < 100)
					img.index+=FadeInStep;
				else
					img.index = 100;

				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else 
					img.style.MozOpacity = img.index + "%";

	
				if(img.index == 100)
					img.state="FADE_OUT";

				JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_OUT")
			{
				if(img.index > 0)
					img.index-=FadeOutStep;
				else
					img.index = 0;
				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index + "%";


				if(img.index == 0)
					img.state="OFF";
				else
					JSFX.ImageFadeRunning = true;
			}
			else if(img.state == "FADE_OUT_IN")
			{
				if(img.index > 0)
					img.index-=FadeOutStep;
				else
					img.index = 0;
				if(img.filters)
					img.filters.alpha.opacity = img.index;
				else
					img.style.MozOpacity = img.index + "%";


				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.ImageFadeInterval);
}
/*******************************************************************
*
* Function    : findImg
*
* Description : In Netscape 4 images could be in layers so we might
*		    have to recurse the layers to find the image
*
*****************************************************************/
JSFX.findImg = function(n, d) 
{
	var img = d.images[n];
	if(!img && d.layers)  
		for(var i=0 ; !img && i<d.layers.length ; i++) 
			img=JSFX.findImg(n,d.layers[i].document);
	return img;
}

/*******************************************************************
*
* Function    : fadeIn /fadeOut
*
* 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
*			images/menu/homeon.gif
*			images/menu/homeof.gif
*****************************************************************/
JSFX.fadeIn = function(imgName, imgSrc)
{
	if(imgSrc == null)
		imgSrc="images/menu/"+imgName+"on.gif";

	if(document.layers)
	{
		var img = JSFX.findImg(imgName, document);
		if(img.offSrc==null)
			img.offSrc=img.src;
		img.src=imgSrc;
	}
	else
		JSFX.imgFadeIn(document.images[imgName], imgSrc);
}
JSFX.fadeOut = function(imgName)
{	
	if(document.layers)
	{
		var img = JSFX.findImg(imgName, document);
		img.src=img.offSrc;
	}
	else
		JSFX.imgFadeOut(document.images[imgName]);
}


/****************************************************************
*
* Function    : Create menu
*
*****************************************************************/
function addmenu(cim,cel,kep1,meret,id1,kep2,id2,kep3,id3,allapot){
	var txt="";
	txt="<table background=\"images/menu/"+kep1+"of.gif\" style=\"background-repeat:no-repeat;\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td height=\""+meret+"\"><a href=\""+cim+"\" "
	txt+=(cel!="none")?"target=\""+cel+"\" ":""
	txt+=(allapot=="3")?"onClick=\"rogzit('"+id1+"','"+id2+"','"+id3+"')\" ":""
	txt+="onMouseOut=\"JSFX.fadeOut('"+id1+"')"
	txt+=(id2)?";JSFX.fadeOut('"+id2+"')":""
	txt+=(id3)?";JSFX.fadeOut('"+id3+"')":""
	txt+="\" onMouseOver=\"JSFX.fadeIn('"+id1+"','images/menu/"+kep1+"on.gif')"
	txt+=(id2)?";JSFX.fadeIn('"+id2+"','images/menu/"+kep2+"on.gif')":""
	txt+=(id3)?";JSFX.fadeIn('"+id3+"','images/menu/"+kep3+"on.gif')":""
	txt+="\"><img src=\"images/menu/"+kep1+"of.gif\" name=\""+id1+"\" border=\"0\" class=\"imgFader\"></a></td></tr></table>"
	document.write(txt)
}

function rogzit(id,id2,id3) {
torol();
document.images[id].state=true;
if(id2)document.images[id2].state=true;
if(id3)document.images[id3].state=true;
if(!JSFX.ImageFadeRunning)JSFX.ImageFadeRunning=true;JSFX.ImageFadeAnimation();
}


function torol() {
	for(i=0 ; i<document.images.length ; i++) {
	if (document.images[i].state==true) document.images[i].state="FADE_OUT";
	}
}