var lastImage;
$(document).ready(function(e) {
	// add event listeners for mouse over and mouse out to swap images
	$("#main .box").each(function(index, element) {
		$(this).mouseenter(function(e) {
			// swap for text version
			var source = $(this).attr("src");
			lastImage = source;
			var path = source.substring(0, source.lastIndexOf("/") + 1);
			var filename = source.substring(source.lastIndexOf("/") + 1);
			var name = filename.substring(0, filename.lastIndexOf("."));
			$(this).attr("src", path + name + "_text.gif");
		});
		
		$(this).mouseleave(function(e) {
			// swap for photo version
			$(this).attr("src", lastImage);				
		});
		
		// reset image and remove mouseenter and mouseleave listeners so when user uses back button the images are set properly
		$(this).click(function(e) {
			$(this).attr("src", lastImage);
			
			$("#main .box").each(function(e) {
				$(this).mouseenter(function(e) {});
				$(this).mouseleave(function(e) {});
			});
		});
	});
});