var galleryContainer;
	var currentSet;
	var imageSets;

	$(document).ready(function() {

		// size the copy area dynamically depending on
		// the header height (with and w/o the nav) and
		// if the gallery is there or not
		$("#copyArea").height(	$("#content").height() - 
								$("#pageHead").height() - 
								parseInt($("#pageHead").css("marginBottom")) - 
								($("#gallery").height() | 0) -
								(parseInt($("#gallery").css("marginTop")) | 0)
							);
		
	
		// assign the variable currentImage to the first image
		galleryContainer = $("#galleryContainer");
		imageSets = $("#galleryImages div.imageSet"); 
		currentSet = 0;
	
		// assign functionality to the arrows and hide them at first
		$("#leftArrow").click(function() {
			if(currentSet > 0) {
				currentSet--;
				moveImages();
				updateArrows();
			}
		});
		
		$("#rightArrow").click(function() {
			if(currentSet < imageSets.length-1) {
				currentSet++;
				moveImages();
				updateArrows();
			}
			
		});
	
		// add the rollover capability (cross browser compatible
		$("#gallery div.arrow").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover");});
	
	
		// update the arrows initially
		updateArrows();
		
	});
	
	function moveImages() {
		if($.browser.safari) {
			galleryContainer.css({left: -currentSet*320});
		} else {
			galleryContainer.animate({left: -currentSet*320});
		}
	}
	function updateArrows() {
		if(currentSet < imageSets.length - 1) {
			$("#rightArrow").css("visibility", "visible");
		} else {
			$("#rightArrow").css("visibility", "hidden");
		}
		if(currentSet > 0) {
			$("#leftArrow").css("visibility", "visible");
		} else {
			$("#leftArrow").css("visibility", "hidden");
		}
	}