var homeThumbIndex = 0;
var animationTimer = null;

jQuery(document).ready(function($)
{	
	// Initialize the animation panels
	$('#featured li:first-child,.comments li:first-child').toggleClass('active');
	$('.photos li:first-child').addClass('active');
	
	// Initialize the thumbnail click
	homeThumbClick();
	
	// Initialize the animation timer
	animationTimer = setInterval('updateHomeAnimation()', 10000);
});

// Initialize the thumbnail click
function homeThumbClick()
{
	// Select all the thumbnails and add a click event
	$(".photos a").click(function(e) 
	{
		// Stop propogation so it doesn't jump to the top of the page
		e.stopPropagation();
		
		// If the selected thumbnail isn't already active
		if (!$(this).parent('li').hasClass('active'))
		{
			// Get the index position of the selected thumbnail
			var index = $('.photos li').index($(this).parent('li'));
			
			// Update the animation panel so the selected index is visible
			updateAnimationPanel(index);
		}
		
		// Stop the animation timer
		clearInterval(animationTimer);
		
		// Return false so the click event stops
		return false;				
	});
}

// Update the animation panel so the selected index is visible
function updateAnimationPanel(index)
{	
	// Get the thumbnail, main photo, and text for the selected index
	var curThumb = $($('.photos li')[index]);
	var curPhoto = $($('#featured li')[index]);
	var curText = $($('.comments li')[index]);
	
	// Make everything inactive
	$('#featured li,.comments li').removeClass('active').addClass('inactive');
	$('.photos li').removeClass('active');
						
	// Make the selected thumbnail active
	curThumb.addClass('active');
	
	// Reset the text and main photo to 0% opacity, make them both active, and then animate them to 100% opacity
	curPhoto.css({display:'none', opacity:'0'}).removeClass('inactive').addClass('active').fadeTo(500, 1);
	curText.css({display:'none', opacity: '0'}).removeClass('inactive').addClass('active').fadeTo(500, 1);
	// curText.css({display:'none', opacity:'0', visibility:'hidden'}).addClass('active').fadeTo(500, 1);
	
}

// Animate the panels based on the timer
function updateHomeAnimation()
{
	// Get the total number of panels to animate
	var length = $('.photos li').length;
	
	// If there is more than one thumbnail
	if (length > 1)
	{
		// Advance the selected index
		homeThumbIndex++;
		
		// If the advanced index is more than the total then circle back to the first thumbnail
		if (homeThumbIndex > length - 1)
		{
			homeThumbIndex = 0;
		}
		
		// Update the animation panel so the updated index is visible
		updateAnimationPanel(homeThumbIndex);
	}
	
	// If there is only one thumbnail then disable the animation
	else
	{
		clearInterval(animationTimer);
	}	
}