$(function(){
	var numTabs = $("#collections a").get();
	if(numTabs.length == 5){
		$("#collections a:last").css("borderRight", "none");
	};
	if(numTabs.length == 5){
			$("#collections a:last").css("borderRight", "none");
	};
	var tab = 0;
	
	$("#collections a").removeAttr("style");
	$(numTabs[0]).addClass("on");
	var bgColor = $(numTabs[0]).attr("name");
	$(numTabs[0]).attr("style","background: #"+bgColor+";");
	var bundle_show = $(numTabs[0]).attr("alt");
	$("#"+bundle_show).addClass("positive");
	
	var timer;
	function startTime(){
		timer = window.setInterval(startTimer, 8000);
	}
	function stopTime(){
		window.clearInterval(timer);
	}
	function startTimer(){
		$(".bundleMore.positive").animate({left: "-700px"});
		$(".bundleMore.positive").removeClass("positive");
		$(".on").removeClass("on");
		$("#collections a").removeAttr("style");
		$(numTabs[tab]).addClass("on");
		var bgColor = $(numTabs[tab]).attr("name");
		$(numTabs[tab]).attr("style","background: #"+bgColor+";");
		$(".bundle.positive").removeClass("positive");
		var bundle_show = $(numTabs[tab]).attr("alt");
		$("#"+bundle_show).addClass("positive");
		if(tab < numTabs.length-1){
			tab++;
		}else{
			tab = 0;
		}
	};
	// listen for a link in the collections id to be clicked
	$("#collections a").click(function(){
		 stopTime();
		//Hide the links if they are visible
		$(".bundleMore.positive").animate({left: "-700px"});
		$(".bundleMore.positive").removeClass("positive");
		// remove all positive classes and styles
		$(".on").removeClass("on");
		$("#collections a").removeAttr("style");
		if(numTabs.length == 5){
			$("#collections a:last").css("borderRight", "none");
		};
		// add the positive class to this tab and the background
		$(this).addClass("on");
		var bgColor = $(this).attr("name");;
		$(this).attr("style","background: #"+bgColor+";");
		//hide all bundles
		$(".bundle.positive").removeClass("positive");
		// Get the clicked links alt attribute and put it in a variable
		var bundle_show = $(this).attr("alt");
		//take the alt of the link and add the id sign to it to find the div with that id to make positive
		$("#"+bundle_show).addClass("positive");
		$("#pause").hide();
		$("#play").show();
	});
	$(".readmoreBtn a").click(function(){
		stopTime();
		$(".bundle.positive .bundleMore").animate({left: "0px"});
		$(".bundle.positive .bundleMore").addClass("positive");
		$("#pause").hide();
		$("#play").show();
	});
	$(".closeBtn a").click(function(){
		startTime();
		$(".bundle.positive .bundleMore.positive").animate({left: "-700px"});
		$(".bundle.positive .bundleMore.positive").removeClass("positive");
		$("#play").hide();
		$("#pause").show();
	});
	$("#pause a").click(function(){
		 stopTime();
		$("#pause").hide();
		$("#play").show();
	});
	$("#play a").click(function(){
		startTime();
		$("#play").hide();
		$("#pause").show();
		
	});
	startTime();
});// JavaScript Document