Navigation = Class.create({
    initialize: function(element) {
        this.element = $(element);
        this.items = this.element.childElements();
        this.items.invoke('observe', 'mouseover', this.onItemOver.bindAsEventListener(this));
        this.items.invoke('observe', 'mouseout', this.onItemOut.bindAsEventListener(this));
        this.timer = null;
    },
    onItemOver: function(event) {
        // obtain the root <li>
        var item = event.element().up('li[class]') || event.findElement('li');

        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(this.showMenu.bind(this,item), 250);
        
    },
    onItemOut: function(event) {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.timer = setTimeout(this.hideMenu.bind(this), 250);
    },
    showMenu: function(item) {
        if (this.element.className != item.className) {
            this.element.className = item.className;
        }
    },
    hideMenu: function() {
        this.element.className = '';
    }
});
Navigation.init = function() {
    Navigation.instance = new Navigation('Navigation');
}
Event.observe(document, 'dom:loaded', Navigation.init);