var CustomerMenu = Class.create({
    initialize: function() {
        this.menu   = $('customer-menu');
        this.panel  = this.menu.select('.panel')[0];
        this.button = this.menu.select('#customer-menu-btn')[0];

        this.button.observe('click', this.triggerToggle.bind(this));
        document.observe('click', this.triggerHide.bind(this));
    },

    triggerToggle: function(event) {
        this.toggle();
        event.stop();
    },

    triggerHide: function(event) {
        element     = event.findElement('#customer-menu');
        isButton    = event.findElement('.button');
        isLink      = event.findElement('a');
        if (element && !isButton && !isLink) {
            // click occurred in the menu, but neither on a button of the login
            // form nor on a link
            // => menu must not disappear
            event.stop();
            return;
        }
        this.hide();
    },

    toggle: function() {
        if (this.isShown()) {
            this.hide();
        } else {
            this.show();
        }

        return this;
    },

    show: function() {
        this.panel.removeClassName('invisible');
        this.button.removeClassName('closed');
        this.button.addClassName('opened');

        return this;
    },

    hide: function() {
        this.button.removeClassName('opened');
        this.button.addClassName('closed');
        this.panel.addClassName('invisible');

        return this;
    },

    isShown: function() {
        return !this.panel.hasClassName('invisible');
    }
});

var customerMenu;

document.observe("dom:loaded", function() {
    // initially hide all containers for tab content
    customerMenu = new CustomerMenu();
});