/*	$(document).ready(function () {
	$("#project-selector .project-icon").each(function (i, item) {
		item.css("left", (i * 121) + "px");
	});
});*/

// Aww, you're reading my crappy jQuery code.
// Just be glad I make iPhone apps and not webpages.
//-darknoon

var currentPage = 0;

var imageScroll = null;

//Turns element into a paginated scroll box
function ScrollArea(element) {
	this.element = element;
	element.scrollInfo = this;
	this.currentPage = 0;
	this.numberOfPages = 0;

	this.next = function () {
		if (this.currentPage + 1 < this.numberOfPages)
			this.setCurrentPage(this.currentPage + 1);
	}
	this.previous = function () {
		if (this.currentPage - 1 >= 0)
			this.setCurrentPage(this.currentPage - 1);
	}

	this.hasNext = function () {
		return this.currentPage + 1 < this.numberOfPages;
	}

	this.hasPrevious = function () {
		return this.currentPage - 1 >= 0;
	};

	//Set this for a callback on scrolling
	this.didScroll = function () {};

	this.setCurrentPage = function (page) {
		this.currentPage = page;
		$(this.element).animate({
			scrollLeft: 240 * page + "px"
		}, 600);
		this.didScroll(page);
	}
}

$(document).ready(function () {
	//Indicate js is available and we should layout accordingly
	$("html").addClass("js");

	var nPages = 3;
	var projects = null;

	//Add a button to go to the next set of items
	$("#project-selector").append("<p id='next-project-screen-button' class='project-screen-button'><a href=''>Next</a></p>");
	$("#project-selector").append("<p id='previous-project-screen-button' class='project-screen-button'><a href=''>Previous</a></p>");


	$("#next-project-screen-button").click(function (event) {
		scrollToPage(currentPage + 1);
		event.preventDefault();
	});

	$("#previous-project-screen-button").addClass("disabled");
	$("#previous-project-screen-button").click(function (event) {
		scrollToPage(currentPage - 1);
		event.preventDefault();
	});


	function scrollToPage(pageNumber) {
		//Enable-disable previous button
		$("#previous-project-screen-button").toggleClass("disabled", pageNumber - 1 < 0);
		//Enable-disable next button
		$("#next-project-screen-button").toggleClass("disabled", pageNumber + 1 >= nPages);

		$("#project-scrollbox").animate({
			scrollLeft: 610 * pageNumber + "px"
		}, 600);
		currentPage = pageNumber;
	};

	//Setup the screenshot viewer
	$("#content").append("<div id='screenshot-viewer'><div class='scroller'><div class='content-view'></div></div></div>");
	$("#screenshot-viewer").hover(
		function () {
			$("#screenshot-viewer-controls").fadeIn();
		},
		function () {
			$("#screenshot-viewer-controls").fadeOut();
		}
	);
	//Controls start hidden
	//$("#screenshot-viewer-controls").fadeOut();

	imageScroll = new ScrollArea($("#screenshot-viewer div.scroller"));

	//Create controls
	var controls = $("<div id='screenshot-viewer-controls'></div>");
	//Prev button
	var previousScreenshotButton = $("<a class='previous'>Prev</a>").click(function () {
		imageScroll.previous();
	}).appendTo(controls);
	//Next button
	var nextScreenshotButton = $("<a class='next'>Next</a>").click(function () {
		imageScroll.next();
	}).appendTo(controls);
	controls.appendTo("#screenshot-viewer");

	imageScroll.didScroll = function () {
		nextScreenshotButton.toggleClass("disabled", !this.hasNext());
		previousScreenshotButton.toggleClass("disabled", !this.hasPrevious());
	};


	//Setup the content area
	$("<div class='project'></div>")
		.append("<h3></h3>")
		.append("<p class='subtitle'></p>")
		.append("<p class='launchdate'></p>")
		.append("<div class='text'></div>")
		.appendTo($("#content"));

	$.getJSON("projects.json", function (data) {
		projects = data;
		selectContent("starbucks");
	});

	function projectForIdentifier(id) {
		var currentProject;
		for (var i in projects) {
			var project = projects[i];
			if (project.identifier == id) {
				currentProject = project;
			}
		}
		return currentProject;
	}

	function selectContent(id) {
		//Make both position absolutely to avoid positioning conflict
		currentProject = projectForIdentifier(id);

		if (currentProject !== undefined) {
			//Replace content
			$(".content div.project h3").html(currentProject.title);
			$(".content div.project p.subtitle").html(currentProject.subtitle);
			$(".content div.project p.launchdate").html(currentProject.launchdate);
			$(".content div.project .text").html(currentProject.text);

			//Clear screenshot array
			$("#screenshot-viewer div.content-view").empty();
			imageScroll.numberOfPages = 0;

			//Add each screenshot into scroll view
			for (var i in currentProject.screenshots) {
				var imgURL = "/projects/" + currentProject["identifier"] + "/" + currentProject.screenshots[i];
				var img = $("<img>").attr("src", imgURL);
				$("#screenshot-viewer div.scroller div").append(img);
				imageScroll.numberOfPages += 1;
			}
			imageScroll.setCurrentPage(0);

		} else {
			alert("Couldn't find current project " + id);
		}

		$("#project-scrollbox li a").removeClass("current");
		$("#project-scrollbox li a[href='projects/" + id + "']").addClass("current");



		var newHeight = Math.max($(".project").outerHeight(), $("#screenshot-viewer").outerHeight());
		//Animate the content to the new heigth
		$(".content").animate({
			height: newHeight
		});
	}


	//Setup the content switching actions
	$("#project-scrollbox .project-icon a").click(function(event) {
		selectContent($(this).attr("href").replace("projects\/", ""));
		event.preventDefault();
	});

	jQuery.fx.off = true;
	//Set up initial state
	scrollToPage(currentPage);
	jQuery.fx.off = false;
});