$(document).ready(function() {

	var setup = false;
	var currentScreenshot = 0;
	$("#screenshots-link").click(function() {
		if (setup) {
			currentScreenshot = 0;
			$("#modal-background").css("display", "block");
			return;
		}

		var div = $("<div/>").attr("id", "modal-background");
		$("body").append(div);

		$.get('screenshots.html', function(data)
		{
			console.log(data);
			div.html(data);	
			setupScreenshots();
		});
	});
	
	function setupScreenshots(parent) {
		if (setup) return;

		var screenshotLen = 5;
		var descriptions = [
			"Plan a trip between two stations for now, or later",
			"Detailed trip departure information",
			"Find any station on the map",
			"See upcoming departures",
			"Track fares, DART on Twitter, and more"
		];


		function setDescription() {
			$("#screenshot-desc").html(descriptions[currentScreenshot]);
		}

	  $("#leftarrow").click(function() {
		  if (currentScreenshot == 0) return;
		  currentScreenshot--;
		  $("#rightarrow").show();
		  $("#screenshot").animate({scrollLeft: (currentScreenshot*335)}, 500);
		  setDescription();	

		  if (currentScreenshot == 0) {
			  $("#leftarrow").hide();
		  }
	  });

	  $("#rightarrow").click(function() {
		  if (currentScreenshot == screenshotLen) return;
		  currentScreenshot++;

		  $("#leftarrow").show();
		  $("#screenshot").animate({scrollLeft: currentScreenshot*335}, 500);
		  setDescription();	
			  
		  if (currentScreenshot == screenshotLen-1) {
			  $("#rightarrow").hide();
		  }
	  });

		$("#close").click(function() {
			console.log("hiding");
			$("#modal-background").css("display", "none");
		});
		setup = true;
	}
});