jQuery(function($){

  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    activeTitle: "Photo en cours de visualisation",
    loaderTitle: "Chargement en cours",
    loaderImage: "./images/design/progress.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('div')).attr("id","bigpic")
		.append( $(document.createElement("p")).attr("id",settings.imgViewerId)
			.append($(document.createElement("img")).attr( {
	          alt: firstThumbLink.find('img').attr("alt"),
	          src: firstThumbLink.attr("href")
	        })).append( $(document.createElement("span")).text( firstThumbLink.find('span').text() ) )
	    ).append(loader)
	);

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

  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this);
      if (bigPic.attr("src") == $this.attr("href")) return;
      
      highlight($this);
      imgViewer.fadeOut(300, function() {
	      imgViewer.children("img").load( function() {
	          imgViewer.find('span').text($this.find('span').text());
	          imgViewer.fadeIn(300);
	      } ).attr( { src: $this.attr("href"), alt: $this.find('img').attr('alt') } );
      } );
    });

});

$(function() { 
	$("#thumbs span").hide();
});