$(function()
{
	//PNG transparency fix for IE6
	$("#hero").supersleight();
	
	var access = 0;
	var monitor = 1;
	var track = 2;
	var control = 3;
	var slides = new Array("access", "monitor", "track", "control");
	var graphicAnimLeft = Array('28px', '88px', '48px', '8px');
	var imageAnimLeft = Array('124px', '104px', '77px', '130px');
	
	function animateIn(slideNum)
	{
		// Animate items in
		$("#screen img." + slides[slideNum]).animate({ left: graphicAnimLeft[access] }, 380, 'easeInBack');
		$("#access img").animate({ left:  imageAnimLeft[slideNum]  }, 400, function()
		{
			$("#access h4").animate({ left: '336px' }, 500);
			$("#access ul").animate({ left: '341px' }, 300);
			currentSlide = slideNum;
			
			$("#hero ul#nav li").removeClass();
			$("#hero ul#nav li:nth-child(" + (currentSlide + 1) + ")").addClass("selected");
		});
	}
	
	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');
		});
	}
	
	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");
			});
		});
	}
	
	// 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);
	});
	
	// 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 == access)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(access);
	});
	
	// Animate out current slide and animate in slide 2
	$("#hero ul#nav li:nth-child(2)").click(function()
	{
		if(currentSlide == monitor)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(monitor);
	});
	
	// Animate out current slide and animate in slide 3
	$("#hero ul#nav li:nth-child(3)").click(function()
	{
		if(currentSlide == track)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(track);
	});
	
	// Animate out current slide and animate in slide 4
	$("#hero ul#nav li:nth-child(4)").click(function()
	{
		if(currentSlide == control)
			return;
		
		$("#hero ul#nav li").removeClass();
		$(this).addClass("selected");
		gotoSlide(control);
	});
	// Timers
	var mainTimer, timer1, timer2, timer3, timer4, timer5;
	
	var mainTimer = setInterval(insert, 21000);
	var currentSlide = 0;
	
	$("#hero ul#nav li").removeClass();
	$("#hero ul#nav li:nth-child(" + (currentSlide + 1) + ")").addClass("selected");
	
	function insert()
	{
		timer1 = setTimeout(function() { animateIn(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() { animateOut(control); }, 20000);
	}
	
	insert();
});