var PopupMenu = Class.create({

    initialize: function(menuId) {
        this.menuId = menuId;
		$$("#"+menuId+">li").invoke("observe","mousemove",this.showSubMenu.bindAsEventListener(this));
        var subSearch = " li ul";
        while ((subMenus = $$("#"+menuId+subSearch)).size() > 0) {
            subMenus.invoke("hide");
            subSearch = subSearch + subSearch;
        }
        
		$(document).observe("mousemove",this.checkPopup.bindAsEventListener(this));
		
		this.activeItem = null;
		this.activeMenu = null;
    },

    showSubMenu: function (event) {
		 if (this.activeMenu == null) {
	 		this.activeItem = event.element().up("li");
		 	if (this.activeItem) {
				this.activeMenu = this.activeItem.down("ul");
				if (this.activeMenu) {
					this.activeMenu.setStyle({width:(this.activeItem.getWidth()+1)+"px"});
					this.activeItem.setStyle({width:(this.activeItem.getWidth()+1)+"px"});
					if (this.activeMenu) {
						this.activeItem.addClassName("clsHover");
						this.activeMenu.setStyle({position:"absolute",zIndex:"999999999"});
						this.activeMenu.show();
					}		
				}
			}
		}
    },

    checkPopup: function(event) {
        if (!this.mouseInSubMenu(event.pointerX(),event.pointerY())) this.hideSubMenu();
	},

    hideSubMenu: function () {
       if (this.activeMenu) {
		    this.activeItem.removeClassName("clsHover");
            this.activeMenu.hide();
			this.activeMenu.setStyle({width:(this.activeItem.getWidth())+"px"});
			this.activeItem.setStyle({width:""});
 			this.activeItem = null;
			this.activeMenu = null;
		}
    },

    mouseInSubMenu: function(x,y) { 
	   
	   if (this.activeMenu != null) {
			var left = this.activeItem.cumulativeOffset().left;
			var top1 = this.activeItem.cumulativeOffset().top;
			var top2 = this.activeMenu.cumulativeOffset().top;
			var right1 = this.activeItem.cumulativeOffset().left+this.activeItem.getWidth();
			var right2 = this.activeMenu.cumulativeOffset().left+this.activeMenu.getWidth();
			var bottom = this.activeMenu.cumulativeOffset().top+this.activeMenu.getHeight();
			
			if ( (x >= left && y <= bottom) && ((y >= top1 && x <= right1) || (y >= top2 && x <= right2)) ) return true;
       }
       return false;
    }
});


$(document).observe("dom:loaded",function(){
    var popup = new PopupMenu("idMenuMain");
});