$(document).ready(function() {
//Show the controlli and activate its first link
$(".controlli").show();
$(".controlli a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".immagini").width();
var imageSum = $(".img_det img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".img_det").css({'width' : imageReelWidth});
//controlli  and Slider Function
rotate = function(){
   var triggerID = $active.attr("rel") - 1; //Get number of times to slide
   var img_detPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

   $(".controlli a").removeClass('active'); //Remove all active class
   $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

   //Slider Animation
   $(".img_det").animate({
       left: -img_detPosition
   }, 400 );

};

//Rotation  and Timing Event
rotateSwitch = function(){
   play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
       $active = $('.controlli a.active').next(); //Move to the next controlli
       if ( $active.length === 0) { //If controlli reaches the end...
           $active = $('.controlli a:first'); //go back to first
       }
       rotate(); //Trigger the controlli and slider function
   }, 4000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch
//On Hover
$(".img_det a").hover(function() {
   clearInterval(play); //Stop the rotation
}, function() {
   rotateSwitch(); //Resume rotation timer
});        

//On Click
$(".controlli a").click(function() {
   $active = $(this); //Activate the clicked controlli
   //Reset Timer
   clearInterval(play); //Stop the rotation
   rotate(); //Trigger rotation immediately
   rotateSwitch(); // Resume rotation timer
   return false; //Prevent browser jump to link anchor
});
});