$slideshow = {
    tabs: false,
    timeout: 5000,      // time before next slide appears (in ms)
    slideSpeed: 1800,   // time it takes to slide in each slide (in ms)
    tabSpeed: 300,      // time it takes to slide in each slide (in ms) when clicking through tabs
    fx: 'scrollLeft',   // the slide effect to use
    
    init: function() {
        // set the context to help speed up selectors/improve performance
        this.context = $('#slideshow');
        
        // set tabs to current hard coded navigation items
        this.tabs = $('#slideUl img', this.context);
				//alert($slideshow.tabs[0].src);
        
        // remove hard coded navigation items from DOM 
        // because they aren't hooked up to jQuery cycle
        //this.tabs.remove();
        
        // prepare slideshow and jQuery cycle tabs
        this.prepareSlideshow();
		
		
		var numTb = $('#navigation li', this.context).length;// calcola quanti elementi <li> ci sono nel <ul> per la navigazione (#navigation)
		//alert(numTb);
		var i = 0;
		//var tbW = 150;//width in px della anteprima
		//var tbMl = 10;//margin-left in px della anteprima
		var tbW = $('li.ssThumb').outerWidth();//width in px della anteprima
		var tbMl = parseFloat($('li.ssThumb').css('margin-right')) + parseFloat($('li.ssThumb').css('margin-left'));//margin(left+right) in px della anteprima
		var tbGap = tbW + tbMl;
		//alert(tbW+tbMl);//calcola quanti gruppi da cinque di anteprime si avranno in base al numero totale
		$('#navigation').width(numTb * tbGap); //assegno al div navigation la lunghezza in basse al numero di preview
		var cyclesTb = parseInt(numTb/5); 
		if(numTb/5 > parseInt(numTb/5)){
			cyclesTb = parseInt(numTb/5);			
			}
		else if(numTb/5 == parseInt(numTb/5)){
			cyclesTb = parseInt(numTb/5)-1;			
			}
		
		var remTb = numTb - (5*cyclesTb);//quanti ne avanzano dalla divisione per 5
		//alert(remTb);
		
		var mLeft = tbGap * 5;
		//alert(mLeft);
		// funzione che nasconde o mostra le freccette per la barra di navigazione
		hideShow();
		
		
		function hideShow(){
			
		
		if(i==0){
			$("#leftArrow").addClass("hidden");
			$("#rightArrow").removeClass("hidden");
			};
		
		if(i!=0&&i!=cyclesTb){
			$("#leftArrow").removeClass("hidden");
			$("#rightArrow").removeClass("hidden");			
			};
		
		if(i==cyclesTb){
			$("#rightArrow").addClass("hidden");
			$("#leftArrow").removeClass("hidden");
			};
		
			}
			
		
		// funzione che porta avanti o indietro la barra di navigazione
		$("#leftArrow").click(function(){
		  if (i==cyclesTb){ mLeft = tbGap * remTb}
		  else{ mLeft = tbGap * 5 }
		  i--;		
			hideShow();					   
		  $("#navigation").animate({"margin-left": "+="+ mLeft +"px"}, "slow");
		  return false;
		});
		
		$("#rightArrow").click(function(){
		  i++;
		  if (i==cyclesTb){ mLeft = tbGap * remTb}
		  else{ mLeft = tbGap * 5 }	
			hideShow();							   
		  $("#navigation").animate({"margin-left": "-="+ mLeft +"px"}, "slow");
		  return false;
		});
		
		
    },
    
    prepareSlideshow: function() {
        // initialise the jquery cycle plugin -
        // for information on the options set below go to: 
        // http://malsup.com/jquery/cycle/options.html
        $('div.slides > ul', $slideshow.context).cycle({
            fx: $slideshow.fx,
            timeout: $slideshow.timeout,
            speed: $slideshow.slideSpeed,
            fastOnEvent: $slideshow.tabSpeed,
			pager: 'ul#navigation',
            pauseOnPagerHover: true,
            pause: true,
			
			pagerAnchorBuilder: function(idx, slide) {
				//calcolo le dimensioni dell'immagine in modo che possa essere sempre centrata nel suo <li>
				imgW = $($slideshow.tabs[idx]).width();
				imgH = $($slideshow.tabs[idx]).height();
				newW = Math.floor((imgW*100)/imgH);
				newMargin = -(newW-150)/2;
				//alert(newW);
				//imgSrc = $slideshow.tabs[idx].src;
				return '<li class="ssThumb"><a href="#"><img style="margin-left:'+ newMargin +'px" height="100" src=' + $($slideshow.tabs[idx]).attr('src') + ' /></a></li>';
				//alert($($slideshow.tabs[idx]).attr('src'));
			}
			
        }); 
    }          
};


$(function() {
    // add a 'js' class to the body
    $('body').addClass('js');
    // initialise the slideshow when the DOM is ready
    $slideshow.init();
});