function getOffset(imSource) {
	var W;
	var getDims=new Image();
	getDims.src=imSource;
	var imWidth=getDims.width;
	var imHeight=getDims.height;
	var containerWidth=$("#photos").width();
	if (imWidth<=imHeight) { //if the image is square or vertical, center it
		W=(containerWidth-imWidth)/2;
	} 
	if (imWidth>imHeight) { //if image is horizontal, right-align it
		W=containerWidth-imWidth;
	}	
	return W;
}

$(document).ready(function() {
	//image preloader
	var im = new Array(); //will store locations of all images to preload
	var preloader= new Array(); //will load the "images" themselves
	$("#menu_bot a").each(function(i) {  //for each thumbnail...
		im[i]=$(this).attr('href');  //store the location of its corresponding large image
	});
	jQuery(im).each(function(k){  //for each element in 'im'
		preloader[k] = new Image(); //create new image object
		preloader[k].src = this;     //set the src of the image object to one of the large images, load
	});
	
	var startIm=$("#photos img").attr('src');
	window.onload=function() {
		var thisOffset=getOffset(startIm);
		$("#photos img").addClass('visible').css({'position':'absolute','left':thisOffset});
		$("#photos img").clone().addClass('hidden').removeClass('visible').appendTo("#photos").css({
		'position':'absolute',
		'top':0,
		'left':thisOffset});
		$("img.visible").hide(); //seemingly illogical, but necessary
	}

	//click behavior
	$("#menu_bot a").click(function() {
		var newIm=$(this).attr('href'); //address of new image
		var oldIm=$("img.hidden").attr('src'); //address of old image
		if (newIm!=oldIm) {
			var newOffset=getOffset(newIm); //offset of new image
			var oldOffset=getOffset(oldIm); //offset of old image
			$("img.hidden").addClass('temp').removeClass('hidden'); //remove 'hidden' class
			$("img.visible").addClass('hidden').removeClass('visible'); //change 'visible' to 'hidden'
			$("img.temp").addClass('visible').removeClass('temp'); //turn 'temp' to 'visible'
			$("img.hidden").attr({'src':newIm}).css({'left':newOffset,'position':'absolute'}); //the currently hidden image gets the 'new' picture
			$("img.visible").fadeOut(1000).hide(1000); //fade out the old image
			$("img.hidden").fadeIn(1000); //fade in the new image
		}
		return false;
	});

});