var appear = function(e) {
    this.fading.stop()
    this.appearance.start(.9)
}

var fade = function(e) {
    this.appearance.stop()
    this.fading.start(0)
}

window.addEvent('load', function() {
    // fetch #header .menu > li
    var menus = $$('#header .menu')
    menus.each(function(menu) {
        menu.getElements('li').each(function(item) {
            if (item.getParent() == menu) {
                // we actually selected what we wanted
                var subcategory = item.getElement('ul')
                if ($defined(subcategory)) {
                    // only those with a subcategory (ie. a nested ul)
                    
                    /* cache reference to function and useful items */
                    item.subcategory = subcategory
                    item.appear = appear.bindWithEvent(item)
                    item.appearance = item.subcategory.effect('opacity', {
                        duration: 500,
                        onStart: function() {
                            item.subcategory.setStyle('display', 'block')
                            item.subcategory.setStyle('z-index', 10)
                        },
                        onCancel: function() {
                            item.fading.start(0)
                        }
                    })
                    item.appearance.set(0)
                    item.fade = fade.bindWithEvent(item)
                    item.fading = item.subcategory.effect('opacity', {
                        duration: 500,
                        onStart: function() {
                            item.subcategory.setStyle('z-index', 5)
                        },
                        onComplete: function() {
                            item.subcategory.setStyle('display', 'none')
                        },
                        onCancel: function() {
                            item.appearance.start(.9)
                        }
                    })
                    item.addEvent('mouseenter', item.appear)
                    item.addEvent('mouseleave', item.fade)
                }
            }
        })  
    })
})