/* 

Example Javascript Animation Techniques by Hesido.com;
4 different, reusable examples

*/
if (document.getElementById && document.getElementsByTagName) {
if (window.addEventListener) window.addEventListener('load', initAnims, false);
else if (window.attachEvent) window.attachEvent('onload', initAnims);
}

function initAnims() {
	/*
	//	Init fade animation without memory, single direction
		var animElements = document.getElementById("fadercontainer").getElementsByTagName("p");
		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = fadeBGCol;
			}
			
		function fadeBGCol() {
			doBGFade(this,[255,100,20],[255,204,204],'rgb(255,204,204)',20,20,1);
			}
	*/
		
	//	Init fade animation with memory, both directions
		// 1
		var animElements = document.getElementById("1A").getElementsByTagName("div");

		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = fadeBGColMem1;
			animElements[i].onmouseout = fadeBGColRestore1;
			animElements[i].onclick = goto1;
		}
		function goto1 () {
				window.location.href = "index.php?c=1";
		}
		function fadeBGColMem1() {
			if (!this.currentbgRGB) this.currentbgRGB = [15,104,145]; //if no mem is set, set it first;
				doBGFadeMem(this,this.currentbgRGB,[112,137,145],30,30,1);
			// create second effect
			var lead = document.getElementById("1B");
			if (!lead.currentbgRGB) lead.currentbgRGB = [15,104,145]; //if no mem is set, set it first;
				doFontFadeMem(lead,lead.currentbgRGB,[255,255,255],30,30,1);
		}
		function fadeBGColRestore1() {
			if (!this.currentbgRGB) return;	//avoid error if mouseout an element occurs before the mosueover
												//(e.g. the pointer already in the object when onload)
				doBGFadeMem(this,this.currentbgRGB,[15,104,145],30,30,1);
			// create second effect
			var lead = document.getElementById("1B");
			if (!lead.currentbgRGB) return;
				doFontFadeMem(lead,lead.currentbgRGB,[15,104,145],30,30,1);
		}
		// 2
		var animElements = document.getElementById("2A").getElementsByTagName("div");

		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = fadeBGColMem2;
			animElements[i].onmouseout = fadeBGColRestore2;
			animElements[i].onclick = goto2;
		}
		function goto2 () {
				window.location.href = "index.php?c=2";
		}
		function fadeBGColMem2() {
			if (!this.currentbgRGB) this.currentbgRGB = [191,38,160]; //if no mem is set, set it first;
				doBGFadeMem(this,this.currentbgRGB,[154,116,139],30,30,1);
			// create second effect
			var lead = document.getElementById("2B");
			if (!lead.currentbgRGB) lead.currentbgRGB = [191,38,160]; //if no mem is set, set it first;
				doFontFadeMem(lead,lead.currentbgRGB,[255,255,255],30,30,1);
		}
		function fadeBGColRestore2() {
			if (!this.currentbgRGB) return;	//avoid error if mouseout an element occurs before the mosueover
												//(e.g. the pointer already in the object when onload)
				doBGFadeMem(this,this.currentbgRGB,[191,38,160],30,30,1);
			// create second effect
			var lead = document.getElementById("2B");
			if (!lead.currentbgRGB) return;
				doFontFadeMem(lead,lead.currentbgRGB,[191,38,160],30,30,1);
		}
	// 3
		var animElements = document.getElementById("3A").getElementsByTagName("div");

		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = fadeBGColMem3;
			animElements[i].onmouseout = fadeBGColRestore3;
			animElements[i].onclick = goto3;
		}
		function goto3 () {
				window.location.href = "index.php?c=3";
		}
		function fadeBGColMem3() {
			if (!this.currentbgRGB) this.currentbgRGB = [18,157,88]; //if no mem is set, set it first;
				doBGFadeMem(this,this.currentbgRGB,[97,134,106],30,30,1);
			// create second effect
			var lead = document.getElementById("3B");
			if (!lead.currentbgRGB) lead.currentbgRGB = [18,157,88]; //if no mem is set, set it first;
				doFontFadeMem(lead,lead.currentbgRGB,[255,255,255],30,30,1);
		}
		function fadeBGColRestore3() {
			if (!this.currentbgRGB) return;	//avoid error if mouseout an element occurs before the mosueover
												//(e.g. the pointer already in the object when onload)
				doBGFadeMem(this,this.currentbgRGB,[18,157,88],30,30,1);
			// create second effect
			var lead = document.getElementById("3B");
			if (!lead.currentbgRGB) return;
				doFontFadeMem(lead,lead.currentbgRGB,[18,157,88],30,30,1);
		}
	// 4
		var animElements = document.getElementById("4A").getElementsByTagName("div");

		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = fadeBGColMem4;
			animElements[i].onmouseout = fadeBGColRestore4;
			animElements[i].onclick = goto4;
		}
		function goto4 () {
				window.location.href = "index.php?c=4";
		}
		function fadeBGColMem4() {
			if (!this.currentbgRGB) this.currentbgRGB = [145,60,115]; //if no mem is set, set it first;
				doBGFadeMem(this,this.currentbgRGB,[135,94,111],30,30,1);
			// create second effect
			var lead = document.getElementById("4B");
			if (!lead.currentbgRGB) lead.currentbgRGB = [164,130,147]; //if no mem is set, set it first;
				doFontFadeMem(lead,lead.currentbgRGB,[255,255,255],30,30,1);
		}
		function fadeBGColRestore4() {
			if (!this.currentbgRGB) return;	//avoid error if mouseout an element occurs before the mosueover
												//(e.g. the pointer already in the object when onload)
				doBGFadeMem(this,this.currentbgRGB,[145,60,115],30,30,1);
			// create second effect
			var lead = document.getElementById("4B");
			if (!lead.currentbgRGB) return;
				doFontFadeMem(lead,lead.currentbgRGB,[145,60,115],30,30,1);
		}
	// 5
		var animElements = document.getElementById("5A").getElementsByTagName("div");

		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = fadeBGColMem5;
			animElements[i].onmouseout = fadeBGColRestore5;
			animElements[i].onclick = goto5;
		}
		function goto5 () {
				window.location.href = "index.php?c=5";
		}
		function fadeBGColMem5() {
			if (!this.currentbgRGB) this.currentbgRGB = [198,124,36]; //if no mem is set, set it first;
				doBGFadeMem(this,this.currentbgRGB,[147,118,77],30,30,1);
			// create second effect
			var lead = document.getElementById("5B");
			if (!lead.currentbgRGB) lead.currentbgRGB = [198,124,36]; //if no mem is set, set it first;
				doFontFadeMem(lead,lead.currentbgRGB,[255,255,255],30,30,1);
		}
		function fadeBGColRestore5() {
			if (!this.currentbgRGB) return;	//avoid error if mouseout an element occurs before the mosueover
												//(e.g. the pointer already in the object when onload)
				doBGFadeMem(this,this.currentbgRGB,[198,124,36],30,30,1);
			// create second effect
			var lead = document.getElementById("5B");
			if (!lead.currentbgRGB) return;
				doFontFadeMem(lead,lead.currentbgRGB,[198,124,36],30,30,1);
		}
	// 6
		var animElements = document.getElementById("6A").getElementsByTagName("div");

		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = fadeBGColMem6;
			animElements[i].onmouseout = fadeBGColRestore6;
		animElements[i].onclick = goto6;
		}
		function goto6 () {
				window.location.href = "index.php?c=6";
		}
		function fadeBGColMem6() {
			if (!this.currentbgRGB) this.currentbgRGB = [153,34,70]; //if no mem is set, set it first;
				doBGFadeMem(this,this.currentbgRGB,[135,96,94],30,30,1);
			// create second effect
			var lead = document.getElementById("6B");
			if (!lead.currentbgRGB) lead.currentbgRGB = [153,34,70]; //if no mem is set, set it first;
				doFontFadeMem(lead,lead.currentbgRGB,[255,255,255],30,30,1);
		}
		function fadeBGColRestore6() {
			if (!this.currentbgRGB) return;	//avoid error if mouseout an element occurs before the mosueover
												//(e.g. the pointer already in the object when onload)
				doBGFadeMem(this,this.currentbgRGB,[153,34,70],30,30,1);
			// create second effect
			var lead = document.getElementById("6B");
			if (!lead.currentbgRGB) return;
				doFontFadeMem(lead,lead.currentbgRGB,[153,34,70],30,30,1);
		}

	/*
	//	Init size animation with memory, both directions
		var animElements = document.getElementById("resizercontainer").getElementsByTagName("p")
		for(var i=0; i<animElements.length; i++) {
			animElements[i].onmouseover = widthChange;
			animElements[i].onmouseout = widthRestore;
			}

		function widthChange() {
			if (!this.currentWidth) this.currentWidth = 150; //if no mem is set, set it first;
			doWidthChangeMem(this,this.currentWidth,170,10,10,0.333);
			}

		function widthRestore() {
			if (!this.currentWidth) return;	//avoid error if mouseout an element occurs before the mosueover
												//(e.g. the pointer already in the object when onload)
			doWidthChangeMem(this,this.currentWidth,150,10,10,0.5);
			}
	
	//	Init motion animation
		var moveIt = document.getElementById('moveit');
		if (moveIt != null) moveIt.onclick = moveToBottom;
		
		function moveToBottom() {
			if (!this.currentPos) this.currentPos = [15,15]; //if no mem is set, set it first;
			doPosChangeMem(this,this.currentPos,[Math.floor(Math.random()*230+15),Math.floor(Math.random()*145)+15],20,20,0.5);
				//move to a random position for demonstration
			}
	*/
		
		
	}

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

function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
//BG Fader by www.hesido.com
	if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
	var actStep = 0;
	elem.bgFadeInt = window.setInterval(
		function() {
			elem.style.backgroundColor = "rgb("+
				easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
				easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
				easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")";
			actStep++;
			if (actStep > steps) {
			elem.style.backgroundColor = finalColor;
			window.clearInterval(elem.bgFadeInt);
			}
		}
		,intervals)
}


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

function doBGFadeMem(elem,startRGB,endRGB,steps,intervals,powr) {
//BG Fader with Memory by www.hesido.com
	if (elem.bgFadeMemInt) window.clearInterval(elem.bgFadeMemInt);
	var actStep = 0;
	elem.bgFadeMemInt = window.setInterval(
		function() {
			elem.currentbgRGB = [
				easeInOut(startRGB[0],endRGB[0],steps,actStep,powr),
				easeInOut(startRGB[1],endRGB[1],steps,actStep,powr),
				easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)
				];
			elem.style.backgroundColor = "rgb("+
				elem.currentbgRGB[0]+","+
				elem.currentbgRGB[1]+","+
				elem.currentbgRGB[2]+")";
			actStep++;
			if (actStep > steps) window.clearInterval(elem.bgFadeMemInt);
		}
		,intervals)
}

function doFontFadeMem(elem,startRGB,endRGB,steps,intervals,powr) {
//BG Fader with Memory by www.hesido.com
	if (elem.bgFadeMemInt) window.clearInterval(elem.bgFadeMemInt);
	var actStep = 0;
	elem.bgFadeMemInt = window.setInterval(
		function() {
			elem.currentbgRGB = [
				easeInOut(startRGB[0],endRGB[0],steps,actStep,powr),
				easeInOut(startRGB[1],endRGB[1],steps,actStep,powr),
				easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)
				];
			elem.style.color = "rgb("+
				elem.currentbgRGB[0]+","+
				elem.currentbgRGB[1]+","+
				elem.currentbgRGB[2]+")";
			actStep++;
			if (actStep > steps) window.clearInterval(elem.bgFadeMemInt);
		}
		,intervals)
}

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

function doWidthChangeMem(elem,startWidth,endWidth,steps,intervals,powr) {
//Width changer with Memory by www.hesido.com
	if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
	var actStep = 0;
	elem.widthChangeMemInt = window.setInterval(
		function() {
			elem.currentWidth = easeInOut(startWidth,endWidth,steps,actStep,powr);
			elem.style.width = elem.currentWidth+"px";
			actStep++;
			if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
		}
		,intervals)

}

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

function doPosChangeMem(elem,startPos,endPos,steps,intervals,powr) {
//Position changer with Memory by www.hesido.com
	if (elem.posChangeMemInt) window.clearInterval(elem.posChangeMemInt);
	var actStep = 0;
	elem.posChangeMemInt = window.setInterval(
		function() {
			elem.currentPos = [
				easeInOut(startPos[0],endPos[0],steps,actStep,powr),
				easeInOut(startPos[1],endPos[1],steps,actStep,powr)
				];
			elem.style.left = elem.currentPos[0]+"px";
			elem.style.top = elem.currentPos[1]+"px";
			actStep++;
			if (actStep > steps) window.clearInterval(elem.posChangeMemInt);
		}
		,intervals)

}

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

function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
//Generic Animation Step Value Generator By www.hesido.com
	var delta = maxValue - minValue;
	var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
	return Math.ceil(stepp)
}