﻿$(document).ready(function() {
	//Inizializzazione
	//Setto la non selezione sugli altri tab
	$(".TabMenuItemTxt").addClass("nonSelezionato");
	//$(".contenitore .TabMenu .spanTab p").addClass("invisibile");
	//Set images to invisible
	$(".TabMenuItemImg").addClass("invisibile");
	//Setto la selezione sul primo tab
	$(".TabMenuItemTxt:first").addClass("selezionato"); $(".TabMenuItem:first").addClass("current");
	//Setto la selezione sul primo tab
	$(".TabMenuItemImg:first").removeClass("invisibile");

	//Rotate Function
	rotate = function(indexSelezionato) {
		$(".Tabs").animate({
			opacity: 0
		}, 0);

		//Find the width of a tab
		var TabWidth = $(".TabContent:first").width();
		if (parseInt($(".TabContent:first").css("margin-left")) > 0)
			TabWidth += parseInt($(".TabContent:first").css("margin-left"));
		if (parseInt($(".TabContent:first").css("margin-right")) > 0)
			TabWidth += parseInt($(".TabContent:first").css("margin-right"));
		//But wait, how far we slide to? Let find out
		var newLeft = -1 * indexSelezionato * TabWidth;
		//Remove all active class
		$(".selezionato").removeClass("selezionato");
		$(".TabMenuItemImg").addClass("invisibile");
		$(".current").removeClass("current"); //rimuovo il tabmenuitem corrente
		//Add active class (the $active is declared in the rotateSwitch function)
		$active.children(0).removeClass("invisibile");
		$active.children(1).addClass("selezionato");
		$active.addClass("current"); //setto il nuovo tabmenuitem corrente
		//Animation
		$(".Tabs").css('left', +newLeft + "px");
		/*$(".Tabs").animate({
		opacity:1
		}, 800);*/
		//in questo modo non va con il typeface
		$('.Tabs').animate({ opacity: 1 }, 800, function() {
			$(this).css('filter', 'none'); //Così viene ripristinato l'anti aliasing a fine animazione
		});
	};

	//Rotation + Timing Event
	rotateSwitch = function() {
		play = setInterval(function() { //Set timer - this will repeat itself every 3 seconds
			$active = $('.current').next();
			var curIndex = $('.TabMenuItem').index($('.current'));
			var indexSelezionato = $('.TabMenuItem').index($('.current')) + 1; //alert('next '+indexSelezionato);
			if ($active.length === 0) { //If paging reaches the end...
				$active = $(".TabMenuItem:first"); //go back to first
				indexSelezionato = 0;
			}
			if (curIndex != indexSelezionato)
				rotate(indexSelezionato); //Trigger the paging and slider function
		}, 3000); //Timer speed in milliseconds (3 seconds)
	};

	rotateSwitch(); //Run function on launch

	//Basic hover action
	$(".TabMenuItemTxt").mouseover(function() {
		$(this).addClass("hovering"); clearInterval(play); //Stop the rotation
	});
	$(".TabMenuItemTxt").mouseout(function() {
		$(this).removeClass("hovering"); rotateSwitch(); //Resume rotation
	});
	$(".didascalia").mouseover(function() {
		clearInterval(play); //Stop the rotation
	});
	$(".didascalia").mouseout(function() {
		rotateSwitch(); //Resume rotation
	});

	//Add click action to tab menu
	$(".TabMenuItem").click(function() {
		clearInterval(play); //Stop the rotation
		$(".Tabs").animate({
			opacity: 0
		}, 0);
		var index = $(".TabMenuItem").index(this);
		//Find the width of a tab
		var TabWidth = $(".TabContent:first").width();
		if (parseInt($(".TabContent:first").css("margin-left")) > 0)
			TabWidth += parseInt($(".TabContent:first").css("margin-left"));
		if (parseInt($(".TabContent:first").css("margin-right")) > 0)
			TabWidth += parseInt($(".TabContent:first").css("margin-right"));
		//But wait, how far we slide to? Let find out
		var newLeft = -1 * index * TabWidth;
		//Remove the exist selector
		$(".selezionato").removeClass("selezionato");
		$(".TabMenuItemImg").addClass("invisibile");
		$(".current").removeClass("current"); //rimuovo il tabmenuitem corrente
		//Add the selector class to the sender
		$(this).children(0).removeClass("invisibile");
		$(this).children(1).addClass("selezionato");
		$(this).addClass("current"); //setto il tabmenuitem corrente
		$(".Tabs").css('left', +newLeft + "px");
		$(".Tabs").animate({
			opacity: 1
		}, 800);
		//alert('fine');
	});
});

