if (typeof (RE) == 'undefined')
{ Ext.namespace('RE'); }

if (typeof (RE.Forms) == 'undefined')
{ Ext.namespace('RE.Forms'); }


Ext.onReady(function() {
    initMenus(Ext.query('.re-menu-withchildren ul'));
});

function initMenus() {
    main_menu = Ext.get('mainMenu');
    if (main_menu) {
        var firstEl = main_menu.child('li');
        firstEl.addClass('firstChild');
        BuildMenuItems(main_menu.query('.re-menu-withchildren ul'), true);
    }

    sub_menu = Ext.get('re-subnav');
    if (sub_menu) {
        BuildMenuItems(sub_menu.query('.re-menu-withchildren ul'));
    }
}
function BuildMenuItems(els, modifyPositions) {
    for (var x = 0; x < els.length; x++) {
        var config;

        if (modifyPositions && x >= els.length - 2)
            config = { alignTo: 'tr-br' };

        new RE.DropMenu(els[x], config);
    }
}

RE.DropMenu = function(el, config) {
    this.menu = Ext.get(el);
    this.parentMenu = Ext.get(this.menu.dom.parentNode);
    Ext.apply(this, config);
    this.attachEvents();
};
RE.DropMenu.prototype = {
    alignTo: 'tl-bl',
    initHeight: null,
    hidden: true,
    isInitialized: false,
    initialize: function() {

        this.menu.addClass('re-menu-drop');

        var layer = new Ext.Layer({
            shim: true,
            constrain: true
        });

        this.shim = layer.createShim();

        itemEls = this.menu.query('li.re-menu-leaf');
        for (var x = 0; x < itemEls.length; x++) {
            itm = Ext.get(itemEls[x]);
            itm.addClassOnOver('re-menu-item-over');
           // itm.setWidth(this.menu.getComputedWidth());
            this.initHeight += itm.getComputedHeight();
        }

        this.menu.setWidth(this.menu.getComputedWidth());

        layer.setBox(this.menu.getBox());
        this.shim.setBox(this.menu.getBox());

        var ITEM_HORIZONTAL_PADDING = 17;
        this.shim.setWidth(this.menu.getWidth() + ITEM_HORIZONTAL_PADDING);
        layer.setWidth(this.menu.getWidth() + ITEM_HORIZONTAL_PADDING);

        layer.clearOpacity();
        layer.setHeight(0);

        this.menu.appendTo(layer);
        this.el = layer;
        this.isInitialized = true;
    },

    attachEvents: function() {
        this.parentMenu.hover(this.show, this.hide, this);
        this.menu.hover(this.show, this.hide, this);
    },
    hide: function(evt, t, o) {
        if (!evt.within(this.parentMenu, this.menu, true)) {
            if (!evt.within(this.menu, true)) {
                this.el.hide();
                this.shim.hide();
                this.el.setHeight(0);
                this.parentMenu.removeClass('re-menu-hover');
                this.hidden = true;
            }
        }
    },
    show: function(evt, t, o) {
        if (evt.within(this.parentMenu)) {

            if (!this.isInitialized)
                this.initialize();

            this.el.alignTo(this.parentMenu, this.alignTo);
            this.shim.alignTo(this.parentMenu, this.alignTo);
            this.parentMenu.addClass('re-menu-hover');
            this.el.show();
            this.el.setHeight(this.initHeight, true);
            this.shim.setHeight(this.initHeight, false);
            this.shim.show();
            this.hidden = false;
        }
    }
}