﻿Menu = function()
{
	// Configuration
	var mainUlId="mainMenu";
	var subDivId="subMenu";
	
	this.subItemsDivId=subDivId;
	this.defaultSubItems=this.getInnerHTML(subDivId);
	this.defaultMainItem=null;
	this.activeMainItem=null;
	this.currentMainItem=null;
	this.mainItemOverClass="mainItemOver";
	this.showTimeout=null;
	this.showDelay=200;
	this.hideTimeout=null;
	this.hideDelay=400;
	
	// Initialization
	this.initMainItems(mainUlId);
	this.initSubItemsDiv(subDivId);
};

Menu.prototype.initMainItems = function(ulId)
{
	var items = this.getElement(ulId).getElementsByTagName('li');
	if(items) {
		var self = this;
		for(var i=0; i<items.length; i++) {
			var link = items[i].getElementsByTagName('a')[0];
			link.Id=this.subItemsDivId + (i+1);
			
			this.addEventListener(link, 'mouseover', function(e)
			{
			  var eventObj = (typeof e.target != 'undefined' ? e.target : e.toElement);
			  clearTimeout(self.showTimeout);
			  clearTimeout(self.hideTimeout);
			  self.setActiveMainItem(eventObj);
			  self.showTimeout = window.setTimeout(function(){self.showSubmenu(eventObj.Id);}, self.showDelay);
			}, false);
			this.addEventListener(link, 'mouseout', function(e)
			{
			  clearTimeout(self.showTimeout);
				self.hideTimeout = window.setTimeout(function(){self.hideSubmenu();}, self.hideDelay);
			}, false);
			this.addEventListener(link, 'click', function(e)
			{
				if (e.preventDefault)
					e.preventDefault();
				else
					e.returnValue = false;
			}, false);
			
			if (link.className==self.mainItemOverClass) {
				this.defaultMainItem=link;
				this.setActiveMainItem(link);
			}
		}
	}
};

Menu.prototype.initSubItemsDiv = function(subDivId)
{
	var self = this;
	var subObj=this.getElement(subDivId);
	
	this.addEventListener(subObj, 'mouseover', function(e)
	{
		clearTimeout(self.showTimeout);
		clearTimeout(self.hideTimeout);
		if (self.currentMainItem!=null && self.currentMainItem!=self.activeMainItem)
		  self.setActiveMainItem(self.currentMainItem);
	}, false);

	this.addEventListener(subObj, 'mouseout', function(e)
	{
		self.hideTimeout = window.setTimeout(function(){self.hideSubmenu();}, self.hideDelay);
	}, false);
};

Menu.prototype.showSubmenu = function(subDivId)
{
	if (this.getElement(subDivId)!=null) {
		this.setInnerHTML(this.subItemsDivId, subDivId);
		this.currentMainItem=this.activeMainItem;
	} else
		this.resetDefaultSubItems();
};

Menu.prototype.hideSubmenu = function()
{
	this.unsetActiveMainItem();
	this.resetDefaultItems();
};

Menu.prototype.setActiveMainItem = function(itemObj) 
{ 
	if (typeof itemObj.className != 'undefined') {
		this.unsetActiveMainItem();
		this.activeMainItem=itemObj;
		this.activeMainItem.className=this.mainItemOverClass;
	} else
		this.resetDefaultItems();
}

Menu.prototype.unsetActiveMainItem = function() 
{
	if (this.activeMainItem) {
		this.activeMainItem.className="";
		this.activeMainItem=null;
		this.currentMainItem=null;
	}
}

Menu.prototype.resetDefaultItems = function() 
{
	this.resetDefaultMainItem();
	this.resetDefaultSubItems();
}

Menu.prototype.resetDefaultMainItem = function() 
{
	if (this.defaultMainItem) {
		this.defaultMainItem.className=this.mainItemOverClass;
		this.activeMainItem=this.defaultMainItem;
		this.currentMainItem=this.defaultMainItem;
	}
}

Menu.prototype.resetDefaultSubItems = function()
{
	this.getElement(this.subItemsDivId).innerHTML=this.defaultSubItems;
}

Menu.prototype.getElement = function(elementId)
{
	if (elementId && document.getElementById && typeof elementId == "string")
		return document.getElementById(elementId);
	else
		return null;
};

Menu.prototype.addEventListener = function(eventObj, eventType, handler, capture)
{
	try {
		if (eventObj.addEventListener)
			eventObj.addEventListener(eventType, handler, capture);
		else if (eventObj.attachEvent)
			eventObj.attachEvent('on' + eventType, handler);
	} catch (e) {}
};

Menu.prototype.setInnerHTML = function(objId, newObjectId) {
	if (document.getElementById && ((obj=document.getElementById(objId))!=null))
		obj.innerHTML = this.getInnerHTML(newObjectId);
};
Menu.prototype.getInnerHTML = function(objId) {
  if (document.getElementById && ((obj=document.getElementById(objId))!=null))
    return obj.innerHTML;
};