$(document).ready(function() {
	// scrolling the viewer
	var offset = $("#right-page-content").offset();
	$(window).scroll(function() {
		var location = offset.top + $(document).scrollTop();
		$("#right-page-content").stop().animate({"top" : location}, 500, false);
	});
	
	
	var temp;
	// start out by grabbing the first image and loading it
	var startImage = $(".imageBtn:first").attr("href");
	var startText = $(".imageBtn:first").children().attr("title");
	var dimension;
	var direction;
	var bigWidth;
	var newWidth;
	var bigHeight;
	var newHeight;
	var paddingLeft;
	var paddingTop;
	$("#image").fadeOut(function() {		
		temp = new Image();
		$(temp).load(function() {
			$(this).hide();
			bigWidth = $(this).attr("width");
			bigHeight = $(this).attr("height");
			if (bigWidth > bigHeight) {
				newWidth = "280";
				newHeight = Math.round(bigHeight / (bigWidth / newWidth));
			} else {
				newHeight = "230";
				newWidth = Math.round(bigWidth / (bigHeight / newHeight));
			}
			paddingLeft = 150 - (newWidth / 2);
			paddingTop = 125 - (newHeight / 2);
			$("#image").css("padding", paddingTop + "px 0px 0px " + paddingLeft + "px").html(this);
			$("#image").children().attr({"width" : newWidth, "height" : newHeight});
			$(this).fadeIn();
		}).attr("src", startImage).click(function() {
			window.open(startImage, "Image");
		});
		
	}).fadeIn();
	$("#image-text").fadeOut(function() {
		$(this).html(startText).fadeIn();
	});
	
	// when a thumbnail is clicked load the image and text
	$(".imageBtn").click(function() {
		var image = $(this).attr("href");
		var text = $(this).children().attr("title");
		$("#image").children().fadeOut(function() {
			temp = new Image();
			$(temp).load(function() {
				$(this).hide();
				bigWidth = $(this).attr("width");
				bigHeight = $(this).attr("height");
				if (bigWidth > bigHeight) {
					newWidth = "280";
					newHeight = Math.round(bigHeight / (bigWidth / newWidth));
				} else {
					newHeight = "230";
					newWidth = Math.round(bigWidth / (bigHeight / newHeight));
				}
				paddingLeft = 150 - (newWidth / 2);
				paddingTop = 125 - (newHeight / 2);
				$("#image").css("padding", paddingTop + "px 0px 0px " + paddingLeft + "px").html(this);
				$("#image").children().attr({"width" : newWidth, "height" : newHeight});
				$(this).fadeIn();
			}).attr("src", image).click(function() {
				window.open(image, "Image");
			});
		});
		$("#image-text").fadeOut(function() {
			$(this).html(text).fadeIn();
		});
		return false;
	});

});