/**
 * Script to control the background effect on the page header
 * requires mootools 1.2.1
 * Copyright Simple Station Inc., 2009
 */

document.addEvent('domready', function(){
    
    var hoverEl = $('nav-hover');

    var opts = {
        link:'cancel',
        duration: 300,
        transition: Fx.Transitions.Sine.easeOut
    };
    var effect = new Fx.Morph(hoverEl, opts);
    var listItems = document.getElements('#nav > ul > li');

    // When the mouse leaves the top menu, reset the nav-hover to its original location
    var width = hoverEl.getStyle('width');
    var left = hoverEl.getStyle('left');  
    $('nav').addEvent('mouseleave', effect.start.bind(effect, [{
        width: width,
        left: left
    }]));

    // When the mouse goes over any of the list items, move the nav-hover to behind that item.
    listItems.each(function(li, i) {
        if (li != hoverEl) {
            var width = li.getStyle('width');
            var left = li.getPosition(li.parentNode).x;
            li.addEvent('mouseover', effect.start.bind(effect, [{
                display: 'block',
                width: width,
                left: left
            }]));
        }
    });
});