/**
 * Settings
 */

// Width an height of elements.
var galleryImageWidth = 500;
var galleryImageHeight = 500;
var artistImageHeight = 333;

// Effect duration in milliseconds .
var galleryMoveDuration = 500;
var navigationMoveDuration = 500;

// Default positions.
var artistMarginLeft = "24px";
var navigationTop = "24px";

// Time after navigation is hidden.
var navigationTimeout = 5000;
var navigationTimeoutInterval;

/**
 * Page content is loaded when a link in the navigation is clicked.
 * The content is identified by the anchor value. It works also
 * when the page is accessed with an anchor in the url.
 */

$(document).ready(function() {
	// The height of the navigation.
	var navigationHeight = parseInt($("#navigationContainer").css("height"));

	// Vertically center the gallery strip.
	var galleryVerticalPosition = ($(window).height() / 2) - (galleryImageHeight / 2) - navigationHeight;
	$("#galleryContainer").css({'margin-top' : galleryVerticalPosition});

	// Vertically center the artist content..
	var artistVerticalPosition = ($(window).height() / 2) - (artistImageHeight / 2) - navigationHeight;
	$("#artist").css({'margin-top' : artistVerticalPosition});

	// Run the loadContent() function when the page is loaded.
	if (loadContent(window.location.toString())) {
		// Hide the navigation when the page loads but only if content was loaded.
		navigationTimeoutInterval = window.setInterval("hideNavigation()", navigationTimeout);
	}

	// Run the loadContent() function when a link in the navigation is clicked.
	$("#navigation a").click(function(event) {
		loadContent($(this).attr("href"));		
	});

	// Hide the navigation onmouseout.
	$("#navigationContainer").mouseout(function () {
		navigationTimeoutInterval = window.setInterval("hideNavigation()", navigationTimeout);
	});

	// Show the navigation onmouseover.
	$("#navigationContainer").mouseover(function () {
		// Remove the interval while onmouseover.
		window.clearInterval(navigationTimeoutInterval);

		// Animated showing.
		$("#navigation").animate({
			top: navigationTop
		}, navigationMoveDuration, "swing" );
	});

	// Run the loadContent() function when the hash changes, ie. the browser history is used.
	var current_hash = false;
	setInterval(function() {
		if (window.location.hash != current_hash) {
			current_hash = window.location.hash;
			loadContent(window.location.toString());
		}
	}, 500);

});

/**
 * Hide the navigation.
 */

function hideNavigation() {
	// Animated hiding.
	$("#navigation").animate({
		top: "-30px"
	}, navigationMoveDuration, "swing" );

	// Remove the interval after the navigation is hidden.
	window.clearInterval(navigationTimeoutInterval);
}

/**
 * Load the content identified by the anchor.
 * Returns true if content could be loaded.
 */

function loadContent(location) {
	// Check if the url contains an anchor.
	if (location.indexOf("#") == -1 || location.length <= location.indexOf("#") + 1) {
		return false;
	}
	var anchor = location.substring(location.indexOf("#") + 1);

	// Width of the visible browser area.
	var screenWidth = $(window).width();

	if (content[anchor]) {
		// Hide the gallery strip on the right side of the screen.
		$("#gallery").css({'margin-left' : screenWidth});

		// Show the gallery.
		$("#galleryContainer").css({'display' : 'block'});

		// Hide the artist content.
		$("#artist").css({'display' : 'none'});
		$("#gallery").css({'left' : '0'});
		
		// Empty the gallery.
		$("#gallery").empty();

		// Fill the gallery with new images.
		for(key in content[anchor]) {
			var value = content[anchor][key];
			$("#gallery").append("<div class='image'><img src='" + value + "' alt='" + key + "' title='" + key + "' /><span>" + key + "</span></div>");
		}

		// The left position of a the horizontally centered image.
		var horizontalMiddleImageLeft = ($(window).width() / 2) - (galleryImageWidth / 2);

		// Center an image horizontally onclick.
		$("#gallery .image").click(function () {
			// Get the delta from the image's position to the middle.
			var curImageLeft = $(this).offset().left;
			var curImageDeltaToMiddle = horizontalMiddleImageLeft - curImageLeft;

			// Count the new gallery strip position according the the delta.
			var curGalleryMarginLeft = parseInt($("#gallery").css("margin-left"));
			var newGalleryMarginLeft = curGalleryMarginLeft + curImageDeltaToMiddle;

			// Center the image.
			if (curGalleryMarginLeft != newGalleryMarginLeft) {
				$("#gallery").animate({
					marginLeft: newGalleryMarginLeft
				}, galleryMoveDuration, "swing" );
			}
		});

		// Slide the gallery in from the right side.
		$("#gallery").animate({
			marginLeft: horizontalMiddleImageLeft + "px"
		}, galleryMoveDuration, "swing" );
		return true;

	}
	else if (anchor == "kuenstler") {
		// Hide the artist content on the right side of the screen.
		$("#artist").css({'margin-left' : screenWidth});	

		// Hide the gallery.
		$("#galleryContainer").css({'display' : 'none'});

		// Show the artist content.
		$("#artist").css({'display' : 'block'});

		// Slide the artist content in from the right side.
		$("#artist").animate({
			marginLeft: artistMarginLeft
		}, galleryMoveDuration, "swing" );
		return true;
	}
	return false;
}