var slides;
var currentSlide;
var isMoving = false;
var detail_image;
//
// swapImg()
// Function runs on window load, going through link tags looking for rel="preview".
// These links receive onmouseover events that enable the preview display for their targets.
//
function swapImg(theLink) 
{
	var img = theLink.href;
	var imgtext = theLink.title;
	
	// stop if we've already loaded that image
	if (detail_image.src == theLink.href)
		return;
	// stop if we're already animating.	
	if (isMoving)
		return;
	
	// remove the hilight from the previous thumbnail
	slides.invoke("removeClassName", "active");

	// hilight the thumbnail	
	theLink.addClassName("active");
	
	isMoving = true;	
	
	imgPreload = new Image();
	// Fade out the current image
	Effect.Fade(detail_image, {duration: .5, afterFinish: function() {imgPreload.src=img;}});
	// Preload the next image
	imgPreload.onload = function() {
		// Swap the image into place
		detail_image.src = img;
		detail_image.width = imgPreload.width;
		detail_image.height = imgPreload.height;
		detail_image.alt = imgtext;
		// Now fade it in
		Effect.Appear(detail_image, {duration: .5, afterFinish: function() {isMoving=false;}});
 	}
	return false;
}

//
// initPreview()
// Function runs on window load, going through link tags looking for rel="preview".
// These links receive onmouseover events that enable the preview display for their targets.
//
function initPreview()
{	
	detail_image = $("detail_image");
	if (!document.getElementsByTagName) { return; }
	slides = $$('#right_viewer ul a');
	slides.each(function(anchor) {
		Event.observe(anchor, 'click', function(e) { Event.stop(e); swapImg(this); });
	});
}

Event.observe(window, 'load', initPreview);