// JavaScript Document
$(document).ready(function(){

				
		myInterval = setInterval("showNext()",5000);
		
		$('#next').click(function(e){
				clearInterval(myInterval);
				showNext();
		 });
		
		$('#prev').click(function(e){
				clearInterval(myInterval);
				showPrev();
		 });
		
		
		$('#thumbs').find('ul li').each(function(){
			if($(this).attr('main') != $('#thumbs ul:first li').attr('main'))
				$(this).find('img').wrap('<a onclick="javascript:showImage(\''+$(this).attr('main')+'\');" href="javascript:void(0);"   class="transparent" ></a>');
			else
				$(this).find('img').wrap('<a onclick="javascript:showImage(\''+$(this).attr('main')+'\');" href="javascript:void(0);" ></a>');	
		});											 
});
function showImage(img)
{
	$('#mainImage').html('<img src="'+img+'" />');
	$('#thumbs').find('li[main] a').each(function()
	{
			$(this).addClass('transparent');		
	});
	$('#thumbs').find('li[main]').each(function()
	{
		$(this).removeClass('active');
	});
	
	$('#thumbs').find('li[main='+img+'] a.transparent').removeClass('transparent');
	$('#thumbs').find('li[main='+img+']').addClass('active');
}
function showNext()
{
	var currentIndex = $('#thumbs').find('li[main].active').prevAll().length;				
				
	if(currentIndex == $('#thumbs').find('ul li').length-1)
	{
		showImage($('#thumbs li:first').attr('main'));
	}
	else
	{
		showImage($('#thumbs').find('li[main].active').next('li').attr('main'));
	}
}

function showPrev()
{
	var currentIndex = $('#thumbs').find('li[main].active').nextAll().length;					
	if(currentIndex == $('#thumbs').find('ul li').length-1 )
	{
		showImage($('#thumbs li:last').attr('main'));
	}
	else
	{
		showImage($('#thumbs').find('li[main].active').prev('li').attr('main'));
	}
}