//Current index of Image

var currentIndex = 1;

var playAnimation = 0;

var Count = 0;		//to count number of images



$(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);

	

	//set Timeout function on Action Li item

	$('#action').toggle(

		function(){

			$(this).removeClass('actionstart').addClass('actionstop').text('Stop');

			playAnimation = setInterval('StartAnimation();', 4000);

			

		},

		function(){

			$(this).removeClass('actionstop').addClass('actionstart').text('Play');

			clearInterval(playAnimation);

		});

});



function MoveSlide(index)

{

	var lastIndex = currentIndex;

	currentIndex = index;

	ShowImage(lastIndex);

}



function ShowImage(lastIndex)

{

	$('#SlidesCanvas li img').eq(lastIndex-1).fadeOut(350, function(){

		$('#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);

}