// Define Menu Effects
var menuFX = function(element){
    // get element reference
    this.el = element;

    // FX settings
    this.fx = new Fx.Morph(this.el, {
            link: 'cancel',		// cancel running fx on el, and animate from current pos
            duration: 'normal', // 500ms
            transition: Fx.Transitions.Quart.easeOut
	});

    // add mouseover and mouseout events
    this.el.addEvents({
        'mouseover': function(){
            this.fx.start('.menuDown');
        }.bind(this), // bind 'this' el to the event 'this'
        'mouseout': function(){
            this.fx.start('.menuUp');
        }.bind(this)
    });
};

// Get to work once DOM is ready
window.addEvent('domready', function(){
    // attach the menuFX function to each item
    $$('#mainMenu li a.menuUp').each(function(el){
        var itemFX = new menuFX(el);
    });
});