/**
 * add events to nav elements to make animated
 * re-written because IE doesn't like anything
 * @see http://forum.mootools.net/topic.php?id=3511
 */
window.addEvent('domready', function() 
{
	// -- set up navigation
	
	var list = $$('#mainNav li a');
	list.each(function(element, index) {
		var fx = new Fx.Tween(element, {duration:200, transition:Fx.Transitions.Back.easeOut, link:'cancel'});
		
		// - cannot use getStyle('background-position') (FF2, IE*)
		element.addEvent('mouseout', function(event) {
			if (!this.getParent().hasClass('active'))
			{
				var bp = element.getStyle('background-position');
				if (bp == undefined)
				{
					return;
				}
				var s = bp.split(" "); var y = s[1];
				fx.start('background-position', '-10px ' + y);
			}
		});
		element.addEvent('mouseover', function(event) {
			var bp = element.getStyle('background-position');
			if (bp == undefined)
			{
				return;
			}
			var s = bp.split(" "); var y = s[1];
			fx.start('background-position', '0px ' + y);
		});
	});

});