//http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
//objToFadeID - Object ID of the Div or object you want to fade
//IsFadeIn - Is this a fade in (vs fade out) 1 = true, 0 = false
//timeToFade - Time in ms to fade the object
//delay - Time in ms to delay the fade

var fadeOriginalLeft = null;

//objToFadeID: do not set 'display:none' in its DIV
//set  opacity:0; filter:alpha(opacity=0);
function fadeX(objToFadeID, IsFadeIn, timeToFade, delay, coordRefID, topOffSet, leftOffSet)
{
	var objToFade = document.getElementById(objToFadeID);
	if(objToFade==null) {
		alert('Cannot find ' + objToFadeID);
		return;
	}

	if(coordRefID!=null) {
		var cf = getObject(coordRefID);
		var xpos = getposOffset(cf, "left")
		var ypos = getposOffset(cf, "top")
		if(leftOffSet!=null)	xpos += leftOffSet;
		if(topOffSet!=null)		ypos += topOffSet;
		objToFade.style.left = xpos + "px";
		objToFade.style.top = ypos + "px";
	}

	var fadeXFactor = IsFadeIn==1?1:-1; // used to reverse values for fade in vs out

	if ((timeToFade==0)&&(delay==0))
	{
		//if this is a simple instant popup, then make the settings are return
		objToFade.style.opacity = 1*IsFadeIn;
		objToFade.style.filter = 'alpha(opacity = ' + 100*IsFadeIn + ')';
		objToFade.fadeState=2*fadeXFactor;
		return;
	}

	if(delay == null) delay = 0;

	if(IsFadeIn) 
		objToFade.OriginalFadeInTime = timeToFade;
	else
		objToFade.OriginalFadeOutTime = timeToFade;

	if(objToFade.fadeState != null)
	{

		if ((objToFade.fadeState==1*fadeXFactor)||(objToFade.fadeState==2*fadeXFactor)||(objToFade.fadeState==3*fadeXFactor))
			return; //Current fade is in same direction or already there so we are OK;
		else if (objToFade.fadeState==-1*fadeXFactor)
		{
			//reverse the time and the fade direction and let it continue
			objToFade.fadeState = 1*fadeXFactor;
			objToFade.timeToFade = timeToFade;
			if (IsFadeIn)
				objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
			else
				objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
			return;
		}		
		else if (objToFade.fadeState==-3*fadeXFactor)
		{
			//object is in hold status but directoin needs to be reversed and use the passed in time value
			objToFade.fadeState=3*fadeXFactor;
			objToFade.timeToFade = timeToFade;
			if (IsFadeIn)
				objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
			else
				objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
			return;
		}
	}

	//if we got this far, then the object is in the fully opposite state
	objToFade.timeToFade = timeToFade;
	objToFade.fadeTimeLeft = timeToFade;
	objToFade.fadeState = 3*fadeXFactor;
	var now = new Date();
	now.setMilliseconds(now.getMilliseconds() + delay);
	setTimeout("animateFade(" + now.getTime() + ",'" + objToFadeID + "')", 10 + delay);

	//added by Fung on 2010-5-20, to hide the whole DIV
//	if(objToFade.fadeState<0) {
//		objToFade.style.left = '-9999px';
//	}
} 

function animateFade(lastTick, elementID)
{
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;

	var element = document.getElementById(elementID);
	if (element.fadeState==3) element.fadeState=1;
	if (element.fadeState==-3) element.fadeState=-1;

	if(element.fadeTimeLeft <= elapsedTicks)
	{
		element.style.opacity = element.fadeState == 1 ? '1' : '0';
		element.style.filter = 'alpha(opacity = ' + (element.fadeState == 1 ? '100' : '0') + ')';
		element.fadeState = element.fadeState == 1 ? 2 : -2;
		return;
	}

	element.fadeTimeLeft -= elapsedTicks;
	var newOpVal = element.fadeTimeLeft/element.timeToFade;
	if(element.fadeState == 1)
	newOpVal = 1 - newOpVal;
	element.style.opacity = newOpVal;
	element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

	setTimeout("animateFade(" + curTick + ",'" + elementID + "')", 10);
}