/* ======== Constants ======== */

var PAGE_WIDTH = 760;
var PAGE_HEIGHT = 348;
var DEBUG_ENABLED = false;



/* ======== Animations ======== */

var THUMBNAIL_LAZYLOAD_JITTER = 400;
var THUMBNAIL_FADEIN_SPEED = 400;
var THUMBNAIL_FADEOUT_SPEED = 50;
var THUMBNAIL_FADEOUT_OPACITY = 0.3;
var THUMBNAIL_FOCUS_SPEED = 200;
var DESCRIPTION_FADEIN_SPEED = 300;
var DESCRIPTION_FADEOUT_SPEED = 50;
var TAB_FADEIN_SPEED = 250;
var TAB_FADEOUT_SPEED = 250;
var BOTTOM_CONTENT_LEFT_FADEIN_SPEED = 200;
var BOTTOM_CONTENT_LEFT_FADEIN_DELAY = 20;
var BOTTOM_CONTENT_LEFT_FADEOUT_SPEED = 200;
var BOTTOM_CONTENT_RIGHT_FADEIN_SPEED = 200;
var BOTTOM_CONTENT_RIGHT_FADEIN_DELAY = 160;
var BOTTOM_CONTENT_RIGHT_FADEOUT_SPEED = 200;
var SECTION_HOVER_SPEED = 200;
var SECTION_SELECT_SPEED = 200;
var SECTION_SHOW_DELAY = 200;
var SECTIONS_FADEIN_SPEED = 800;
var NAVIGATION_BUTTONS_HIDE_SPEED = 200;
var NAVIGATION_BUTTONS_SHOW_SPEED = 200;
var NAVIGATION_BUTTON_FADE_SPEED = 100;
var NAVIGATION_BUTTON_FADE_OPACITY = 0.5;
var INNER_TAB_SLIDE_SPEED = 450;
var IMAGE_FADEIN_SPEED = 300;
var SLIDESHOW_SLIDE_DURATION = 20000;
var LOGO_FADEOUT_SPEED = 1000;
var NEXT_INNERTAB_FADE_SPEED = 1000;
var SHOP_CART_FADE_SPEED = 500;
var SHOP_ITEM_FADE_SPEED = 300;



/* ======== Variables ======== */

var debug = null;
var alertedOnce = false;
var htmldebug = null;
var currentTab = null;
var navigationTopButtons = null;
var navigationBottomSections = null;
var contentBottomLeft = null;
var contentBottomRight = null;
var tabLetter = null;
var tabThumbs = null;
var tabMedia = null;
var cachedContents = null;
var templateContents = null;
var currentInnerTabID = null;
var currentThumbsInnerTabID = null;
var currentMediInnerTabID = null;
var currentSectionID = null;
var currentSectionTitle = null;
var currentMediaID = null;
var currentMediaTitle = null;
var currentInternalPageID = null;
var lockDescription = false;
var slideshowHashURLs = null;
var language = "en";
var nextInnerTabDiscovered = false;
var nextInnerTabTeaserTimer = null;
var disableCloseButton = false;
var internalPageLastDisableCloseButton = false;
var autoExpandPageID = null;
var isShowingInternalPage = false;
var autoExpandPageIDOnInternalPageOpen = null; // deprecated
var shopItems = new Array();




/* ======== JQuery Addons ======== */
(function($) {
	$.fn.customFadeTo = function(speed, opacity, callback) {
		$(this).fadeTo(speed, opacity, function() {
			if(opacity == 1 && jQuery.browser.msie) $(this).get(0).style.removeAttribute("filter");
			if(callback != undefined) callback();
		});
	};
})(jQuery);

(function($){
  $.fn.shuffle = function() {
    return this.each(function(){
      var items = $(this).children();
      return (items.length)
        ? $(this).html($.shuffle(items))
        : this;
    });
  }
 
  $.shuffle = function(arr) {
    for(
      var j, x, i = arr.length; i;
      j = parseInt(Math.random() * i),
      x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
  }
})(jQuery);








/* ======== Debug ======== */

function alertOnce(value) {
	if(!alertedOnce) {
		alertedOnce = true;
		alert(value);
	}
}

function out(value) {
	if(!DEBUG_ENABLED) return;
	if(debug == null) {
		$("body").prepend("<div style=\"height:100px;width:500px;background-color:black;color:white;overflow:auto;position:absolute;z-index:9000;opacity:1.0;zoom:1;filter:alpha(opacity=100);\"id=\"debug_out\"></div>");
		debug = $("#debug_out");
		debug.hover(function() {
			$(this).stop().customFadeTo(250,1.0);
		},function() {
			$(this).stop().customFadeTo(250,0.1);
		});
		debug.click(function() {
			$(this).stop().customFadeTo(250,1.0);
		});
	}
	var currentTime = new Date();
	debug.append(currentTime.getTime() + ": " + value + "<br/>");
	debug.scrollTop(debug.attr("scrollHeight") - debug.height());
}

function htmlout(value) {
	if(!DEBUG_ENABLED) return;
	if(htmldebug == null) {
		$("body").prepend("<div style=\"height:100%;width:100%;background-color:black;color:black;overflow:auto;position:absolute;z-index:9000;\"id=\"debug_htmlout\"></div>");
		htmldebug = $("#debug_htmlout");
	}
	htmldebug.append(value);
}







/* ======== Utility Functions ======== */

function stripStringForHash(hash) {
	if(hash == null) return hash;
	var ret = hash.toLowerCase();
	ret = ret.replace(new RegExp(" ","g"),"-");
	return ret;
}

function updateHash(hash) {
	out("updateHash("+hash+")");
	window.location.hash = stripStringForHash(hash);
}

function clearHash(hash) {
	window.location.hash = "#";
}

function getSectionIDForSectionTitle(sectionTitle) {
	var sectionID;
	$("div.navigation_bottom_section").each(function(){
		if(sectionTitle == stripStringForHash($(this).attr("section-title"))) {
			sectionID = $(this).attr("section-id");
			return;
		}
	});
	return sectionID;
}

function getMediaIDForMediaTitle(mediaTitle) {
	var mediaID;
	$("div.page_media").each(function(){
		if(mediaTitle == stripStringForHash($(this).attr("page-title"))) {
			mediaID = $(this).attr("id");
			return;
		}
	});
	return mediaID.replace("media_","");
}

function showLoading(show) {
	if(show) 	$("body,html").addClass("loading");
	else		$("body,html").removeClass("loading");
}




/* ======== Tab Functions ======== */

function slideInTab(tabName, callback) {
	out("slideInTab("+tabName+")");
	var tab = $("div.tab_" + tabName);
	tab.parent().animate({ marginLeft: -(tab.prevAll().length*PAGE_WIDTH)+"px" }, 450, callback);
}

function fadeInTab(tabName, callback) {
	out("fadeInTab("+tabName+")");
	// Grab the tab
	var tab = $("div.tab_" + tabName);
	currentTab = tabName;
	
	// Reset the wrapper if there is one...
	tab.find("div.tab_wrapper").css({ marginLeft: "0px"});
	
	// Fade it in
	//tab.hide();
	tab.customFadeTo(TAB_FADEIN_SPEED, 1.0, callback);
}

function fadeOutTab(tabName, callback) {
	out("fadeOutTab("+tabName+")");
	currentTab = "";
	var tab = $("div.tab_" + tabName);
	tab.customFadeTo(TAB_FADEOUT_SPEED, 0.0, function() {
		tab.css({ display: "none" });
		if(callback) callback();
	});
}

function hideTab(tabName) {
	out("hideTab("+tabName+")");
	currentTab = "";
	var tab = $("div.tab_" + tabName);
	tab.customFadeTo(0,0.0);
	//tab.css({ display: "none" });
}






		




/* ======== AJAX Functions ======== */

function ajaxRequest(url, onSuccess, onError) {
	$.get(url, function(data) {
		onSuccess(data);
	});//TODO: error handling
}

function ajaxXMLRequest(url, onSuccess, onError) {
	$.get(url, function(data) {
		var xmlDoc;
		try 
		{
			//Internet Explorer
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async = "false";
			xmlDoc.loadXML(data);
		}
		catch(e)
		{
			try 
			{
				//Firefox, Mozilla, Opera, Safari, etc.
				var parser = new DOMParser();
				xmlDoc=parser.parseFromString(data,"text/xml");
			}
			catch(e)
			{
				// Hmmm, error
				alert(e.message);
				//TODO
				onError(e.message);
			}
		}
		onSuccess($(xmlDoc));
	});
}







/* ======== Section Functions ======== */

function loadSections(callback) {
	out("loadSections(sections"+language+".ajax)");
	
	// Loading
	showLoading(true);
	
	// Request sections XML
	//ajaxRequest("sections"+language+".ajax", function(data) {
			
		// Add the navigation items
		//navigationBottomSections.prepend(data);
	
		/* ======== Nav Item Hover ======== */
		$("div.navigation_bottom_section_title").hover(function() {
			// Grab the section
			var section = $(this).parent();
			// Hover-out the section
			if(section.attr("selected") != "true") {
				$(this).stop().animate({ paddingLeft: "5px" }, SECTION_HOVER_SPEED);
			} else {
				//var sectionContentLeft = section.find("div.bottom_section_content_left");
				//var offsetLeft = contentBottomLeft.offset().left - contentBottomLeft.parent().offset().left + 5;
				//$(this).stop().animate({ paddingLeft: offsetLeft+"px" }, SECTION_HOVER_SPEED);
			}
		},function() {
			// Grab the section
			var section = $(this).parent();
			// Hover-out section
			if(section.attr("selected") != "true") {
				$(this).stop().animate({ paddingLeft: "0px" }, SECTION_HOVER_SPEED);
			} else {
				//var sectionContentLeft = section.find("div.bottom_section_content_left");
				//var offsetLeft = contentBottomLeft.offset().left - contentBottomLeft.parent().offset().left;
				//$(this).stop().animate({ paddingLeft: offsetLeft+"px" }, SECTION_HOVER_SPEED);
			}
		});
	
		/* ======== Nav Item Click ======== */
		$("div.navigation_bottom_section_title").click(function() {
			// Get the section
			var section = $(this).parent();
		
			if(section.attr("selected") != "true") {
				showSection(section.attr("section-id"));
			} else {
				hideSection(section.attr("section-id"));
			}
		});
		
		showLoading(false);
		callback();
		
	//});
}

function showSection(id, callback) {
	out("showSection("+id+")");
	
	showLoading(true);
	
	// Enable the close button at this point, to make sure it is available later...
	disableCloseButton = false;
	
	// Get info
	currentSectionID = id;
	var section = $("#section_"+id);
	var contentsURL = section.attr("contents-url");
	currentSectionTitle = section.attr("section-title");
	
	// Cache selectors
	var sectionTitle = section.find("div.navigation_bottom_section_title");
	var sectionContentLeft = section.find("div.bottom_section_content_left");
	var sectionContentRight = section.find("div.bottom_section_content_right");
	
	// Hide any open sections
	var showDelay = 0;
	$("div.navigation_bottom_section").each(function (i) {
		if($(this).attr("selected") == "true") {
			hideSection($(this).attr("section-id"));
			showDelay = SECTION_SHOW_DELAY;
		}
	});
	
	
	// Delay?
	setTimeout(function() {
	
		// Mark as selected
		section.attr("selected","true");
	
		// Calculate offset of the bottom content
		var offsetTop = sectionTitle.offset().top - sectionTitle.parent().parent().offset().top;
		var offsetLeft = contentBottomLeft.offset().left - contentBottomLeft.parent().offset().left;
	
		// Slide in title
		sectionTitle.stop().animate({ paddingLeft: offsetLeft+"px" }, SECTION_SELECT_SPEED, function(){ 
			contentBottomLeft.css("padding-top", (offsetTop+sectionTitle.height()) + "px");
			contentBottomRight.css("padding-top", offsetTop + "px");
		
			// Set bottom content
			contentBottomLeft.html(sectionContentLeft.html());
			contentBottomRight.html(sectionContentRight.html());
			
			// Reset the shopping cart if any?
			contentBottomLeft.find(".shop_cart").each(function(){
				reloadCart($(this));
			});
			
		
			// Fade in bottom content	
			setTimeout(function(){ contentBottomLeft.customFadeTo(BOTTOM_CONTENT_LEFT_FADEIN_SPEED,1.0); }, BOTTOM_CONTENT_LEFT_FADEIN_DELAY);
			setTimeout(function(){ contentBottomRight.customFadeTo(BOTTOM_CONTENT_RIGHT_FADEIN_SPEED,1.0); }, BOTTOM_CONTENT_RIGHT_FADEIN_DELAY);
	
			// Update the hash
			updateHash(currentSectionTitle);
			
			// Report the event in analytics
			try {
				pageTracker._trackEvent("show_section", currentSectionID);
				pageTracker._trackEvent("select_inner_tab", currentSectionID + "/0");
			} catch(err) {}
			
			// Show thumbnails
			if(contentsURL != null && contentsURL != "") {
				showThumbnails(contentsURL, callback);
			} else {
				showLoading(false);
				if(callback) callback();
			}
			
		});
		
	}, showDelay);
		
}

function hideSection(id, callback) {
	out("hideSection("+id+")");
	
	// Cache selectors
	var section = $("#section_"+id);
	var sectionTitle = section.find("div.navigation_bottom_section_title");
	
	// Mark as deselected
	section.attr("selected","false");
	
	// Slide out title
	sectionTitle.stop().animate({ paddingLeft: "0px" }, SECTION_SELECT_SPEED);
	
	// Fade out bottom content
	contentBottomLeft.customFadeTo(BOTTOM_CONTENT_LEFT_FADEOUT_SPEED,0.0, function() {
		contentBottomLeft.html("");	
	});
	contentBottomRight.customFadeTo(BOTTOM_CONTENT_RIGHT_FADEOUT_SPEED,0.0, function() {
		contentBottomRight.html("");	
	});
	
	if(currentTab == "media") {
		hideTab("thumbs");
		fadeOutTab("media", function() {
			$("div.tab_thumbs").css({ display: "none" }); // hack
		});
	} else if (currentTab == "thumbs") {
		fadeOutTab("thumbs");
	}
	
	// Fade in logo
	$("div.body_tabs_logo").customFadeTo(TAB_FADEIN_SPEED,1.0);
	
	// Update hash
	clearHash();
	
	// Reset inner tab ids
	currentInnerTabID = null;
	currentThumbsInnerTabID = null;
	currentMediaInnerTabID = null;
	
	hideNavigation(callback);
}




/* ======== Thumbnails Functions ======== */

function showThumbnails(url, callback) {
	out("showThumbnails("+url+")");
	
	showLoading(true);
	
	// Reset the thumbs tab
	tabThumbs.html("");
		
	// Fade in the appropriate elements...
	$("div.body_tabs_logo").customFadeTo(LOGO_FADEOUT_SPEED,0.0);
	fadeInTab("thumbs");
	//TODO: insert loading... element so the user knows something is coming...
		
	// Request sections XML
	ajaxRequest(url, function(data) {
		
		//	Pages
		//		PageContents
		//			*thumbnail 	(thumbnails)
		//			*thumbnail
		//			*title 		(bottom content)
		//			*paragraph 
		//			*image 		(large content)
		//			*image
		//			*image
		//			*image
		
		// Grab pages
		var contents = $(data);
		var pages = contents.find("div.page");
		autoExpandPageID = null;
		

		// Recompile page elements into thumbnails, description and media
		var slots = 0;
		var slotsPerTab = 12;
		var tabID = 0;
		var currentInnerTab = null;
		pages.each(function() {
	
		
			// Grab elements and resort them
			var page = $(this);
			var pageID = page.attr("page-id");
			var pageTitle = page.attr("page-title");
			var pageOptions = page.attr("page-options");
			var thumbnails = page.find("div.page_thumbnails");
			var description = page.find("div.page_description");
			var media = page.find("div.page_media");
			
			// Init
			if(pageOptions.indexOf("internalpage") == -1) thumbnails.append(page.find("div.page_contents_thumbnail"));
			description.append(page.find("div.page_contents_description"));
			media.append(page.find("div.page_contents_media"));
	
			// Processs some options
			if(pageOptions.indexOf("autoexpand") != -1) autoExpandPageID = pageID;
			
			// Replace some of the media attributes for lazy loading...
			/*media.find("img").each(function(){
				var src = $(this).attr("src");
				$(this).attr("src","");
				$(this).attr("src-orig",src);
			});*/
	
			// Attach id
			thumbnails.attr("page-id",pageID);
			//thumbnails.attr("page-title",pageTitle);
			thumbnails.attr("id","thumbnails_"+pageID);
			description.attr("id","description_"+pageID);
			media.attr("id","media_"+pageID);
			media.attr("page-title",pageTitle);
	
			// Did we reach the inner tab limit? Do we need a new inner tab?
			if(currentInnerTab == null || slots >= slotsPerTab) {			
				// Create a new one
				slots = 0;
				currentInnerTab = $(document.createElement("div"));
 				currentInnerTab.attr("class","tab_inner_wrapper");
 				var currentInnerTabReal = $(document.createElement("div"));
 				currentInnerTabReal.attr("class","tab_inner");
 				currentInnerTabReal.attr("id","inner_tab_thumbs_"+tabID);
 				currentInnerTabReal.append(currentInnerTab);
 				tabThumbs.append(currentInnerTabReal);
				tabID++;
			}
	
			// What kind of thumbnail is this??
			if(pageOptions.substr(0,4) == "text") {
			
				// This is a textual thumbnail...
				
				// Init
				var type = "tall"; // tall | large | huge
				var slotSpace = 3; // 3 | 6 | 12
				if(pageOptions == "text_large") {
					type = "large";
					slotSpace = 6;
				} else if(pageOptions == "text_huge") {
					type = "huge";
					slotSpace = 12;
				}
				
				// Register the slots used
				slots += slotSpace;
				
				// Re-create the thumbnail...
				thumbnails.html("");
				textualThumbnail = $(document.createElement("div"));
				textualThumbnail.attr("class","page_contents_thumbnail thumbnail_largexxxx thumbnail_textualxxxxxx");
				
				// Append the description...
				textualThumbnail.append(description.clone());
				
				// Modify existing elements...
				textualThumbnail.find("div.invisible").each(function() {
					$(this).attr("class","page_description");
				});
				
				// Add the thumbnail element
				thumbnails.append(textualThumbnail);
				thumbnails.attr("class","page_thumbnails page_thumbnails_text page_thumbnails_text_" + type);
				currentInnerTab.append(thumbnails.clone());
				
			} else {
			
				// This is an image thumbnail...
			
				// Rework the thumbnails
				if(thumbnails.children().length == 2) {
	
					// Get the type
					var thumbnailRegular = thumbnails.children().first();
					var thumbnailColored = thumbnails.children().last();
					var type = "normal"; // normal | tall | large | huge
					var slotSpace = 1; // 1 | 3 | 6 | 12
					if(thumbnailRegular.hasClass("thumbnail_tall")) {
						type = "tall";
						slotSpace = 3;
					} else if(thumbnailRegular.hasClass("thumbnail_large")) {
						type = "large";
						slotSpace = 6;
					} else if(thumbnailRegular.hasClass("thumbnail_huge")) {
						type = "huge";
						slotSpace = 12;
					}
		
					// Alter the actual images
					thumbnailRegular.find("img").addClass("thumbnail_image_regular");
					thumbnailColored.find("img").addClass("thumbnail_image_colored");
		
					// Register the type with the parent
					thumbnails.addClass("page_thumbnails_"+type);
		
					// Register the colored class and fade it out
					thumbnailColored.addClass("thumbnail_"+type+"_colored");
					thumbnailRegular.customFadeTo(0,1.0); // IE7 bug
					thumbnailColored.customFadeTo(0,0.0);
					thumbnails.customFadeTo(0,0.0);
		
					// Register the slots used
					slots += slotSpace;
					
					// Add the thumbnail to the inner tab
					currentInnerTab.append(thumbnails.clone());
				}
				
				// Register the media contents to cache
				cachedContents.append(description.clone());
				cachedContents.append(media.clone());
			}
		
		});
	
	
		// Hook the thumbnails for lazy loading...
		var actualThumbnails = tabThumbs.find("div.page_thumbnails");
		var actualThumbnailImagesRegular = actualThumbnails.find("img.thumbnail_image_regular");
		actualThumbnailImagesRegular.bind("load", function() {
			// Add some randomness to the fade in
			var thumb = $(this).parent().parent();
			setTimeout(function() {
			
				// Fade in the tab if not already...
				if(currentTab != "thumbs") {
					// Show the thumbs - TODO: should this be already before because of loading...?
					//fadeInTab("thumbs");
				
					// Fade out logo
					//$("div.body_tabs_logo").customFadeTo(LOGO_FADEOUT_SPEED,0.0);
				}
		
				// Tell the parent container to fade in
				thumb.customFadeTo(THUMBNAIL_FADEIN_SPEED,1.0);
			
			}, rnd(0,THUMBNAIL_LAZYLOAD_JITTER));
		});
	
		/*
		//DEPRECATED: due to Firefox 4.0 bug...
		// Hook the thumbnail for color-in on hover
		actualThumbnails.hover(function() {

			// Fade in the thumbnail with color
			//if(!$(this).hasClass("page_thumbnails_text")) {
				$(this).stop().customFadeTo(THUMBNAIL_FADEIN_SPEED,1.0);
				$(this).children().last().stop().customFadeTo(THUMBNAIL_FADEIN_SPEED,1.0);
			//}
			
			// Fade out neighbor thumbnails
			$(this).parent().children().not($(this)).stop().customFadeTo(THUMBNAIL_FOCUS_SPEED,THUMBNAIL_FADEOUT_OPACITY);
	
			// Switch description
			if(!$(this).hasClass("page_thumbnails_text")) showDescription($(this).attr("page-id"));
		
		},function() {
		
			// Fade out this thumbnail
			if(!$(this).hasClass("page_thumbnails_text")) {
				$(this).stop().customFadeTo(THUMBNAIL_FADEOUT_SPEED,THUMBNAIL_FADEOUT_OPACITY);
				$(this).children().last().stop().customFadeTo(THUMBNAIL_FADEOUT_SPEED,0.0);
			
				// Hide description
				hideDescription();
			}
		});*/
		
		// Hook the thumbnail for color-in on hover
		actualThumbnails.hover(function() {

			// Fade in the thumbnail with color
			$(this).children().last().stop().customFadeTo(THUMBNAIL_FADEIN_SPEED,1.0);
			
			// Fade out neighbor thumbnails
			$(this).parent().children().not($(this)).each(function(){
				$(this).children().first().stop().customFadeTo(THUMBNAIL_FOCUS_SPEED,THUMBNAIL_FADEOUT_OPACITY);
			});
	
			// Switch description
			if(!$(this).hasClass("page_thumbnails_text")) showDescription($(this).attr("page-id"));
		
		},function() {
		
			if(!$(this).hasClass("page_thumbnails_text")) {
				
				// Fade out this thumbnail
				$(this).children().last().stop().customFadeTo(THUMBNAIL_FADEOUT_SPEED,0.0);
			
				// Hide description
				hideDescription();
			}
		});
	
		// Hook thumbnail click
		actualThumbnails.not("div.page_thumbnails_text").click(function() {
			showMedia($(this).attr("page-id"));
		});
	
		// Hook the inner tab on hover to fadein the thumbnails
		tabThumbs.hover(function() {
			// Nothing to do here
		},function() {
			// Fade back all the thumbs
			actualThumbnails.each(function(){
				$(this).children().first().stop().customFadeTo(THUMBNAIL_FOCUS_SPEED,1.0);
			});
		});
	
	
		// Show navigation
		currentThumbsInnerTabID = $("#tab_thumbs").children().first().attr("id");
		showNavigation("tab_thumbs");
	
		// Update hash
		//window.location.hash = currentSectionTitle;
	
		// Debugging
		//out("thumbnails: "+actualThumbnails.length);
		//out("tabs: "+tabThumbs.children().length);
	
		// Is there only one thumbnail to auto-expand?
		/*if(pages.length == 1) {
			pages.each(function(){
				// Disable the close button for now
				disableCloseButton = true;
				
				// Show description and media
				showDescription($(this).attr("page-id"));
				showMedia($(this).attr("page-id"));
			});
		}*/
		
		showLoading(false);
		
		// Is there a page to autoexpand?
		if(autoExpandPageID != null) {
			
			// Disable the close button for now
			disableCloseButton = true;
			
			// Show description and media
			showDescription(autoExpandPageID);
			showMedia(autoExpandPageID, function() {
				// Call our callback - we're done!
				if(callback) callback();
			});
			
		} else {
			
			// Call our callback - we're done!
			if(callback) callback();
			
		}
		
		
	
		
	
	});
}




/* ======== Navigation Functions ======== */

function showNavigation(id,callback) {
	out("showNavigation("+id+")");
	
	// Grab the tab
	var tab = $("#"+id);
	var innerTabs = tab.children();
	var tabThumbs = $("#tab_thumbs").children(); // currentThumbsInnerTabID = $("#tab_thumbs").children().first().attr("id");
	var tabMedia = $("#tab_media").children();
	
	// Do we event have some content?
	if(innerTabs.length == 0) {
		if(callback) callback();
		return;
	}
	
	// First hide it
	navigationTopButtons.stop().animate({ top: "16px" }, NAVIGATION_BUTTONS_HIDE_SPEED, function() {
	
		// Make the initial selection
		if(currentTab == "thumbs") 			currentInnerTabID = currentThumbsInnerTabID;
		else if(currentTab == "media") 		currentInnerTabID = currentMediaInnerTabID;
		if(currentInnerTabID == null) 		currentInnerTabID = innerTabs.first().attr("id");
		//if(currentThumbsInnerTabID == null) 		currentInnerTabID = innerTabs.first().attr("id");
		
		// Get icon type
		//var buttonImage = "buttondot.png";
		//if(currentTab == "thumbs") 			buttonImage = "buttonbar.png";
		//else 								buttonImage = "buttondot.png";
		
		// Get the current inner tab
		//currentInnerTabID = innerTabs.first().attr("id");
		//currentInnerTabID = innerTabs.find("div.selected_inner_tab").attr("id");
		//out(innerTabs.find("div.selected_inner_tab").length);
		//if(currentInnerTabID == null) currentInnerTabID = innerTabs.first().attr("id");
	
		/*
		// Build icons and actions
		navigationTopButtons.children().remove();
		if(innerTabs.length > 1) {
			innerTabs.each(function(){
				var innerTabID = $(this).attr("id");
				var button = $(document.createElement("img"));
	 			button.attr("src","images/"+buttonImage);
	 			button.attr("class","navigation_top_button");
	 			button.attr("inner-tab-id",innerTabID);
	 			if(innerTabID != currentInnerTabID) button.customFadeTo(0,NAVIGATION_BUTTON_FADE_OPACITY);
	 			navigationTopButtons.append(button);
			});
		}
		*/
		
		// Build thumbnails tab buttons (numbers)
		navigationTopButtons.children().remove();
		if(currentTab == "thumbs" && tabThumbs.length > 1) {
			var i = 0;
			tabThumbs.each(function(){
				i++;
				if(i > 9) {
					alert("Error: Not enough button images for navigation!");
					return;
				}
				var innerTabID = $(this).attr("id");
				var button = $(document.createElement("img"));
	 			button.attr("src","images/button"+i+".png");
	 			button.attr("class","navigation_top_button navigation_top_button_left");
	 			button.attr("inner-tab-id",innerTabID);
	 			button.attr("tab","thumbs");
	 			if(innerTabID != currentThumbsInnerTabID) button.customFadeTo(0,NAVIGATION_BUTTON_FADE_OPACITY);
	 			navigationTopButtons.append(button);
			});
			
			// Create arrow
			var arrow = $(document.createElement("img"));
 			arrow.attr("src","images/buttonarrow.png");
 			arrow.attr("class","navigation_top_button navigation_top_button_left navigation_top_button_arrow");
 			arrow.attr("inner-tab-id","");
 			arrow.attr("tab","thumbs");
 			arrow.customFadeTo(0,NAVIGATION_BUTTON_FADE_OPACITY);
 			navigationTopButtons.append(arrow);
		}
		
		// Build media tab buttons (dots)
		if(currentTab == "media" && tabMedia.length > 1) {
			tabMedia.each(function(){
				var innerTabID = $(this).attr("id");
				var button = $(document.createElement("img"));
	 			button.attr("src","images/buttondot.png");
	 			button.attr("class","navigation_top_button");
	 			button.attr("inner-tab-id",innerTabID);
	 			button.attr("tab","media");
	 			if(innerTabID != currentInnerTabID) button.customFadeTo(0,NAVIGATION_BUTTON_FADE_OPACITY);
	 			navigationTopButtons.append(button);
			});
		}
		
		// Create the close button
		if(currentTab == "media" && disableCloseButton != true) {
			var button = $(document.createElement("img"));
			button.attr("src","images/buttoncross.png");
			button.attr("class","navigation_top_button navigation_top_button_close");
			button.customFadeTo(0,NAVIGATION_BUTTON_FADE_OPACITY);
			navigationTopButtons.append(button);
		}
		
		// Hook hover on buttons
		navigationTopButtons.find("img").hover(function() {
			if($(this).attr("tab") == "thumbs") {
				if($(this).attr("inner-tab-id") != currentThumbsInnerTabID) {
					$(this).stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,1.0);
				}
			} else {
				if($(this).attr("inner-tab-id") != currentInnerTabID) {
					$(this).stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,1.0);
				}
			}
		},function() {
			if($(this).attr("tab") == "thumbs") {
				if($(this).attr("inner-tab-id") != currentThumbsInnerTabID) {
					$(this).stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,NAVIGATION_BUTTON_FADE_OPACITY);
				}
			} else {
				if($(this).attr("inner-tab-id") != currentInnerTabID) {
					$(this).stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,NAVIGATION_BUTTON_FADE_OPACITY);
				}
			}
		});
		
		// Hook click on buttons
		navigationTopButtons.find("img").click(function() {
			
			// Is this a close button or a inner tab button?
			if($(this).hasClass("navigation_top_button_close")) {
				// Close button - what should we close?
				lockDescription = false;
				if(currentTab == "thumbs") {
					hideSection(currentSectionID);
					currentTab = "";
					clearHash();
				} else {
					hideDescription();
					fadeOutTab("media",function() {
						if(autoExpandPageID != null) {
							showDescription(autoExpandPageID);
							showMedia(autoExpandPageID);
							//updateHash(currentSectionTitle);
						} else {
							currentTab = "thumbs";
							showNavigation("tab_thumbs");
							updateHash(currentSectionTitle);
						}
					});
				}
			} else {
				// Mark discovery of this feature
				nextInnerTabDiscovered = true;
				clearInterval(nextInnerTabTeaserTimer);
				nextInnerTabTeaserTimer = null;
				
				// Is this a thumbnails button when we are in the media? If
				// so, we need to close the media and switch to the correct thumbnails tab...
				if($(this).attr("tab") != currentTab) {
					fadeOutTab("media");
					currentTab = "thumbs";
					showNavigation("tab_thumbs");
					hideDescription();
				}
			
				// Next arrow or specific inner tab?
				if($(this).hasClass("navigation_top_button_arrow")) {
					// Next inner tab
					nextInnerTab();
				} else {
					// Jump to specific inner tab
					selectInnerTab($(this).attr("inner-tab-id"));
				}
			}
		});
		
		// Do we need to tease the next button?
		if(nextInnerTabDiscovered == false && currentTab != "media") {
			// Flash the next button
			//var nextButton = navigationTopButtons.find("img[inner-tab-id]='"+currentInnerTabID+"'").first().next();
			var nextButton = navigationTopButtons.find(".navigation_top_button_arrow");
			nextInnerTabTeaserTimer = setInterval(function(){
				if(!nextInnerTabDiscovered) {
					nextButton.customFadeTo(NEXT_INNERTAB_FADE_SPEED,1.0,function() {
						if(!nextInnerTabDiscovered) {
							nextButton.customFadeTo(NEXT_INNERTAB_FADE_SPEED,NAVIGATION_BUTTON_FADE_OPACITY);
						}
					});
				}
			}, NEXT_INNERTAB_FADE_SPEED*2.5);
		}
		
		// Show it...
		navigationTopButtons.animate({ top: "0px" }, NAVIGATION_BUTTONS_SHOW_SPEED, callback);
	
	});
}

function nextInnerTab() {
	out("nextInnerTab()");
	
	// Find the currently selected
	var selected = navigationTopButtons.find("img[inner-tab-id='"+currentInnerTabID+"']");
	
	// Get the next one
	var next = selected.next();
	if(next.attr("inner-tab-id") == null || next.attr("inner-tab-id") == "") {
		// Oooops, there is no next, get the first
		next = navigationTopButtons.find("img[tab='"+selected.attr("tab")+"']").first();
	}
	
	// Toggle the buttons and select the next tab
	selectInnerTab(next.attr("inner-tab-id"), function(){
		selected.stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,NAVIGATION_BUTTON_FADE_OPACITY);
		next.stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,1.0);
	});
}

function selectInnerTab(id,callback) {
	out("selectInnerTab("+id+")");
	
	// Grab the inner tab
	var innerTab = $("#"+id);
	var currentInnerTab = $("#"+currentInnerTabID);
	
	// Do we need to insert some dynamic content for the new innertab?
	var mediaItem = innerTab.children().first();
	if(mediaItem.hasClass("content_video")) {
		// Create a flash video
		var videoFile = mediaItem.attr("video-file");
		//var videoFile = "test.flv"
		var backgroundColor = mediaItem.attr("video-background");
		//var backgroundColor = "FFFFFF";
		out("insert video: "+videoFile);
		var flashFile = "flash/player.swf?file=../video/"+videoFile+"&controlbar=none&autostart=true&displayclick=none&repeat=always&stretching=uniform&bufferlength=4&screencolor="+backgroundColor;
		var html = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='760' height='348' id=''> <param name='movie' value='"+flashFile+"'/> <param name='quality' value='high'/> <param name='bgcolor' value='#"+backgroundColor+"'/> <param name='wmode' value='opaque' /><embed src='"+flashFile+"' wmode='opaque' quality='high' bgcolor='#"+backgroundColor+"'  width='760' height='348' name='' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed></object>";
			
		// Insert it and register the dynmaic content
		mediaItem.html(html);
		innerTab.addClass("contains_dynamic_content");
		out("insert");
	}
	
	// Switch selection
	//currentInnerTab.removeClass("selected_inner_tab");
	//innerTab.addClass("selected_inner_tab");
		
	// Register the current inner tab id's
	currentInnerTabID = id;
	if(currentTab == "thumbs") 		currentThumbsInnerTabID = currentInnerTabID;
	else if(currentTab == "media") 	currentMediaInnerTabID = currentInnerTabID;
	
	// Fix the button selection and update selection id
	navigationTopButtons.find("img").not(".navigation_top_button_arrow").each(function() {
		if($(this).attr("inner-tab-id") != currentInnerTabID && $(this).attr("tab") == currentTab) {
			$(this).stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,NAVIGATION_BUTTON_FADE_OPACITY);
		}
	});
	
	// Slide in to the tab
	innerTab.parent().animate({ marginLeft: -(innerTab.prevAll().length*PAGE_WIDTH)+"px" }, INNER_TAB_SLIDE_SPEED, function() {
		// Do we need to destroy some dynamic content in the current innertab?
		if(currentInnerTab.hasClass("contains_dynamic_content")) {
			currentInnerTab.children().first().html(""); // destroy
			out("destroy");
		}
		
		// Update the hash
		var hash = currentSectionTitle;
		//if(currentThumbsInnerTabID != null) hash += "/" + currentThumbsInnerTabID.replace("inner_tab_thumbs_","");
		//else								hash += "/0";
		//if(currentTab == "media") hash += "/" + currentMediaTitle; //+ "/" + currentMediaInnerTabID.replace("inner_tab_media_","");
		if(currentTab == "media" && (disableCloseButton == false || isShowingInternalPage == true)) hash += "/" + currentMediaTitle; //+ "/" + currentMediaInnerTabID.replace("inner_tab_media_","");
		//if(currentTab == "media" && autoExpandPageID == null) hash += "/" + currentMediaTitle; //+ "/" + currentMediaInnerTabID.replace("inner_tab_media_","");
		updateHash(hash);
		
		// Report the event in analytics
		try {
			pageTracker._trackEvent("select_inner_tab", hash);
		} catch(err) {}
		
		// Callback
		if(callback) callback();
	});
}

function hideNavigation(callback) {
	navigationTopButtons.stop().animate({ top: "16px" }, NAVIGATION_BUTTONS_HIDE_SPEED, callback);
};





/* ======== Description Functions ======== */

function showDescription(id, callback) {
	out("showDescription("+id+")");
	
	// Find our description element
	var description = $("#description_"+id);
	
	contentBottomRight.stop().customFadeTo(DESCRIPTION_FADEOUT_SPEED,0.0, function() {
		contentBottomRight.html(description.html());
		contentBottomRight.find(".initially_hidden").customFadeTo(0,0.0);
		contentBottomRight.customFadeTo(DESCRIPTION_FADEIN_SPEED,1.0,callback);
	});
}

function hideDescription(callback) {
	if(lockDescription == false) { 
		contentBottomRight.stop().customFadeTo(DESCRIPTION_FADEOUT_SPEED,0.0,function(){
			contentBottomRight.html("");
			if(callback) callback();
		});
	} else {
		if(callback) callback();
	}
}




/* ======== Media Functions ======== */

function openInternalLink(sectionID,mediaID) {
	// Do we need to jump to a different section first?
	if(sectionID != currentSectionID) {
		// We need to hide the section, open the correct one, and then open the media... pfeww!
		hideSection(currentSectionID,function() {
			showSection(sectionID,function() {
				if(mediaID != "") {
					setTimeout(function() {
						showDescription(mediaID);
						showMedia(mediaID);
					}, 200);
				}
			});
		});
	} else {
		// Save the close button state of the page and then enable it for opening the internal page....
		internalPageLastDisableCloseButton = disableCloseButton;
		disableCloseButton = false;
		if(mediaID != "") {
			showDescription(mediaID);
			showMedia(mediaID,function() {
				disableCloseButton = internalPageLastDisableCloseButton;
				isShowingInternalPage = true;
			});
		}
	}
}

function showMedia(id, callback) {
	out("showMedia("+id+")");
	
	showLoading(true);
	
	// Init
	isShowingInternalPage = false;
	
	// Find our media element
	var media = $("#media_"+id);
	currentMediaID = id;
	currentMediaTitle = media.attr("page-title");
	lockDescription = true;
	
	// Reset the media tab
	tabMedia.html("");
	
	// Process all the elements
	var tabID = 0;
	var firstInnerTabID = "";
	media.children().each(function() {

		// Create a new inner tab to wrap the media with...
		var innerTab = $(document.createElement("div"));
		var innerTabID = "inner_tab_media_"+tabID;
		innerTab.attr("class","tab_inner");
		innerTab.attr("id",innerTabID);
		if(tabID == 0) firstInnerTabID = innerTabID;
		tabID++;
		
		// Get the content
		var mediaContent = $(this).clone();
		
		// Add the content
		innerTab.append(mediaContent);
		tabMedia.append(innerTab);
	});
	
	// Lazy loading for images
	var images = tabMedia.find("img");
	images.bind("load", function() {
		$(this).customFadeTo(IMAGE_FADEIN_SPEED,1.0);
	});
	
	// Fix image sources
	images.each(function(){
		$(this).customFadeTo(0,0.0);
		$(this).attr("src",$(this).attr("src-orig"));
	});
	
	// Register clicks for inner tabs
	tabMedia.children().click(function() {
		// Mark discovery of this feature
		//nextInnerTabDiscovered = true;
		clearInterval(nextInnerTabTeaserTimer);
		nextInnerTabTeaserTimer = null;
			
		// Next tab!
		nextInnerTab();
	});
	
	if(tabMedia.children().length == 1) {
		tabMedia.children().find("img").each(function(){
			//alert($(this).css("cursor"));
			$(this).css("cursor","auto");
			//alert($(this).css("cursor"));
		});
	}
	
	
	// Fade in the tab if not already...
	fadeInTab("media");
	showNavigation("tab_media");
	selectInnerTab(firstInnerTabID, function(){
		showLoading(false);
		if(callback) callback();
	});
	contentBottomRight.find(".initially_hidden").customFadeTo(DESCRIPTION_FADEIN_SPEED,1.0);
}




/* ======== Slideshow ======== */

function showContentForHashURL(hashURL, callback) {
	out("showContentForHashURL("+hashURL+")");
	
	// Split the params and clean the hash out
	var params = hashURL.replace("#","").split('/');
	
	// Hash link:
	//   #[SECTION]/[PAGETITLE]
	// Note: PAGETITLE is lowercase and has special characters stripped
	if(params.length > 0) {
		// Get section title and ID
		var sectionTitle = params[0];
		var sectionID = getSectionIDForSectionTitle(sectionTitle);
		
		// Show the section
		showSection(sectionID, function() {
			
			// Do we have media to show?
			if(params.length > 1) {
				setTimeout(function() {
					
					// Get media title and ID
					var mediaTitle = params[1];
					var mediaID = getMediaIDForMediaTitle(mediaTitle);
					
					// Show the media, make sure the close button is enabled during this action
					internalPageLastDisableCloseButton = disableCloseButton;
					disableCloseButton = false;
					showDescription(mediaID);
					showMedia(mediaID,function() {
						disableCloseButton = internalPageLastDisableCloseButton;
					});
					
				}, 200);
			}
		});
	}
}

function startSlideshow(hashURLs, callback) {
	out("startSlideshow()");
	
	setInterval(function() {
		showContentForHashURL(slideshowHashURLs[rnd(0,slideshowHashURLs.length)]);
	}, SLIDESHOW_SLIDE_DURATION);
}





/* ======== Shop Functions ======== */

function reloadCart(cart) {
	cart.find(".shop_items").empty();
	for(var i = 0; i < shopItems.length; i++) {
		createCartItemForBuyable(shopItems[i],false);
	}
	updateCartTotal();
}

function createCartItemForBuyable(buyable,animated) {

	// Init
	var shop = $(".shop_cart");
	var items = $(".shop_items");
	
	// Get item infos
	var itemID = buyable.attr("buyable-id");
	var itemTitle = buyable.attr("buyable-title");
	var itemPrice = buyable.attr("buyable-price");
	
	// Add the item to cart
	var item = $(document.createElement("div"));
	item.attr("class","shop_item");
	item.attr("buyable-id",itemID);
	item.attr("buyable-title",itemTitle);
	item.attr("buyable-price",itemPrice);
	if(animated) item.customFadeTo(0,0.0);
	item.html(itemTitle + " " + "<div class='shop_button remove' style='float:right'>X</div>" + "<div class='' style='float:right; margin-right:6px;'>" + itemPrice + ".‒" + "</div><input type='hidden' name='item-id' value='"+itemID+"'/><input type='hidden' name='item-title' value='"+itemTitle+"'/><input type='hidden' name='item-price' value='"+itemPrice+"'/>");
	items.append(item);
	if(animated) item.customFadeTo(SHOP_ITEM_FADE_SPEED,1.0);
	
	// Hook remove button
	item.find(".remove").click(function(){
		
		// Remove from shop items
		var index = -1;
		for(var i = 0; i < shopItems.length; i++) {
			if(shopItems[i].attr("buyable-id") == item.attr("buyable-id")) index = i;
		}
		if(index != -1) shopItems.splice(index,1);
		
		// Hide cart?
		if(shopItems.length == 0) {
			shop.stop().customFadeTo(SHOP_CART_FADE_SPEED,0.0,function(){
				shop.css({ visibility: "hidden" });
			});
		}
		
		// Fade out
		item.stop().customFadeTo(SHOP_ITEM_FADE_SPEED,0.0,function(){
			
			// Remove from DOM
			item.remove();
			
			// Update total
			updateCartTotal();
		});
	});
	
}

function addToCart(itemID) {
	out("addToCart("+itemID+")");

	// Init
	var shop = $(".shop_cart");
	var buyable = $("div[buyable-id='"+itemID+"']");
	
	// Register 
	shopItems.push(buyable);
	createCartItemForBuyable(buyable,true);
	
	// Update price
	updateCartTotal();
	
	// Show cart?
	if(shop.css("visibility") == "hidden") {
		shop.stop().customFadeTo(0,0.0);
		shop.css({ visibility: "visible" });
		shop.customFadeTo(SHOP_CART_FADE_SPEED,1.0);
	}
}

function updateCartTotal() {
	out("updateCartTotal()");
	
	// Init
	var total = 0;
	
	// Calculate total price
	for(var i = 0; i < shopItems.length; i++) {
		var item = $(shopItems[i]);
		total += parseInt(item.attr("buyable-price"));
	}
	
	// Update
	$(".shop_total_value").html("CHF " + total + ".‒");
}

function checkout() {
	out("checkout()");
	$("#shop_items").submit();
}









/* ======== DOM Ready ======== */

$(document).ready(function(){
	out("document.ready()");
	out("language: "+language);
	
	// Cache some selectors
	navigationBottomSections = $("#navigation_bottom_sections");
	navigationTopButtons = $("#navigation_top_buttons");
	contentBottomLeft = $("#content_bottom_left");
	contentBottomRight = $("#content_bottom_right");
	tabLetter = $("#tab_letter");
	tabThumbs = $("#tab_thumbs");
	tabMedia = $("#tab_media");
	cachedContents = $("#cached_contents");
	templateContents = $("#template_contents");
	
	// Initial state of all content
	$("div.tab").customFadeTo(0,0.0);
	$("div.tab").css({ visibility: "visible" });
	$("div.tab").css({ display: "none" });
	contentBottomLeft.customFadeTo(0,0.0);
	contentBottomRight.customFadeTo(0,0.0);
	$("div.body_navigation_bottom").customFadeTo(0,0.0);
	$("div.body_navigation_bottom").css({ visibility: "visible" });
	$("div.body_tabs_logo").customFadeTo(0,0.0);
	$("div.body_tabs_logo").css({ visibility: "visible" });
	$("div.navigation_bottom_section_language").customFadeTo(0,NAVIGATION_BUTTON_FADE_OPACITY);

	// Language hover
	$("div.navigation_bottom_section_language").hover(function() {
		$(this).stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,1.0);
	},function() {
		$(this).stop().customFadeTo(NAVIGATION_BUTTON_FADE_SPEED,NAVIGATION_BUTTON_FADE_OPACITY);
	});
	
	// Banner
	$("div.banner").customFadeTo(0,1.0);
	$("div.banner").hover(function() {
		$("div.banner").stop().customFadeTo(250,0.8);
	},function() {
		$("div.banner").stop().customFadeTo(250,1.0);
	});
	
});





/* ======== All Resources Loaded ======== */

$(window).load(function() {

	setTimeout(function() {
		$("div.body_tabs_logo").customFadeTo(TAB_FADEIN_SPEED,1.0);
		fadeInTab("letter");
	},300);
	
	// Load menu...
	loadSections(function() {
	
		// Show initial content
		$("div.body_navigation_bottom").customFadeTo(SECTIONS_FADEIN_SPEED,1.0);
		
		// Do we have a slideshow to start?
		if(slideshowHashURLs != null) {
			startSlideshow(slideshowHashURLs);
		} else {
			// Parse the hash to open up content for hot linking!
			// A hash is in the following format: #work_en/1/00402/3
			//                                     sectionID / inner_tab_thumbs_X / mediaID / inner_tab_media_X 
			//                                         0               1               2          3               
			if(window.location.hash != null && window.location.hash != "" && window.location.hash != "#") {
				showContentForHashURL(window.location.hash);
			}
		}
		
	});

});


/* ======== All Resources Loaded ======== */

function swfClick() {
	out("swfClick()");
	//nextInnerTab(); // Deprecated
}