//Current index of Image
var currentIndex = 1;
var playAnimation = 0;
var Count = 0;		//to count number of images
var animDur = 4000; // animation duration

$(document).ready(function(){
	
	//create same number of li in ul#SlidesNavigator as number of images in ul#SlidesCanvas
	var imgCount = $('#SlidesCanvas li img').length;
	Count = imgCount;
	for(var i=imgCount; i > 0; i--){
		$('#SlidesNavigator').prepend('<li class="pages" id="li' + i + '" onclick="MoveSlide(' + i + ');">' + i + '</li>');											
	}
	
	//show first image
	ShowImage(1);
	$('#action').removeClass('actionstartactionstart').addClass('actionstop').text('Stop');
	playAnimation = setInterval('StartAnimation();', animDur);
	
	//set Timeout function on Action Li item
	$('#action').toggle(
		function(){
			$(this).removeClass('actionstop').addClass('actionstart').text('Play');
			clearInterval(playAnimation);
		},
		function(){
			$(this).removeClass('actionstartactionstart').addClass('actionstop').text('Stop');
			playAnimation = setInterval('StartAnimation();', animDur);
		});
});

function MoveSlide(index)
{
	var lastIndex = currentIndex;
	currentIndex = index;
	ShowImage(lastIndex);
}

function ShowImage(lastIndex)
{
	$('#SlidesCanvas li img').eq(lastIndex-1).fadeOut(350, function(){
		if(($.browser.msie && $.browser.version < 6)) {
			$('#SlidesCanvas li img').eq(currentIndex-1).slideDown(350); 
		}	
		else {
			$('#SlidesCanvas li img').eq(currentIndex-1).fadeIn(350);
		}
	});
	
	$('#SlidesNavigator .pages').removeClass('selectedIndex');
	$('#SlidesNavigator .pages').eq(currentIndex-1).addClass('selectedIndex');
	
}

function StartAnimation()
{
	var newIndex = 1;
	if(currentIndex >= Count)
		newIndex = 1;
	else
		newIndex = currentIndex + 1;
	
	MoveSlide(newIndex);
}