SiteMenu = Class.create();

SiteMenu.prototype = {
initialize: function() {
    this.openMenu = null;
    this.openDuration = 0.6;
    this.fps = 50;
    this.waiting = false;
    this.showEffect = null;
    this.hideEffect = null;
    this.showSpeed = 0.3;
    this.hideSpeed = 0.7;
    this.hidePE = null;

    this.mainMenu = $('mainmenu');
    if( !this.mainMenu ) return;

    // Menu Events
    var triggers = $$('.trigger');
    triggers.each( function(t) {
        var id = t.id;
        var menuid = id.replace(/menuitem_/,'');
        var menuid = 'submenu_' + menuid;
        t.onclick = function(e){this.toggle(menuid); return false;}.bind(this);
        //Event.observe(t,'click', function(e){Event.stop(e);this.toggle(menuid);}.bind(this));    
    }.bind(this));

    /*Event.observe(document.body, 'click', function(e){
        var x = Event.pointerX(e); var y = Event.pointerY(e);
        if(this.openMenu) if(Position.within(this.openMenu, x, y) ) return;
        this.close()
    }.bind(this));*/
   
    Event.observe(document.body, 'mousemove', this.mousemoveEvent.bindAsEventListener(this));
},

mousemoveEvent: function(e) {
    var y = Event.pointerY(e);
    var varea = Element.getHeight('header') + 20;
    var t = 0.7;
    if( this.openMenu ) {
        varea += Element.getHeight(this.openMenu);
        t = 1.0;
    }
    if( y > varea )  {
        if( ! Element.visible(this.mainMenu) ) return;
        if( !this.hidePE ) {
            this.hidePE = new PeriodicalExecuter( function(pe) {
                this.hideMenu();  pe.stop(); this.hidePE = null;
            }.bind(this), t );
        }
    }
    else {
        if(this.hidePE){ this.hidePE.stop();}
        this.hidePE = null;
        this.showMenu();
    }
},

showMenu: function() {
    var menu = this.mainMenu; 
    var visible = Element.visible(menu);
    
    if( this.hideEffect ) {
        this.hideEffect.cancel(); this.hideEffect = null;
        visible = false;
    }
    if( visible ) return;
    if( this.showEffect) return;
    this.showEffect = new Effect.Move('topbar', {
        x:0, y:4, mode:'absolute',
        duration:0.2, 
        transition: Effect.Transitions.linear,
        afterFinish: function(){ 
            new Effect.Appear(menu,{
                duration: this.showSpeed,
                afterFinish: function(){this.showEffect = null;}.bind(this)            
            })
        }.bind(this)
    });
},

hideMenu: function() {
    var menu = this.mainMenu; 
    if( !Element.visible(menu) ) return;
    if( this.showEffect ) {
        this.showEffect.cancel();
        this.showEffect = null;
    }
    if(this.hideEffect) return;
    
    var hideEffectList = [
        new Effect.Fade(menu, {to: 0, sync: true}),
        new Effect.Move('topbar', {x:0, y:22, mode:'absolute', sync:true, transition: Effect.Transitions.linear})
    ];
    if(this.openMenu) {
        hideEffectList.push( new Effect.Parallel([
            new Effect.BlindUp(this.openMenu, {scaleContent:false,scaleMode:'contents'}), 
            new Effect.Fade(this.openMenu, {to:0.0 })
        ], {sync:true}) );
    }
    
    this.hideEffect = new Effect.Parallel(hideEffectList,{
            duration: this.hideSpeed, 
            afterFinish: function(){this.hideEffect = null;this.close();}.bind(this)
    });    
},

toggle: function(menu){ 
    menu = $(menu);
    if( menu.style.display == 'none') {
        this.open(menu);
    }
    else {
        this.close(menu);    
    }
},

open: function(menu){    
    menu = $(menu);
    if( !menu ) return;
    this.waiting = true;
    this.close(this.openMenu);
    this.openEffect(menu);
    Element.setStyle(menu, {opacity: 0.0});
    new Effect.Parallel([
        new Effect.BlindDown(menu, {transition: Effect.Transitions.linear}),
        new Effect.Appear(menu, {from:0.0, to:1.0})            
    ],{
        duration: 0.6, fps:100,
        afterFinish: function() {
            if(scrollers) scrollers.each(function(s){s.reset();});
        }
    });
    this.openMenu = menu; this.waiting = false;
    
},

close: function(menu){
    menu = $(menu);
    if(!menu) menu = this.openMenu; if(!menu) return;
    Element.hide(menu);
    this.openMenu = null;
    if(!this.waiting) this.closeEffect();
},

openEffect: function(menu){
    var list = $$('#mainmenu a');
    list.each(function(el){
        Element.removeClassName(el,'menuhover');
    });    
    var t = 'menuitem_' + menu.id.replace('submenu_','');    
    Element.addClassName(t, 'menuhover');
},
closeEffect: function(menu) {
    var list = $$('#mainmenu a');
    list.each(function(el){
        Element.removeClassName(el,'menuhover');
    }); 
    menuHighlight();
}

}

Event.observe(window, 'load', function() {
    new SiteMenu();
});