var WTMenu = Class.create({
    initialize: function(id, _options) {
        this.container = $(id);
        if (!this.container)
            return;

        this.options = {
            showEffect: _options.showEffect,
            hideEffect: _options.hideEffect,
            duration: _options.duration ? _options.duration : 0.5,
            topOffset: _options.topOffset ? _options.topOffset : 0,
            leftOffset: _options.leftOffset ? _options.leftOffset : 0,
            autocloseTimeout: _options.autocloseTimeout ? _options.autocloseTimeout * 1000 : 1000,
            positionSubmenu: _options.positionSubmenu !== undefined ? _options.positionSubmenu : true,
            oneSubmenuVisible: _options.oneSubmenuVisible !== undefined ? _options.oneSubmenuVisible : false
        };


        this.container.select("li>a").each(function(el) {
            var submenu = el.next();
            if (submenu) {
                el.submenu = submenu;
                el.topLevel = el.up().hasClassName("topLevel");
                el.observe("mouseover", this.showSubmenu);
                el.observe("mouseout", this.hideSubmenu);
                el.menu = this;
                submenu.style.visibility = 'visible'
                submenu.trigger = el;
                submenu.menu = this;
                submenu.observe("mouseover", this.submenuMouseOver);
                submenu.observe("mouseout", this.submenuMouseOut);
            }
            else {
                if (el.hasClassName("topLevel"))
                    el.observe("mouseover", this.hideAllSubmenus.bindAsEventListener(this));
            }
        } .bind(this));
    },

    hideAllSubmenus: function() {
        if (this.options.oneSubmenuVisible) {
            this.container.select('li>a').each(function(el) {
                if (el.submenu) {
                    var fx = el.menu.hideSubmenuEffect.bind(el.submenu, el.submenu);
                    fx();
                }
            });
        }
    },

    showSubmenu: function(event) {
        if (this.hideTimeout)
            clearTimeout(this.hideTimeout);

        if (this.menu.options.positionSubmenu) {
            this.submenu.clonePosition(this, {
                setLeft: true,
                setTop: true,
                setWidth: false,
                setHeight: false,
                offsetLeft: this.topLevel ? 0 : this.getWidth() + this.menu.options.leftOffset,
                offsetTop: this.topLevel ? this.getHeight() + this.menu.options.topOffset : 0
            });
        }

        var f = this.menu.hideAllSubmenus.bind(this.menu);
        f();

        if (this.menu.options.showEffect)
            Effect[this.menu.options.showEffect].apply(Effect, [this.submenu, { duration: this.menu.options.duration}]);
        else
            this.submenu.show();

        // ATOMIUM SPECIFIC! : Align second level menu horizontally
        this.submenu.style.paddingLeft = 0 + "px";
        var inner = 0;
        this.submenu.childElements().each(function(el) {
            inner += el.down() ? el.down().getWidth() : el.getWidth();
        });
        var pad = this.submenu.getWidth() / 2 - inner / 2;
        pad = pad < 0 ? 0 : pad;
        this.submenu.style.paddingLeft = pad + "px";

    },

    hideSubmenuEffect: function(el) {
        if (this.menu.options.hideEffect)
            Effect[this.menu.options.hideEffect].apply(Effect, [this, { duration: this.menu.options.duration}]);
        else
            this.hide();
    },

    hideSubmenu: function(event) {
        this.hideTimeout = setTimeout(this.menu.hideSubmenuEffect.bindAsEventListener(this.submenu), this.menu.options.autocloseTimeout);
    },

    submenuMouseOver: function(event) {
        clearTimeout(this.trigger.hideTimeout);
    },

    submenuMouseOut: function(event) {
        this.trigger.hideTimeout = setTimeout(this.menu.hideSubmenuEffect.bindAsEventListener(this), this.menu.options.autocloseTimeout);
    }
});