/*******************************************************************
* File    : JSFX_TextFader.js  © JavaScript-FX.com
* Created : 2002/01/27
* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com
* Purpose : To create fading text link descriptions
* History
* Date         Version        Description
* 2001-01-19	2.0		Combined 3 previous versions.
* 2002-01-27	3.0		Re-written for javascript-fx.com
*					(now requires JSFX.Layer() )
* 2002-02-12	3.1		Change to allow the fade to use opacity
* 2002-03-07	3.2		Fix bug (close tag) in toHtml for NS4
***********************************************************************/
/*******************************************************************************/
/*** These are the simplest HEX/DEC conversion routines I could come up with ***/
/*** I have seen a lot of fade routines that seem to make this a             ***/
/*** very complex task. I am sure somene else must've had this idea          ***/
/*******************************************************************************/
var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function dec2hex(dec)
{
	return(hexDigit[dec>>4]+hexDigit[dec&15]);
}
function hex2dec(hex)
{
	return(parseInt(hex,16))
}
/*******************************************************************
*
* Function    : getColor
*
* Parameters  :	start - the start color (in the form "RRGGBB" e.g. "FF00AC")
*			end - the end color (in the form "RRGGBB" e.g. "FF00AC")
*			percent - the percent (0-100) of the fade between start & end
*
* returns	  : color in the form "RRGGBB" e.g. "FA13CE"
*
* Description : This is a utility function. Given a start and end color and
*		    a percentage fade it returns a colour in between the 2 colors
*
*****************************************************************/
function getColor(start, end, percent)
{
	var r1=hex2dec(start.slice(0,2));
	var g1=hex2dec(start.slice(2,4));
	var b1=hex2dec(start.slice(4,6));

	var r2=hex2dec(end.slice(0,2));
	var g2=hex2dec(end.slice(2,4));
	var b2=hex2dec(end.slice(4,6));

	var pc = percent/100;

	r= Math.floor(r1+(pc*(r2-r1)) + .5);
	g= Math.floor(g1+(pc*(g2-g1)) + .5);
	b= Math.floor(b1+(pc*(b2-b1)) + .5);

	return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}
/******************************************************************************************/
/*******************************************************************
*
* Function    : TextFader (Constructor)
*
* Parameters  : theOffColor (of the background of the page)
*		    theOnColor - the default on color.
*
* returns	  : a newly constructed fader object
*
* Description : Constructs and initialises a TextFader object.
*		    if no offColor is defined the fader uses opacity
*		    and the faded content can be any color (even images).
*		    theOnColor is only used if theOnColor is defined. It is
*		    the default color to use if non is given in the fadeUp() method
*
*****************************************************************/
JSFX.TextFader = function(theOffColor, theOnColor)
{
	if(theOffColor == null)
		theOffColor = "transparent";
	if(theOnColor == null)
		theOnColor = "FFFFFF";

	this.objId 		= JSFX.TextFader.getNextFaderId();
	this.theDivId 	= this.objId + "_div";	
	this.theDiv  	= null;
	this.bgColor 	= theOffColor;
	this.fgColor	= theOnColor;
	this.state   	= "OFF";
	this.index		= 0;
	this.step		= 20;
	this.useOpacity	= (theOffColor == "transparent");
	//In ns4 there is no opacity so make the swap quicker
	if(this.useOpacity && ns4)
		this.step=50;

	window[this.objId]=this;	//save a reference to this
}
/*******************************************************************
*
* Function    : getNextFaderId 
* returns	  : A new unique ID
*
*****************************************************************/
JSFX.TextFader.faderNo = 0;
JSFX.TextFader.getNextFaderId = function()
{
	return("JSFX_TextFader"+JSFX.TextFader.faderNo++);
}
/*******************************************************************
*
* Function    : toHtml 
* Parameters  :	theWidth (of the fading area)
*			theHieght (of the fading area)
*
* returns	  : The HTML that construcs a visual representation
*		    of the text fader in a WEB page.
*
*****************************************************************/
JSFX.TextFader.prototype.toHtml = function(width, height)
{
	var str = "";
	if(ns4)
		return('<ILAYER WIDTH="'+width+'" HEIGHT="'+height+'"><LAYER WIDTH="'+width+'" HEIGHT="'+height+'" name="'+this.theDivId+'">'+str+'</LAYER></ILAYER>');
	else
	{
		if(this.useOpacity)
			return('<div style="width:'+width+';height:'+height+'; filter:alpha(opacity=0); -moz-opacity:0%;" id="'+this.theDivId+'">'+str+'</div>');
		else
			return('<div style="width:'+width+';height:'+height+'" id="'+this.theDivId+'">'+str+'</div>');
	}
}
/*******************************************************************
*
* Function    : setOpacity 
* Parameters  : opacityLevel the 'visibility' of the div (0-100%)
*
*
*****************************************************************/
JSFX.TextFader.prototype.setOpacity = function(opacityLevel)
{
	if(this.useOpacity)
		this.theDiv.setOpacity(opacityLevel);
	else
		this.theDiv.setColor(getColor(this.bgColor,this.color,opacityLevel));
}
/*****************************************************************
*
* Function   : startFading 
* Description: starts the timer for the animate routine
*
*****************************************************************/
JSFX.TextFader.prototype.startFading = function()
{
	this.setTimeout("animate()", 40);
}
/*****************************************************************
*
* Function   : setTimeout
* Description: Sets a timer for a function within this object
*
*****************************************************************/
JSFX.TextFader.prototype.setTimeout = function(f, t) 
{
	setTimeout("window."+this.objId+"."+f, t);
}
/*****************************************************************
*
* Function   : fadeUp
*
* Parameters :	newText - The text to display when faded in
*			newColor- The color the text will be.
*
* Description: Depending on the current "state" of the fade
*		       this function will determine the new state and
*		       if neccessary, start the fade effect.            
*
*****************************************************************/
JSFX.TextFader.prototype.fadeUp = function(newText, newColor)
{
	//Initialise the DIV/Layer if not already done so
	if(this.theDiv == null)
	{
		this.theDiv = new JSFX.Layer(JSFX.findLayer(this.theDivId));
		this.theDiv.hide();
	}

	if(newColor == null)
		newColor = this.fgColor;

	if(this.state == "OFF")
	{
		this.text  = newText;
		this.color = newColor;
		this.state = "FADE_UP";
		this.theDiv.setContent(newText);
		this.setOpacity(this.index);
		this.theDiv.show();
		this.startFading();
	}
	else if( this.state == "FADE_UP_DOWN"
		|| this.state == "FADE_DOWN"
		|| this.state == "FADE_DOWN_UP")
	{
		if(newText == this.text)
			this.state = "FADE_UP";
		else
		{
			this.next_text  = newText;
			this.next_color = newColor;
			this.state      = "FADE_DOWN_UP";
		}
	}	
}
/*****************************************************************
*
* Function   : fadeDown
*
* Description: Depending on the current "state" of the fade
*		       this function will determine the new state and
*		       if neccessary, start the fade effect.            
*
*****************************************************************/
JSFX.TextFader.prototype.fadeDown = function()
{
	if(this.state=="ON")
	{
		this.state="FADE_DOWN";
		this.startFading();
	}
	else if(this.state=="FADE_DOWN_UP")
	{
		this.state="FADE_DOWN";
		this.next_text = null;
	}
	else if(this.state == "FADE_UP")
	{
		this.state="FADE_UP_DOWN";
	}
}
/*******************************************************************
*
* Function    : Animate
*
* Description : This function is based on the Animate function
*		        of animate2.js (animated rollovers).
*		        Each fade object has a state. This function
*		        modifies each object and changes its state.
*****************************************************************/
JSFX.TextFader.prototype.animate = function()
{
	var fadeRunning = false;
	if(this.state == "FADE_UP")
	{
		if(this.index < 100)
			this.index+= this.step;
		else
			this.index = 100;

		this.setOpacity(this.index);

		if(this.index == 100)
			this.state="ON";
		else
			fadeRunning = true;
	}
	else if(this.state == "FADE_UP_DOWN")
	{
		if(this.index < 100)
			this.index += this.step;
		else
			this.index = 100;

		this.setOpacity(this.index);

		if(this.index == 100)
			this.state="FADE_DOWN";
		fadeRunning = true;
	}
	else if(this.state == "FADE_DOWN")
	{
		if(this.index > 0)
			this.index-= this.step;
		else
			this.index = 0;

		this.setOpacity(this.index);

		if(this.index == 0)
		{
			this.state="OFF";
			this.theDiv.hide();
		}
		else
			fadeRunning = true;
	}
	else if(this.state == "FADE_DOWN_UP")
	{
		if(this.index > 0)
			this.index-=this.step;
		else
			this.index = 0;

		this.setOpacity(this.index);

		if(this.index == 0)
		{
			this.theDiv.hide();
			this.text      = this.next_text;
			this.color     = this.next_color;
			this.next_text = null;
			this.state     ="FADE_UP";
			this.theDiv.hide();
			this.theDiv.setContent(this.text);
			this.setOpacity(this.index);
			this.theDiv.show();
		}
		fadeRunning = true;
	}

	/*** Check to see if we need to animate any more frames. ***/
	if(fadeRunning)
		this.setTimeout("animate()", 40);

}