var menuDiv = $('menu');
//beware not to select logout item
var menuItems = Element.select(menuDiv, 'ul li');
var submenuDiv = $('submenu');
var submenuLists = Element.select(submenuDiv, 'ul');
var submenuItems = new Array(submenuLists.length);
for (var i = 0; i < submenuLists.length; ++i) submenuItems[i] = Element.select(submenuLists[i], 'li');

var showTasks = new Array(menuItems.length);

//behaviour rules
var menuRules = {
    '#menu ul li' : function(element){

        element.onmouseover = function() {
            //activateMenu(this);
            for (var i = 0; i < showTasks.length; ++i) {
                if (showTasks[i] != null) showTasks[i].stop();
                if (menuItems[i].id == element.id) {
                    showTasks[i] = new PeriodicalExecuter(function(pe) {
                        activateMenu(element);
                        pe.stop();
                    }, 0.5);
                }
            }
        }

        element.onmouseout = function() {
            for (var i = 0; i < showTasks.length; ++i) {
                if (showTasks[i] != null) {
                    if (menuItems[i].id == element.id) {
                        if (showTasks[i] != null) {
                            showTasks[i].stop();
                        }
                    }
                }
            }
        }
    }
};
Behaviour.register(menuRules);

function activateMenu(menuItem) {
    //deactivate previously activated menu
    deactivateAllMenus();
    //hide previously selected submenu
    hideAllSubmenus();
    //show selected submenu
    for (var j = 0; j < menuItems.length; ++j) {
        if (menuItems[j].id == menuItem.id && j < submenuLists.length) {
            submenuLists[j].className = 'submenuActive';
        }
    }
    if (menuItem.className.indexOf('menuInactive') > 0) menuItem.className = menuItem.className.replace('menuInactive', 'menuActive')
    else menuItem.className = menuItem.className + ' menuActive';
}

function hideAllSubmenus() {
    var selectedSubmenus = Element.select(submenuDiv, '.submenuActive');
    for (var i = 0; i < selectedSubmenus.length; ++i) {
        selectedSubmenus[i].className = 'submenuInactive';
    }
}

function deactivateAllMenus() {
    var activeMenus = Element.select(menuDiv, '.menuActive');
    for (var i = 0; i < activeMenus.length; ++i) {
        activeMenus[i].className = activeMenus[i].className.replace('menuActive', 'menuInactive');
    }
}