/**
 * Image Row Display for jQuery
 * 
 * @author craigharman
 */

// Start when the page has loaded
$(document).ready(function(){
	// Find all ul's that have the class 'imageRowDisplayer'
  
	//$(".imageRowDisplayer li img").reflect({height:0.150,opacity:0.375});
	
 var count = 0; // Keeps track of the image number we are manipulating
 var numImagesCount = 4; // zero indexed
 
 jQuery.each($(".imageRowDisplayer li img"), function(index, value) {
	position = numImagesCount*25;
	value.id = "imageKSDFBL" + count; // give each image a unique ID
	
	// Wrap a link for clicking and div around each image that will display the reflection
	$("#" + value.id).wrap($(document.createElement("a")).attr("id", value.id + "Link").attr("href", createLinkToLargeImage(value.src)));
	if ($.browser.msie && $.browser.version.substr(0,1)<7) {
		// Hide from IE 6
		$("#" + value.id).after('<div style="display:none" class="imageWrapper" id="'+value.id + 'Wrapper"></div>');
	} else {
		$("#" + value.id).after('<div class="imageWrapper" id="'+value.id + 'Wrapper"></div>');	
	}
	
	// Move the images to all behind each other
	$(".imageRowDisplayer li").position({
		"left": "-" + count*value.width + "px",
		"top": "0px"
	});
	
	// Change the z-index so the image is one more image back
	$("#" + value.id).css({"z-index": 800-numImagesCount});
	$("#" + value.id + "Wrapper").css({"z-index": 800-numImagesCount});
	$("#" + value.id).animate({"left": "+="+position+"px","top": "-="+position+"px"}, "1000000"); // Move the image up and to the right
	$("#" + value.id + "Wrapper").animate({"left": "+="+position+"px","top": "-="+position+"px"}, "slow"); // Move the reflection up and to the right

	// Make the image slide up out of the pack and back down on mouseover	
	$("#" + value.id).mouseover(function(){
		// Slide the image up
		$(this).animate(
			{top:"-=100px"}, 
			{duration:500}
		);
		// Fade the reflection out
		$('#' + value.id + "Wrapper").fadeOut("slow");

	}).mouseout(function(){
		$(this).animate(
			{top:"+=100px"}, 
			{duration:500})
		// Fade the reflection in
		if ($.browser.msie && $.browser.version.substr(0,1)<7) {
			// Do nothing (don't fade in shadow in IE6)
		} else {
			$('#' + value.id + "Wrapper").fadeIn("slow");
		}
	});
	
	count++; // move on to the next image
	numImagesCount--; // move the next image
 });
 
 // Set up zooming for all images
 setupZoom();
  
}); // End of onload

/**
 * Given the thumbnail URL of an image, create the link to the large file
 * @param {String} thumbnailURL Full URL to an image
 */
function createLinkToLargeImage(thumbnailURL) {
	var lastSlashPos = thumbnailURL.lastIndexOf('/')+1;
	var largeImageURL = thumbnailURL.substring(0,lastSlashPos) + 'large_' + thumbnailURL.substring(lastSlashPos);
	return largeImageURL;
}