var currentImage;
var totalImage;
var containerWidth;
var containerHeight;
var widthCorrection;
var heightCorrection;

jQuery.fn.initGallery = function(options) {
    myoptions = jQuery.extend({
    	// default values if none were passed through
    	height: "500px",
    	width: "500px",
    	fadeSpeed: 600
    },
	options);
	
	$.imageContainer = $(this); // to use within nested jquery
	
	// INJECT MARKUP
	$(this).wrap('<div class="GalleryContainer"><div class="Contents">');
	$(this).before('<div class="Caption"></div><div class="Page"></div><div class="Left"><a href="#" class="Prev"></a></div>')
	$(this).after('<div class="Right"><a href="#" class="Next"></a></div>');
	
	// SETUP CONTROLS
	$(".Left").click(function(event){
		event.preventDefault();
		
		// hide current image
		$("img:eq("+currentImage+")", $.imageContainer).fadeOut(myoptions.fadeSpeed, function(){
		    //$("img:eq("+currentImage+")", $.imageContainer).fadeIn(myoptions.fadeSpeed);
		});
		// change counter
		if(currentImage == 0){ currentImage = totalImage - 1; } else { currentImage--;}
		// bring new image in
		$("img:eq("+currentImage+")", $.imageContainer).fadeIn(myoptions.fadeSpeed);
		$(".GalleryContainer .Caption").updateCaption($.imageContainer);
		$(".Page").updatePageNum();
		
	});
	$(".Right").click(function(event){
		event.preventDefault();
		
		$("img:eq("+currentImage+")", $.imageContainer).fadeOut(myoptions.fadeSpeed, function(){
		    //$("img:eq("+currentImage+")", $.imageContainer).fadeIn(myoptions.fadeSpeed);
		});
		if(currentImage == totalImage - 1) { currentImage = 0; } else { currentImage++; }
		$("img:eq("+currentImage+")", $.imageContainer).fadeIn(myoptions.fadeSpeed);
		$(".GalleryContainer .Caption").updateCaption($.imageContainer);
		$(".Page").updatePageNum();
	});
	
	
	// INIT GALLERY
	// add CSS to the container called to be an image gallery
	$(this).css({
	    'width': myoptions.width, 
	    'height':myoptions.height,
	    'padding-bottom':'30px',
	    'float':'left',
	    'text-align':'center',
	    'position':'relative'
	});
	
	// preload images
	$("img", this).each(function(){
	    var path = $(this).attr("src");
		jQuery.preLoadImages(path);
	})
	
	currentImage = 0;
	totalImage = $("img", this).size();
	containerWidth = $(this).width();
	containerHeight = $(this).height();
	
	// init first caption
	$(".GalleryContainer .Caption").updateCaption($(this));
	
	$(".Page").updatePageNum();
	
	// center images vertically
	$("img", this).each(function(){
		$(this).load(function(){
		    $.imgWidth = $(this).width();
		    $.imgHeight = $(this).height();
		    widthCorrection = (containerWidth - $.imgWidth) / 2;
		    heightCorrection = (containerHeight - $.imgHeight) / 2;
		    $(this).css("margin-left", widthCorrection);
		    $(this).css("margin-top", heightCorrection);
		}).error(function(){
		    $(this).empty();
		    $(".GalleryContainer .Caption").html("Image not loaded");
		});
	})
	// ********************
	// TEMP - I don't think the above is called if the images were cached
	// ********************
	$("img", this).each(function(){
	    $.imgWidth = $(this).width();
	    widthCorrection = (containerWidth - $.imgWidth) / 2;
	    $.imgHeight = $(this).height();
	    heightCorrection = (containerHeight - $.imgHeight) / 2;
	    $(this).css("margin-left", widthCorrection);
	    $(this).css("margin-top", heightCorrection);
	})
	
	// add class to the image collection
	$("img", this).each(function(){
		$(this).addClass("GalleryImage");
	})
	
	// init first image
	$("img:eq(0)", this).load(function(){
	    $(this).fadeIn(myoptions.fadeSpeed);
	});
	// ********************
	// TEMP
	// ********************
	$("img:eq(0)", this).fadeIn(myoptions.fadeSpeed);
}

jQuery.fn.updatePageNum = function(options) {
	myoptions = jQuery.extend({
    	
    },
	options);
	$(this).html((currentImage+1) + " of " + totalImage);
}

jQuery.fn.updateCaption = function(sender, options) {
	myoptions = jQuery.extend({
    	
    },
	options);
	$(this).html($("img:eq("+currentImage+")", sender).attr("longdesc"));
}