Proto.UI.Menus=[];
Proto.UI.Menu = Class.create({
    initialize: function() 
    {
    
    this.options = Object.extend({
            type:'gorizontal',		//gorizontal or vertical
            classname:'menudefault',  	//classname for container
            hoverClass:'hl',
            element:document.body,       	//element for append menu
            arrow:false,			//img src or false (show anarrow if item has submenu)
            shadow:false,			//show or not shadow for submenu containers
            items:{}			//menu items		
            
            }, arguments[0] || { });
    
    this.actvated=false; 	
    this.active=false;
    this.items=this.options.items;
    this.container=new Element('div',{'class':this.options.classname});
    _(this.options.element).appendChild(this.container);
    this.items.each(function(i)
        {
        
        if(typeof i.name=="string"&&(typeof i.callback=="function"||typeof i.submenu=="object"))
            {
            var item=new Element('div',{'class':this.options.classname+"item"});
            item.innerHTML=i.name;//.replace(' ','&nbsp;');
            this.container.insert(item);
            i.item=item;
                if(typeof i.submenu=="object")
                {
                //new submenu, callback ignored
                item.submenu=new Proto.UI.SubMenu({parent:item,items:i.submenu,classname:'submenudefault'});	
                item.submenu.container.addClassName("FirstSubmenu");
                    Event.observe(item, 'mousedown', function(e){
                        
                    if(this.actvated==item){
                    this.actvated=false;this.active=false;
                    item.removeClassName(this.options.hoverClass);
                    item.submenu.hide(); 	
                    }else{this.active=item;
                    this.actvated=item;
                    item.addClassName(this.options.hoverClass);
                    item.submenu.show(); 
                    }
                    Event.stop(e);
                    }.bindAsEventListener(this));
                    Event.observe(item, 'mouseup', function(e){
                        
                    this.active=false;
                    Event.stop(e);
                    }.bindAsEventListener(this));
                    Event.observe(item, 'click', function(e){
                    Event.stop(e);
                    }.bindAsEventListener(this));
                    //
                    Event.observe(item, 'mouseover', function(e){
                    if(this.actvated&&this.actvated!=item){
                    this.actvated.removeClassName(this.options.hoverClass);
                    this.actvated.submenu.hide(); 
                    this.actvated=item;
                    item.addClassName(this.options.hoverClass);
                    item.submenu.show(); 
                    }
                    }.bindAsEventListener(this));
                    

                }
                else
                {
                    Event.observe(item, 'mouseup', function(e){
                    this.actvated=true;
                    item.addClassName(this.options.hoverClass);
                    i.callback(); Event.stop(e);
                    }.bindAsEventListener(this));	
                    
                }
            }else{
        if(i.separator)
            {
            var item=new Element('div',{'class':this.options.classname+"separator"});
            this.container.insert(item);
            }
            }
            
        }.bind(this));
                    this.container.observe("mousedown",function(e){Event.stop(e);});        
                    Event.observe(document.body, 'click', function(e){
                    if(this.actvated&&!this.active){
                    try{this.actvated.removeClassName(this.options.hoverClass);
                    this.actvated.submenu.hide();}catch(e){} this.actvated=false;}
                    }.bindAsEventListener(this));
                    
                        
    }
            
    });    
Proto.UI.SubMenu=Class.create({
    initialize: function() 
    {
    
    this.options = Object.extend({
            position:'bottom',		//bottom or right ,
            align:'left',
            reposition:true,		//reserved
            classname:'submenudefault',  	//classname for container
                showEffect:Effect.Appear,    	//
                hoverClass:'submenudefaultitemhl',
                hideEffect: Effect.Fade ,        	//effects aculous
                //EffectOptions:{duration:0.2}, 	//
            element:document.body,       	//element for append menu
            parent:false,
            show_event:'mouseover',          //click or mousever
            arrow:false,			//img src or false (show anarrow if item has submenu)
            shadow:false,			//show or not shadow for submenu containers
            zIndex:100,
            items:{}			//menu items		
            
            }, arguments[0] || { });
        
        this.actvated=false; 		
        this.activated=false; 
    
        this.items=this.options.items;
        Proto.UI.Menus.push(this);
    this.container=new Element('div',{'class':this.options.classname,'style':'cursor:pointer;display:none;position:absolute;top:25px;left:10px;z-index:'+this.options.zIndex});
    
            this.container.observe('mousedown',function(e){Event.stop(e);});
            this.container.observe('mouseup',function(e){Event.stop(e);});
            this.container.observe('click',function(e){Event.stop(e);});
    
    _(this.options.element).appendChild(this.container);
    this.itemarray=new Array();
    this.items.each(function(i)
        {
            if(typeof i!="undefined"){
        if(typeof i.name=="string"&&(typeof i.callback=="function"||typeof i.submenu=="object"))
            {
            var item=new Element('div',{'class':this.options.classname+"item"});
            
            
// 			
            if(typeof i.title=="string"){item.title=i.title;}
            item.innerHTML=i.name;//.replace(' ','&nbsp;');
            this.container.insert(item);
            //item.hc=this.options.hoverClass;
            this.itemarray.push(item);
                if(typeof i.submenu=="object")
                {

                item.addClassName(this.options.classname+"arrow");
                
                    item.submenu=new Proto.UI.SubMenu({parent:item,items:i.submenu,'position':'right',shadow:this.options.shadow});	
                }
                
                if(typeof i.callback=="function"){
                    Event.observe(item, 'mousedown', function(e){
                    //d(item.className);
                    item.addClassName(this.options.hoverClass);
                    var t=i.callback();
                    if(typeof t!='undefined'){item.innerHTML=t;}
                    
                    if(Prototype.Browser.IE){Proto.Editor.editorFocus();}
                    Event.stop(e);
                    this.hide();
                    }.bindAsEventListener(this));	
                    
                    item.observe('mouseup',function(e){Event.stop(e);});
                    item.observe('click',function(e){Event.stop(e);});
                    
                }	
                    Event.observe(item, 'mouseover', function(e){
                        
                    window.clearTimeout(this.options.parent.timer);window.clearTimeout(item.timer);
                    this.options.parent.addClassName(this.options.parent.hc);
                    if(this.actvated&&this.actvated!=item){
                    this.actvated.removeClassName(this.options.hoverClass);
                    if(typeof this.actvated.submenu=="object"){this.actvated.submenu.hide(); }
                    }
                    this.actvated=item;
                    
                    this.itemarray.each(function(i)
                    {
                        if(i!=item){
                                i.removeClassName(this.options.hoverClass);
                                if(typeof i.submenu=="object"){i.submenu.hide(); }	
                                if(i.shadow){i.shadow.hide();}	
                        }	
                    }.bind(this));
        
        
                    item.addClassName(this.options.hoverClass);
                    if(typeof item.submenu=="object")
                    {
                    item.submenu.show(); }
                    
                    }.bindAsEventListener(this));
                    
                    Event.observe(item, 'mouseout', function(e){
                    this.actvated=false;
                    item.removeClassName(this.options.hoverClass);
                    if(typeof item.submenu=="object"){
                        item.timer=item.submenu.hide.delay(0.1,item.submenu); 
                    }
                    Event.stop(e);
                    }.bindAsEventListener(this));
                    
                
            }else{
        if(i.separator)
            {
            var item=new Element('div',{'class':this.options.classname+"separator"});
            item.innerHTML="&nbsp;";
            this.container.insert(item);
            }
            }
        }
        }.bind(this));	

                    Event.observe(document.body, 'click', function(e){
                    Proto.UI.Menus.each(function(m){m.hide();});
                    }.bindAsEventListener(this));	
                    
                     

    },
    
    show:function(){
            this.activated=true; 
            var poz = Position.page(_(this.options.parent));
            var ddim = document.viewport.getDimensions();
            var vpOff = document.viewport.getScrollOffsets();
            var elDim = this.container.getDimensions();
            var pd=_(this.options.parent).getDimensions();
            var pagescroll={top:((document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop),left:((document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft)};
            if(this.options.position=='bottom')
            {
                    if(poz[1]+pd.height+elDim.height>ddim.height&&ddim.height>0)
                    {
                    ofstop=5-elDim.height;
                    }
                    else
                    {
                    ofstop=pd.height;
                    }
                    
                
                
                Position.clone(_(this.options.parent),this.container,{
                setWidth:false,setHeight:false,offsetLeft:((this.options.align=='right')?0:((poz.left>elDim.width)?pd.width-elDim.width:pd.width-pd.width))-pagescroll.left,offsetTop:ofstop+vpOff.top-pagescroll.top});
                
            }else{
            
        if(ddim.width/2>pd.width+poz[0])
            {
                
                var ofpg=pd.width;
                
            }else{var ofpg=-pd.width;}
            

        var topo=((poz[1] - vpOff.top + elDim.height) > ddim.height && (poz[1] - vpOff.top) > elDim.height 
                    ? (poz[1]+elDim.height-ddim.height) : 9) ;
                    
        
    Position.clone(this.options.parent,this.container,{
        setWidth:false,setHeight:false,offsetLeft:ofpg,offsetTop:-topo});
        
        
        
        }	
        
        
            this.container.show();
            if(!this.shadow&&this.options.shadow){
            
            this.shadow = new UI.Shadow(this.container,{'theme':'drop_shadow',zIndex:this.options.zIndex+1}); 
            
            
            this.shadow.shadow.observe('mousedown',function(e){ Event.stop(e);});
            this.shadow.shadow.observe('mouseup',function(e){ Event.stop(e);});
            this.shadow.shadow.observe('click',function(e){ Event.stop(e);});
            }else{
            
            if(this.options.shadow){
            this.shadow.setBounds({top: this.container.style.top, left: this.container.style.left, width: this.container.getWidth(), height:this.container.getHeight()});
      
this.shadow.show();}
            }
        

         this.actvated=this.container;
    },
    hide:function(i,t){
        this.activated=false; 
        if(i){
            i.hide();
            
        }else{
            if(this.shadow){this.shadow.hide();}
            this.itemarray.each(function(i)
        {
                    i.removeClassName(this.options.hoverClass);
                    if(typeof i.submenu=="object"){i.submenu.hide(); }			
        }.bind(this));	
        this.container.hide();}
        this.actvated=false;
    }
            
    })