var galleryContainer;
	var currentImage;
	var galleryImages;
	$(document).ready(function() {
	
		// assign the variable currentImage to the first image
		$.scrollTo.defaults.axis = 'x';
		galleryContainer = $("#images");
		galleryContainer.scrollTo({top: '0px', left: '0px'});
		galleryImages = $("#images img"); 
		currentImage = 0;
	
	
		// assign functionality to the arrows and hide them at first
		$("#leftArrow").click(function() {
			var last = galleryImages.eq(currentImage-1);
			if(last != null) {
				galleryContainer.scrollTo( last, 500);
				currentImage--;
				updateArrows();
			}
		});
		
		$("#rightArrow").click(function() {
			var next = galleryImages.eq(currentImage+1);
			if(next != null) {
				var left = galleryImages.eq(0);
				var right = galleryImages.eq(galleryImages.length-1);
				var dx1 = (right.offset().left + right.width() - left.offset().left - galleryContainer.width())
				var dx2 = (next.offset().left - left.offset().left)

				if(dx2 > dx1) {
					galleryContainer.scrollTo( {left: dx1}, 300);
				} else {
					galleryContainer.scrollTo( next, 500);
				}
				currentImage++;
				updateArrows();
			}
			
		});
		
		
		// add the rollover capability (cross browser compatible
		$("#pageImages div.arrow").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover");});
	
		// update the arrows initially
		updateArrows();
		
	});
	

	function updateArrows() {
		// if we're at the edge, hide it
		var left = galleryImages.eq(0);
		var right = galleryImages.eq(galleryImages.length-1);
		var current = galleryImages.eq(currentImage);
		if((right.offset().left + right.width() - current.offset().left) > galleryContainer.width()) {
			$("#rightArrow").css("visibility", "visible");
		} else {
			$("#rightArrow").css("visibility", "hidden");
		}
		if(currentImage > 0) {
			$("#leftArrow").css("visibility", "visible");
		} else {
			$("#leftArrow").css("visibility", "hidden");
		}
	}