/**
 * Tab menu
 * by Philipp Klose
 * philipp.klose@byteanvil.com
 */

 function tabmenu() {
	
	
	var menuitemcontaineridname = "colortab"; //id of the container holding the unsorted list with all menuitems
	var currentmenuitemid = "current"; //id of the listitem which is currently selected
	
	var submenuclass = "menu-catbox-default"; //class of a divcontainer holding a submenu
	var activesubmenuclass = "menu-catbox-active"; //class of the divcontainer holding current submenu
	
	var delay = 500; //delay before submenu will appear
	
	/*
		DO NOT EDIT BELOW	
	*/
	
	var items = new Array(); //stores the menu items
	var subs = new Array(); //stores the submenus in order of menuitems
	var states = new Array(); //stores  the states
	var mindelay = 50;
	
	this.init = function() {
	
		//getting menuitems
		var current = document.getElementById(menuitemcontaineridname);

		for (var i in current.childNodes) //getting the ul tag
			if (current.childNodes[i].nodeType==1)
				break;
		var ul = current.childNodes[i];

		for (i=0;i<ul.childNodes.length;i++) { //getting tags within ul tag
			if (ul.childNodes[i].nodeType==1)
				items.push(ul.childNodes[i]);
			if (ul.childNodes[i].id==currentmenuitemid)
				selected=items.length-1;
		}

		//getting submenus
		var node=current.parentNode;
		for (i=0;i<node.childNodes.length;i++) {
			if (node.childNodes[i].className==submenuclass) {
				subs.push(node.childNodes[i]);
			}
			if (node.childNodes[i].className==activesubmenuclass) {
				subs.push(node.childNodes[i]);
			}
			
		}
		
		for (i=0;i<subs.length;i++)
			states[i]=0;
		
		//init  eventhandler
		for (i in items) {

			items[i].setAttribute("internalid","menuitem"+i);
			
			items[i].onmouseover = function () {
		
				id = parseInt(this.getAttribute("internalid").replace("menuitem",""));
				states[id]=1;
				items[id].className="selected";
				window.setTimeout(function() { showmenu(id); },delay<mindelay?mindelay:delay);
//				console("over "+id);
			}
			
			items[i].onmouseout = function () {
				id = parseInt(this.getAttribute("internalid").replace("menuitem",""));
				states[id]=2;
				items[id].className="";
				window.setTimeout(function() { hidemenu(id); },delay<mindelay?mindelay+30:delay+30);
				//console("out "+id);
			}
			
		}
		
		for (i in subs) {
			subs[i].setAttribute("internalid","submenu"+i);
			
			subs[i].onmouseover = function () {
				id = parseInt(this.getAttribute("internalid").replace("submenu",""));
				states[id]=1;
				items[id].className="selected";
				window.setTimeout(function() { showmenu(id); },delay<mindelay?mindelay:delay);
			}
			
			subs[i].onmouseout = function() {
				id = parseInt(this.getAttribute("internalid").replace("submenu",""));
				states[id]=2;
				items[id].className="";
				window.setTimeout(function() { hidemenu(id); },delay<mindelay?mindelay+30:delay+30);
			}
		
		}
		
		
		//timeout();
		//window.setTimeout(function() { timeout(); },500);
	}
	
	var showmenu = function(id) {
		//alert("showmenu");
		for (var i in states) {
			if (states[i]==1) {
				
				subs[i].style["visibility"]="visible";
				states[i]=0;
				//hidemenu();
			}
		}
	}
	
	var hidemenu = function (id) {
		for (var i in states) {
			if (states[i]==2) {
				
				subs[i].style["visibility"]="hidden";
				states[i]=0;
			}
		}		
	}
	
	var timeout = function() {
		alert("timeout");
	}
	
	var console = function(s) {
		var temp="";
		for (var i in states)
			temp+=states[i];
		document.forms.debug.elements.console.value=document.forms.debug.elements.console.value+"\n"+s+":"+temp;
	}
	
	
 
 
 
 }