var currentImage = null;
var currentImageObject = null;

function image_OnClick(image)
{
	//console.log(image);
	//here is where I figured a slight mod to add the /large folder
	var imageSource = image.attr("src");
	var newImageSource = imageSource.replace("/small/", "/large/");
	
	//console.log(newImageSource + ":" + currentImage);
	if(currentImage != newImageSource)
	{
		$("#loaderdiv").show();
		$("h4").remove();
		currentImage = newImageSource;
		currentImageObject = image;
		showImage(newImageSource);
	}
	return false;
}

$().ready(function()
{
	//hides the div holding the loading graphic
	$("#loaderdiv").hide(); 
	$("#imageOptions a").bind("click", function()
	{
		return image_OnClick($(this).children("img"));
	});
	$("#controls_leftarrow").hover(
		// Over
		function()
		{//0.9
			$(this).css({opacity: 0.7});
		},
		// Out
		function()
		{//0.3
			$(this).css({opacity: 0.1});
		}
	);
	$("#controls_leftarrow").click(function()
	{
		var prev = currentImageObject.parent().prevAll().find("img").eq(0);
		if(prev.length != 0)
		{
			image_OnClick(prev);
		}
	});
	
	$("#controls_rightarrow").hover(
		// Over
		function()
		{//0.9
			$(this).css({opacity: 0.7});
		},
		// Out
		function()
		{//0.3
			$(this).css({opacity: 0.1});
		}
	);
	$("#controls_rightarrow").click(function()
	{
		var next = currentImageObject.parent().nextAll().find("img").eq(0);
		if(next.length != 0)
		{
			image_OnClick(next);
		}
	});
});

function showImage(src) 
{
	$("#loader img").fadeOut("normal").remove();
	var largeImage = new Image();

	$(largeImage).load(function()
	{
		if(this.src.indexOf(currentImage) != -1)
		{
			$(this).hide();
			$("#loader").append(this);
			$("#loaderdiv").fadeOut("fast").hide();
			$(this).fadeIn("slow");
			$("#controlsdiv_h").css({top:(this.offsetHeight + 10) + "px", width: this.offsetWidth + "px", height: "55px"});
			$("#controlsdiv").css({top:(this.offsetHeight + 10) + "px", width: this.offsetWidth + "px", height: "25px"});

			$("#controls_leftarrow").css({width: (this.offsetWidth / 2) + "px", height: "25px"});
			$("#controls_rightarrow").css({width: (this.offsetWidth / 2) + "px", height: "25px"});

		}
	});
	$(largeImage).attr("src", src);
	
}