// JavaScript Document
var parentmenu 	= null;
var output 		= null;
var allDivs		= null; 
var time 		= 0;
var lastElem 	= null;
var first		= "";
var last 		= null;

window.onload 	= init;

function init() {
	parentmenu 	= document.getElementById('top_menu');
	output 		= document.getElementById('output');
	allDivs 	= new Array();
	initEvents();
}

function showMenu(elem, elemleft, elemtop) {
	clearTimeout(time);
	hideAll();
	var divMenu = elem.nextSibling;
	if(divMenu != null) {
		divMenu.style.display	= "block";
		divMenu.style.left 		= elemleft + "px";
		divMenu.style.top 		= elemtop + elem.offsetHeight + "px";
		divMenu.onmouseover 	= showSubMenu;
		divMenu.onmouseout 		= hideSubMenu;
		lastElem = divMenu;
	}
}

function checkOver() {
	clearTimeout(time);
	hideElem(lastElem);
}

function hideElem(elem) {
	elem.style.display	= "none";
}

function hideAll() {
	var count = allDivs.length;
	
	for(var i = 0; i < count; i++) {
		allDivs[i].style.display = "none";
	}
}

function showSubMenu(){
	clearTimeout(time);
}

function hideSubMenu() {
	time	= setTimeout(checkOver, 500);
}

function initEvents() {
	var childs 	= parentmenu.childNodes.length;
	for(var i = 0; i < childs; i++) {
		if(parentmenu.childNodes[i].nodeName == "SPAN") {
			if(i == 0) {
				first = parentmenu.childNodes[i].firstChild.id;
				parentmenu.childNodes[i].firstChild.className = "first menu";				
			}
			last = parentmenu.childNodes[i].firstChild.id;			
			parentmenu.childNodes[i].firstChild.onmouseover = handleMenu;
			parentmenu.childNodes[i].firstChild.onmouseout 	= handleMenu;
			if((parentmenu.childNodes[i].firstChild.nextSibling != null) && (parentmenu.childNodes[i].firstChild.nextSibling.nodeName == 'DIV')) {
				allDivs.push(parentmenu.childNodes[i].firstChild.nextSibling);
			}
		} 
	}
}

function handleMenu(evt) {
	evt 			= (evt) ? evt : ((window.event) ? event : null);
	var elem 		= (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
	var elemtop 	= (evt.target) ? (elem.offsetTop+1) : ((evt.srcElement) ? (elem.offsetParent.offsetTop + document.body.offsetTop+1) : 0);
	var elemleft 	= (evt.target) ? elem.offsetLeft : ((evt.srcElement) ? elem.offsetLeft + document.body.offsetLeft : 0);
	
	if(evt.type == 'mouseover'){
		highLightMenu(elem);
		showMenu(elem, elemleft, elemtop);
	} else if(evt.type == 'mouseout') {
		unhighLightMenu(elem);
		if(lastElem != null) {
			time	= setTimeout(checkOver, 500);
		}
	}
}

function highLightMenu(elem) {
	if(elem.id == first) {
		elem.className = "overmenufirst menu";
	} else if(elem.id == last){
		elem.className = "overmenulast menu";
	} else {
		elem.className = "overmenu menu";
	}
}

function unhighLightMenu(elem) {
	if(elem.id == first) {
		elem.className = "first menu";
	} else if(elem.id == last){
		elem.className = "last menu";
	} else {
		elem.className = "element menu";
	}
}