var Navigation = Class.create();
Navigation.prototype = {
    
    initialize: function(options) {
        if(! options['menuItems']) return;
        this.menuItems = {};
        this.popups = {};
        for(var i = 0; i < options['menuItems'].length; i++) {
            var menuItem = options['menuItems'][i];
            this.menuItems[$(menuItem['menuItem'])] = {
                'popup': $(menuItem['popup']), 
                'timer': null, 
                'active': false
            };
            this.popups[menuItem['popup']] = $(menuItem['menuItem']);
            Event.observe($(menuItem['menuItem']), 'mouseover', this.onOverMenuItem.bindAsEventListener(this));
            Event.observe($(menuItem['menuItem']), 'mouseout', this.onLeaveMenuItem.bindAsEventListener(this));
        }
    },
    
    onOverMenuItem: function(event) {
        var menuElement = Event.element(event);
        if(!this.menuItems[menuElement]['active'] && this.menuItems[menuElement]['popup'].style.display == 'none') {
            Effect.SlideDown(this.menuItems[menuElement]['popup'], {afterFinish: function() {
                this.menuItems[menuElement]['active'] = true;
            }.bindAsEventListener(this)});
            Event.observe(this.menuItems[menuElement]['popup'], 'mouseout', this.onLeavePopup.bindAsEventListener(this));
            Event.observe(this.menuItems[menuElement]['popup'], 'mouseover', this.onOverPopup.bindAsEventListener(this));
        } else {
            if(this.menuItems[menuElement]['timer']) {
                clearTimeout(this.menuItems[menuElement]['timer']);
                this.menuItems[menuElement]['timer'] = null;
            }
        }
    },
    
    onLeaveMenuItem: function(event) {
        var menuElement = Event.element(event);
        if(this.menuItems[menuElement]['active'])
            this.beginCollapse(menuElement);
    },
    
    onOverPopup: function(event) {
        var popup = Event.element(event);
        while(popup.tagName !== "DIV") 
            popup = popup.parentNode;
        var menuElement = this.popups[popup.id];
        if(this.menuItems[menuElement]['timer']) {
            clearTimeout(this.menuItems[menuElement]['timer']);
            this.menuItems[menuElement]['timer'] = null;
        }
    },
    
    onLeavePopup: function(event) {
        var popup = Event.element(event);
        while(popup.tagName !== "DIV")
            popup = popup.parentNode;
        var menuElement = this.popups[popup.id];
        if(this.menuItems[menuElement]['active'])
            this.beginCollapse(menuElement);
    },
    
    beginCollapse: function(menuElement) {
        if(!this.menuItems[menuElement]['timer']) {
            this.menuItems[menuElement]['timer'] = setTimeout(function() {
                this.menuItems[menuElement]['timer'] = null;
                if(this.menuItems[menuElement]['active'])
                    Effect.SlideUp(this.menuItems[menuElement]['popup'], { 
                        afterFinish: function() { 
                            this.menuItems[menuElement]['active'] = false;
                        }.bindAsEventListener(this)
                    });
            }.bindAsEventListener(this), 500);
        }
    }
}