/**
 * Script to control the background effect on the page header
 * requires mootools 1.2.1
 * Anthony Theocharis, February 2009
 */

function setup_header() {
	// Add our own movement forum
	Fx.Transitions.extend({
		ShortElastic: function(p, x){
			return Math.pow(2, 25.5 * --p) * Math.cos(20 * p * Math.PI * (x[0] || 1) / 4);
		}
	});

	var hover_el = $('nav-hover');
	var opts = {duration: 2000, transition: Fx.Transitions.ShortElastic.easeOut, link:'cancel'};
	var effect = new Fx.Morph(hover_el, opts);
	var list_items = document.getElements('#nav > ul > li');

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

	// When the mouse goes over any of the list items, move the nav-hover to behind that item.
	list_items.each(function(li) {
		if (li != hover_el) {
			var width = li.getStyle('width')
			var left = li.getPosition(li.parentNode).x

			li.addEvent('mouseover', effect.start.bind(effect, [{width: width, left: left}]));
		}
	});
}

document.addEvent('domready', setup_header);