$(document).ready(function() {
	var thumbsopened = false; //la agallery inizialmente è chiusa
	var thumbs_visible = 6; //numero di thumbs visibili nel viewport
	var thumbs_number = $('#thumbs-list ul li').length; //numero di thumbs disponibili nella pagina
	var thumb_list_position = 0; //posizione iniziale di #thumbs-lit
	var steps = Math.floor(thumbs_number/thumbs_visible); //numero massimo di 'slittamenti' delle thumbs
	var thumbs_to_add = thumbs_visible - (thumbs_number % thumbs_visible); //numero di thumbs da aggiungere per motivi grafici
	var total_thumbs = thumbs_number + thumbs_to_add;
	var thumbs_width = 65; //larghezza delle thumbs (compresi eventuali padding e margin)
	var thumbs_list_width = thumbs_width * total_thumbs;
	var viewport_width = 386;
	
	//inserisco il numero di li mancanti per creare i quadratini azzurri
	for(i = 0; i < thumbs_to_add; i ++){
		$('#thumbs-list ul li:last').after('<li>&nbsp;</li>');
	}
	
	
	//funzione che gestisce la visualizzazione delle frecce
	function display_arrows(){
		if(thumb_list_position <= 0){
			$('#thumbs-arrow-left').removeClass('previous');
		}else{
			$('#thumbs-arrow-left').addClass('previous');	
		}
		if(thumb_list_position >= steps){
			$('#thumbs-arrow-right').removeClass('next');
		}else{
			$('#thumbs-arrow-right').addClass('next');	
		}
	}
	
	display_arrows();
	
	//setto la larghezza di #thumbs-list in modo che le mianiature restino sulla stessa riga
	$('#thumbs-list').css('width', thumbs_list_width + 'px');
	
	
	$('#tab').click(function(){
		if(! thumbsopened){
			//modifico l'icona del tab
			$(this).addClass('close');
			$(this).removeClass('open');
			//mostro le miniature
			$('#thumbs').animate({top:'300px'});
			//setto il flag su true
			thumbsopened = true;
		}else{
			//modifico l'icona del tab
			$(this).removeClass('close');
			$(this).addClass('open');
			//mostro le miniature
			$('#thumbs').animate({top:'370px'});		
			//chiudo lo spazio con l'immagine
			$('.class-gallery #main-image').hide(); 
			//setto il flag su false
			thumbsopened = false;
		}
	});
	//azioni della singola thumb
	$('#thumbs-list li a').click(function(){
		//modifico il backgrund del div in mod da mostare l'immagine
		$('.class-gallery #main-image .design').css('background-image', 'url(' + $(this).attr('href') + ')');
		//rendo visibile lo spazio per l'immagine
		$('.class-gallery #main-image').fadeIn();
		//disabilito il link
		return false;
	});
	//freccia dx
	$('#thumbs-arrow-right').click(function(){
		if(thumb_list_position < steps){
			//incremento la posizione di #thumb-list di 1
			thumb_list_position++;
			
			//muovo i thumbs
			target_left_position = -(viewport_width * thumb_list_position);
			$('#thumbs-list').animate({left:target_left_position+"px"},
																1000
																);
		}
		display_arrows();
	});
	//freccia sx
	$('#thumbs-arrow-left').click(function(){
		if(thumb_list_position > 0){
			//decremento la posizione di #thumb-list
			thumb_list_position--;
			
			//muovo i thumbs
			target_left_position = -(viewport_width * thumb_list_position);
			$('#thumbs-list').animate({left:target_left_position+"px"},
																1000
																);
		}
		display_arrows();	
	});
	
});