$(function(){

  var settings = {
    workSectionId: "works",
    thumbListElement: "ul",
    imgViewerElement: "p",
    fadeInDuration: 300,
    fadeOutDuration: 500,
    activeClass: "active",
    workImgPath: "images/works/",
    tooltipsFolder: "tooltips/",
    tooltipsImgExt: ".png",
    loaderTitle: "Chargement en cours",
    loaderImage: "loader.gif",
    learnMoreAlt: "Description du projet",
    learnMoreImage: "learnmore.png"
  };

  var workSection = $(document.getElementById(settings.workSectionId)),
      thumbLinks = workSection.find(settings.thumbListElement + " a"),
      firstThumbLink = thumbLinks.eq(0),
      highlight = function(elt){
        thumbLinks.removeClass();
        elt.addClass(settings.activeClass);
        // Awful browser sniffing hack for stupid FF3.0 CSS bug (ok on FF3.5)
        if ($.browser.mozilla && $.browser.version.substr(0,5) == "1.9.0")
          elt.addClass("stupidFF30");
      },
      loader = $(document.createElement("img")).attr({
        alt: settings.loaderTitle,
        title: settings.loaderTitle,
        src: settings.workImgPath + settings.loaderImage
      }),
      learnMoreLink = $(document.createElement("a"))
        .attr("href","#")
        .append(
          $(document.createElement("img")).attr({
            alt: settings.learnMoreAlt,
            src: settings.workImgPath + settings.learnMoreImage
          })
        ),
      workDescriptionElt = $(document.createElement("em")),
      setWorkDescription = function(e){
        e.preventDefault();
        var $this = $(this)
            $thisNext = $this.next();
        if ($thisNext.is("em"))
          $thisNext.remove();
        else
          $this.after(
            workDescriptionElt
              .text(
                thumbLinks
                  .filter("." + settings.activeClass)
                  .children(":last-child")
                  .attr("alt")
              )
              .fadeIn(settings.fadeInDuration)
          );
      };

  highlight(firstThumbLink);

  workSection
    .prepend(
      $(document.createElement("p"))
        .append(learnMoreLink.click(setWorkDescription))
        .append(
          $(document.createElement("img")).attr({
            alt: "",
            src: firstThumbLink.attr("href")
          })
        )
    )
    .children("h1").remove();

  var imgViewer = workSection.children("p"),
      bigPic = imgViewer.children("img"),
      typeOfWork,
      lastHoveredLink,
      hoverIn = function(){
        if(lastHoveredLink)
          lastHoveredLink.children().not(":last-child").remove();
        var $this = $(this);
        typeOfWork = $this.attr("title");
        $this
          .removeAttr("title")
          .prepend(
            $(document.createElement("img")).attr({
              alt: typeOfWork,
              src: settings.workImgPath + settings.tooltipsFolder +
                   typeOfWork.toLowerCase() + settings.tooltipsImgExt
            })
          );
        lastHoveredLink = $this;
      },
      hoverOut = function(){
        $(this)
          .attr("title",typeOfWork)
          .children()
          .not(":last-child")
          .fadeOut(
            ($.support.opacity) ? settings.fadeOutDuration : 0
          );
        lastHoveredLink = null;
      };

  thumbLinks
    .hover(hoverIn,hoverOut)
    .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(){
          var $this = $(this);
          imgViewer.html(
            $this.fadeIn(
              settings.fadeInDuration, function(){
                $this.before(
                  learnMoreLink
                    .fadeIn(settings.fadeInDuration)
                    .click(setWorkDescription)
                );
              }
            )
          );
        })
        .attr("src",target);
    });

});