/*
  Javascript written for annamadeleine.com. 
  Author: Tim Raupach // cutflat.net
*/

// Show a menu next to the mainMenu object
function showPane(paneId) {
    closeAll();
    if($(paneId).css("display") == "none") {
	var left = parseFloat($("#mainMenu").css("left"), 10) + 
	    $("#mainMenu").outerWidth() + 12 +'px';
	var top = parseFloat($("#mainMenu").css("top"), 10) + 'px';
	$(paneId).css("left", left);
	$(paneId).css("top", top);
	$(paneId).fadeIn(300);
    } 
}

// Close all sub-menus
function closeAll() {
    $(".subMenu").fadeOut(300);
    $(".subPane").fadeOut(300);
}

// Turn off the lights, ie grey out background.
function lightsOff() {
    // Disable scroll bars while the lights are off.
    $("body").css("overflow", "hidden");
    $(".greyScreen").fadeIn(150);
}

function lightsOn() {
    $(".greyScreen").fadeOut(150);
    // Re-enable scroll bars now the lights are back on.
    setTimeout(function() { $("body").css("overflow", "auto"); }, 500);
}

function hideAnimation() { 
    $(document).unbind();
    $("#videoBox").html(animationString(id));
    $("#videoPane").fadeOut(500);
    setTimeout(function() { lightsOn();; }, 400);
}

function showCollection(coll) {
    // Turn off the lights - dim the background.
    lightsOff();

    // Create thumbnail pane
    var thumbHTML = "<li style='padding-left:5px'>";
    var img;

    for(i = 0; i < collectionFiles[coll].length; i++) {
	img = new Image();
	img.src = collectionPrefix + coll + thumbPrefix + collectionFiles[coll][i][0];

	if(i > 0) 
	    thumbHTML = thumbHTML + "<li>";
	thumbHTML = thumbHTML + 
	    "<a href='javascript:showPhoto(\"" + coll + "\"," + i + ")' class='thumbA'>" +
	    "<img src=" + img.src + " class='thumb'></a></li>";
	img.onload = function() { setupScrollbar(); };
    }
    
    $("#slidingThumbs").html(thumbHTML);
    positionThumbPane();
    $("#thumbPane").fadeIn(500);

    // Show pane and photo
    $('#photoPane').fadeIn(500);
    showPhoto(coll, 0);
   
    // Set up key bindings
    $(document).bind('keyup', 'right', function() { nextPhoto(); });
    $(document).bind('keyup', 'left', function() { prevPhoto(); });
    $(document).bind('keyup', 'esc', function() { hideCollections(); });
}

function positionThumbPane() {
    $("#thumbPane").css("top", 
			$(window).height() - $("#thumbPane").outerHeight() - 20 + "px");
}

function hideCollections() {
    $(document).unbind();
    $("#photoPane").fadeOut(500);
    $("#thumbPane").fadeOut(500);
    $(".mainMenu").delay(1000).fadeIn(1000);
    $("#collectionsMenu").delay(1000).fadeIn(1000);
    setTimeout(function() { lightsOn(); }, 400);
}

function loadMain() {
    if(!detectMobile()) {
	window.onresize = function() { resizePage(); };
    }
}

var timeoutID = 0;

function resizePage() {
    if($("#photoPane").css("display") != "none") {
	$("#thumbPane").hide();
	
	clearTimeout(timeoutID);
	timeoutID = setTimeout(function() { reloadPhotoPage(); }, 500);
    }

    if($("#videoPane").css("display") != "none") {
	clearTimeout(timeoutID);
	timeoutID = setTimeout(function() { showAnimation(currentAnimation); }, 500);
    }
}

// Return true if the browser is a mobile phone browser, otherwise
// return false.
function detectMobile() {
    var agent = navigator.userAgent.toLowerCase(); 

    if(agent.search("iphone") > -1 ||
       agent.search("ipad") > -1 ||
       agent.search("ipod") > -1 ||
       agent.search("android") > -1)
	return true;

    return false;
}

function reloadPhotoPage() {
    $("#thumbPane").fadeIn(200);
    positionThumbPane();
    showPhoto(currentCollection, currentPhoto);
    setupScrollbar();
}

function showAnimation(animationID) {
    currentAnimation = animationID;
    animation = animations[animationID];
    id = animation[0];
    title = animation[1];
    year = animation[2];
    description = animation[3];
    music = animation[4];
    
    // Turn off the lights - dim the background.
    lightsOff();

    // Set the animation to be inside videoBox.
    $("#videoBox").html(animationString(id));
    
    // Set up the caption.
    $("#videoCaption").html(title + "<br>" + year + "<br>" + description + "<br>" + music);

    // Centre the video on the screen.


    w = parseFloat($("#videoBox").css("width"));
    h = parseFloat($("#videoBox").css("height")) + 
	parseFloat($("#videoCaption").css("height")) +
	parseFloat($("#vidCloseLink").css("height"));

    x = ($(window).width() - w) / 2;
    y = ($(window).height() - h) / 2;

    $("#videoPane").animate({
	left: x, 
	top: y,
	width: w,
	height: h
    }, 300, function() { 
	$("#videoBox").fadeIn(200);
	$("#videoNav").delay(100).fadeIn(200);
    });    
    
    // Fade it all in.
    $("#videoPane").fadeIn(500);

    $(document).bind('keyup', 'esc', function() { hideAnimation(); });
}


function showPhoto(collection, n) {
    currentPhoto = n;
    currentCollection = collection;
    img = new Image();
    img.src = collectionPrefix+collection+"/"+collectionFiles[collection][n][0];

    var caption="";
    var date="";
    var medium="";

    if(collectionFiles[collection][n].length > 2 &&
       $(window).width() > 500) {
	caption = "<i>" + collectionFiles[collection][n][1] + "</i>";
	date = collectionFiles[collection][n][3];
	medium = collectionFiles[collection][n][2];
    }

    $("#photoCanvas").hide();
    $("#photoNav").hide();
    $("#prevLink").show();
    $("#nextLink").show();
    $("#loadingDiv").show();
    
    // Hide prev/next links if at start/end
    if(currentPhoto == 0)
	$("#prevLink").hide();
    else if(currentPhoto == collectionFiles[collection].length - 1)
	$("#nextLink").hide();
    
    $("#photoCaption").html(caption + "<br>" + medium + "<br>" + date);

    img.onload = function() {
	// Immediately start to load the next two images when this one is loaded
	if(currentPhoto+1 < collectionFiles[collection].length) {
	    next = new Image();
	    next.src = collectionPrefix+collection+"/"+
		collectionFiles[collection][n+1][0];
	}

	var aspect = img.width / img.height;
	var borderAmt = 0.05;
	var w;
	var h;
	var border;

	var availHeight = parseFloat($("#thumbPane").css("top")) - 
	    $("#photoNav").outerHeight() - 
	    $("#thumbLinkDiv").outerHeight();

	var winAspect = $(window).width() / availHeight;
	
	if(aspect > winAspect) { 
	    // Try to leave 5% width on each side of photo
	    border = $(window).width() * borderAmt;
	    w = $(window).width() - (2*border);
	    h = w / aspect;
	} else { 
	    // Try to leave 5% height above and below photo
	    border = $(window).height() * borderAmt;
	    h =  availHeight - (2*border);
	    w = h * aspect;
	}

	// Don't scale larger than real image size
	if(w > img.width)
	    w = img.width;
	if(h > img.height)
	    h = img.height;

	var canvas = document.getElementById("photoCanvas");
	//var context = canvas.getContext("2d");
	var wait = 0;

	if(w != canvas.width || h != canvas.height ||
	   x != parseFloat($("photoPane").css("left")) ||
	   y != parseFloat($("photoPane").css("top"))) {
	    var wPadding = parseFloat($("#photoPane").css("padding-left")) + 
		parseFloat($("#photoPane").css("padding-right"));
	    var hPadding = parseFloat($("#photoPane").css("padding-top")) + 
		parseFloat($("#photoPane").css("padding-bottom"));
	    var navPadding = $("#photoNav").outerHeight() + 
		parseFloat($("#photoCaption").css("height"));

	    // Center image on screen
	    x = ($(window).width() - w - wPadding) / 2;
	    y = (parseFloat($("#thumbPane").css("top")) - h - 
		 navPadding - hPadding) / 2;

	    $("#photoPane").animate({
		left: x, 
		top: y,
		width: w,
		height: h + navPadding
	    }, 300, function() { 
		$("#photoCanvas").html("<img src='" + img.src + 
			     "' width=" + w +
			     "height=" + h + "/>");
		//context.drawImage(img, 0, 0, w, h);
		$("#photoCanvas").fadeIn(200);
		$("#photoNav").delay(100).fadeIn(200);
	    });
	    wait = 300;
	    
	    canvas.width = w;
	    canvas.height = h;
	} else {
	    $("#photoCanvas").html("<img src='" + img.src + 
				   "' width=" + w +
				   "height=" + h + "/>");
	    //context.drawImage(img, 0, 0, w, h);
	    $("#photoCanvas").fadeIn(200);
	    $("#photoNav").delay(wait + 1).fadeIn(200);
	}
	$("#loadingDiv").hide();
    }
}

function nextPhoto() {
    if(currentPhoto+1 < collectionFiles[currentCollection].length)
	showPhoto(currentCollection, currentPhoto+1);
}

function prevPhoto() {
    if(currentPhoto-1 >= 0)
	showPhoto(currentCollection, currentPhoto-1);
}

function recentrePhoto() {
    var newTop = (parseFloat($("#thumbPane").css("top")) - 
		  $("#photoPane").outerHeight()) / 2;
    var newLeft = ($(window).width() - $("#photoPane").outerWidth()) / 2;

    $("#photoPane").animate({
	top: newTop,
	left: newLeft
    }, 100);
}

function setupScrollbar() {
    $("#slidingThumbs").css("left", 0);
    $("#handle").css("left", 0);

    if($(window).width() < parseFloat($('#slidingThumbs').innerWidth())) {
	$("#sliderDiv").show();
	$("#sliderDiv").css("width", $(window).width() - 
			    parseFloat($(".handle").css("width")));
	
	var width = $('#slidingThumbs').innerWidth() - $(window).width();
	
	var slider = $('#sliderDiv').slider({ 
	    min: 0,
	    max: width,
	    slide: function (ev, ui) {
		$("#slidingThumbs").css('left', '-' + ui.value + 'px');
	    }, 
	});
    } else {
	$("#sliderDiv").hide();
    }
}