jQuery(function($) {

	var $nav = $('#project nav ul');
	var $nextButton = $nav.find('.next');
	var $prevButton = $nav.find('.previous');
	var $project = $('#project');
	var $projectCaption = $project.find('p');
	var $slides;
	var slideIndex;
	var initiated = false;

	/**
	 * Invoked when the page initializes.
	 * Specifically, via $.address.init() below.
	 */
	function init() {
		$('nav a')
			.address()
			.click(function(e) {
				$('nav a').removeClass('active');
				$(this).addClass('active');
			});

		$nav.find('li').click(changeSlide);
	}

	/**
	 * Called when $.address.change() is called. This happens:
	 * 1) On initial load
	 * 2) When nav items are clicked
	 */
	function handleRequest(e) {

		$('#about, #contact, #project').hide();
		$('#project>ul').empty();
		slideIndex = 0;
		clearBackgroundImage();
		
		switch(e.path) {

			case '/':
				setBackgroundImage();
				break;

			case '/about':
				$('#about').show();
				break;

			case '/contact':
				$('#contact').show();
				break;

			default:
				loadProject(e.pathNames[1]);
		}

		initiated = true;
	}

	/**
	 * Request project images via AJAX.
	 */
	function loadProject(slug) {
		$.getJSON('/loader.php', 'project=' + slug, projectLoaded);
	}

	/**
	 * Invoked after a successful AJAX call for project images.
	 * Argument 'json' should contain an array of image paths.
	 */
	function projectLoaded(json) {

		// Insert project images via jQuery templating
		$('#projectTemplate').tmpl(json).appendTo('#project>ul');

		$slides = $('#project>ul>li');

		// If there is only one slide then don't show the nav
		if(json.length < 2) {
			$nav.hide();
		} else {
			$nav.show();
		}

		// Show the first slide, hide the rest
		$('#project>ul>li').hide();
		$('#project>ul>li:first').show();

		$projectCaption
			.find('span:first').text(1).end()
			.find('span:last').text($slides.length);

		$prevButton.hide();
		$nextButton.show();
		$project.show();
	}

	/**
	 * Change slides. Invoked when the user clicks a left or right
	 * arrow in the project nav.
	 */
	function changeSlide(e) {
		$slides.eq(slideIndex).hide();

		if($(this).hasClass('next')) {
			slideIndex++;		
		} else if(--slideIndex < 0) {
			slideIndex = 0;
		}

		// Determine if we need to show previous and next buttons
		(slideIndex < $slides.length - 1) ? $nextButton.show() : $nextButton.hide();
		(slideIndex > 0) ? $prevButton.show() : $prevButton.hide();

		// Set 'x of x' caption
		$projectCaption.find('span:first').text(slideIndex + 1);

		$slides.eq(slideIndex).show();	
	}

	/**
	 * Set the background image of the page via cookie data.
	 */
	function setBackgroundImage() {
		var backgroundImage;

		if(!initiated) {
			backgroundImage = unescape((new Cookie('background')).get());
		} else {
			backgroundImage = unescape((new Cookie('backgroundDefault')).get());
		}

		$('body').css('background-image', 'url(' + backgroundImage + ')');
	}

	/**
	 * Remove the page's background image.
	 */
	function clearBackgroundImage() {
		$('body').css('background-image', 'none');
	}

	// Initialize $.address.
	$.address.init(init).change(handleRequest);
	
	if(navigator.userAgent.match(/(iphone|ipod|ipad)/i)) {
		$('#project').css('left', '-19px');
	}

});