window.addEvent('domready', function(){

/******************************
* Navigation hover transition
*******************************/
	var bgInject = new Element('img', {
		'styles': {
			'position': 'relative',
			'top': '-20px',
			'left': '0px',
			'float': 'left'
		},
		'events': { },
		'src': '../component/graphics/nav_active.gif'
	});
	bgInject.setOpacity(0);

	$$('#navigation ul li a').each(function(navlink){
		if (navlink.getParent().hasClass('nav_active') != true){
			bgInject.clone().injectInside(navlink.getParent());
			
			var linkfxEnter = new Fx.Styles(navlink.getParent().getElement('img'), {duration: 200, wait: false, transition: Fx.Transitions.Quad.easeOut});
			var linkfxLeave = new Fx.Styles(navlink.getParent().getElement('img'), {duration: 250, wait: false, transition: Fx.Transitions.Quad.easeOut});
			linkfxLeave.addEvent('onComplete', function(){
				navlink.getParent().getElement('img').setStyle('left', '0px');
			});
			
			navlink.addEvent('mouseenter', function(){
				linkfxEnter.start({
					'left': ['0px', '30px'],
					opacity: [0, 1]
				});
			});
			
			navlink.addEvent('mouseleave', function(){
				navlink.getParent().getElement('img').setStyles({ opacity: 1 });
				linkfxLeave.start({
					opacity: 0
				});
			});
		}
	});
});