/**
 *  Fade In  / Out
 */

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for (i = opacStart; i <= opacEnd; i++) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
	if (opacity == 0) {
		document.getElementById(id).style.display='none';
	}
	else {
		if (opacity == 1) {
			document.getElementById(id).style.display='block';
			if (id=='googleMap') {
				map.checkResize();
			}
		}
		var object = document.getElementById(id).style;
		var opacity2 = opacity / 100;
		object.opacity = (opacity2);
		object.MozOpacity = (opacity2);
		object.KhtmlOpacity = (opacity2);
		object.filter = "alpha(opacity=" + opacity + ")";
	}
}

/**
 *          WINDOW FUNCTIONS
 */
 
var lastWinID = "";

function switchContentPanel (currentID, newID) {
	var current = document.getElementById (currentID);
	var next = document.getElementById (newID);

	if (current) {
		current.style.display = 'none';
	}
	if (next) {
		next.style.display = 'block';
	}
}

function toggleWindow (id) {
	if (id == '')
		return;
		
	if (lastWinID == id) {
		toggleVisibility (lastWinID);
		lastWinID = '';
		return;
	}
	
	if (lastWinID != '') {
		toggleVisibility (lastWinID);
	}
	
	toggleVisibility (id);
	lastWinID = id;
}

function toggleVisibility (id) {
	var elem = document.getElementById (id);

	if (elem.style.display == 'block') {
		if (id == 'panelService') {
			document.getElementById('panelServiceContentOverview').style.display = 'block';
			document.getElementById('panelServiceContentViessmann').style.display = 'none';
			document.getElementById('panelServiceContentWeishaupt').style.display = 'none';
			document.getElementById('panelServiceContentFroeling').style.display = 'none';
			document.getElementById('panelServiceContentKoerting').style.display = 'none';
		}
		document.getElementById(id + "Content").scrollTop = 0;
		opacity(id, 85, 0, 1000);
		/*elem.style.display = 'none';*/
	} else {
		elem.style.display = 'block';
		opacity(id, 1, 85, 1500);
	}
}

/** 
 *           SLIDE ANIMATION
 */

expandedWidth = 525;
normalWidth = 206;

isLocked = false;

function toggleAnimationLock() {
	if (isLocked == false) {
		isLocked = true;
	} else {
		isLocked = false;
	}
}

buttonElements = new Array();

function doButtonActionWithPanelID (panID) {
	var i = 0;
	var length = buttonElements.length;
	for (; i < length; ++i) {
		if (buttonElements[i].panel.id == panID)
			break;
	}
	if (i == length)
		return;
	
	buttonElements[i].onclick(true);
}
lastButton = '';

function buttonDoWidthRestore() {
	if (!this.slide) /* && lastButton == this.slide*/
		return;
	this.slide.onmouseout(false);
}

lastOther='';

function toggleOtherFrame(id, otherName, forceClose) {
	if (id == '' || (lastOther == otherName && forceClose != true)) {
		return;
	}

	toggleWindow (id);
	toggleAnimationLock();
		
	if (lastButton != '' && lastButton != 'noAnimButton') {
		lastButton.onmouseout = buttonDoWidthRestore;
		lastButton.onmouseout();
		lastButton.style.color = '#5e5e5e';

		toggleAnimationLock();
		lastButton = 'noAnimButton';
	} else if (lastButton=='noAnimButton') {
		if (lastOther == otherName) {
			lastButton = '';
		} else {
			toggleAnimationLock();
			lastButton = 'noAnimButton';
		}
	} else {
		lastButton = 'noAnimButton';
	}

	if (lastOther!='' && document.getElementById(lastOther).style.color != '#5e5e5e')
		document.getElementById(lastOther).style.color = '#5e5e5e';

	var elem = document.getElementById(lastOther);
		
	if (lastOther != otherName || elem.style.color == '#5e5e5e')
		document.getElementById(otherName).style.color = '#9f3d2c';

	if (lastOther==otherName)
		lastOther = '';
	else
		lastOther = otherName;
}

function initAnims() {
	var animElements = document.getElementById("slideContainer").getElementsByTagName("div");
	
	var panelIDs = new Array();
	panelIDs[0] = "panelService";
	panelIDs[1] = "panelPortrait";
	panelIDs[2] = "panelTechnik";
	panelIDs[3] = "panelKontakt";
	
	var length = animElements.length;
	
	for (var i = 0; i < length; i++) {
		animElements[i].onmouseover = widthChange;
		animElements[i].onmouseout = widthRestore;
		
		animElements[i].q = Math.floor((i / (length - 1)) * 1000) / 1000;
		animElements[i].defaultPos = animElements[i].offsetLeft;
		animElements[i].currentPos = animElements[i].offsetLeft;
		animElements[i].style.left = animElements[i].offsetLeft + "px";
	}
	
	var panelElements = new Array();
	length = panelIDs.length;
	for (var i = 0; i < length; ++i) {
		panelElements[i] = document.getElementById(panelIDs[i]);
	}
	delete panelIDs;
	
	buttonElements = document.getElementById("buttonContainer").getElementsByTagName("a");

	length = buttonElements.length;
	for (var i = 0; i < length; i++) {
		buttonElements[i].onmouseover = buttonDoWidthChange;
		buttonElements[i].onmouseout = buttonDoWidthRestore;
		
		buttonElements[i].slide = animElements[i];
		buttonElements[i].panel = panelElements[i];
		
		buttonElements[i].onclick = doButtonAction;
		buttonElements[i].slideIndex = i;
	}
	
	function doButtonAction(forceAnim) {
		if (lastButton == this && forceAnim != true)
			return;

		toggleWindow (this.panel.id);
		toggleAnimationLock();
	
		if (lastButton == this) {
			this.onmouseout = buttonDoWidthRestore;
			this.onmouseout();
			this.style.color = '#5e5e5e';
			lastButton = '';
		} else {
			this.onmouseout = '';
			if (lastButton != '' && lastButton != 'noAnimButton') {
				lastButton.onmouseout = buttonDoWidthRestore;
				lastButton.onmouseout();
				lastButton.style.color = '#5e5e5e';
				this.onmouseover();
				toggleAnimationLock();
			} else if (lastButton == 'noAnimButton') {
				if (lastOther!='')
					document.getElementById(lastOther).style.color = '#5e5e5e';
				lastOther='';
				this.onmouseover();
				toggleAnimationLock();
			}
			lastButton = this;
			this.style.color = '#9f3d2c';
		}
	}

	function doWidthChange() {
		this.widthChange();
	}

	function doWidthRestore() {
		this.widthRestore();
	}
	
	function buttonDoWidthChange() {
		if (!this.slide)
			return;
		this.slide.onmouseover(false);
	}
	
	function CascadeExpand(obj) {
		var v=false; /* if we have visited our current object, then save the state, because we no longer have to increase
		                                    * the zIndex */
		for (var i = animElements.length - 1; i >= 0; --i) {
			if (animElements[i] != obj) {
				var z = (!v) ? '20'-i : '20';
				animElements[i].onmouseover(false, z, false, true, obj.q);
			} else {
				v = true;
			}
		}
	}
	
	function CascadeCompress(obj) {
		var v=false; /* if we have visited our current object, then save the state, because we no longer have to increase
		                                    * the zIndex */
		for (var i = animElements.length - 1; i >= 0; --i) {
			if (animElements[i] != obj) {
				var z = (v) ? '20'+i : '20'-i;
				animElements[i].onmouseout(false, z, false);
			} else {
				v = true;
				obj.style.zIndex = '5000';
			}
		}
	}
	
	function widthChange(ignoreLock, zIndex, cascade, doMove, cascaderQ) {
		if (isLocked && ignoreLock != true)
			return;
			
		if (!this.currentWidth)
			this.currentWidth = normalWidth;

		if (!zIndex) {
			this.style.zIndex = "30";
		} else {
			this.style.zIndex = zIndex;
		}

		var startPos = this.currentPos;
		var endPos = 0;
		var endWidth = 0;
		
		if (doMove) {
			endWidth = 100;
			/* GRRRRR, dynamic approach is driving me crazy.. now for a static modell.. */
			startPos = this.currentPos;

			switch (this.q) {
			case 0:
				endPos = this.defaultPos;
				break;
			case 0.333:
				if (cascaderQ > 0.333) // move left
					endPos = this.defaultPos - normalWidth + endWidth;
				else // move right
					endPos = this.defaultPos - normalWidth + expandedWidth;
				break;
			case 0.666:
				if (cascaderQ > 0.666) // move left
					endPos = this.defaultPos - 2 * normalWidth + 2*endWidth;
				else // move right
					endPos = this.defaultPos + 2* normalWidth - 2*endWidth;
				break;
			case 1:
				endPos = this.defaultPos + endWidth;
				break;
			}
		} else {
			endWidth = expandedWidth;
			startPos = this.currentPos;
			endPos = this.defaultPos - (expandedWidth - normalWidth)  * this.q;
		}
		//doWidthChangeMem(this, this.currentWidth, endWidth, startPos, endPos, 100, 20, 0.5);
		doWidthChangeMem(this, this.currentWidth, endWidth, startPos, endPos, 35, 10, 0.7);
		
		if (cascade != false) {
			CascadeExpand(this);
		}
	} 

	function widthRestore(ignoreLock, zIndex, cascade) { 
		if (isLocked && ignoreLock != true)
			return;

		if (!this.currentWidth)
			return;

		var startPos = this.currentPos;
		var endPos = this.defaultPos;
		
		if (zIndex) {
			this.style.zIndex = zIndex;
		}
		else {
			this.style.zIndex = "10";
		}
		if (cascade != false) {
			CascadeCompress(this);
		}
		//doWidthChangeMem(this, this.currentWidth, normalWidth, startPos, endPos, 100, 20, 1.5);
		doWidthChangeMem(this, this.currentWidth, normalWidth, startPos, endPos, 35, 10, 0.7);
	}
}

/*
elem: element that we're going to animate
startWidth: starting width of animation
endWidth: target width of animation
steps: total steps of animation
intervals: intervals the animation will be done in miliseconds
powr: value used for determining ease-in and out.
----
elem.widthChangeMemInt: The interval animation value for self inhibition.
elem.currenWidth: The objects 'memory' of its last set width.
actstep: actual step of the animation, increased 1 per every execution.
*/

// Width changer inspired by www.hesido.com !

function easeInOut(minValue, maxValue, steppPwr) { 
	var stepp = minValue + (steppPwr * (maxValue - minValue)); 
	return Math.ceil(stepp);
}

function doWidthChangeMem (elem, startWidth, endWidth, startPosX, endPosX, steps, intervals, powr) { 
	if (elem.widthChangeMemInt)
		window.clearInterval(elem.widthChangeMemInt);

	function calcEaseInOutStepPwr (totalSteps, actualStep, powr) {
		return Math.pow(((1 / totalSteps) * actualStep), powr);
	}
		
	var actStep = 0;
	elem.widthChangeMemInt = window.setInterval(
		function () {
			var steppPwr = calcEaseInOutStepPwr(steps, actStep, powr);
			elem.currentWidth = easeInOut(startWidth, endWidth, steppPwr);
			elem.currentPos = easeInOut(startPosX, endPosX, steppPwr);
			
			var x = elem.style;
			x.width = elem.currentWidth + "px";
			x.left = elem.currentPos + "px";
			actStep++;

			if (actStep > steps) {
				window.clearInterval(elem.widthChangeMemInt);
				x.width = endWidth;
				if (endWidth < startWidth)
					x.zIndex = "0";
			}
		}, intervals);
}