$(document).ready(function(){
	
	//Set feature pane dims
	function setFeatureDims(){
		var h = $("#featureSupp").outerHeight() - 1;
		$("#featureMain").css("height",h);
	}
	
	//Begin anim interval
	function startAnim(){
		anim = setInterval(function(){
			 animFeature();
		}, 6000);
	}
	
	//Animate features
	function animFeature(){
		var featContainer = $("#featureContainer");
		var featNewLeft = (parseInt(currFeat) - 1) * w;
		if (currFeat > featCount){
			featNewLeft = 0;
			currFeat = 1;
		}
		featContainer.animate({
			left: "-" + featNewLeft + "px"
		}, 700, function() {
			$(".this").removeClass("this");
			$("#nav" + currFeat).addClass("this");
			currFeat = currFeat + 1;
		});	
	}
	
	//Initialise global vars
	var anim;
	var w = 520;
	var currFeat =  1;
	var featCount = $(".feature").length;
	
	//Display for JS
	$("#loading").show();
	$("#featureNav").show();
	
	// Size image window on load
	setFeatureDims();
	// Then on supp image load
	$(".feat img").load(function() {
	  setFeatureDims();
	});
	// Then on resize
	$(window).resize(function() {
		setFeatureDims();
	});
	
	//Start animation
	$("#nav" + currFeat).addClass("this");
	startAnim();
	
	// Controls
	$("#featureNav li a").click(function(e){
		e.preventDefault();
		clearInterval(anim);
		var thisClass = $(this).attr("class");
		if(thisClass == "next"){
			//load next feat
			$("a.pause").removeClass("pause").addClass("play").text("Play");
			currFeat = $(this).text();
			animFeature();
		} else if (thisClass == "pause"){
			//pause anim
			$(this).removeClass("pause").addClass("play").text("Play");
		} else if (thisClass == "play"){
			//play anim
			startAnim();
			$(this).removeClass("play").addClass("pause").text("Pause");
		}
	});
	
	//Item focus - slide into view (for IE)
	//$(".cont h2 a").focus(function(){
	//	var featId = $(this).parent("h2").parent("div").parent(".feature").attr("id");
	//	currFeat = parseInt(featId.replace("feat",""));
	//	animFeature();
	//});
 });