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"			// screenshot width
		}, 300);									// duration
		this.didScroll(page);
	}
}

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

	var productPagesCount = 3;							// keep in sync with css
	var apps = null;

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

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

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


	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 >= productPagesCount);

		$("#project-scrollbox").animate(
		{
			scrollLeft: 117 * 7 * pageNumber + "px"		// scrolling area width (6 tiles)
		}, 600);										// duration
		currentPage = pageNumber;
	};


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

	imageScroll = new ScrollArea($("#screenshot-area 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-area");

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


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

	$.getJSON("apps.json", function (data)
	{
		apps = data;
		var first = getUrlVars()["app"];
		if (first === undefined)
			first = "apps/ovolab";
		selectContent(first);
	});

	function getUrlVars()
	{
		var vars = [], hash;
		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
		{
			hash = hashes[i].split('=');
			vars.push(hash[0]);
			vars[hash[0]] = unescape(hash[1]);
		}
		return vars;
	}
	
	function AppForIdentifier(id)
	{
		var currentApp;
		for (var i in apps)
		{
			var app = apps[i];
			if (app.identifier == id)
			{
				currentApp = app;
			}
		}
		return currentApp;
	}

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

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

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

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

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

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



		var newHeight = Math.max($(".project-details").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("apps\/", ""));
		selectContent($(this).attr("href"));
		event.preventDefault();
	});

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