var debugEnabled = false;
var currentContentElement;
var lastScrollEventDelta;
var zooming = false;
var zoomCombined = 0;
var menuHeight  = 30;
var upperHeight = 125;
var shadowTones1;
var scrollActive = true;
var dropShadowSize = 12;

function d2h(d) { return d.toString(16); }
function h2d(h) { return parseInt(h,16); }
function hexZeroPad(v) { return v.length < 2 ? "0" + v : v; }
function rndBaseColor(l,u) { return hexZeroPad(d2h(Math.round(l + Math.random()*(u-l)))) };
function getRandomColor()  { return "#" + rndBaseColor(40,225) + rndBaseColor(40,225) + rndBaseColor(40,225); }
function pentaRoot(x) {	return Math.pow(x,0.2); }

function RGBtoHex(R,G,B) { return "#" + toHex(R)+toHex(G)+toHex(B) }

function initView() {
	if(currentContentElement != null) {
		currentContentElement.style.borderColor = "#999";
	}
	currentContentElement = $('contentContainerMainCell').firstDescendant();
	currentContentElement.style.borderColor = "#333";
	anim_scrollContentContainer('-800px','-750px');
}

function init() {
	
	//var bgRGB = $('contentContainer').getStyle('backgroundColor').match(/(\d+)/g);
	var bgRGB = [251,251,251];
	
	shadowTones1 = getShadowTones("#DDDDDD",RGBtoHex(bgRGB[0],bgRGB[1],bgRGB[2]),dropShadowSize);
	
	//modalShadeOff();
	
	new Draggable('contentContainer', { zindex: 10 });
	
	initView();
	
	// Pimp content windows, make sure links open in a new window and other
	// stuff
	$$('.contentWindowHeader').each( initContentWindowHeader );
	$$('.contentWindow').each( initContentWindow );
}

function initContentWindowHeader(element) {
	element.onclick = function() { zoomTo(element.up().id) };
}

function initContentWindow(element) {
	addTrimmings(element);
	setLinkchildrenTargets(element,"_BLANK");
}

/*
 * Set all link child target to blank
 */
function setLinkchildrenTargets(element,target) {
	var aList = $A(element.getElementsBySelector('a'));
	for(var i = 0; i < aList.length; i++) {
		aList[i].target = target;
	}
}

function setCurtainPositions() {
	var upperElement = $('upper');
	var lowerElement = $('lower');
	var lowerPos = lowerElement.cumulativeOffset();
	upperElement.style.height = lowerPos[1];
	lowerElement.style.height = lowerPos[1];
}

function elementColor(id) {
	dbg("Eid: " + id);
	if(id.indexOf('about') == 0) {
		return "#4B3437";
	} else if(id.indexOf('ref') == 0) {
		return "#FF3F21";
	} else if(id.indexOf('col') == 0) {
		return "#445652";
	}
}

function addTrimmings(element) {
	//var color = getRandomColor();
	var color = elementColor(element.id);
	setCornerStyle(element,color);
	//insertScrollIcons(element,color);
	addDropshadow(element,dropShadowSize,pentaRoot);
}

function setCornerStyle(element,color) {
	insertCorner(element,color);
	element.select('.contentWindowHeader').each(
		function(item) { item.style.borderBottomColor = color; }
	);
}

function insertCorner(element,color) {
	var pOffset = element.positionedOffset();
	
	// IE fix...
	if(navigator.userAgent.indexOf("MSIE") > 0) {
		pOffset[0]--;
		pOffset[1]--;
	}
	
	var d = document.createElement('img');
	d.style.position = "absolute";
	d.style.top  = pOffset[1] + "px";
	d.style.left = pOffset[0] + "px";
	d.style.width  = "19px";
	d.style.height = "19px";
	d.style.zIndex = "1000";
	d.src = "img/corner_generic_3px_bg4.PNG";
	d.style.background = color || "#F00";
    $('contentContainer').appendChild(d);
}

function insertScrollIcons(element,color) {
	var pOffset = element.positionedOffset();
	
	function createScrollFunc(id)      { return function() { zoomTo(id) }};
	function createMouseOverFunc(icon) { return function() { icon.style.backgroundColor = color }};
	function createMouseOutFunc(icon)  { return function() { icon.style.backgroundColor = "#FFF" }};

	var eWdth = 500;

	if(element.next()) {
		var divDown = document.createElement('div');
		divDown.style.position = "absolute";
		divDown.style.top  = ( 12 + pOffset[1]) + "px";
		divDown.style.left = (eWdth - 25 + pOffset[0]) + "px";
		divDown.style.width  = "19px";
		divDown.style.height = "19px";
		divDown.style.zIndex = "1000";
		divDown.className = "scrollDownButton";
		
		divDown.onclick = createScrollFunc(element.next().id);
		divDown.onmouseover = createMouseOverFunc(divDown);
		divDown.onmouseout  = createMouseOutFunc(divDown);
		$('contentContainer').appendChild(divDown);
		dbg("Created scroll down icon for " + element.id);
	}
	
	if(element.previous()) {
		var divUp = document.createElement('div');
		divUp.style.position = "absolute";
		divUp.style.top  = ( 12 + pOffset[1]) + "px";
		divUp.style.left = (eWdth + 2 + pOffset[0]) + "px";
		divUp.style.width  = "19px";
		divUp.style.height = "19px";
		divUp.style.zIndex = "1000";
		divUp.className = "scrollUpButton";
		
		divUp.onclick = createScrollFunc(element.previous().id);
		divUp.onmouseover = createMouseOverFunc(divUp,color);
		divUp.onmouseout  = createMouseOutFunc(divUp);
		$('contentContainer').appendChild(divUp);
		dbg("Created scroll up icon for " + element.id);
	}
}

function getIntermediateTone(t1,t2,index,num,transition) {
	dbg("git: " + t1 + "," + t2 + "," + num + ":" + ((t1-t2)/num));
	// dbg((t1-t2)/num);
	if(typeof transition != 'function') {
		transition = Effect.Transitions.sinoidal; // function(x) { return x;
													// };
	}
	return hexZeroPad(d2h(t1 + ( Math.round( Math.abs((index/num)*(t1-t2)) ))));
}
function getShadowTones(startColor, endColor, number) {
	var rStart = h2d(startColor.substr(1,2));
	var gStart = h2d(startColor.substr(3,2));
	var bStart = h2d(startColor.substr(5,2));	
	var rEnd = h2d(endColor.substr(1,2));
	var gEnd = h2d(endColor.substr(3,2));
	var bEnd = h2d(endColor.substr(5,2));
	// dbg(startColor.substr(1,2));
	dbg(rStart + "," + gStart + "," + bStart + ";" + rEnd + "," + gEnd + "," + bEnd);
	var shadowTones = [ number ];
	for ( var i = 0; i < number; i++) {
		shadowTones[i] =  "#" 	+ getIntermediateTone(rStart,rEnd,i,number, pentaRoot ) 
								+ getIntermediateTone(gStart,gEnd,i,number, pentaRoot ) 
								+ getIntermediateTone(bStart,bEnd,i,number, pentaRoot );
		dbg(shadowTones[i]);
	}
	
	return shadowTones;
	// dbg(rStart + "," + gStart + "," + bStart);
}

function addDropshadow(element, size) {
	var pOffset = element.positionedOffset();
	var elementDimensions = element.getDimensions();
	var dbgText = "Added dropshadow for " + element.id + ":";
	// var shadowTones = dropShadowColors2;
	var shadowTones = shadowTones1;
	for(var i = 1; i <= size; i++) {
		var d = document.createElement('div');
		d.style.zIndex = -100 + i;
		d.style.position = "absolute";
		d.style.backgroundColor = shadowTones[size-i];
		// d.style.backgroundColor = "#bbb";
		d.style.top  = (pOffset[1] + size + i) + "px";
		d.style.left = (pOffset[0] + size + i) + "px";
		d.style.width  = (elementDimensions.width  - 2*i) + "px";
		d.style.height = (elementDimensions.height - 2*i) + "px";
		$('contentContainer').appendChild(d);
		dbgText += i + "=" + shadowTones[i-1] + ";" + d.style.top + ";" + d.style.left + ",";
	}	
	//dbg(dbgText);
}

function addDropshadow_old(element) {
	var pOffset = element.positionedOffset();
	var elementDimensions = element.getDimensions();
	var dbgText = "Added dropshadow for " + element.id + ":";
	var shadowTones = shadowTones1;
	for(var i = 1; i <= 6; i++) {
		var d = document.createElement('div');
		d.style.zIndex = -100 - i;
		d.style.position = "absolute";
		d.style.backgroundColor = shadowTones[i-1];
		d.style.top  = (pOffset[1] + i) + "px";
		d.style.left = (pOffset[0] + i) + "px";
		d.style.width  = elementDimensions.width  + "px";
		d.style.height = elementDimensions.height + "px";
		$('contentContainer').appendChild(d);
		dbgText += i + "=" + shadowTones[i-1] + ";" + d.style.top + ";" + d.style.left + ",";
	}	
	//dbg(dbgText);
}

function anim_curtainsUp() {
	//anim_menuFade(0,0,0.1);
	new Effect.Morph('upper', {
		style: {
			//background: '#FFF',
			background: '#D5DAF3',
			height: '125px'
		},
		duration: 1
	});
	new Effect.Morph('lower', {
		style: {
			background: '#FFF',
			height: '0px'
		},
		duration: 0.75,
		afterFinish: removeCurtains
	});
}

function removeCurtains() {
	$('upper').hide();
	$('lower').hide();
}

function anim_menuUnfold(element) {
	dbg("Menu unfold:" + element.id);
		
	new Effect.Morph('logoMenu', {
		style: {
			width: '600px'
		},
		duration: 0.5
	});
}

function anim_menuFade(element, start, end, duration) {
	dbg("Menu fade:" + element.id);
	if(element.id == 'logo')
		return;
		
	new Effect.Morph('logoMenu', {
		style: {
			width: '116px'
		},
		duration: 0.5
	});
}

function zoomTo(id) {
    if(zooming) {
        dbg("Already zooming");
        return;
    } else {
        zooming = true;
    }
    
	if(currentContentElement != null) {
		if(false && id == currentContentElement.id) {
			return;
		} else {
			//currentContentElement.fade({ duration: 0.5, to: 0.5 });
			currentContentElement.style.borderColor = "#999";
		}
	}
	
	currentContentElement = $(id);
	
	// currentContentElement.fade({ duration: 0.5, to: 0.999 });
	currentContentElement.style.borderColor = "#333";
	var elementOffsets = currentContentElement.cumulativeOffset();
	var containerOffsets = $('contentContainer').cumulativeOffset();
	var leftPos = 0.5*(document.viewport.getWidth() - 600 - 30) - elementOffsets[0];
	var  topPos = 2*menuHeight + upperHeight - elementOffsets[1];
	
	var leftTargetPos = (containerOffsets[0] + leftPos) + "px";
	var topTargetPos  = (containerOffsets[1] +  topPos) + "px";
	
	anim_scrollContentContainer(leftTargetPos, topTargetPos);
}

function zoomToNext() {

    try {
        zoomTo($(currentContentElement).next().id);
    } catch(error) {
    	// Bottom reached, clear zoom queue and scroll normally further on
    	zoomCombined = 0;
    	$('contentContainer').style.top = (10*lastScrollEventDelta + $('contentContainer').cumulativeOffset()[1]) + "px";
    }
}

function zoomToPrev() {

    try {
        zoomTo($(currentContentElement).previous().id);
    } catch(error) {
        
    }
}

function zoomToLeft() {
	
	try {
		var currentContentElementTop = $(currentContentElement).viewportOffset().top;
		var leftContentElements = $(currentContentElement).up().previous().immediateDescendants();
		
		leftContentElements.sort(function(a,b) {
			function s(e) {
				return Math.abs(e.viewportOffset().top - currentContentElementTop) + Math.abs(e.viewportOffset().top - document.viewport.getHeight()/2);
			}
			return s(a) - s(b);
		});
		
		zoomTo(leftContentElements[0].id);		
	} catch(error) {
		
	}
}

function zoomToRight() {
	
	try {
		var currentContentElementTop = $(currentContentElement).viewportOffset().top;
		var leftContentElements = $(currentContentElement).up().next().immediateDescendants();
		
		leftContentElements.sort(function(a,b) {
			function s(e) {
				return Math.abs(e.viewportOffset().top - currentContentElementTop) + Math.abs(e.viewportOffset().top - document.viewport.getHeight()/2);
			}
			return s(a) - s(b);
		});
		
		zoomTo(leftContentElements[0].id);
	} catch(e) {
		
	}
}

function anim_scrollContentContainer(leftTargetPos, topTargetPos) {
	new Effect.Morph('contentContainer', {
		style: {
			'left': leftTargetPos,
			'top':  topTargetPos
		},
		duration: 0.5, //*(Math.abs(currentContentItemNumber - num)),
		transition: pentaRoot,
		afterFinishInternal: function() { 
			dbg("Releasing zoom..."); 
			zooming = false; 
			if(zoomCombined != 0) {
				if(zoomCombined < 0) {
					zoomCombined++;
					zoomToNext();
				} else {
					zoomCombined--;
					zoomToPrev();
				}
			}
		}
	});
}

function modalShadeOn() {
	scrollActive = false;
	var modalShadeElement = $('modalShade');
	modalShadeElement.style.width  = "100%";
	modalShadeElement.style.height = "100%";
	modalShadeElement.style.top  = "0px";
	modalShadeElement.style.left = "0px";
	modalShadeElement.style.zIndex = "20000";
	modalShadeElement.style.opacity = 0.5;
	modalShadeElement.style.visbility = "visible";
}

function modalShadeOff() {
	scrollActive = true;
	var modalShadeElement = $('modalShade');
	modalShadeElement.style.visbility = "hidden";
}

function restrictInteger(value, lower, upper) {
	if(value < lower) {
		return lower;
	} else if(value > upper) {
		return upper;
	} else {
		return value;
	}
}

function onScroll(e) {
	if(scrollActive) {
		$('contentContainer').style.left = restrictInteger(50*Event.scrollDeltaX(e) + $('contentContainer').cumulativeOffset()[0],-1500, -600) + "px";
		$('contentContainer').style.top  = restrictInteger(50*Event.scrollDeltaY(e) + $('contentContainer').cumulativeOffset()[1],-2200, -620) + "px";
	}
}

function onKeyPressed(e) {
	dbg("key");
	switch(e.keyCode) {
		case Event.KEY_UP: 		zoomToPrev();
								Event.stop(e);
								break;
		case Event.KEY_DOWN: 	zoomToNext();
								lastScrollEventDelta = -2;
								Event.stop(e);
								break;
		case Event.KEY_RIGHT:	zoomToRight();
								Event.stop(e);
								break;
		case Event.KEY_LEFT: 	zoomToLeft();
								Event.stop(e);
								break;
								
	}
}

function dbg(msg) {
	if(debugEnabled) {
		$('debug').style.display = "";
		$('debug').innerHTML = msg + "<br/>" + $('debug').innerHTML;		
	}
}

function dbgObject(obj) {
	for(var i in obj) {
		dbg(i);
	}
}

function toHex(N) {
	if (N == null) return "00";
	N = parseInt(N); 
	if (N == 0 || isNaN(N)) 
		return "00";
		
	N = Math.max(0,N); 
	N = Math.min(N,255); 
	N = Math.round(N);
	
	return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
}

/*
 * Original: http://adomas.org/javascript-mouse-wheel/
 * prototype extension by "Frank Monnerjahn" themonnie @gmail.com
 * - Multi-axis scroll added by Frederik Hannibal frederik@backhand.dk
 */

 Object.extend(Event, {
	scrollDeltaY: function(event) {
	 var delta = 0;
		if (!event) event = window.event;
		if(event.axis != null && event.axis == event.VERTICAL_AXIS) {
			return Event.getDelta(event);
		} else if(event.wheelDeltaY) {
			return event.wheelDeltaY/120;
		} else {
			return 0;
		}
 	},
 	scrollDeltaX: function(event) {
 		var delta = 0;
 		if (!event) event = window.event;
 		if(event.axis != null && event.axis == event.HORIZONTAL_AXIS) {
 			return Event.getDelta(event);
 		} else if(event.wheelDeltaX) {
 			return event.wheelDeltaX/120;
 		} else {
 			return 0;
 		}
 	},
 	getDelta: function(event) {
 		var delta = 0;
		
		if (!event) event = window.event;
		if (event.wheelDelta) {
			delta = event.wheelDelta/120;
			if (window.opera) delta = -delta;
		} else if (event.detail) { 
			delta = -event.detail/3;
		}
		
		return delta;
 	}
});
/*
 * end of extension
 */

Event.observe(window,'load',  init);
Event.observe(document, 'keypress', onKeyPressed, false);
Event.observe(document, "mousewheel", onScroll, false);
Event.observe(document, "DOMMouseScroll", onScroll, false);