var _mbSubMenuItemClass = "subMenuItem";
var _mbSubMenuItemParentClass = "subMenuItemParent";
var _mbMainMenuOverStyle = {color: "#474a37"};
var _mbSubMenuItemOverStyle =  new Array();
var _mbSubMenuDelay = 0.5;

_mbSubMenuItemOverStyle["#cdd7a4"] = {backgroundColor: "#aab388", color: "#474a37"};
_mbSubMenuItemOverStyle["#afc1b3"] = {backgroundColor: "#93ab98", color: "#474a37"};



var _mbTriangleImage = {src:"images/menutriangle.gif", width: 10 , height:10, style: 'padding-left:5px;'};

var _mbMenuItem = Class.create(
	{
		initialize: function(menu, parent){
			this.menu = menu
			this.parentMenu = (typeof parent == 'undefined')? null : parent;
			this.index= null;
			this.text= null;
			this.value= null;
			this.subMenu= null;
			this.htmlElm= null;
			this.activeStyle= null;	
			this.originalStyle = new Object();		
			this.arrowElm = null;
		},
		
		addItem: function(text, value)
		{
			if(this.subMenu == null){
				this.subMenu = new _mbSubMenu(this.menu, this);	
				
				if(this.arrowElm)
				{	
					this.arrowElm.setStyle({visibility:'inherit'});
					this.htmlElm.addClassName(_mbSubMenuItemParentClass);	
				}
				
				
				
			}
			
			var mi = new _mbMenuItem(this.menu, this.subMenu);
			mi.text = text;
			mi.value = value;
			mi.index = this.subMenu.items.length; 				
		
			
			
			this.subMenu.items.push(mi);
			var bgColor = this.htmlElm.getStyle('backgroundColor');
			mi.htmlElm = new Element("DIV", {'class': _mbSubMenuItemClass});
			mi.htmlElm.setStyle({backgroundColor: bgColor});
			mi.htmlElm.update(text.escapeHTML());
			mi.arrowElm = new Element("IMG", _mbTriangleImage);
			mi.arrowElm .setStyle({verticalAlign: "middle", visibility: 'hidden'});
			mi.htmlElm.appendChild(mi.arrowElm );
			mi.htmlElm.observe('mouseover', _mnItemOver.bindAsEventListener(mi));
			mi.htmlElm.observe('mouseout', _mnItemOut.bindAsEventListener(mi));
			mi.htmlElm.observe('click', _mnItemClick.bindAsEventListener(mi));
			

			var oColor = new RGBColor(bgColor);
			mi.activeStyle = _mbSubMenuItemOverStyle[oColor.toHex()];
			
			for(var styleName in mi.activeStyle){
				mi.originalStyle[styleName] = mi.htmlElm.getStyle(styleName); 
			}
			
			this.subMenu.htmlElm.appendChild(mi.htmlElm);
			
			var x = mi.arrowElm.positionedOffset()[0];
			if(x > this.subMenu.arrowPos)
			{
				this.subMenu.arrowPos = x;
				var subItems = this.subMenu.items; 
			 	for(var i=0; i < subItems.length; i++)
				{
					subItems[i].arrowElm.setStyle({marginLeft: 0});
					var objX = subItems[i].arrowElm.positionedOffset()[0];
					subItems[i].arrowElm.setStyle({marginLeft: (x - objX)+ 'px'});
				}
			}
			else
			{
				mi.arrowElm.setStyle({marginLeft: (this.subMenu.arrowPos - x)+ 'px'}); 	
			}		
				
			return mi;
			
			
		},
		
		select: function()
		{
            var m = this.parentMenu;
			if(m.selectedItem != this.index)
			{
			    m.selectedItem = this.index;
			    this.showSub();
			}
		},
		
		unselect: function()
		{
		    this.unhilite();	
		},
		
		delayedShowSub: function()
		{
			this.menu.timer = new PeriodicalExecuter(_mnShowSubMenu.bindAsEventListener(this), _mbSubMenuDelay);
			
		},
		
		showSub: function()
		{
		    _mnShowSubMenu.bindAsEventListener(this)();
		},
		
		hilite: function()
		{
			this.htmlElm.setStyle(this.activeStyle);
		},
		
		unhilite: function()
		{
			this.htmlElm.setStyle(this.originalStyle);	
		}
				
	}
);

var _mbSubMenu = Class.create(
	{
		initialize: function(menu, parent){
			this.menu = menu;
			this.parentItem = parent;
			this.htmlElm = new Element("DIV");
			this.htmlElm.setStyle({position: 'absolute', left: '0px', top:'0px'});
			this.items= [];
			this.selectedItem = -1;
			this.displayedSub = -1;
			this.arrowPos=-1;
			
			document.body.appendChild(this.htmlElm);
			this.htmlElm.setStyle({visibility:'hidden'});
							
		},
		
		hide: function()
		{
			this.htmlElm.setStyle({visibility:'hidden', left: '0px', top: '0px'});
			this.items.each(function(item)
			    {
			        item.unselect();
			    }
			);
			
			this.selectedItem = -1;
			this.parentItem.parentMenu.displayedSub = -1;
			if(this.displayedSub != -1) this.items[this.displayedSub].subMenu.hide();
		}
		,
		
		show: function (x, y)
		{
			this.htmlElm.setStyle({visibility:'visible', left: x + 'px', top: y + 'px'}); 
		}		
	}
);

var MenuBuilder = Class.create(_mbSubMenu,
	{
		initialize: function($super, eventHandler){
		 	this.eHandler = (typeof eventHandler == 'undefinded') ? null: eventHandler;
		 	this.timer = new PeriodicalExecuter(function(){},0);
		 	$super(this);
		 	document.observe('mouseover', _mnSubMenuOut.bindAsEventListener(this));
		},
		
		addMenu: function(elementId, value)
		{
			var mi = new _mbMenuItem(this);
			mi.htmlElm = $(elementId);
			mi.activeStyle = _mbMainMenuOverStyle;
			mi.value = value;
			mi.index = this.items.length;	
			mi.parentMenu = this;		
			this.items.push(mi);
			
			for(var styleName in mi.activeStyle){
				mi.originalStyle[styleName] = mi.htmlElm.getStyle(styleName); 
			}
			
			mi.htmlElm.observe('mouseover', _mnItemOver.bindAsEventListener(mi));
			mi.htmlElm.observe('mouseout', _mnItemOut.bindAsEventListener(mi));
			mi.htmlElm.observe('click', _mnItemClick.bindAsEventListener(mi));
			return mi;	
		}				
	}
)

function _mnItemOver(ev)
{
	ev.stop();
	this.menu.timer.stop();
	
	var m = this.parentMenu;
	if(m.selectedItem != this.index)
	{
	    if(m.selectedItem != -1)m.items[m.selectedItem].unselect();
	    if(m.displayedSub != this.index)
	    {
    	    if(m.parentItem !=null)this.delayedShowSub();
    	}
    	
    	m.selectedItem = -1;   
	    this.hilite();
    }
}

function _mnItemOut(ev)
{   
    ev.stop();
    this.menu.timer.stop();
    
    var m = this.parentMenu;
    if(m.selectedItem != this.index)
	{
	    this.unhilite();
	}
    
}

function _mnItemClick(ev, item)
{
	this.select();
	
	if(this.menu.eHandler)
	{
	    this.menu.eHandler(this.value);
	}
}

function _mnShowSubMenu()
{
	
	this.menu.timer.stop();
	var m = this.parentMenu;

    if(m.displayedSub != -1)m.items[m.displayedSub].subMenu.hide();
	m.displayedSub = -1;
	        
	if(this.subMenu) {
	 	var x = 0;
	 	var y = 0;
		if(m.parentItem == null)
		{
			// Root need to position under
			var pos = this.htmlElm.cumulativeOffset();
			var h = this.htmlElm.getHeight();
			x = pos.left - 3;
			y = pos.top + h + 1;
		}
		else
		{
			var vpos = m.htmlElm.viewportOffset();
			var pos = this.htmlElm.cumulativeOffset();
			var docSize = _mnGetWindowSize();
			var w = this.htmlElm.getWidth();
			var sw = 	this.subMenu.htmlElm.getWidth();
			y = pos.top;	
			
			if(docSize[0] < (vpos.left + sw + w))
			{			 	
			 	x = pos.left - sw + 1;	
			}
			else
			{
				x = pos.left + w - 1;	
			}
		}

		this.subMenu.show(x, y);
		m.displayedSub = this.index;
	}
		
}

function _mnGetWindowSize(w) {
        w = w ? w : window;
        var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
        var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
        return [width, height]
}

function _mnSubMenuOut()
{
 	this.menu.timer.stop();
 	this.menu.timer = new PeriodicalExecuter(_mnDelayedHideSubMenu.bindAsEventListener(this), _mbSubMenuDelay);
}

function _mnDelayedHideSubMenu()
{
 	this.menu.timer.stop();
 	if(this.displayedSub != -1) this.items[this.displayedSub].subMenu.hide();	
 	this.items.each(function(item){item.unselect()});
 	this.selectedItem = -1;
}







































/*varvar MenuBuilder = Class.create(
	{
		activeClass: 'mnuActive',
		subActiveClass: 'mnuSubActive',
		menus : []
		,
		itinialize: function(eventHandler){
			
			this.eventHandler= eventHandler;					
		}
		,
			
		setSubMenu: function(elementId, menuDefinition) // {bMenu:}[{text:, value:, className:, activeClassName:, subMenu}]
		{
			var oMenuItem = {subMenu: menuDefinition, htmlElm : $(elementId), type : 'main'};
			Event.observe(oMenuItem.htmlElm, 'mouseover', _mnuBrMainOver.bindAsEventListener(this, oMenuItem));
			Event.observe(oMenuItem.htmlElm, 'mouseout', _mnuBrMainOut.bindAsEventListener(this, oMenuItem));
			Event.observe(oMenuItem.htmlElm, 'click', _mnuBrClick.bindAsEventListener(this, oMenuItem));		
			this.buildSubMenu(oMenuItem);
			this.menus[elementId] = oMenuItem;			
		}
		,
		
		buildSubMenu: function(menuItem)
		{
			
			var oDiv = new Element("DIV", {style:"position:absolute, left: 0px, right:0px; display:none"});
			var aSM =  menuItem.subMenu;
			
			for(var i=0; i < aSM.length; i++)
			{
				this.setDefaults(_menuBuilderDefaults, aSM[i]);
				var oChildDiv = new Element("DIV");
				oChildDiv.update(aSM[i].escapeHTML());
				oDiv.appendChild(oDiv);
				aSN[i].parent = menuItem; 
				this.buildSubMenu(aSM[i]);
				Event.observe(this.menus[elementId].htmlElm, 'mouseover', _mnuBrSubOver.bindAsEventListener(this, aSM[i]));
				Event.observe(this.menus[elementId].htmlElm, 'mouseout', _mnuBrSubOut.bindAsEventListener(this, aSM[i]));
				Event.observe(this.menus[elementId].htmlElm, 'click', _mnuBrClick.bindAsEventListener(this, aSM[i]));				
			}
			
			menuItem.subHtmlElm = oDiv;
			menuItem.subHtmlElm.setStyle({visibility:'hidden'});;	
		}
		, 
		
		setDefaults: function(params, def)
	    {
	    	var name;
	    	for(name in def){
	    		if(typeof params[name] == 'undefined'){
	    			params[name] = def[name];
	    		}
	    	}
	    }



	}
);

function _mnuBrMainOver(ev, menuItem)
{
	menuItem.htmlElm.addClassName(this.activeClass);	
}

function _mnuBrMainOut(ev, menuItem)
{
	menuItem.htmlElm.removeClassName(this.activeClass);	
}

function _mnuBrSubOver(ev, menuItem)
{
	menuItem.htmlElm.addClassName(this.activeClass);	
}

function _mnuBrSubOut(ev, menuItem)
{
	menuItem.htmlElm.removeClassName(this.activeClass);	
}

function _mnuBrClick(ev, menuItem)
{

}

var _menuBuilderDefaults = {text:'', value: null, className:'', activeClassName:'', subMenu:[], type:'sub'};


*/