// Start with the banner playing
document.banner_playing = true;

// Timeout functionality
var seconds = 5;

// Recursive function: calls itself again after specified delay
function nextBanner() { 
			
	// If the banner is playing, rotate...
	if (document.banner_playing) {
		
		// If we are on the last banner
		if ($('.index-thumb.selected').attr('id') == $('.index-thumb:last').attr('id')) {
			// Show the first banner
			selectThumbnail($('.index-thumb:first'));
		} else {
			// Show the next banner
			selectThumbnail($('.index-thumb.selected').next());
		}
		
		// Have the function call itself after delay
		setTimeout("nextBanner()", seconds * 1000);
	}
		
}


function selectThumbnail(thumb) {
	
	// Update which thumbnail is highlighted
	$('.index-thumb').removeClass('selected');
	$(thumb).addClass('selected');
	
	// Fade out any previous item
	$('.home-banner-content > div').fadeOut('slow');
	
	// Fade in the new item
	$($(thumb).attr('href')).fadeIn('slow');
	
}


// Init Events and start rotation
$(document).ready(function() {
	
	// Select the first thumbnail
	$('.index-thumb:first').addClass('selected');
	
	$('#pause-button').click(function() {
		if (document.banner_playing) {
			document.banner_playing = false;
		}
		// Prevent the default anchor action
		return false;
	});

	$('#play-button').click(function() {
		
		if (!document.banner_playing) {
			document.banner_playing = true;
			// Start the rotation
			setTimeout("nextBanner()", seconds * 1000);
		}
		
		// Prevent the default anchor action
		return false;
	});
	
	
	// Hide all the items except the first
	$('.home-banner-content > div:not(:first)').hide();
	
	// When a thumbnail is clicked
	$('.index-thumb').click(function() {
		
		// Stop the banner rotation
		document.banner_playing = false;
		
		// Select the clicked thumbnail
		
		if (!$(this).hasClass('selected')) {
			selectThumbnail(this);
		}
		
		// Prevent the default anchor action
		return false;
		
	});
	
	
	// Start the banner rotation after delay
	setTimeout("nextBanner()", seconds * 1000);
	
});