Ext.onReady(function(){

        var activeMenu;

        function createMenu(name){
                var el = Ext.get(name+'-link');
                var tid = 0, menu, doc = Ext.getDoc();

                var handleOver = function(e, t){
                        if(t != el.dom && t != menu.dom && !e.within(el) && !e.within(menu)){
                                hideMenu();
                        }
                };

                var hideMenu = function(){
                        if(menu){
                                menu.hide();
                                el.setStyle('text-decoration', '');
                                doc.un('mouseover', handleOver);
                                doc.un('mousedown', handleDown);
                        }
                };

                var handleDown = function(e){
                        if(!e.within(menu)){
                                hideMenu();
                        }
                };

                var showMenu = function(){
                        clearTimeout(tid);
                        tid = 0;

                        if (!menu) {
                                menu = new Ext.Layer({shadow:'sides',hideMode: 'display'}, name+'-menu');
                        }
                        menu.hideMenu = hideMenu;

                        menu.el = el;
                        if(activeMenu && menu != activeMenu){
                                activeMenu.hideMenu();
                        }
                        activeMenu = menu;

                        if (!menu.isVisible()) {
                                menu.show();
                                menu.alignTo(el, 'tl-bl?');
                                menu.sync();
                                el.setStyle('text-decoration', 'underline');

                                doc.on('mouseover', handleOver, null, {buffer:150});
                                doc.on('mousedown', handleDown);
                        }
                };

                el.on('mouseover', function(e){
                        if(!tid){
                                tid = showMenu.defer(150);
                        }
                });

                el.on('mouseout', function(e){
                        if(tid && !e.within(el, true)){
                                clearTimeout(tid);
                                tid = 0;
                        }
                });
        }

        createMenu('products');
        createMenu('support');
        createMenu('store');

        // expanders
        Ext.getBody().on('click', function(e, t){
                t = Ext.get(t);
                e.stopEvent();

                var bd = t.next('div.expandable-body');
                bd.enableDisplayMode();
                var bdi = bd.first();
                var expanded = bd.isVisible();

                if(expanded){
                        bd.hide();
                }else{
                        bdi.hide();
                        bd.show();
                        bdi.slideIn('l', {duration:0.2, stopFx: true, easing:'easeOut'});
                }

                t.update(!expanded ? 'Hide details' : 'Show details');

        }, null, {delegate:'a.expander'});
});