window.addEvent('domready', function(){
	/* Hijack all of the thumbnail hrefs and make them dynamic instead */
	$$('ul.page_thumbnails li').each(function(li){
		var imgId = li.id.replace('image_','');
		li.firstChild.href = '#' + imgId;
		li.onclick = function(){
			$$('ul.page_thumbnails img.selected').each(function(img){ img.removeClass('selected'); });
			this.firstChild.firstChild.className = 'selected';
			// alert(this.firstChild.firstChild.removeClass());
			// this.firstChild.firstChild.addClass('selected');

			$('imgDisplay').firstChild.src = images[imgId]['url'];
			// $('image_title').setHTML(images[imgId]['title']);
			// $('image_description').setHTML(images[imgId]['description']);
		}
	});
	
	if($('page_thumbnails').childNodes.length > 10){
		var scrollBy = 225;
			$('page_thumbnails').scroller = new Fx.Styles($('page_thumbnails'), {duration: 150});
			/* Calculate the coordinates that the scroller has to start at
			   Take the selected image (designated by a # in the URL), find it's
			   left coordinate, then round to the nearest scrollBy pixels.
			 */
			var selectedImage = new String(window.location).split('#')[1];

			if(selectedImage){
				$$('ul.page_thumbnails img.selected').each(function(img){ img.removeClass('selected'); });
				$('image_'+selectedImage).firstChild.firstChild.addClass('selected');

				$('imgDisplay').firstChild.src = images[selectedImage]['url'];
				// $('image_title').setHTML(images[selectedImage]['title']);
				// $('image_description').setHTML(images[selectedImage]['description']);

				var newLeft = parseInt(($($('page_thumbnails').firstChild).getCoordinates().left - $('image_'+selectedImage).getCoordinates().left) / scrollBy) * scrollBy;
				$('page_thumbnails').scroller.start({'left': newLeft });
			}

			/* Make the scroll left/right buttons work */
			$('left_scroll_button').onclick = function(){
				var newLeft = parseInt($('page_thumbnails').style.left.replace('px','')) + scrollBy;

				if(newLeft != scrollBy){
					$('page_thumbnails').scroller.start({'left': newLeft });
				}
			}
			$('right_scroll_button').onclick = function(){
				var newLeft = parseInt( $('page_thumbnails').style.left.replace('px','') ) - scrollBy;
				$('page_thumbnails').scroller.start({'left': newLeft });
			}

		// alert(images[14]['url']);
		
	}else{
		$('left_scroll_button').style.display = 'none';
		$('right_scroll_button').style.display = 'none';
	}
	
	if($('page_thumbnails').childNodes.length < 2){
		/* hide the thumbnails and the scroller arrows if there is only one image in the gallery for this page */
		$('page_thumbnails').style.visibility = 'hidden';
	}
	
	
	
});