jQuery(function($){ 
 
  var settings = { 
    thumbListId: "thumbs", 
    imgViewerId: "viewer", 
    activeClass: "active", 
    activeTitle: "Photo en cours de visualisation", 
    loaderTitle: "Chargement en cours", 
    loaderImage: "../images/ajax-loader.gif" 
  }; 
 
  var thumbLinks = $("#"+settings.thumbListId).find("a"), 
    firstThumbLink = thumbLinks.eq(0), 
    highlight = function(elt){ 
      thumbLinks.removeClass(settings.activeClass).removeAttr("title"); 
      elt.addClass(settings.activeClass).attr("title",settings.activeTitle); 
    }, 
    loader = $(document.createElement("img")).attr({ 
      alt: settings.loaderTitle, 
      title: settings.loaderTitle, 
      src: settings.loaderImage 
    }); 
 
  highlight(thumbLinks.eq(0)); 
 
  $("#"+settings.thumbListId).after( 
    $(document.createElement("p")) 
      .attr("id",settings.imgViewerId) 
      .append( 
       $(document.createElement("img")).attr({ 
          alt: firstThumbLink.children("img").attr("alt") , 
          src: firstThumbLink.attr("href") 
        }) 
        
      )
  
       
  ); 
  /*
  $("#"+settings.thumbListId).after(      
       $("#"+settings.imgViewerId).append(  
        $(document.createElement("span")).text("test")
       )
  ); 
   */
 
  var imgViewer = $("#"+settings.imgViewerId), 
    bigPic = imgViewer.children("img");
   /*  
  bigPic.after(  
        $(document.createElement("span")).text(bigPic.attr("alt"))
     );
 */
 
 
  thumbLinks 
    .click(function(e){ 
      e.preventDefault(); 
      var $this = $(this), 
        target = $this.attr("href"); 
        altattr = $this.children("img").attr("alt"); 
        
 
         $("#viewer").fadeIn("slow");
         $("#viewer").css("cursor","pointer");
        
          
         
         
         
      if (bigPic.attr("src") == target) return; 
      highlight($this); 
      imgViewer.html(loader); 
      bigPic 
        .load(function(){ 
         
         
          imgViewer.html($(this).fadeIn("slow")); 
          
        //  altattr = $(this).attr("alt"); 
       if (altattr != ""){ 
           $(this).after( 
           	
              $(document.createElement("span")).text(" " + altattr + "")
              
              
           );
          }
           /*
           $(this).after(  
              $(document.createElement("span")).text("fermer");
           );*/
        }) 
        .attr("src",target); 
    }); 
     
     $("#viewer").hide(0);
     
     
  $("#viewer").click(function(){ 
      
        $(this).fadeOut("slow" );
    
  });
  
  
  
  $("thumbs2").click(function(){
  	
  	
  });
  
  
  
  $("#op1").click(function(){
  	
  	$("#thumbs2").fadeOut("slow");
  	$("#img1").fadeIn("slow",function () {
  		  $(this).append( "<span>Retour à la liste</span>"  );
  		}); 
  });
  $("#img1").click(function(){
  	
  	$("#thumbs2").fadeIn("slow" ); 
  	$("#img1").fadeOut("slow");
  	
  });
  
   
  
  $("#op2").click(function(){
  	
  	$("#thumbs2").fadeOut("slow");
  	$("#img2").fadeIn("slow",function () {
  		  $(this).append( "<span>Retour à la liste</span>"  );
  		}); 
  });
  $("#img2").click(function(){
  	
  	$("#thumbs2").fadeIn("slow"); 
  	$("#img2").fadeOut("slow");
  	
  });
  
   
  
  $("#op3").click(function(){
  	
  	$("#thumbs2").fadeOut("slow");
  	$("#img3").fadeIn("slow",function () {
  		  $(this).append( "<span>Retour à la liste</span>"  );
  		}); 
  });
  $("#img3").click(function(){
  	
  	$("#thumbs2").fadeIn("slow"); 
  	$("#img3").fadeOut("slow");
  	
  });
  
   
  
  $("#op4").click(function(){
  	
  	$("#thumbs2").fadeOut("slow");
  	$("#img4").fadeIn("slow",function () {
  		  $(this).append( "<span>Retour à la liste</span>"  );
  		}); 
  });
  $("#img4").click(function(){
  	
  	$("#thumbs2").fadeIn("slow"); 
  	$("#img4").fadeOut("slow");
  	
  });
  
   
  
  $("#op5").click(function(){
  	
  	$("#thumbs2").fadeOut("slow");
  	$("#img5").fadeIn("slow",function () {
  		  $(this).append( "<span>Retour à la liste</span>"  );
  		}); 
  });
  $("#img5").click(function(){
  	
  	$("#thumbs2").fadeIn("slow"); 
  	$("#img5").fadeOut("slow");
  	
  });
  
   
  
  $("#op6").click(function(){
  	
  	$("#thumbs2").fadeOut("slow");
  	$("#img6").fadeIn("slow"); 
  });
  $("#img6").click(function(){
  	
  	$("#thumbs2").fadeIn("slow"); 
  	$("#img6").fadeOut("slow");
  	
  });
  
   
  
  
  
  
});