// create Menu class

var Menu = Class.create({
	
	initialize: function(menu) {
		this.interval = 100;
		this.menu = $(menu);
		this.submenus = this.menu.select("li>ul");
		this.buttons = this.submenus.inject([], function(array, value) {
			array.push(value.hide().up());
			return array;
		});
		for (var i=0;i<this.buttons.length;i++) {
			Event.observe(this.buttons[i],"mouseover",this.buttonMouseover.bind(this));
			Event.observe(this.buttons[i],"mouseout",this.buttonMouseout.bind(this));
		}
		for (var i=0;i<this.submenus.length;i++) {
			Event.observe(this.submenus[i],"mouseover",this.submenuMouseover.bind(this));
			Event.observe(this.submenus[i],"mouseout",this.submenuMouseout.bind(this));
		}
	},
	
	buttonMouseover: function(event) {
		//Event.stop(event);
		this.resetTimer();
		var button = event.findElement("li");
		var submenu = button.select("ul")[0].show();
		this.submenus.each(function(sub) {
			if (sub != submenu) {
				sub.hide();
			}
		});
	},
	
	buttonMouseout: function(event) {
		//Event.stop(event);
		var button = event.findElement("li");
		this.subToHide = button.select("ul")[0];
		this.timer = window.setTimeout(this.hide.bind(this), this.interval);
	},

	submenuMouseover: function(event) {
		Event.stop(event);
		this.resetTimer();
		var submenu = event.findElement("ul");
		this.submenus.each(function(sub) {
			if (sub != submenu) {
				sub.hide();
			}
		});
	},
	
	submenuMouseout: function(event) {
		Event.stop(event);
		this.subToHide = event.findElement("ul");
		this.timer = window.setTimeout(this.hide.bind(this), this.interval);
	},
	
	hide: function() {
		this.subToHide.hide();
		this.resetTimer();
	},
	
	resetTimer: function() {
		if (this.timer) {
			window.clearTimeout(this.timer);
			this.timer = null;
		}
	}
	
	
});

// observe window load event, when occurs initialize menu objects
Event.observe(window, "load", function() {
	// define menus
	if ($("menu")) { var menu1 = new Menu("menu");};
})