/********************
*   SimpleMenu
*
*   Example
*
*       var menu = new SimpleMenu($('container', {
*           opacity: .80
*       });
*
*   Version             0.52
*
*   Requires            MooTools Core 1.2.2
*                       MooTools More 1.2.2.1
*
*
*   License             MIT License
*   Author              Aaron Dixon 
*                           aaron@evolvewebstudio.com
*                           evolvewebstudio.com
*
*   Copyright           2009 UF Foundation, UF Alumni Association
*
*   Revisions           0.50    Initial release
*                       0.51    Add z-index onShow and onHide
*                       0.52    Added support for only displayin in IE6
*                               Added support for MooTools Core 1.2.2 and More 1.2.2.1
*
********************/

var SimpleMenu = new Class({

    Implements: [Events, Options],

    options: {
        menuType: 'click',      // click | hover
        identifier: 'sm-tab',
        opacity: .95,
        tabClass: 'tab',
        activeClass: 'focused',
        changeTransition: Fx.Transitions.Sine.easeOut,
        openDuration: 500,
        closeDuration: 500,
        subMenuPrefix: 'sm-',

        // not implemented
        offsetX: 0,
        offsetY: 0,
        openDir: 'down',
        closeDelay: 0
    },

    initialize: function(element, options) {
        this.open = null;
        this.shim = null;
        this.state = 'closed';
        this.out = null;
        this.stats = new Hash();

        this.setOptions(options);
        this.build($(element));
    },

    build: function(el) {
        this.tabs = $$('#' + el.id + ' li.' + this.options.identifier);
        this.tabs.each(function(tab) {
            var tabMenu = $(this.options.subMenuPrefix + tab.id);

            // bind events based on menuType
            if (this.options.menuType == 'click') {
                $(tab).getElement('a').addEvent('click', function() {
                    this.onClick(tab);
                    return false;
                } .bind(this));
            }
            else {
                tab.addEvent('mouseenter', function() {
                    this.onMouseEnter(tab);
                    return false;
                } .bind(this));
            }
        } .bind(this));
    },

    onClick: function(tab) {
        if (this.open != null && this.open != tab) {
            this.hideMenu(this.open);
        }
        else if (this.open != null && this.open == tab) {
            this.hideMenu(tab);
            this.open = null;
            return false;
        }

        this.open = tab;

        if (this.out != null) { document.removeEvent('click', this.out); }
        this.out = function() { this.onDocumentClick(); } .bind(this);
        document.addEvent('click', this.out);

        this.showMenu(tab);
    },

    onDocumentClick: function() {
        if (this.state == 'open') {
            this.hideMenu(this.open);
        }
        document.removeEvent('click', this.out);
        this.open = null;
    },

    onMouseEnter: function(tab) {
        if (this.out != null) { tab.removeEvent('mouseleave', this.out); }
        this.out = function() { this.onMouseLeave(tab); } .bind(this);
        tab.addEvent('mouseleave', this.out);
        this.showMenu(tab);
    },

    onMouseLeave: function(tab) {
        this.hideMenu(tab);
        tab.removeEvent('mouseleave', this.out);
    },

    showMenu: function(tab) {
        this.state = 'open';
        tab.removeClass(this.options.tabClass).addClass(this.options.activeClass);

        var tabMenu = $(this.options.subMenuPrefix + tab.id);
        tabMenu.setStyles({ opacity: 0, display: 'block', zIndex: 10000, width: tabMenu.getStyle('width') });

        var myFx = new Fx.Morph(tabMenu, { duration: this.options.openDuration, transition: this.options.changeTransition });
        myFx.start({
            'opacity': [0, this.options.opacity]
        });

        this.shim = new IframeShim(tabMenu, {
            name: 'navshim',
            display: false,
            browsers: Browser.Engine.trident4
        });
        this.shim.show();
    },

    hideMenu: function(tab) {
        this.state = 'closed';
        var tabMenu = $(this.options.subMenuPrefix + tab.id);

        tabMenu.setStyle('zIndex', 9999);

        var myFx = new Fx.Morph(tabMenu, { duration: this.options.closeDuration, transition: this.options.changeTransition });
        myFx.start({
            'opacity': [this.options.opacity, 0]
        }).chain(function() {
            tabMenu.setStyles(
                {
                    display: 'none',
                    zIndex: 1
                });
            tab.removeClass(this.options.activeClass).addClass(this.options.tabClass);
        } .bind(this));

        if (this.shim != null) this.shim.hide();
    }
});