var currentBox;
var totBox;
var currentSlide = 1;
var nextSlide = 1;
var active;
var totBox; 
var htmlPallini = "";
var intervalID;

function fadeImage(slide)  {
		
		currentSlide = slide +1;
				
		//spengo, sposto e nascondo!
		jQuery('#Template_SlideHome .BoxSlide, #Template_SlideHome .BoxSlide > *').css({'opacity': '0.0' , 'display':'none', 'z-index': '0' });
		
		//faccio apparire solo quella attuale
		jQuery('#Template_SlideHome .BoxSlide').eq(slide).css({'display':'block','z-index': '10'});	
		jQuery('#Template_SlideHome .BoxSlide:eq('+ slide +') > * ').css({'display':'block','z-index': '10'});	
		
		jQuery('#Template_SlideHome .BoxSlide:eq('+ slide +') > .BoxSlideText').animate({opacity: 0.7},500, function() {});0
		jQuery('#Template_SlideHome .BoxSlide').eq(slide).animate({opacity: 1.0}, 500, function() { });0

	
		//ricreo la paginazione
		htmlPallini = "";
		
		for (i=0; i< totBox; i++) {
			if ( i == slide) { 
				htmlPallini += "<a href='#' class='activeSlide' >&nbsp;</a>";
			} else {
				htmlPallini += "<a href='#' >&nbsp;</a>";
			}
		}
		
		 jQuery('.Box_SlideStatus').empty();
	     jQuery('.Box_SlideStatus').append( "<div style='margin-left: 10px'>" + (slide + 1) + '/' +  totBox + "<br/></div>"); 
		 jQuery('.Box_SlideStatus').append( htmlPallini );
		
		
		// AGGIORNO CURRENTSLIDE
		if ( slide < (totBox -1)) {
			nextSlide = slide +1;
		}else{
			nextSlide = 0;
		}
		
		jQuery('.Box_SlideStatus a').click(function () {
			var index = jQuery('#Template_SlideHome .BoxSlide:eq('+ slide +') .Box_SlideStatus a').index(this);
			fadeImage(index); 
			clearInterval(intervalID);
			intervalID = setInterval(  function() { fadeImage(nextSlide); }, 8000);
	    });
		
	}


jQuery(document).ready(function() {
						   

	//nascondo tutti i div dei box tranne il primo ***tutte le dichiarazioni doppie x fixare bug su ie!
	jQuery('#Template_SlideHome .BoxSlide').css({'opacity': '0.0' , 'display':'none', 'z-index': '0' });
	jQuery('#Template_SlideHome .BoxSlide, #Template_SlideHome .BoxSlide > * ').css({'opacity': '0.0' , 'display':'none', 'z-index': '0' });
	
	
	// visualizzo solo la prima
	jQuery('#Template_SlideHome .BoxSlide:first-child, #Template_SlideHome .BoxSlide:first-child > *').css({'opacity': '1.0' , 'display':'block', 'z-index': '10' });
	jQuery('#Template_SlideHome .BoxSlide:first-child > .BoxSlideText').css({'opacity': '0.7' , 'display':'block', 'z-index': '10' });
	
	// conto quanti sono i box
	totBox =  jQuery('#Template_SlideHome .BoxSlide').length;
		
	// lancio la funzione in setInterval
	intervalID = setInterval(  function() { fadeImage(nextSlide); }, 8000);
	
	//Creo l'html con i pallini
	for (i=0; i< totBox; i++) {
		htmlPallini += "<a href='#' >&nbsp;</a>";
	}

	jQuery('.Box_SlideStatus').append(  "<div>"  + (currentSlide ) + '/' + totBox + "<br/></div>");	
	jQuery('.Box_SlideStatus').append(htmlPallini);
	jQuery('.Box_SlideStatus a').eq(0).addClass('activeSlide');


	// Imposto la funzione che viene chiamata al click	
	jQuery('.Box_SlideStatus a').click(function () {				
			var index = jQuery('.BoxSlide:first-child .Box_SlideStatus a').index(this);
			fadeImage(index); 
	    });
	
});