$(document).onready(function() {
    var menuItems = new Menu("vertical-navigation").menuItems("li");

    for(var i = 0; i < menuItems.length; i++) {
        var menuItem = menuItems[i];

        menuItem.addEventHandler("mouseover",
            function(event, source) {
                source.setActive(true);
                source.getElement().addClassName("over");
            }
        );

        menuItem.addEventHandler("mouseout",
            function(event, source) {
                // set this element as inactive but do not remove the highlight immediately.
                source.setActive(false);
                window.setTimeout(function() {
                    if(!source.isActive()) {
                        source.getElement().removeClassName("over");
                    }
                }, 100);
            }
        );

    }
});
 
Menu = Class.create();
Menu.prototype = {
    version: "1.0.0",

    element: null,

    initialize: function(element) {
        this.element = $(element);
    },

    menuItems: function(type) {
        return this.getMenuItems(null, this.element, type);
    },

    getMenuItems: function(parent, node, type) {
        var menuItems = new Array();
        for(var i = 0; i < node.childNodes.length; i++) {
            var childNode = node.childNodes[i];
            if(childNode.nodeName.toLowerCase() == type) {
                var menuItem = menuItems[menuItems.length] = new Menu.MenuItem(parent, childNode);
                var _menuItems = this.getMenuItems(menuItem, childNode, type);
                for(var j = 0; j < _menuItems.length; j++) {
                    menuItems[menuItems.length] = _menuItems[j];
                }
            } else if(childNode.childNodes != null) {
                var _menuItems = this.getMenuItems(parent, childNode, type);
                for(var j = 0; j < _menuItems.length; j++) {
                    menuItems[menuItems.length] = _menuItems[j];
                }
            } else {
                continue;
            }
        }
        return menuItems;
    }
}

Menu.MenuItem = Class.create();
Menu.MenuItem.prototype = {
    version: "1.0.0",

    parent: null,
    element: null,
    active: false,
    eventhandlers: null,

    initialize: function(parent, element) {
        this.parent = parent;
        this.element = element;
        this.eventhandlers = {};

        if(!Prototype.Browser.IE) {
            try { Effects.$3d.apply(this.element); } catch(e) { /* do nothing. */ }
        }
    },

    getParent: function() {
        return this.parent;
    },

    getElement: function() {
        return this.element;
    },

    isActive: function() {
        return this.active;
    },

    setActive: function(active) {
        this.active = (active == null || active != false);

        // if this element is active make sure the parent is active.
        if(this.isActive()) {
            if(this.getParent() != null) {
                this.getParent().setActive(true);
            }
        }
    },

    addEventHandler: function(event, handler) {
        if(this.eventhandlers[event] == null) {
            Event.observe(this.element, event, this._actionPerformed.bindAsEventListener(this));
        }

        this.eventhandlers[event] = handler;
    },

    _actionPerformed: function(event) {
        if(this.eventhandlers[event.type] != null) {
            this.eventhandlers[event.type](event, this);
        }
    }
}