/* Helping the navbar understand where we are at */
var urlbase = "http://www.fantasien.net/bastian/";
var urlsub = new Array("welcome","aboutme","mylife","likes","photos","thoughts","projects","travels","links","test");

/* Keeping track of what is selected and hovered */
var selectedNav;	/* nav item for this page */
var hoveredNav;		/* nav item being hovered over */

/* Variables controlling the animation */
var animFrames = 30;	// higher numbers make processor delays noticeable
var delaySize = 70;		// milliseconds between frames
var delayAccel = 5;		// milliseconds of acceleration
var delayInit = 0;		// milliseconds of delay before animation starts
var halfAnim = false;	// hovering half animations

/* Starting and ending values */
var minNavWidth = 125;
var maxNavWidth = 160;
var startNavColors = new Array (48,48,176);
var endNavColors = new Array (96,96,224);

function delay (gap) {	/* gap is in millisecs */
	var now, then;

	if (gap > 0) {
		now = new Date().getTime();
		then = now;		/* when will then be now?  soon! */

		while( (now - then) < gap ) {
			now = new Date().getTime();
		}
	}
}

function makeColorHex (colorarray) {
	var hexarray = new Array (3);

	for (var i = 0; i < 3; i++) {
		hexarray[i] = parseInt(colorarray[i]).toString(16);
		if (hexarray[i].length < 2) {
			hexarray[i] = "0" + hexarray[i];
		}
	}

	return hexarray[0]+hexarray[1]+hexarray[2];
}

/*
handleNavAnim will expand the width of the navigational links.  Unfortunately, this code is not mature enough to handle the half animations for the onmouseover event handlers, so it has been disabled.  The main problem is that I cannot abort the animation when there is an onmouseout.
*/

function handleNavAnim (obj,isExpanding) {
	var frames = animFrames;
	var delayTmp = delaySize;
	var colorCurr = new Array (3);
	var colorDelta = new Array (3);

	/* only do half animation if we are hovering */
	if (obj != selectedNav) {
		frames = frames / 2;
	} else {
		delay (delayInit);
	}

	for (var i=0; i < 3; i++) {
		colorCurr[i] = startNavColors[i];
		colorDelta[i] = (endNavColors[i] - startNavColors[i]) / frames;
	}

	if (isExpanding) {
		for (j = 0; j < frames; j++) {
			if (obj != selectedNav && obj != hoveredNav) {
				break;
			}
			for (i=0; i < 3; i++) {
				colorCurr[i] = parseFloat(colorCurr[i]) + parseFloat(colorDelta[i]);
			}
			obj.style.backgroundColor = "#" + makeColorHex(colorCurr);
			width = minNavWidth + Math.floor ( (maxNavWidth - minNavWidth) / animFrames * j);
			obj.style.width = width + "px";
			delay (delayTmp);
			delayTmp -= delayAccel;
			if (delayTmp < 1) {
				delayTmp = 1;
			}
		}
		/* Make sure we end on end colors in case of rounding errors */
		for (i=0; i < 3; i++) {
			colorCurr[i] = endNavColors[i];
		}
		obj.style.backgroundColor = "#" + makeColorHex(colorCurr);
	} else {
		for (j = frames; j > 0; j--) {
			if (obj != selectedNav && obj != hoveredNav) {
				break;
			}
			for (i=0; i < 3; i++) {
				colorCurr[i] += parseInt(colorDelta[i]);
			}
			obj.style.backgroundColor = "#" + makeColorHex(colorCurr);
			width = minNavWidth + Math.floor ( (maxNavWidth - minNavWidth) / animFrames ) * j;
			obj.style.width = width + "px";
			delay (delayTmp);
			delayTmp -= delayAccel;
			if (delayTmp < delayAccel) {
				delayTmp = delayAccel;
			}
		}
	}
}

function handleNavOver () {
	if (this != selectedNav) {
		hoveredNav = this;
		if (halfAnim) {
			handleNavAnim (this, true);
		}
		this.style.backgroundColor = "#" + makeColorHex(endNavColors);
	}
}

function handleNavOut () {
	if (this != selectedNav) {
		this.style.width = minNavWidth;
		this.style.backgroundColor = "#" + makeColorHex(startNavColors);
	}
}

function estNavHovers () {
	var obj;

	for (var i = 0; i < urlsub.length; i++) {
		if (obj = document.getElementById(urlsub[i])) {
			if (obj.addEventListener) {
				obj.addEventListener ('mouseover',handleNavOver,false);
				obj.addEventListener ('mouseout',handleNavOut,false);
			}
//			obj.onmouseover = 'handleNavHover (this,true);';
//			obj.onmouseout = 'handleNavHover (this,false);';
		}
	}
}

function contextualnav() {
	var obj, i, j, width;

	estNavHovers ();

	if (location.href == urlbase) {
		if (obj = document.getElementById("welcome")) {
			selectedNav = obj;	/* store this for later */
			handleNavAnim (obj,true);
		}
	} else {
		for (i = 0; i < urlsub.length; i++) {
			if (obj = document.getElementById(urlsub[i])) {
				if (location.href.indexOf(urlbase+urlsub[i]) == 0) {
					selectedNav = obj;	/* store this for later */
					handleNavAnim (obj,true);
				} else {
					obj.style.backgroundColor = "#" + makeColorHex(startNavColors);
					obj.style.width = minNavWidth + "px";
				}
			}
		}
	}
}

window.onload = contextualnav;