var BasicMenu = Class.create();

BasicMenu.prototype = {
	initialize: function(parentId, submenuId, options) {

		this.parent = $(parentId);
		this.submenu = $(submenuId);

		options = (! options) ? {} : options;
		options.hideDelay = (! options.hideDelay) ? .5 : options.hideDelay;
		options.effectHandler = (! options.effectHandler) ? this.effectHandler : options.effectHandler;
		this.options = options;

		this.hideTimer = null;

		Event.observe(this.parent, "mouseover", this.showSubmenu.bindAsEventListener(this), false);
		Event.observe(this.submenu, "mouseover", this.showSubmenu.bindAsEventListener(this), false);
		Event.observe(this.parent, "mouseout", this.hideSubmenu.bindAsEventListener(this), false);
		Event.observe(this.submenu, "mouseout", this.hideSubmenu.bindAsEventListener(this), false);
	},

	showSubmenu: function (event) {
		// Clear the timer
		if (this.hideTimer != null) {
			this.hideTimer.stop();
			this.hideTimer = null;
		}

		var currentMenu = Event.findElement(event,'li');
		if($(currentMenu).hasClassName('MainMenu')){
			$(currentMenu).addClassName('Selected');
			var previousMenus = $(currentMenu).previousSiblings();
			if(previousMenus.length > 0){
				$(previousMenus)[0].addClassName('PreviousMenu');
			}
			$(currentMenu).down(1).hide();
			$(currentMenu).down(2).show();
		}

		this.options.effectHandler(this.submenu, true);
	},

	hideSubmenu: function (event) {
		var basicMenu = this;
		this.hideTimer = new PeriodicalExecuter(
			function () {
				basicMenu.options.effectHandler(basicMenu.submenu, false);
				basicMenu.hideTimer.stop();
				basicMenu.hideTimer = null;

				var currentMenu = basicMenu.parent.up();
				if($(currentMenu).hasClassName('MainMenu')){
					$(currentMenu).removeClassName('Selected');
					var previousMenus = $(currentMenu).previousSiblings();
					if(previousMenus.length > 0){
						$(previousMenus)[0].removeClassName('PreviousMenu');
					}
					$(currentMenu).down(1).show();
					$(currentMenu).down(2).hide();
				}
			},
			this.options.hideDelay
		);
	},

	effectHandler: function (submenu, isShowing) {
		if (isShowing) {
			Element.show(submenu);
		} else {
			Element.hide(submenu);
		}
	}
};