window.onload = function(){
	initSubMenu();	
}
var count = 10;
var over = 0;
var idTimeout;
function initSubMenu(){
	for(i=1;i<count+1;i++){
		if(document.getElementById("submenu"+i)){
			document.getElementById("menu"+i).num = i;
			document.getElementById("menu"+i).onmouseover = function(){
				doShow(this.num);
			}
			document.getElementById("menu"+i).onmouseout = function(){
				doHide();	
			}
			
			document.getElementById("submenu"+i).num = i;
			document.getElementById("submenu"+i).onmouseover = function(){
				doShow(this.num);	
			}
			document.getElementById("submenu"+i).onmouseout = function(){
				doHide();	
			}
		}
	}
}
function doShow(num){
	clearTimeout(idTimeout);
	var subBlock = document.getElementById("submenu"+num);
	for(i=1;i<count+1;i++){
		if(document.getElementById("submenu"+i)){
			document.getElementById("submenu"+i).style.display = "none";
		}
	}
	if(num != count && num != 1){
		subBlock.style.left = getElementPosition("menu"+num).left + "px";
	}
	else if(num == count){
		subBlock.style.left = getElementPosition("menu"+num).left - 70 + "px";
	}
	else if(num == 1){
		subBlock.style.left = getElementPosition("menu"+num).left + 0 + "px";	
	}
	subBlock.style.display = "block";
	subBlock.style.top = getElementPosition("menu"+num).top + 20 + "px";	
	over = 1;
}
function doHide(){
	over = 0;
	idTimeout = setTimeout(checkHide, 450);
	function checkHide(){
		if(over != 1){
			for(i=1;i<count+1;i++){
				if(document.getElementById("submenu"+i)){
					document.getElementById("submenu"+i).style.display = "none";
				}
			}	
		}
	}	
}
function getElementPosition(elemId){
    var elem = document.getElementById(elemId);
	
    var w = elem.offsetWidth;
    var h = elem.offsetHeight;
	
    var l = 0;
    var t = 0;
	
    while (elem)
    {
        l += elem.offsetLeft;
        t += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return {"left":l, "top":t, "width": w, "height":h};
}