Ext.onReady(function () {
    var neighborWidth = new Array();
        neighborWidth[0] = 0;
    var closeMenu = {};
    var closeSubMenu = {};
    var i = 0;

    Ext.select('#menu .menu div.bd > ul > li').each(function () {
    //First level Menu
        var curId = this.getAttribute('id');
        var menu = this.child('#' + curId + ' > ul');
        var maxMenuWidth = 0;

        // Dynamic Width
        menu.setLeft(neighborWidth[i]);
        i++;
        neighborWidth[i] = neighborWidth[i-1] + this.getWidth();

        menu.select('> li a').each(function () {
            if (this.getWidth() >= maxMenuWidth) {
                maxMenuWidth = this.getWidth();
            }
        });

        menu.select('> li a').setWidth(maxMenuWidth);
        menu.select('> li').setWidth(maxMenuWidth);
        menu.setWidth(maxMenuWidth + 2);

        // Add Shadow
        var shadow = Ext.DomHelper.insertAfter(menu, { tag: 'div', cls: 'shadow'}, true);
        shadow.setHeight(menu.getHeight() + 3);
        shadow.setWidth(menu.getWidth() + 3);
        shadow.setLeft(neighborWidth[i - 1]);

        // EVENT MOUSEOVER //
        this.on('mouseover', function () {
            closeMenu[curId] = false;

            // close all shadows on this layer
            menu.select(' > div.shadow').setStyle('display', 'none');

            menu.setStyle('display', 'block');
            shadow.setStyle('display', 'block');
        });

        // EVENT MOUSEOUT //
        this.on('mouseout', function () {
            closeMenu[curId] = true;

            // close all children of this layer
            menu.select('li.lastOpenNode').each(function () {
                this.select('ul').setStyle('display', 'none');
                this.select('div.shadow').setStyle('display', 'none');
            });

            setTimeout(function() {
                if (closeMenu[curId] == true) {
                    shadow.setStyle('display', 'none');
                    menu.setStyle('display', 'none');
                }
            }, 20);
        });

        //Second level
        this.select('.node').each(function() {
            var maxSubMenuWidth = 0;
            var curSubId = this.getAttribute('id');
            var subMenu = this.child('#' + curSubId + ' > ul');

            // Dynamic Width
            subMenu.select('> li a').each(function () {
                if (this.getWidth() >= maxSubMenuWidth) {
                    maxSubMenuWidth = this.getWidth();
                }
            });

            subMenu.select('> li').setWidth(maxSubMenuWidth - 2);
            subMenu.select('> li a').setWidth(maxSubMenuWidth - 2);
            subMenu.setWidth(maxSubMenuWidth);

            // Add Shadow
            var shadow = Ext.DomHelper.insertAfter(subMenu, { tag: 'div', cls: 'shadow'}, true);
            shadow.setHeight(subMenu.getHeight() + 6);
            shadow.setWidth(subMenu.getWidth() + 6);
            shadow.setLeft(menu.getWidth() - 5);
            shadow.setTop(subMenu.getTop()- 109);

            // IE <3
            if(Ext.isIE6 || Ext.isIE7) {
                shadow.setTop(subMenu.getTop()- 111);
            }

            if(Ext.isIE6) {
                shadow.setWidth(subMenu.getWidth() + 6);
                shadow.setLeft(menu.getWidth() - 5);

                subMenu.select('> li').setWidth(maxSubMenuWidth);
                subMenu.select('> li a').setWidth(maxSubMenuWidth);
            }

            // EVENT MOUSEOVER //
            this.on('mouseover', function () {
                closeMenu[curId] = false;
                closeSubMenu[curSubId] = false;

                // close all neighbors on this layer
                subMenu.up('ul').select(' > li.lastOpenNode').each(function () {
                    this.child('ul').setStyle('display', 'none');
                    this.child('div.shadow').setStyle('display', 'none');
                });
                shadow.setStyle('display', 'block');
                subMenu.setStyle('display', 'block');
            });

            // EVENT MOUSEOUT //
            this.on('mouseout', function () {
                closeMenu[curId] = true;
                closeSubMenu[curSubId] = true;

                setTimeout(function() {
                    if (closeSubMenu[curSubId] === true) {
                        subMenu.setStyle('display', 'none');
                        shadow.setStyle('display', 'none');
                    }
                }, 20);
            });

            //Initial Menu hiding
            subMenu.setStyle('visibility', 'visible');
            subMenu.setStyle('display', 'none');
        });
        //Initial Menu hiding
        menu.setStyle('display', 'none');
        menu.setStyle('visibility', 'visible');
    });
});