// height: 192px; (in elke browser hetzelfde gelukkig :D), 1 item = 23 pixels.
var maxAnimationTime = 600;
var blurTimeout = 1000;

function init() {
	resize();
	initMainmenu();
	menu2 = document.getElementById("more_categories");
	menu2.direction = false; // true = openen, false = sluiten. (we starten met sluiten aangezien hij gesloten is)
	menu2.maxHeight = ((Math.ceil(document.getElementById("more_cat_list").getElementsByTagName("a").length/2+1)) * 24) + 40;
	menu2.style.height = "0px";
	//alert(navigator.appVersion);
	if(navigator.appVersion.indexOf("MSIE 8.0;") > 0) {
		document.getElementById("more_categories").style.top = "330px";
	}
	if(navigator.appVersion.indexOf("MSIE 7.0;") > 0) {
		document.getElementById("more_categories").style.top = "294px";
	}

}

function resize() {
/*	if(navigator.appVersion.indexOf("MSIE") > 0) {
		var myWidth = 0;
		if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			myWidth = document.documentElement.clientWidth;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			myWidth = document.body.clientWidth;
		}
		myWidth-= 1000;
		if(myWidth > 0){
			l = Math.round(myWidth/2); */
			document.getElementById("more_categories").style.left = "0px";
/*		}
	}*/
}

window.onresize = resize;

function initMainmenu() {
	menuitems = document.getElementById("categories").getElementsByTagName("a");
	nrOfItems = 0;	
	for(i=0; i < menuitems.length-1; i++) {
		if (nrOfItems > 3) { // deze 3 items is maar een gokje aangezien we niet weten hoe groot elke knop wordt
			document.getElementById("menu").removeChild(menuitems[i]);
		} else {
			if(menuitems[i].innerHTML.length > 20) {
				document.getElementById("menu").removeChild(menuitems[i]);
			} else {
				nrOfItems++;
			}
		}
	}
	
}

function toggleMenu(id, menuTop) {
	// get the corresponding div element ;)
	menu2 = document.getElementById(id);

	menu2.style.top = (menuTop + 34)+"px";

	// if it is animating, it should be stopped first!
	clearTimeout(menu2.timeout);
	clearTimeout(menu2.blurtimeout);

	// check the current size
	height = parseInt(menu2.style.height);
	
	// switch the direction
	menu2.direction = !menu2.direction;
	
	if (!menu2.direction) {
		height = menu2.maxHeight-height;
	}
	
	//alert(height);
	// calculate how much time is already passed if it is half open
	// 
	passedTime = ((maxAnimationTime/menu2.maxHeight) * height);
	//alert(passedTime);
	now = new Date();
	menu2.startTime = Math.round(now.getTime()-passedTime);
	animate(id);
}

function blurMenu(id) {
	// get the corresponding div element ;)
	menu2 = document.getElementById(id);
	clearTimeout(menu2.blurtimeout);
	if(!menu2.direction) return;
	menuTimeout = blurTimeout;
	now = new Date();
	if((now.getTime()-menu2.startTime) > maxAnimationTime) {
		// it is animating
		menuTimeout += (maxAnimationTime - (now.getTime()-menu2.startTime));
	}
	menu2.blurtimeout = setTimeout("blur('" + id + "');", menuTimeout);
}

function blur(id) {
	menu2 = document.getElementById(id);
	height = parseInt(menu2.style.height);
	clearTimeout(menu2.blurtimeout);
	menu2.direction = false;
	now = new Date();
	menu2.startTime = Math.round(now.getTime());
	animate(id);
}

function sleep(milisec) {
	now = new Date();
	milisec += now.getTime();
	while (milisec > now.getTime()) {
		now = new Date();
	}
}

function focusMenu(id) {
	sleep(50);
	menu2 = document.getElementById(id);
	clearTimeout(menu2.blurtimeout);

}


function animate(id) {
//		alert("yeah");

	// get the corresponding div element ;)
	menu2 = document.getElementById(id);
	
	// calculate how big it's supposed to be
	now = new Date();
	// time = hoelang is de animatie al bezig.
	time = (now.getTime() - menu2.startTime);
	time+=1;
	time = ((((Math.cos((time/maxAnimationTime)*Math.PI)*-1)+1)/2)*(((Math.cos((time/maxAnimationTime)*Math.PI)*-1)+1)/2))*maxAnimationTime;

	if (menu2.direction) {
		// als 'ie aan het openklappen is
		// als ik het met cosinus doe moet ik van -0,5*pi tot +0,5*pi gaan om te kijken hoever ie is
		// dus percentage -0,5*pi
		
		height = Math.round(((menu2.maxHeight/(maxAnimationTime))*time));	
	} else {
		// als ie juist aan het dichtklappen is
		height = menu2.maxHeight - Math.round(((menu2.maxHeight)/maxAnimationTime)*time);
		//alert(height);
	}
	
//	alert(height);

	if((height > menu2.maxHeight-3) && menu2.direction) {
		menu2.style.height = menu2.maxHeight+"px";
	} else if ((height < 4) && !menu2.direction) {
		menu2.style.height = "0px";
	} else {
		menu2.style.height = height+"px";
		menu2.timeout = setTimeout("animate('" + id + "');", 3);
	}
}
	// height: 192px; (in elke browser hetzelfde gelukkig :D), 1 item = 23 pixels.
var maxAnimationTime = 600;
var blurTimeout = 1000;

function init() {
	resize();
	initMainmenu();
	menu2 = document.getElementById("more_categories");
	menu2.direction = false; // true = openen, false = sluiten. (we starten met sluiten aangezien hij gesloten is)
	menu2.maxHeight = ((Math.ceil(document.getElementById("more_cat_list").getElementsByTagName("a").length/2+1)) * 24) + 40;
	menu2.style.height = "0px";
	//alert(navigator.appVersion);
	if(navigator.appVersion.indexOf("MSIE 8.0;") > 0) {
		document.getElementById("more_categories").style.top = "330px";
	}
	if(navigator.appVersion.indexOf("MSIE 7.0;") > 0) {
		document.getElementById("more_categories").style.top = "294px";
	}

}

function resize() {
/*	if(navigator.appVersion.indexOf("MSIE") > 0) {
		var myWidth = 0;
		if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			myWidth = document.documentElement.clientWidth;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			myWidth = document.body.clientWidth;
		}
		myWidth-= 1000;
		if(myWidth > 0){
			l = Math.round(myWidth/2); */
			document.getElementById("more_categories").style.left = "0px";
/*		}
	}*/
}

window.onresize = resize;

function initMainmenu() {
	menuitems = document.getElementById("categories").getElementsByTagName("a");
	nrOfItems = 0;	
	for(i=0; i < menuitems.length-1; i++) {
		if (nrOfItems > 3) { // deze 3 items is maar een gokje aangezien we niet weten hoe groot elke knop wordt
			document.getElementById("menu").removeChild(menuitems[i]);
		} else {
			if(menuitems[i].innerHTML.length > 20) {
				document.getElementById("menu").removeChild(menuitems[i]);
			} else {
				nrOfItems++;
			}
		}
	}
	
}

function toggleMenu(id, menuTop) {
	// get the corresponding div element ;)
	menu2 = document.getElementById(id);

	menu2.style.top = (menuTop + 34)+"px";

	// if it is animating, it should be stopped first!
	clearTimeout(menu2.timeout);
	clearTimeout(menu2.blurtimeout);

	// check the current size
	height = parseInt(menu2.style.height);
	
	// switch the direction
	menu2.direction = !menu2.direction;
	
	if (!menu2.direction) {
		height = menu2.maxHeight-height;
	}
	
	//alert(height);
	// calculate how much time is already passed if it is half open
	// 
	passedTime = ((maxAnimationTime/menu2.maxHeight) * height);
	//alert(passedTime);
	now = new Date();
	menu2.startTime = Math.round(now.getTime()-passedTime);
	animate(id);
}

function blurMenu(id) {
	// get the corresponding div element ;)
	menu2 = document.getElementById(id);
	clearTimeout(menu2.blurtimeout);
	if(!menu2.direction) return;
	menuTimeout = blurTimeout;
	now = new Date();
	if((now.getTime()-menu2.startTime) > maxAnimationTime) {
		// it is animating
		menuTimeout += (maxAnimationTime - (now.getTime()-menu2.startTime));
	}
	menu2.blurtimeout = setTimeout("blur('" + id + "');", menuTimeout);
}

function blur(id) {
	menu2 = document.getElementById(id);
	height = parseInt(menu2.style.height);
	clearTimeout(menu2.blurtimeout);
	menu2.direction = false;
	now = new Date();
	menu2.startTime = Math.round(now.getTime());
	animate(id);
}

function sleep(milisec) {
	now = new Date();
	milisec += now.getTime();
	while (milisec > now.getTime()) {
		now = new Date();
	}
}

function focusMenu(id) {
	sleep(50);
	menu2 = document.getElementById(id);
	clearTimeout(menu2.blurtimeout);

}


function animate(id) {
//		alert("yeah");

	// get the corresponding div element ;)
	menu2 = document.getElementById(id);
	
	// calculate how big it's supposed to be
	now = new Date();
	// time = hoelang is de animatie al bezig.
	time = (now.getTime() - menu2.startTime);
	time+=1;
	time = ((((Math.cos((time/maxAnimationTime)*Math.PI)*-1)+1)/2)*(((Math.cos((time/maxAnimationTime)*Math.PI)*-1)+1)/2))*maxAnimationTime;

	if (menu2.direction) {
		// als 'ie aan het openklappen is
		// als ik het met cosinus doe moet ik van -0,5*pi tot +0,5*pi gaan om te kijken hoever ie is
		// dus percentage -0,5*pi
		
		height = Math.round(((menu2.maxHeight/(maxAnimationTime))*time));	
	} else {
		// als ie juist aan het dichtklappen is
		height = menu2.maxHeight - Math.round(((menu2.maxHeight)/maxAnimationTime)*time);
		//alert(height);
	}
	
//	alert(height);

	if((height > menu2.maxHeight-3) && menu2.direction) {
		menu2.style.height = menu2.maxHeight+"px";
	} else if ((height < 4) && !menu2.direction) {
		menu2.style.height = "0px";
	} else {
		menu2.style.height = height+"px";
		menu2.timeout = setTimeout("animate('" + id + "');", 3);
	}
}