var imageMaxDim = 500;
var imageBorder = 10;
var outerBorder = 4;
var totalBorder = imageBorder + outerBorder;
var atFront = false;

var click = false;
var blank = false;
var popup = false;
var image = false;

var left = 'left';
var right = 'right';

function log(msg)
 {
  dump(msg + '\n');
 }

function init()
 {
  click = document.getElementById('clickBack');
  blank = document.getElementById('blank');
  popup = document.getElementById('popup');
  image = document.getElementById('popupImage');

  var imageElements = document.getElementsByTagName('img');

  for(i in imageElements)
   {
    var img = imageElements[i];
    if(img.className == 'thumbnail')
     {
      var div = img.parentNode;
      div.style.width = img.width;
     }
   }
 }

function thumbnail(file, title, side)
 {
  if(!title) { title = images[file].title; }
  if(!side) { side = ''; }

  var width = images[file].thumbWidth;
  var height = images[file].thumbHeight;

  var html = '<div class=\'thumbnail' + side + '\'>' +
             '<img class=\'thumbnail' + side + '\' src=\'thumbs/' + file + '.jpg\' ' +
	     'width=\'' + width + '\' height=\'' + height + '\' ' +
             'title=\"' + title + '\" ' +
             'onClick=\'loadPopupImage(\"' + file + '\")\'/><br/>' +
             '<span class=\'title\'>' + title + '</span></div>';

  document.write(html);
 }

function loadPopupImage(name)
 {
  if(atFront)
   {
    sendToBack();
    return; 
   }

  atFront = true;

  var image = document.getElementById('popupImage');
  image.src = 'images/' + name + '.jpg';
  image.style.width = images[name].imageWidth;
  image.style.height = images[name].imageHeight;
 }
 
function bringToFront()
 {
  var name = image.src.match(/images\/(.*)\.jpg/)[1];

  var winWidth;
  var winHeight;
  var winLeft;
  var winTop;

  if(document.all)
   {
    winWidth = document.body.clientWidth;
    winHeight = document.body.clientHeight;
    winLeft = document.body.scrollLeft;
    winTop = document.body.scrollTop;
   }
  else
   {
    winWidth = window.innerWidth;
    winHeight = window.innerHeight;
    winLeft = window.pageXOffset;
    winTop = window.pageYOffset;
   }

  var imageWidth = images[name].imageWidth;
  var imageHeight = images[name].imageHeight;

  var left = Math.round((winWidth - imageWidth) / 2);
  var top = Math.round((winHeight - imageHeight) / 3);

  click.style.left = winLeft;
  click.style.top = winTop;
  click.style.cursor = 'pointer';

  blank.style.width = imageWidth + 2 * totalBorder;
  blank.style.height = imageHeight + 2 * totalBorder;
  blank.style.left = left - totalBorder;
  blank.style.top = top - totalBorder;
  blank.style.cursor = 'pointer';

  popup.style.left = left - imageBorder;
  popup.style.top = top - imageBorder;
  popup.style.cursor = 'pointer';

  image.style.cursor = 'pointer';

  click.style.display = 'block';
  blank.style.display = 'block';
  popup.style.display = 'block';

  atFront = true;
 }

function sendToBack()
 {
  click.style.cursor = 'default';
  blank.style.cursor = 'default';
  popup.style.cursor = 'default';
  image.style.cursor = 'default';

  click.style.display = 'none';
  blank.style.display = 'none';
  popup.style.display = 'none';

  atFront = false;
 }