// JavaScript Document
var pe;
var MenuControl = {
    cmenu: null,
    hide: function(menuItem) {
        if (this.cmenu) {
            this.cmenu = null;
        }
        menuItem.hide();
        
    },
    show: function(menuItem) {
        if(this.cmenu && this.cmenu != menuItem) {
            this.cmenu.hide();
        }
        menuItem.show();
        this.cmenu = menuItem;
     }
}

var MenuItem = Class.create();
Object.extend(MenuItem.prototype, {
    menuItem: null,
    subMenu: null,
    initialize: function(el) {
        var defaults = {
            absolutize: true,
            onevent: 'mouseover',
            offevent: 'mouseout',
            showEffect: null,
            hideEffect: null,
            opens: 'bottom',
            positionTo: null,
            delay: 500
        };
        
        options = Object.extend(defaults, arguments[1] || {});
        this.options = options;
        
        
        el = $(el);
        //alert(el);
        this.menuItem = el;
            
        link = el.select('a')[0];
            
        this.collectSubNav();
        if (this.subMenu) {
            // attach link events
            link.observe(options.onevent, this.showMenu.bindAsEventListener(this));
            link.observe(options.offevent,  this.hideMenu.bindAsEventListener(this));
                
            // Attach to the submenu structure
            this.subMenu.observe(options.onevent, this.showMenu.bindAsEventListener(this));
            this.subMenu.observe(options.offevent,  this.hideMenu.bindAsEventListener(this));
        }
        return;
    },
    collectSubNav: function() {
        this.subMenu = this.menuItem.select('ul.submenu')[0];
        
        if (this.subMenu.empty()) {
            this.subMenu = null;
            return;
        }
        
        var container = null;
        
        if (this.subMenu) {
            //this.subMenu.hide();
            
            // If alternate "containing" element is specififed, use it
            if (this.options.positionTo) {
                container = $(this.options.positionTo);
            }
            // None, use the default
            if (!container) {
                container = this.menuItem;
            }
            
            container.makePositioned();
            
            if (this.options.absolutize) {
                this.subMenu.hide();
                this.subMenu.setStyle({'position':'relative'});
                this.subMenu.setStyle({'position':'absolute'});
                
                //var b_r = this.subMenu.getStyle('border-right-width');
                //var b_l = this.subMenu.getStyle('border-left-width');

                //var b_x = parseInt(b_r.substring(0, (b_r.length - 2))) + parseInt(b_l.substring(0, (b_l.length - 2)));
                var b_x = 0;
                if (this.options.positionTo) {
                    this.subMenu.clonePosition(this.menuItem,{'setWidth': false, 'setHeight': false});
                    var width = this.subMenu.getWidth();
                    var box = b_x + width;
                    var left = '-' + box + 'px';
                    this.subMenu.setStyle({'left': left});

                    return;
                }
                
                if (this.options.opens == 'bottom') {
                    this.subMenu.setStyle({'top': '100%'});
                    this.subMenu.setStyle({'left':'0'});
                }
                
                if (this.options.opens == 'left') {
                    var width = this.subMenu.getWidth();
                    var box = b_x + width;
                    var left = '-' + box + 'px';
                    this.subMenu.setStyle({'left': left});
                    this.subMenu.setStyle({'top': '0px'});
                }
                
                if (this.options.opens == 'right') {
                    var width = this.subMenu.getWidth();
                    var box = b_x + width;
                    var left = 9 + box + 'px';
                    this.subMenu.setStyle({'left': left});
                    this.subMenu.setStyle({'top': '0px'});
                }
            }
            
        }
    },
    showMenu: function() {
        if (pe) {
            clearTimeout(pe);
        }
        
        MenuControl.show(this);
    },
    show: function() {
        if (!this.subMenu.visible()) {
            if (this.options.showEffect) {

            } else {
                this.subMenu.setStyle({'display': 'block'});
                //this.subMenu.show();
            }
        }
    },
    hideMenu: function() {
        obj = this; // bind to pass
        pe = setTimeout(function() { MenuControl.hide(obj); }, this.options.delay);
    },
    hide: function() {
        if (this.subMenu.visible())
            if (this.options.hideEffect) {

            } else {
                this.subMenu.setStyle({'display': 'none'});
                //this.subMenu.hide();
            }
            
        
        if (pe) {
             clearTimeout(pe);
        }
    }   

});

document.observe("dom:loaded", function() {
  // create menu items from the DOM structure
  $$('li.menuitem').each ( 
    function(element) {
        new MenuItem(element);
    }
  );
  $$('div.menuitem').each ( 
    function(element) {
        new MenuItem(element, {'opens':'right'});
    }
  );
});