// JavaScript Document
$(document).ready(function() {
//var spacing è la larghezza della foto (nel ns. caso la foto più larga) più la larghezza dei margini
	var spacing = 120;
//questa funzione ritorna un'immagine con classe control, opacità 0.6, nascosta (immagini versodestro versosinistro lente di ingrandimento)
	function createControl(src) {
		return $('<img/>')
		.attr('src', src)
		.attr('border', 0)
		.addClass('control')
		.css('opacity', 0.6)
		.hide();
	}
	
//do le dimensioni e le caratteristiche al div con id contenitore e posiziono tutti gli a che sono eredi della classe covers a 1000 (non si vedono)
	$('#contenitore').css({
		'width': spacing * 4,
		'height': '120px',
		'overflow': 'hidden'
	}).find('.covers a').css({
		'float': 'none',
		'position': 'absolute',
		'left': 1000
	});
/*questa funzione se non viene cliccata la prima e l'ultima immagine mi da le immagini dei primi 5 link 
	se viene cliccato il primo link con animate fa shiftare tutte le immagini a destra ,porta l'ultimo link al primo posto con prependTo
	se viene cliccato il quinto link con animate fa shiftare a sinistra le immagini e il primo link viene portato all'ultimo posto con appendTo*/
	var setUpCovers = function() {
		var $covers = $('#contenitore .covers a');
		$covers.unbind ('click').unbind ("mouseover").unbind ("mouseout").unbind("mouseenter").unbind("mouseleave");
	
		$('#img_s').unbind('click');
		$('#img_d').unbind('click');
		
	
// Left image; scroll right (to view images on left) when clicked.
		$covers.eq(0).css('left', 0);
		/*.click(function(event) {
			$covers.eq(0).animate({'left': spacing}, 'fast');
			$covers.eq(1).animate({'left': spacing * 2}, 'fast');
			$covers.eq(2).animate({'left': spacing * 3}, 'fast');
			//$covers.eq(3).animate({'left': spacing * 4}, 'fast');
			//$covers.eq(4).animate({'left': spacing * 5}, 'fast');
			//$covers.eq(5).animate({'left': spacing * 6}, 'fast');
			
			$covers.eq($covers.length - 1).css('left', -spacing).animate({'left': 0}, 'fast', function() {
				$(this).prependTo('#contenitore .covers');
				setUpCovers();
			});
			event.preventDefault();//stoppa il browser dal cambiare pagina come dovrebbe fare dato che il link è stato cliccato
		});*/
// Right image; scroll left (to view images on right) when clicked.
		$covers.eq(3).css('left', spacing * 3);
		/*.click(function(event){
			$covers.eq(0).animate({'left': -spacing}, 'fast', function() {
				$(this).appendTo('#contenitore .covers');
				setUpCovers();
			});
			$covers.eq(1).animate({'left': 0}, 'fast');
			$covers.eq(2).animate({'left': spacing}, 'fast');
			$covers.eq(3).animate({'left': spacing * 2}, 'fast');
			//$covers.eq(4).animate({'left': spacing * 3}, 'fast');
			//$covers.eq(5).animate({'left': spacing * 4}, 'fast');
			//$covers.eq(6).css('left', spacing * 6).animate({'left': spacing * 5}, 'fast');
			event.preventDefault();
		});*/

// Center image.

	$('#img_s').click(function(event){
			var $covers = $('#contenitore .covers a');				   
							   
			$covers.eq(0).animate({'left': spacing}, 'fast');
			$covers.eq(1).animate({'left': spacing * 2}, 'fast');
			$covers.eq(2).animate({'left': spacing * 3}, 'fast');			
			$covers.eq(3).animate({'left': spacing * 4}, 'fast');
			//$covers.eq(4).animate({'left': spacing * 5}, 'fast');
			//$covers.eq(5).animate({'left': spacing * 6}, 'fast');
			//$covers.eq(6).animate({'left': spacing * 7}, 'fast');
			//$covers.eq(7).animate({'left': spacing * 8}, 'fast');
			//$covers.eq(8).animate({'left': spacing * 9}, 'fast');
			//$covers.eq(9).animate({'left': spacing * 10}, 'fast');
			//$covers.eq(10).animate({'left': spacing * 11}, 'fast');
			//$covers.eq(11).animate({'left': spacing * 12}, 'fast');
			//$covers.eq(12).animate({'left': spacing * 13}, 'fast');
			
			$covers.eq($covers.length - 1).css('left', -spacing).animate({'left': 0}, 'fast', function() {
				$(this).prependTo('#contenitore .covers');
				setUpCovers();
			});
			event.preventDefault();
	});
	
	$('#img_d').click(function(event){
		var $covers = $('#contenitore .covers a');	
		
		$covers.eq(0).animate({'left': -spacing}, 'fast', function() {
				$(this).appendTo('#contenitore .covers');
				setUpCovers();
			});
			$covers.eq(1).animate({'left': 0}, 'fast');
			$covers.eq(2).animate({'left': spacing}, 'fast');
			$covers.eq(3).animate({'left': spacing * 2}, 'fast');
			//$covers.eq(4).animate({'left': spacing * 3}, 'fast');
			//$covers.eq(5).animate({'left': spacing * 4}, 'fast');
			//$covers.eq(6).animate({'left': spacing * 5}, 'fast');
			//$covers.eq(7).animate({'left': spacing * 6}, 'fast');
			//$covers.eq(8).animate({'left': spacing * 7}, 'fast');
			//$covers.eq(9).animate({'left': spacing * 8}, 'fast');
			//$covers.eq(10).animate({'left': spacing * 9}, 'fast');
			//$covers.eq(11).animate({'left': spacing * 10}, 'fast');
			//$covers.eq(12).animate({'left': spacing * 11}, 'fast');									
			event.preventDefault();
	});

	//$covers.eq(0).css('left', 0).hover(function() {
						//$enlargeRollover.appendTo(this).show();
	//				}, function() {
						//$enlargeRollover.hide();
	//				});

	$covers.eq(1).css('left', spacing).hover(function() {
						//$enlargeRollover.appendTo(this).show();
					}, function() {
						//$enlargeRollover.hide();
					});
	$covers.eq(2).css('left', spacing * 2).hover(function() {
						//$enlargeRollover.appendTo(this).show();
					}, function() {
						//$enlargeRollover.hide();
					});
	//$covers.eq(3).css('left', spacing * 3).hover(function() {
						//$enlargeRollover.appendTo(this).show();
	//				}, function() {
						//$enlargeRollover.hide();
	//				});
	
	//$covers.eq(4).css('left', spacing * 4);
	//$covers.eq(5).css('left', spacing * 5);
	//$covers.eq(6).css('left', spacing * 6);
	//$covers.eq(7).css('left', spacing * 7);
	//$covers.eq(8).css('left', spacing * 8);
	//$covers.eq(9).css('left', spacing * 9);
	//$covers.eq(10).css('left', spacing * 10);
	//$covers.eq(11).css('left', spacing * 11);
	//$covers.eq(12).css('left', spacing * 12);
	
	/*$covers.eq(4).css('left', spacing * 4).hover(function() {
						$enlargeRollover.appendTo(this).show();
					}, function() {
						$enlargeRollover.hide();
					});*/
	};
setUpCovers();
});