function initImageGallery() {
	// define thumb width
	var THUMB_WIDTH = 94;
	
	// set visible width
	var visibleWidth = THUMB_WIDTH * 6;
	
	// get combined width of all image thumbnails
	var totalWidth = ($("imageThumbs").getChildren().length) * THUMB_WIDTH;
	
	// set width of list
	$("imageThumbs").setStyle("width", totalWidth);
	
	// set initial classes for buttons
	$("imageThumbsLeft").addClass("disabled");
	
	if (totalWidth <= visibleWidth)
		$("imageThumbsRight").addClass("disabled");
	
	// define effects
	var fx = new Fx.Styles($("imageThumbs"), {duration: 500, transition: Fx.Transitions.Sine.easeInOut});
	
	// assign button functions
	$("imageThumbsLeft").addEvent("click", function(e) {
			// stop anchor event
			e = new Event(e).stop();
			
			// get current position
			var currentLeft = $("imageThumbs").getStyle("left").toInt();
			
			// calculate new position
			var tempLeft = currentLeft + THUMB_WIDTH;
			
			if (tempLeft <= 0) {
				// animate
				fx.start({
				 	"left": tempLeft
				});
				
				// update button statuses
				if ($("imageThumbsRight").hasClass("disabled"))
					$("imageThumbsRight").removeClass("disabled")
				
				if (tempLeft == 0) {
					if (!$("imageThumbsLeft").hasClass("disabled"))
						$("imageThumbsLeft").addClass("disabled");
				}
			}
		}
	);
	
	$("imageThumbsRight").addEvent("click", function(e) {
			// stop anchor event
			e = new Event(e).stop();
						
			// get current position
			var currentLeft = $("imageThumbs").getStyle("left").toInt();
			
			// calculate new position
			var tempLeft = currentLeft - THUMB_WIDTH;
						
			if ((totalWidth - Math.abs(tempLeft)) >= visibleWidth) {
				// animate
				fx.start({
					"left": tempLeft
				});
				
				// update button statuses
				if ($("imageThumbsLeft").hasClass("disabled"))
					$("imageThumbsLeft").removeClass("disabled");
				
				if ((totalWidth - Math.abs(tempLeft)) == visibleWidth) {
					if (!$("imageThumbsRight").hasClass("disabled"))
						$("imageThumbsRight").addClass("disabled");
				}
			}
		}
	);
	
	// assign thumbnail link functions
	
	// get links
	var thumbLinks = $$("ul#imageThumbs a");
	
	// add events to all thumb links
	for (var i = 0; i < thumbLinks.length; i++) {
		thumbLinks[i].addEvents({
			
			"mouseover": function(ev) {
				showImageName(ev);
			},
			
			"mouseout": function() {
				clearImageName();
			},
			
			"click": function(ev) {
				loadImage(ev);
			}
			
		});
	}
	
	return false;
}

function showImageName(ev) {
	// get thumb index
	var event = new Event(ev);
	var thumb_index = $(event.target).getParent().getProperty("id").replace("thumb", "").toInt();

	// set image name
	$("highlightedImage").getChildren()[0].innerHTML = $(event.target).getParent().getProperty("title");
	
	// toggle paragraph visibility
	$("nowViewing").addClass("hide");
	$("highlightedImage").removeClass("hide");
}

function clearImageName() {
	// toggle paragraph visibility
	$("highlightedImage").addClass("hide");
	$("nowViewing").removeClass("hide");
}

function loadImage(ev) {
	var IMAGE_HEIGHT = 311;
	
	// get thumb index
	var event = new Event(ev).stop();
	var thumb_index = $(event.target).getParent().getProperty("id").replace("thumb", "").toInt();
		
	// set image name
	$("nowViewing").getChildren()[0].innerHTML = $(event.target).getParent().getProperty("title");
	
	// define effects
	var fadeOut = new Fx.Styles($("imageList"), {duration: 300, transition: Fx.Transitions.Sine.easeInOut});
	var fadeIn = new Fx.Styles($("imageList"), {duration: 300, transition: Fx.Transitions.Sine.easeInOut});
	
	// load image
	fadeOut.start ({
		"opacity": 0
	}).chain(function() {
		$("imageList").setStyle("top", (IMAGE_HEIGHT * (thumb_index * -1)) + "px");
		fadeIn.start ({
			"opacity": 1
		});
	});
}