$(function()
{
	//PNG transparency fix for IE6
	$("#hero").supersleight();
	
	var prepare = 0;
	var access = 1;
	var monitor = 2;
	var track = 3;
	var control = 4;
	var slides = new Array("prepare", "access", "monitor", "track", "control");
	var graphicAnimLeft = Array('51px', '28px', '88px', '48px', '8px');
	var imageAnimLeft = Array('95px', '124px', '104px', '77px', '130px');
	
	function animateIn(slideNum)
	{
		// Animate items in
		$("#screen img." + slides[slideNum]).animate({ left: graphicAnimLeft[prepare] }, 380, 'easeInBack');
		$("#prepare img").animate({ left:  imageAnimLeft[slideNum]  }, 400, function()
		{
			$("#prepare h4").animate({ left: '336px' }, 500);
			$("#prepare ul").animate({ left: '341px' }, 300);
			currentSlide = slideNum;
			
			$("#hero ul#nav li").removeClass();
			$("#hero ul#nav li:nth-child(" + (currentSlide + 1) + ")").addClass("selected");
			
		});
		$("#" + slides[slideNum] + "Link").css("display", 'block');
	}
	
	function animateOut(slideNum)
	{
		// Animate items out
		$("#screen img." + slides[slideNum]).animate({ left: '-200px' }, 380);
		$("#" + slides[slideNum] + " img").animate({ left: '-50' }, 200);
		$("#" + slides[slideNum] + " ul").animate({ left: '-180' }, 500);
		$("#" + slides[slideNum] + " h4").animate({ left: '-180' }, 700, function ()
		{
			// Reset animated items back to start position
			$("#screen img." + slides[slideNum]).css('left', '150px');
			$("#" + slides[slideNum] + " img").css('left', '724px');
			$("#" + slides[slideNum] + " h4").css('left', '724px');
			$("#" + slides[slideNum] + " ul").css('left', '724px');
		});
		$("#" + slides[slideNum] + "Link").css("display", 'none');
	}
	
	function animateOutAndIn(slideNumOut, slideNumIn)
	{
		// Animate items out
		$("#screen img." + slides[slideNumOut]).animate({ left: '-200' }, 380);
		$("#" + slides[slideNumOut] + " img").animate({ left: '-50' }, 200);
		$("#" + slides[slideNumOut] + " ul").animate({ left: '-180' }, 500);
		$("#" + slides[slideNumOut] + " h4").animate({ left: '-180' }, 700, function()
		{
			// Reset animated items back to start position
			$("#screen img." + slides[slideNumOut]).css('left', '150px');
			$("#" + slides[slideNumOut] + " img").css('left', '724px');
			$("#" + slides[slideNumOut] + " h4").css('left', '724px');
			$("#" + slides[slideNumOut] + " ul").css('left', '724px');
			
			// Animate items in
			$("#screen img." + slides[slideNumIn]).animate({ left: graphicAnimLeft[slideNumIn] }, 380, 'easeInBack');
			$("#" + slides[slideNumIn] + " img").animate({ left: imageAnimLeft[slideNumIn] }, 400, function()
			{
				$("#" + slides[slideNumIn] + " h4").animate({ left: '336px' }, 500);
				$("#" + slides[slideNumIn] + " ul").animate({ left: '341px' }, 300);
				currentSlide = slideNumIn;
				
				$("#hero ul#nav li").removeClass();
				$("#hero ul#nav li:nth-child(" + (currentSlide + 1) + ")").addClass("selected");
			});
		});
		$("#" + slides[slideNumOut] + "Link").css("display", 'none');
		$("#" + slides[slideNumIn] + "Link").css("display", 'block');
	}
	
	// Clear timers on select of navigation item
	$("#hero ul#nav li").click(function()
	{
		clearInterval(mainTimer);
		clearTimeout(timer1);
		clearTimeout(timer2);
		clearTimeout(timer3);
		clearTimeout(timer4);
		clearTimeout(timer5);
		clearTimeout(timer6);
	});
	
	// Go to next slide
	function gotoSlide(slideNum)
	{
		if ($("ul, h4, img").is(":animated"))
		{
			return;
		}
		else
		{
			animateOutAndIn(currentSlide, slideNum);
		}
	}
	
	// Animate out current slide and animate in slide 1
	$("#hero ul#nav li:nth-child(1)").click(function()
	{
		if(currentSlide == prepare)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(prepare);
	});

	// Animate out current slide and animate in slide 2
	$("#hero ul#nav li:nth-child(2)").click(function()
	{
		if(currentSlide == access)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(access);
	});
	
	// Animate out current slide and animate in slide 3
	$("#hero ul#nav li:nth-child(3)").click(function()
	{
		if(currentSlide == monitor)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(monitor);
	});
	
	// Animate out current slide and animate in slide 4
	$("#hero ul#nav li:nth-child(4)").click(function()
	{
		if(currentSlide == track)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(track);
	});
	
	// Animate out current slide and animate in slide 5
	$("#hero ul#nav li:nth-child(5)").click(function()
	{
		if(currentSlide == control)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(control);
	});
	

	// Timers
	var mainTimer, timer1, timer2, timer3, timer4, timer5, timer6;
	
	var currentSlide = 0;
	
	$("#hero ul#nav li").removeClass();
	$("#hero ul#nav li:nth-child(" + (currentSlide + 1) + ")").addClass("selected");
	
	animateIn(prepare);
	
	function insert()
	{
		timer1 = setTimeout(function() { animateOutAndIn(prepare, access); }, 0);
		timer2 = setTimeout(function() { animateOutAndIn(access, monitor); }, 5000);
		timer3 = setTimeout(function() { animateOutAndIn(monitor, track); }, 10000);
		timer4 = setTimeout(function() { animateOutAndIn(track, control); }, 15000);
		timer5 = setTimeout(function() { animateOutAndIn(control, prepare); }, 20000);
	}
	
	function startTimer()
	{
		mainTimer = setInterval(insert, 26000);
		insert();
	}
	
	setTimeout(startTimer, 15000);
});