jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    textDescId: "desc",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "./images/design/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("p")).append($(document.createElement("img")).attr({
        alt: settings.loaderTitle,
        title: settings.loaderTitle,
        src: settings.loaderImage
      }).addClass('loader'));

  highlight(firstThumbLink);

  $("#"+settings.thumbListId).after(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("img")).attr({
          alt: "",
          src: firstThumbLink.attr("href")
        })
/*
	$(document.createElement("p"))
      .attr("id",settings.textDescId)
      .append(
        $(document.createElement("p")).attr({
          alt: "p",
          src: firstThumbLink.attr("href")
        })
*/
      )
  );

  var imgViewer = $("#"+settings.imgViewerId),
      bigPic = imgViewer.children("img");

  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
          target = $this.attr("href");
      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function(){
          imgViewer.html($(this).fadeIn(500));
        })
        .attr("src",target);
    });

});