$(document.body).ready(function(){
	
	$("#button").click(function(){
		
		if (!$("#map").hasClass("big")) {
			$(".banner").hide();
			$("#navbox").animate({
				height: "520px"
			}, 250);
			$("#map").animate({
				marginLeft:"0px"
			}, 250, "swing", $(".nav").fadeOut(50)).addClass("big");
			
			$("#button").animate({
				left: "20px"
			}, 250);
			$("#maplink").html("<em>&raquo; Shrink the map</em>");
			$(".small_map").add(".banner").hide();
			$("#maptable").fadeIn("slow");
			
			$(".cut")
			.hover(
				function(){
					var name = $(this).attr("alt");
					$(this).after("<div class='popup'><h1>" + name + "</h1><p>Click to view images of this cut.</p></div>");
					$(".popup").click(function(){
						
					});
				},
				function(){
					$(".popup").remove();
				}
			)
			$(".fill")
			.hover(
				function(){
					var name = $(this).attr("alt");
					$(this).after("<div class='popup'><h1>" + name + "</h1><p>Click to view images of this fill.</p></div>");
				},
				function(){
					$(".popup").remove();
				}
			)
			$(".cut").add(".fill").click(function(){
				$("#map_images").hide();
				
				$("#map").css({
					height: "499px",
					width: "760px"
				});
				$("#map_images").fadeIn("slow", function(){
						var mapHeight = document.getElementById("map_images").offsetHeight;
			
						$("#navbox").animate({
							height: (496 + mapHeight) + "px"
						}, function(){
							setupZoom();
						});
				});
			});

		} else {			
			$("#map_images").hide();
			$("#map").animate({
				marginLeft:"300px"
			}, 250, "swing", $(".nav").fadeIn(50)).removeClass().css({
				height: "100%",
				width: "auto"
			});
			
			$("#navbox").animate({
				height: "210px"
			}, 250);
			
			$("#button").animate({
				left: "325px"
			}, 250);
			$("#maplink").html("<em>&raquo; Expand the map</em>");
			$(".small_map").add(".banner").fadeIn("slow");
			$("#maptable").hide();

		}
	});
	

	
});