menu = Class.create();
Object.extend(menu.prototype, {
	loNav: null,
	lbWorking: false,
	loTimeout: null,

	/*
	sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
			this.firstChild.className ="sfhovera";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			this.firstChild.className="";
		}
	*/

	initialize: function() {
		this.loNav = $('nav');

		var laLi = this.loNav.getElementsByTagName('li');
		for (var i = 0; i < laLi.length; i++) {
			Event.observe(laLi[i], 'mouseover', this.openMenu.bind(this, laLi[i]));
			Event.observe(laLi[i], 'mouseout', this.cancelMenu.bind(this));
		}
	},

	cancelMenu: function() {
		if (this.lbWorking) {
			clearTimeout(this.loTimeout);
			this.lbWorking = false;
		}
	},

	openMenu: function(loLi) {
		var loUl = loLi.getElementsByTagName('ul')[0];
		if (this.lbWorking || (loUl && Element.visible(loUl))) return;

		var self = this;
		this.loTimeout = setTimeout( function() { self.toggleMenu(loLi); }, 200);
		this.lbWorking = true;
	},

	toggleMenu: function(loLi) {
		var laUl = loLi.parentNode.getElementsByTagName('ul');
		for (var i = 0; i < laUl.length; i++) Element.hide(laUl[i]);

		var loUl = loLi.getElementsByTagName('ul')[0];
		if (loUl) Element.show(loUl);
		this.lbWorking = false;
	}

});