//variabili globali
	var thumbWidth = 92;
	var panel_width = 960;
	var timer;
	var isIE = /*@cc_on!@*/false;
	var IEoffset = 120;
        var timeout = 6000;
	
		$(document).ready(function() {
			// Save  the jQuery objects for later use.
			var outer	= $("#preview_outer");
			var arrow	= $("#arrow");
var thumbs
			var thumbs	= $("#thumbs span");
			var preview_pos;
			var preview_els	= $("#preview_inner div.generic");
			var image_width	= preview_els.eq(0).width(); // ricava la larghezza dell'immagine
			var numberOfItems = thumbs.length;

			outer.animate( {'scrollLeft' : 0}, 0 );
			arrow.css( {'left' : 0 } ).show();
			
			//inizializzo gli eventi mouseover e mouseout per tutte le thumbnails
			for (i=0;i<thumbs.length;i++) { 
				thumbs.get(i).onmouseover= function()  { this.className = this.className + "_active";}
				thumbs.get(i).onmouseout= function(){ this.className = this.className.replace("_active",""); }
			}				

			// Set initial width
			$("#preview_inner").css('width', preview_els.length * image_width);
			
			// Gestione dell'evento onclick
			thumbs.click(function() {
				//blocco lo showcase
				clearTimeout(timer);  
				// Get position of current image
				preview_pos = preview_els.eq( thumbs.index( this) ).position();
				var index = thumbs.index(this);
				setCssClasses(index,thumbs); 
				arrow.show();
				// Anima il banner e la freccia
				outer.stop().animate( {'scrollLeft' : preview_pos.left},	900 );
				arrow.stop().animate( {'left' : $(this).position().left },	900 );
				
			});
			
			var firstThumbLeftPosition = thumbs.get(1).offsetLeft; //posizione della prima thumbnail
			if (isIE) firstThumbLeftPosition = thumbs.get(1).offsetLeft + IEoffset; //hack per ie
			
			//faccio partire lo showcase
			timer = setTimeout("nextProject("+image_width+","+firstThumbLeftPosition+","+numberOfItems+",1,"+timeout+")",timeout);	
		});