$(document).ready(function(){
  /*var index = $('div#slidesContainer > ul > li.active').parent().index(this);*/
  /*var parent = $('div#slidesContainer ul li.active').parent();
	var index = $('div#slidesContainer ul').index(parent);*/
  
  var clicked = false;
  
  $('.hover').css('opacity',0.99)		   
	$('.listCont').hover(function(){  
		if (clicked == false) {
		 	$(".hover", this).stop().animate({top:'0px'},{queue:false,duration:200});
		}
	 }, function() {  
	 	if (clicked == false) {
		 	$(".hover", this).stop().animate({top:'-272px'},{queue:false,duration:200});
		}
	});   
  
  
  
  var currentPosition = 0;
  var slideWidth = 990;
  var slides = $('.slide');
 	var numberOfSlides = slides.length;
 	var numberOfItems= $('#slidesContainer li').length;
	
	
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css({
		'width': slideWidth * numberOfSlides,
		'marginLeft' : slideWidth*(-currentPosition),
		'position' :'relative'
	});
  
	
  // Insert controls in the DOM
  //$('#slideshow')
  //  .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
  //  .append('<span class="control" id="rightControl">Clicking moves right</span>');

  

  
 
  $('.control').bind('click', function(){
	currentPosition = ($(this).attr('id')=='leftControl') ? currentPosition+1 : currentPosition-1;
	if ($(this).attr('id')=='leftControl' && currentPosition >0)
		currentPosition = 0;
	if ($(this).attr('id')=='rightControl' && currentPosition <= -(numberOfItems-3))
		currentPosition = -(numberOfItems-3);
	
		manageControls(currentPosition);
		
		if($(this).attr('id')=='leftControl' && currentPosition<=0 || $(this).attr('id')=='rightControl' && currentPosition >= -(numberOfItems-3)){
			$('#slideInner').animate({
			  'marginLeft' : 330*currentPosition
			});
		}	
  });
  
  


  	
	
	
	/* evento CLICK su bottone per aprire */
	var cloned; 
 	$('.hover').bind('click', function(event){
		clicked = tru; // variabile che interrompe il rollover
		event.preventDefault();	
		
		// sposto l'elemento selezionato al primo posto

		
		// duplico l'elemento selezionato, lo posiziono sopra in assoluto, lo allargo e cambio lo sfondo
		cloned = parent.clone();
		cloned.css({
      		'position' : 'absolute',
      		'top' : 0,
			'left' : -330*currentPosition,
			'z-index' : 10000,
			'background' : 'url(images/backLong.png) left  repeat-x'
    	});
		cloned.appendTo('#slideInner');
		cloned.find('.pictures').css({
			'width' : 900
    	});
		
		// faccio tornare visibile l'immagine di anteprima
		var hover = cloned.find('.hover');
		hover.animate({
      		'top' : -272
    	});
		cloned.animate({								   
      		width : 990
    	});
		cloned.animate({
    		width : 990
  			}, 300, function() {
    			cloned.find('.close').fadeIn(200);
				cloned.find('.data').fadeIn(200);
  		});	
		
		parent.find('.hover').animate({
      		'top' : -272
    	});;
		
		// chiudo i controlli
		$('#rightControl').animate(	
      		{right : 70},
			{duration:100}, function () {
				$(this).hide();
			});
		$('#leftControl').animate(
      		{left : 70},
			{duration:100}, function () {
				$(this).hide();
			});
    	
		
		$('.close').bind('click', function(event){	
		 	event.preventDefault();	
			clicked = true;
			$(this).fadeOut(200);
			cloned.find('.data').fadeOut(200, function() {
				cloned.animate({
					width : 330
					}, 300, function() {
						cloned.fadeOut(200);
						var index = $("#slidesContainer li").index(parent);
						
						if (index == numberOfItems - 3) {
							$('#leftControl').animate(							   
								{left : 0},
								{duration:100}
							);							
						} else if (index == numberOfItems - 2) {
							currentPosition = index-1;
							$('#slideInner').animate({
							  'marginLeft' : -330*currentPosition
							}, function () {
								currentPosition = -currentPosition;
								$('#leftControl').animate(							   
									{left : 0},
									{duration:100}
								);
							});			
						} else if (index == numberOfItems - 1) {
							currentPosition = index-2;
							$('#slideInner').animate({
							  'marginLeft' : -330*currentPosition
							}, function () {
								currentPosition = -currentPosition;
								$('#leftControl').animate(
									{left : 0},
									{duration:100}
								);
							});			
						} else {
							$('#rightControl').animate(	
								{right : 0},
								{duration:100}
							);
							$('#leftControl').animate(
								{left : 0},
								{duration:100}
							);
						}
					
				});									   
			});
			
			
		});
	});
	
	
	
  
});