$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade',
		before: onBefore
	});
	
	$('.slideshowThumb').live('mouseover', function() {
		// cycle to the corresponding slide
		var desiredSlide = parseInt($(this).attr('rel'), 10);
        $('.slideshow').cycle(desiredSlide); 
        return false; 
	});
});

function onBefore() {
	var $thumbs = $('.slideshowThumbs');
	var currentImage = $thumbs.find('img[alt='+this.alt+']');
	var currentImageIndex = currentImage.attr('rel');
	var previousImageIndex  = currentImageIndex - 1;
	if ( previousImageIndex < 0 ) {
		previousImageIndex = $thumbs.find('img').length - 1;
	}
	var previousImage = $thumbs.find('img[rel='+previousImageIndex+']');
	
	var currentImageSrc = currentImage.attr('src').replace('_fade', '');
	var previousImageSrc  = previousImage.attr('src');
	if ( previousImageSrc.indexOf('_fade') == -1 ) {
		previousImageSrc = previousImageSrc.replace('.jpg', '_fade.jpg');
	}
	
	currentImage.attr('src', currentImageSrc);
	previousImage.attr('src', previousImageSrc);
};