// JavaScript Document
$(function()
{
  // One instance that's reused to show info for the current person
  var container = $('#containerMarchi');
  var closeImg = $('<div class="CloseImg"></div>');
  
  $('body').append(closeImg);
  
 //vars  
 var conveyor = $(".content-conveyor", $("#sliderContent")),  
 item = $(".item", $("#sliderContent"));  
	   
 //set length of conveyor  
 conveyor.css("width", item.length * parseInt(item.css("width")));  
			   
 //config  
 var sliderOpts = {  
   max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),  
   slide: function(e, ui) {   
	 conveyor.css("left", "-" + ui.value + "px");  
   }  
 };  

 //create slider  
 $("#slider").slider(sliderOpts); 

  $('.PopupTrigger').click(function (e)
  {
      e.preventDefault();
	  
	   var pos = $(this).offset();   
       container.css({  
           left: pos.left - 139 + 'px',  
           top: pos.top - 20 + 'px'  
       }); 
	   closeImg.css({  
           left: pos.left + 705 + 'px',  
           top: pos.top - 30 + 'px'  
       }); 

      container.css('display', 'block');
	  closeImg.css('display', 'block');
  });
  
  closeImg.click(function ()
  {
	  container.css('display', 'none'); 
	  closeImg.css('display', 'none');
  });
});