var leftNavAnimationSpeed = 500;
var leftNavFx = new Array();

window.addEvent('domready',leftNavInit);

function leftNavInit()
{
	//with each list item in the left nav
	$$('.productNav')[0].getChildren().each(function(el,index){

		//If the list item is not the header or currently active
		if(el.id!='productNavHeader' && !(el.getChildren()[0].hasClass('active')))
		{
			//Adjust the list item to prevent overflowing
			el.setStyles({'display':'block', 'height':30, 'overflow':'hidden'});
			
			//Inject the image into the list item
			var objImg = new Element('img',{'src':'/images/productListItemHover.jpg'});
			objImg.setStyles({'opacity':0});
			objImg.inject(el,'top');
			
			//Adjust the position of the hyperlink in the list item
			el.getChildren()[1].setStyles({'position':'relative', 'top':-30});
			
			//Create an FX animation for the list item
			leftNavFx[index] = new Fx.Morph(el.getChildren()[0],{duration:leftNavAnimationSpeed, transition: Fx.Transitions.Sine.easeOut, wait:false});
			
			//Add hover events to the list item
			el.addEvent('mouseenter', function(){leftNavFx[index].cancel(); leftNavFx[index].set({'opacity':1});});
			el.addEvent('mouseleave', function(){leftNavFx[index].start({'opacity':0});});
			
			//Add click event to the list item to follow the link inside it
			el.addEvent('click', function(){document.location.href=el.getChildren()[1].href});
		}
	});
}