Navigation = Class.create({
    initialize: function(element) {
        this.element = $(element);
        this.element.observe('mouseover', this.onItemOver.bindAsEventListener(this));
        this.element.observe('mouseout', this.hideMenu.bindAsEventListener(this));
        this.items = this.element.select('ul.secondary>li>a');
        this.items.invoke('observe', 'mouseover', this.showSubMenu.bindAsEventListener(this));
        this.resetAll();
        this.timer = null;
        Event.observe(window, 'beforeunload', this.resetAll.bindAsEventListener(this))
    },
    onItemOver: function(event) {
		var item = $(event.target);
		if (this.timer) clearTimeout(this.timer);
		this.timer = setTimeout(this.showMenu.bind(this, item), 150);
		// this.showMenu(item);
    },
    showSubMenu: function(event) {
        this.element.select('div.tertiary').invoke('hide');
        var selection = event.target.up().select('.tertiary')[0];
        if (selection) {
            selection.show();
            if (Prototype.Browser.IE) event.target.up().select('div.tertiary *').invoke('show');
        }
        event.stop();
    },
    showMenu: function(item) {
        var dropdown = item.up().select('div.subnav')[0];
        if (dropdown) {
            // var end = dropdown.getHeight();
            // dropdown.setStyle({
            //     display: 'block',
            //     height: '0px',
            //     overflow: 'hidden'
            // });
            // var effect = new Fx.Style(dropdown, 'height', {duration:100});
            //     effect.custom(0, end);
			dropdown.show();
        }
        if (item.up('li[class]')) {
            item.up('li[class]').addClassName('hover');
        }
    },
    hideMenu: function(event) {
        if (event.relatedTarget && !event.relatedTarget.up('#navigation') || !event.relatedTarget.up('li[class]').hasClassName('hover')) {
            this.resetAll();
            $$('li.hover').invoke('removeClassName', 'hover');
        }
        event.stop();
    },
    resetAll: function() {
        this.element.select('div.subnav').invoke('hide');
        this.element.select('div.tertiary').invoke('hide');
        if (this.timer) clearTimeout(this.timer);
        if (Prototype.Browser.IE) this.element.select('div.tertiary *').invoke('hide');
    }
});
Navigation.init = function() {
    Navigation.instance = new Navigation('navigation');
}
Event.observe(document, 'dom:loaded', Navigation.init);