﻿function Menu(menuDiv) {
	this.node = menuDiv;
	forEachItem();
	
	function forEachItem() {
		var li = Element.getChildByProperty(menuDiv,'className','items').firstChild;
		var link = null;
		while (li) {
			if (li.tagName == 'LI') {				
				var subMenu = null;
				if (subMenu = Element.getChildByProperty(li,'className','subMenu')) {
					link = Element.getChildByProperty(li,'tagName','A');
					new MenuList(li,subMenu,link);
				}				
			}
			li = li.nextSibling;
		}
	}
}
Menu.linkHBGColor = '#d60734';
function MenuList(liNode,divNode,linkNode,menu) {
	this.liNode = liNode;
	this.divNode = divNode;
	this.linkNode = linkNode;
	this.timeOutId = null;
	this.intervalId = null;
	divNode.style.visibility = 'hidden';
		divNode.style.display = 'block';
			this.height = divNode.offsetHeight;
		divNode.style.display = 'none';
	divNode.style.visibility = 'visible';
	this.divNode.style.height = '0px';
	this.actHeight = 0;
	var self = this;
	liNode.onmouseover = function(){clearTimeout(self.timeOutId); self.showMenu();}
	liNode.onmouseout = function(){self.timeOutId = setTimeout(function(){self.hideMenu.apply(self);},150);}
}
MenuList.prototype.hideMenu = function(){
	var self = this;
	this.actHeight = this.divNode.offsetHeight;
	this.linkNode.style.backgroundColor = 'transparent';
	clearInterval(this.intervalId);
	this.intervalId = setInterval(function(){self.rollIn.apply(self);},20);
}
MenuList.prototype.showMenu = function(){
	var self = this;
	this.actHeight = this.divNode.offsetHeight;
	this.divNode.style.display = 'block';
	this.linkNode.style.backgroundColor = Menu.linkHBGColor;
	clearInterval(this.intervalId);
	this.intervalId = window.setInterval(function(){self.rollOut.apply(self);},20);
}
MenuList.prototype.rollOut = function() {
	if (this.actHeight > this.height) {
		clearInterval(this.intervalId);
		this.divNode.style.height = this.height+'px';
	}
	else {
		this.divNode.style.height = this.actHeight+'px';
		this.actHeight += 10;
	}
}
MenuList.prototype.rollIn = function() {
	if (this.actHeight < 0) {
		clearInterval(this.intervalId);
		this.divNode.style.height = '0px'; 
		this.divNode.style.display = 'none';
	}
	else {
		this.divNode.style.height = this.actHeight+'px';
		this.actHeight -= 10;
	}
}
