$(document).ready(function(){	
	var home_slider = setInterval("home_cycle()", 5000);
	setup_thumbnail_click(home_slider);

	// hide detail text
	$('#details div').not('.Overview').hide();
});

function setup_thumbnail_click(home_slider){

	$('ul#thumbnail-images li a').live('click', function(){
		
		// stop the animation
		clearInterval(home_slider);
		$('ul#thumbnail-images li').stop(true,true);
		$('ul#thumbnail-images').stop(true,true);
		$('#detail-image a').stop(true,true);
		
		// figure out current thumbnail and active main img
		var img_alt = $(this).find('img').attr('alt');												
		var active_img = $('#detail-image a:visible');
		
		// hide clicked thumbnail
		$(this).parent().hide();

		// show missing thumbnail
		$('ul#thumbnail-images li.'+active_img.attr('rel')).fadeIn();
		
		// swap main images
		active_img.fadeOut(function(){
			$('#detail-image a[rel="'+img_alt+'"]').fadeIn();				
		});
		
		// fade and show text
		$('#details div:visible').fadeOut(function(){
			$('#details div.'+img_alt).fadeIn();		
		});
		
															
	});
}

function home_cycle(){
	
	// determine active imgs
	var active = $('#detail-image a.active');
	var active_thumb = $('ul#thumbnail-images li.'+active.attr('rel'));
	
	// figure out next img						
	var next = $('#detail-image a.active').next();

	// assign to first if next is the last
	if (next.length == 0) {
		next = $('#detail-image a:first');
	}
	var next_thumb = $('ul#thumbnail-images li.'+next.attr('rel'));						
	
	// do the fade magic swap slide
	$('ul#thumbnail-images li:last').fadeOut('slow',function(){							
		$('ul#thumbnail-images').animate({
			'padding-top':'65px'
		}, function(){
			next_thumb.remove();
			$(this).css('padding-top',0).prepend(next_thumb);
			next_thumb.hide();						
			$('ul#thumbnail-images li:hidden').not(':first').fadeIn();								
		});				
	});				
	
	// swap main images
	active.fadeOut('slow',function(){
		$(this).removeClass('active');
		next.hide().removeClass('hidden').fadeIn().addClass('active');
	});
	
	// fade and show text
	$('#details div:visible').fadeOut(function(){
		$('#details div.'+next.attr('rel')).fadeIn();		
	});	
}