var thumb;
var initialized = false;

loadables.push(function()
{
  $("body").append('<div id="outline">&nbsp;</div>');
  $("#outline").css({
    position: "absolute",
    left: $("#gallery").offset().left + "px",
    top: $("#gallery").offset().top + "px",
    zIndex: 100,
    border: "2px solid #014EB6"
  }).hide();
  
  $("a.photo").each(function()
  {
    var lnk = $(this);
    var id = lnk.attr("rel");
    var img = $("#" + id + " img");
    
    lnk.css({
      overflow: "hidden",
      position: "relative",
      zIndex: 101
    }).append('<span>&nbsp;</span>');
    
    $("span", lnk).css({
      display: "block",
      position: "absolute",
      left: "0px",
      top: "0px",
      height: lnk.height() + "px",
      width: lnk.width() + "px",
      background: "transparent " + lnk.css("background-image") + " no-repeat top left"
    });
    lnk.css("background", "");
    
    lnk.bind("mouseenter", function()
    {
      $("#outline").stop().show().animate({
        left: (lnk.offset().left - 2) + "px",
        top: (lnk.offset().top - 2) + "px",
        height: lnk.height() + "px",
        width: lnk.width() + "px"
      }, 500);
    }).click(function()
    {
      var div = $("#" + id);
      var img = $("img", div);
      $("#image").html('        <div class="center"><div id="photo" style="height:' + img.attr("height") + 'px; width:' + img.attr("width") + 'px; background:transparent url(' + img.attr("src") + ');"><div id="topleft">&nbsp;</div><div id="topright" style="left:' + (img.attr("width") - 20) + 'px;">&nbsp;</div><div id="bottomright" style="left:' + (img.attr("width") - 20) + 'px; top:' + (img.attr("height") - 20) + 'px;"">&nbsp;</div><div id="bottomleft" style="top:' + (img.attr("height") - 20) + 'px;">&nbsp;</div>&nbsp;</div></div><br>' + $("div.html", div).html());
      $("#photo").css("opacity", 0);
      
      if (thumb)
      {
        thumb.animate({
          left: "0px"
        }, 500);
      }
      
      thumb = $("span", lnk).animate({
        left: lnk.width() + "px"
      }, 500, function()
      {
        $("#photo").animate({
          opacity: 1
        }, 500);
      });
      return false;
    });
  });
});
