var MenuHandler = new Class({
    initialize: function(elem) {
        this.root = $(elem)
        this._mark(this.root, 1)
        this._affect()
    },
    
    _mark: function(elem, level) {
        var t = this
        elem.getChildren().each(function(li) {
            li.getChildren().each(function(item) {
                if (item.getTag() == 'ul') {
                    item.addClass('sublevel-' + level)
                    t._mark(item, level + 1)
                }
            })
        })
    },
    
    _affect: function() {
        this.root.getElements('li').each(function(li) {
            // try to get ul
            var ul = li.getChildren()[1]
            if ($defined(ul)) {
                li.addEvent('mouseenter', function() {
                    ul.setStyle('display', 'block')
                })
                li.addEvent('mouseleave', function() {
                    ul.setStyle('display', 'none')
                })
            }
        })
    }
})

window.addEvent('domready', function() {
    new Asset.css('css/menuHeader.css')
    
    $$('#menuHeader ul').each(function(ul) {
        new MenuHandler(ul)
    })

})