var MainMenu = new  Class({
    initialize: function() {
        this.mainMenu = $('mainmenu');
        this.menus = new Array();
        this.mainMenu.getChildren('li').each(function(m) {
            this.menus[this.menus.length] = m;
            $$('ul.submenu').each(function(submenu) {
                if (submenu.getProperty('rel') == m.id) {
                    m.submenu = submenu;
                    m.addEvents({'mouseover': function() {
                        this.positionSubMenu(m, m.submenu);
                        var img = m.getElement('img');
                        if (img) img.src = img.src.replace('.jpg', '_ov.jpg');
                        m.submenu.setStyle('display', 'block');
                    }.bind(this), 'mouseout': function() {
                        var img = m.getElement('img');
                        if (img) img.src = img.src.replace('_ov.jpg', '.jpg');
                        m.submenu.setStyle('display', 'none');
                    }});
                }
            }.bind(this));
        }.bind(this));
    },
    
    positionSubMenu: function(menu, submenu) {
        var pos = menu.getPosition();
        var size = menu.getSize();
        if (submenu.hasClass('rightmenu'))
            submenu.setStyles({'left': pos.x + size.x - 230, 'top': pos.y + size.y - 4});
        else
            submenu.setStyles({'left': pos.x, 'top': pos.y + size.y - 4});
    }
});

window.addEvent('domready', function() {
    var menu = new MainMenu();
});