/* This function will fade a document element(eid) from the starting opacity (startop)
 * to the ending opacity (endop) over the time(time) given 
 * 0 = transparent
 * 1 = opaque
 */
function fadeElement(eid, startop, endop, time) {
	var element = document.getElementById(eid);

	/* invalid element */
	if(element == null) {
		alert("Invalid Element");
		return;
	}

	/* check for fadestate element property (aka. are we fading(1)) */ 
/*	if(element.FadeState == null) {
		if(element.style.opacity == null || element.style.opacity == '') {
			element.FadeState = 1;
			element.FadeTimeLeft = time;
			animateFade(element, startop, endop, time, new Date().getTime());
    		}
	}
*/

	element.FadeState = 1;
	element.FadeTimeLeft = time;
	animateFade(eid, startop, endop, time, new Date().getTime());
}

function animateFade(eid, startop, endop, time, lastTick) {
	var element = document.getElementById(eid);
	var startOpacity = startop;
	var endOpacity = endop;
	var fadeTime = time;
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;
	
	element.FadeTimeLeft -= elapsedTicks;

	/* Have we Finished fading? */
	if(element.FadeTimeLeft < 0) {
		element.FadeState = 2; // 2 = previously faded
		element.style.opacity = endOpacity;
		element.style.filter = 'alpha(opacity = ' + endOpacity * 100 + ')';
		return;
	}

	element.FadeTimeLeft -= elapsedTicks;
	var fadeTimeCompleted = fadeTime - element.FadeTimeLeft;
	var temp = normalize(fadeTimeCompleted, time);
	var currentFade = lerp(startOpacity, endOpacity, temp);

	element.style.opacity = currentFade;
	element.style.filter = 'alpha(opacity = ' + (currentFade*100) + ')';

	setTimeout("animateFade('" + eid + "', " + startOpacity + ", " + endOpacity + ", " + fadeTime + ", " + curTick + ")", 33);
}

/* Normalize function */
function normalize(value, maxValue) {
	return value/maxValue;
}

/* Standard lerp function, transition should be clamped betweeen 0 and 1 */
function lerp(startVal, endVal, transition) {
	return (startVal + transition*(endVal - startVal));
}

function flipFlopFadeBanner(flipFlopTracker) {
	var elementID = 'logo_area';
	var element = document.getElementById(elementID);
	var totalTime = 10000;

	if(flipFlopTracker == 1) {
		setTimeout("flipFlopFadeBanner(0)", totalTime);
	} else {
		setTimeout("flipFlopFadeBanner(1)", totalTime);
	}

	fadeElement(elementID, 1, 0, totalTime/2);
	
	if(flipFlopTracker == 1) {
		var html = "<img id=\"madokaid_banner\" src=\"wp\-content\/uploads\/2011\/11\/Banner1MadokaID.jpg\"/>";
		setTimeout("setInnerHtml('" + elementID + "','" + html + "')", totalTime/2);
		setTimeout("fadeElement('" + elementID + "', 0, 1," + totalTime/2 + ")", totalTime/2); 
		flipFlopTracker = 0;
	} else {
		var html = "<img id=\"madokaid_banner\" src=\"wp\-content\/uploads\/2011\/11\/Banner2MadokaID.jpg\"/>";
		setTimeout("setInnerHtml('" + elementID + "','" + html + "')", totalTime/2);
		setTimeout("fadeElement('" + elementID + "', 0, 1," + totalTime/2 + ")", totalTime/2); 
		flipFlopTracker = 1;
	}
}

function fadeInBanner(backgroundImageHtml, foregroundHtml) {
	var elementID = 'logo_area';
	var element = document.getElementById(elementID);
	var totalTime = 10000;
	
	var html = backgroundImageHtml + foregroundHtml;// "<img id=\"madokaid_banner1\" src=\"wp\-content\/uploads\/2011\/11\/Banner1MadokaID.jpg\"/><img id=\"madokaid_banner2\" src=\"wp\-content\/uploads\/2011\/11\/Banner2MadokaID.jpg\"/>";
	setInnerHtml(elementID, html);
	fadeElement('madokaid_banner2', 0, 1, totalTime);
}

function setInnerHtml(eid, html) {
	element = document.getElementById(eid);
	element.innerHTML = html;
}