//takes in an <li> in the #navigation list, spits out a filename like "images/thunderheist.jpg"
function get_image_src(li) {
	return "images/" + $(li).attr("id") + ".jpg";
}

// resizes the gallery image to fit the viewport; called on window resize and on main image load
function resize_gallery_image() {
	var img = $("img#main_image");
	img.css({"top" : "", "left" : "", "width": "", "height": ""});
	var width = img.width();
	var height = img.height();
	var ratio = width / height;
	var screen_width = $(window).width();
	var screen_height = $(window).height();

	if(width >= screen_width && width >= height) {
		width = screen_width;
		height = width / ratio;
		img.css({"width": width + "px", "height": height + "px"});
	} else if(height >= screen_height && height > width) {
		height = screen_height;
		width = height * ratio;
		img.css({"width": width + "px", "height": height + "px"});
	}

	var css_left = (screen_width / 2) - (width / 2);
	var css_top = (screen_height / 2) - (height / 2);
	img.css({"top" : css_top + "px", "left" : css_left + "px"});
}

// preloads all of the gallery images
function preload_images() {
	//we don't actually ever use this object, but it's nice to have
	window.loaded_images = {};
	$("ul#navigation li").each(function() {
		var image_src = get_image_src(this);
		if(window.loaded_images[image_src] == null) {
			var img = new Image();
			img.image_src = image_src;
			img.onload = function() {
				window.loaded_images[this.image_src] = this;
			};
			img.src = image_src;
		}
	});
}

// sets the main background image to be the file specified by image_src in a pretty way.
function display_gallery_image(image_src) {
	$("div#image_container").fadeOut("slow", function() {
		var img_to_load = new Image();
		img_to_load.onload = function() {
			$("img#main_image").attr("src", image_src);
			$("div#image_container").fadeIn("slow");
		};
		img_to_load.src = image_src;
	});

}

$(function() {
	// wire up navigation click behavior
	$("ul#navigation li").bind("click", function() {
		var image_src = get_image_src(this);
		display_gallery_image(image_src);
		var id = $(this).attr("id");
		var code_to_inject = $("#" + id + "_project_text").html();
		$("#project_text").show().html(code_to_inject);
	});
	

	// wire up resizing behavior
	$("img#main_image").bind("load", resize_gallery_image);
	$(window).bind("resize", resize_gallery_image);

	//start preloading all our images
	preload_images();

	$("#thunderheist").click();
});

<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->