function HidePictureBox(event) {
  $('picturebox').style.visibility = 'hidden';
  $('pictureimg').src = '/splash.png';
}
          
function InjectThumbnails() {
  if ($("thumbnails")) {
  
    var objBody = $$('body').first();
    var d = new Element("div");
    d.update(
        "<div id='picturebox' style='position:fixed;left:0px;top:0px;z-index:90;text-align:center;visibility:hidden;vertical-align:middle;'>"
      + "<div id='overlay' style='position:absolute;left:0px;top:0px;z-index:100;background:#000;opacity:.75;filter:alpha(opacity=75);'></div>"
      + "<div id='pictureimgbox' style='background:url(/bg_gray.png);padding:10px;position:relative;margin-top:20px;margin-left:auto;margin-right:auto;z-index:110;'>"
      + "<img id='pictureimg' src='/splash.png' alt=''/>"
      + "</div>"
      + "</div>");
    objBody.insert(d);

    $("thumbnails").childElements().each(function(item) {
      Event.observe(item,'click',function(event) {
        var d = document.viewport.getDimensions();
        $('picturebox').setStyle({ width: d.width + 'px', height: d.height + 'px' }); 
        $('overlay')   .setStyle({ width: d.width + 'px', height: d.height + 'px' }); 

        $('picturebox').style.visibility = 'visible';
        $('pictureimg').src = this.href;

        Event.observe($('pictureimg'),'load',function(event) {
          $('pictureimgbox').style.marginTop = ((d.height - $('pictureimg').height) / 2) + 'px';
          $('pictureimgbox').style.width = ($('pictureimg').width) + 'px';
        });
        Event.observe($('picturebox'),'click',HidePictureBox);
        Event.observe($('pictureimg'),'click',HidePictureBox);
        event.stop();
      });
    });

  }
}

Event.observe(window,'load',function(event) {
  InjectThumbnails();
});