$(document).ready(function() {
	
	// Service Carousel
	//-------------------------------------------------------------

	var autoplayTimer = 8000; //In millisecondi
	var animationSpeed = 400; //In millisecondi
	var leftShift = 431; //Larghezza del visual
	
	//Posiziono i visual uno di fianco all'altro e creo il menu di navigazione
	var carouselNavButtons = '<ul>';
	var shift = 0;
	$('#carousel-service ul li').each(function(index) {
		$(this).css('left', shift);
		shift += leftShift;
		carouselNavButtons += '<li><a href="javascript:void(0)">'+(index+1)+'</a></li>\n';
	});
	carouselNavButtons += '</ul>'
	
	$('#carousel-service-nav').prepend(carouselNavButtons);
	$('#carousel-service-nav ul li:first').addClass('selected');
	
	//Click sul menu di navigazione
	var clickVisual = 1;
	$('#carousel-service-nav li').click(function() {
		$this = $(this);
		$('#carousel-service-nav li').removeClass('selected');
		$(this).addClass('selected');
		$('#carousel-service ul').animate({ left : (-$this.index()*leftShift)+'px' }, animationSpeed);
		
		// Valorizzo la variabile clickVisual per il timer
		clickVisual = $this.index();
		if (clickVisual == $('#carousel-service ul li').length - 1) {
			clickVisual = 0;
		} else {
			clickVisual++;
		}
	});
	
	var intervalID = setInterval(timer, autoplayTimer);

	function timer() {
		//console.log(clickVisual);
		$('#carousel-service-nav li').eq(clickVisual).click();
	}
	
	// Fermo l'autoplay all'hover sul visual
	$('#carousel-service').hover(function() {
		//Stop the autoplay
		clearInterval(intervalID);
	}, function() {
		//Start the autoplay
		intervalID = setInterval(timer, autoplayTimer);
	});
	
	// Fermo l'autoplay all'hover sul menu
	$('#carousel-service-nav').hover(function() {
		//Stop the autoplay
		clearInterval(intervalID);
	}, function() {
		//Start the autoplay
		intervalID = setInterval(timer, autoplayTimer);
	});

});