var features = {
	Init:function(){
		var navLinks = $$('#featuresNav a');
		for( var i=0;i<navLinks.length;i++ )
		{
			navLinks[i].pos = i;
			Event.observe(navLinks[i], "click", features.onClick, false );
		}
		features.currNo = 1;
	},
	onClick:function(e){
		try{			
			$( "featureInfo" ).style.display = "none";
			
			var o = Event.element(e);
			$("featureText").innerHTML = "<h4>" + featurePages[o.pos].NAVNAME + "</h4>" + featurePages[o.pos].HTML;
			$("featureImg").src = "images/features/" + featurePages[o.pos].IMAGE;
			//unselect the selected li element
			var navLinkLis = $$('#featuresNav li');
			for( var i=0;i<navLinkLis.length;i++ ) navLinkLis[i].removeClassName("sel");
			var liParent = o.parentNode;
			liParent.addClassName("sel");
			
			new Effect.Appear( "featureInfo" );
			
			Event.stop(e);
			
		}
		catch(z){ alert("error"); Event.stop(e); }
	}
}
window.onload = features.Init;