function onAnimationComplete ( oldImage ) 
{
	$('.current_slide_info').fadeIn();
}

function onAnimationStart ( newImage, direction ) 
{
	var current = $('.current_slide_info');
	
	current.fadeOut().removeClass('current_slide_info');
	
	if(direction == 'next' ) {
		if(current.next().length == 0) {
			$('.slide_right .slide_info:first').addClass('current_slide_info');
		}
		else {
			current.next().addClass('current_slide_info');
		}
	} else { // direction must be previous
		if(current.prev().length == 0) {
			$('.slide_right .slide_info:last').addClass('current_slide_info');
		}
		else {
			current.prev().addClass('current_slide_info');
		}
	}
}
	
$(document).ready(function(){
	$('.feature_text').hide();
	$('.slide_info .feature_text_container > .feature_text:first-child').show();
	
	$("#slides").slides({
		play: 5000,
		pause: 2500,
		hoverPause: true,
		hoverPauseOther: ".slide_info",
		animationStart: onAnimationStart,
		animationComplete: onAnimationComplete
	});
	
	$('.slide_right .slide_info:first').addClass('current_slide_info');
	$('.current_slide_info').show();
	
	// we want to center the navigation circles in their div, to do that, we need to give the div the correct width
	$('#slides .pagination').css('width', ($('#slides .pagination').children().size()*19) + 'px');
	
	$('.slide_info .thumbs li').click(function () {
		
		//change the text with the thumbnail
		$('.current_slide_info .feature_text').hide();
		$($('.feature_text').get($('.thumbs > li').index(this))).show();
		
		// remove the border around the current thumbnail
		$('.current_slide_info .thumbs .active').removeClass('active');
		
		// add the border around the new current thumbnail
		$(this).addClass('active');
		
		// change the large image to reflect the clicked thumbnail
		var largeImg = $(this).find('img').attr('src').replace("/thumb/", "/large/");
		$('.current_slide_info .target_main_img').attr('src', largeImg);
	});
	
	$('.target_roll_over').click(function () {
		
		var thumbImg = $(this).attr('rel');
		var largeImg = thumbImg.replace("/thumb/", "/large/");
		
		$('.current_slide_info .thumbs .active').removeClass('active');
		$('.current_slide_info .thumbs li img[src="' + thumbImg + '"]').parent().addClass('active');
		$('.current_slide_info .target_main_img').attr('src', largeImg);
		
		//change the text with the thumbnail
		$('.current_slide_info .feature_text').hide();
		$($('.feature_text').get($('.thumbs > li').index($('.current_slide_info .thumbs .active').get(0)))).show();
		return false;
	});
});