/* Global variables */
var imageXml;   // Set beforehand from an AJAX call
var mouseX = 0;
var mouseY = 0;

/*
/* loadThumbnails() takes given xml data and appends image thumbnails to the page.
/* Generally, this should be called on page load, after the xml has been obtained.
/* id: the id of the set of images (i.e. "manhattan" or "humanities")
/* destination: the destination div where the thumbnails will be placed (i.e. "manhattanThumbs")
*/
function loadThumbnails(id, destination) {
	var images = $("images[@id=" + id + "]", imageXml);
	var thumbwidth = images.attr("thumbwidth");
	var thumbheight = images.attr("thumbheight");
    $("image", images).each(function() {
        var html = "<a href='javascript:;' onclick='displayImage(" + $("image", images).index($(this)[0]) + ", \"" + id + "\");return false;'><img src='" + $(this).attr("thumbsrc") + "' width='" + thumbwidth + "' height='" + thumbheight + "' /></a>";
	    $("#" + destination).append(html);
	});
}

/* This function appends the imagebox to the body.
   The index of the image (the order it is in the xml file) is passed as a parameter. */
function displayImage(imageId, id) {
    // Obtain all of the images
	var images = $("images[@id='" + id + "']", imageXml);
	// Get the correct image from the imageId
	var image = $("image", images).get(imageId);
	
	// Get the variables of the image tag
	var imageWidth = parseInt($(image).attr("width"));
	var imageHeight = parseInt($(image).attr("height"));
	
	// If there are any image boxes on the page, remove them
	$(".imageBox").remove();
	var html = "<div class='imageBox'></div>";
	
	// Add the image box to the body of the page
    $("body").append(html);
    
    populateImageBox(image, imageId, id);
	
	// To ensure that the image box doesn't move off the container
	// Unfortunately, this is very browser-dependent code
	// An alternative would be to simply give the container a set position on the page,
	// so that this check would become unnecessary
	if ($.browser.msie) {
	    var maxWidth = parseInt($("#container").attr("offsetWidth"));
	}
	else {
    	var maxWidth = parseInt($("#container").css("width"));
    }
	if (mouseX + imageWidth > maxWidth) {
	    mouseX = maxWidth - imageWidth - 15;
	}
	if ($.browser.msie) {
    	var maxHeight = parseInt($("#container").attr("offsetHeight"));
    }
    else {
    	var maxHeight = parseInt($("#container").css("height"));
    }
	if (mouseY + imageHeight > maxHeight) {
	    mouseY = maxHeight - imageHeight;
	}
	
	// Set the position of the image box
	$(".imageBox").css("top", mouseY - 25).css("left", mouseX - 25);
}

/* This function takes a current image box and loads the next/previous image, depending on the given image id.
 */
function cycleImage(imageId, id) {
    // Obtain all of the images
	var images = $("images[@id='" + id + "']", imageXml);
	
	// Cycle the image id if its greater than the number of images or fewer than 0
	if (imageId > $("image", images).length - 1)
		imageId = 0;
	else if (imageId < 0)
		imageId = $("image", images).length - 1;
	
	// Get the correct image from the imageId
	var image = $("image", images).get(imageId);
		
	// Clear the image box's html child elements (empty it)
	$(".imageBox").html("");
	
	populateImageBox(image, imageId, id);
}

/* This function appends various elements to an image box, and sets their positions and widths */
function populateImageBox(image, imageId, id) {	
	// Get the variables of the image tag
	var imagePath = $(image).attr("src");
	var imageWidth = parseInt($(image).attr("width"));
	var imageHeight = parseInt($(image).attr("height"));
	var caption = $(image).attr("caption");
	
	$(".imageBox").css("width", imageWidth);
	
	// Add various elements to the image box
	$(".imageBox").append("<div class='previous'><a href='javascript:;' onclick='cycleImage(" + (imageId - 1) + ", \"" + id + "\");return false;'>&laquo;Previous</a></div>");
	$(".imageBox").append("<div class='close'><a href='javascript:;' onclick='$(\".imageBox\").remove();return false;'>Close</a></div>");
	$(".imageBox").append("<div class='next'><a href='javascript:;' onclick='cycleImage(" + (imageId + 1) + ", \"" + id + "\");return false;'>Next&raquo;</a></div>");
	$(".imageBox").append("<div class='image'><img src='" + imagePath + "' width='" + imageWidth + "' height='" + imageHeight +"' /></div>");
	if (caption != null) {
        $(".imageBox").append("<div class='caption'>" + caption + "</div>");
    }
    
    // Set width of the close div
	$(".close", ".imageBox").css("width", imageWidth - 100);
	if (caption != null) {
    	$(".caption", ".imageBox").css("width", imageWidth);
    }
}