function ImageGallery(id)
{
  if (!document.getElementById || !document.getElementsByTagName) { return false; }
  this.container = document.getElementById(id);
  this.imagelinks = this.container.getElementsByTagName("a");
  this.index  = -1;
  this.btPrev = null;
  this.btNext = null;
  this.init();
}

ImageGallery.prototype.init = function()
{
  var mainInstance = this;
  for (var i = 0; i < this.imagelinks.length; i++) {
    var preloadImage = new Image();
    preloadImage.src = this.imagelinks[i].href;
    this.imagelinks[i].onclick = 
      function() 
      {
        var overlay = mainInstance.createOverlay('gallery');
        if (overlay) {
          mainInstance.addHeader(overlay);
          mainInstance.addPicture(overlay);
          mainInstance.addFooter(overlay);
          mainInstance.setIndex(this);
          mainInstance.setTitle();
          mainInstance.setPicture();
        }
        return false;
      };
  }
}

ImageGallery.prototype.clickHandler = function()
{
  var overlay = this.createOverlay('gallery');
  if (overlay) {
    this.addHeader(overlay);
    this.addPicture(overlay);
    this.addFooter(overlay);
    this.setIndex(this);
    this.setTitle();
    this.setPicture();
  }
  return false;
}

ImageGallery.prototype.createOverlay = function(containerId)
{
  var overlay = document.getElementById('overlay');
  if (overlay) { return null; }

  var container = document.getElementById(containerId);
  if (!container) { return null; }

  var pos = getElementPosition(containerId);
  var div = document.createElement('div');
  div.id  = 'overlay';
  div.style.position = 'absolute';
  div.style.left     = pos.left + 'px';
  div.style.top      = pos.top  + 'px';
  div.style.width    = '600px';
  div.style.height   = '450px';
  div.style.zIndex   = '99';

  container.appendChild(div);
  return div;
}

ImageGallery.prototype.deleteOverlay = function()
{
  var overlay = document.getElementById('overlay');
  if (!overlay) { return; }

  var container = overlay.parentNode;
  if (!container) { return null; }

  container.removeChild(overlay);
  
  return false;
}

ImageGallery.prototype.addHeader = function(parent)
{
  if (!parent) { return; }

  var mainInstance = this;

  var div = document.createElement('div');
  div.className = 'header';
  div.style.position = 'absolute';
  div.style.right    = '0px';
  div.style.top      = '2px';
  div.style.width    = '32px';
  div.style.height   = '32px';
  div.style.zIndex   = '4';

  var img = document.createElement('img');
  img.src = 'images/gallery/close_off.gif';
  img.onmouseover    = function() { this.src = 'images/gallery/close_on.gif' ; };
  img.onmouseout     = function() { this.src = 'images/gallery/close_off.gif'; };
  img.onclick        = function() { return mainInstance.deleteOverlay(); };
  div.appendChild(img);

  parent.appendChild(div);
}

ImageGallery.prototype.addPicture = function(parent)
{
  if (!parent) { return; }

  var div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.left     = '0px';
  div.style.top      = '0px';
  div.style.width    = '600px';
  div.style.height   = '380px';
  div.style.zIndex   = '3';
  div.style.border   = '1px solid #222';

  var img = document.createElement('img');
  img.id  = 'picture';
  img.src = '';
  img.style.position = 'absolute';
  img.style.left     = '0px';
  img.style.top      = '0px';
  img.style.width    = '100%';
  img.style.height   = '100%';
  //img.style.border   = '1px solid #222';
  div.appendChild(img);

  parent.appendChild(div);
}

ImageGallery.prototype.addFooter = function(parent)
{
  if (!parent) { return; }

  var mainInstance = this;

  var div = document.createElement('div');
  div.className = 'footer';
  div.style.position = 'absolute';
  div.style.left     = '0px';
  div.style.top      = '380px';
  div.style.width    = '600px';
  div.style.height   = '52px';

  var table = document.createElement('table');
  var tbody = document.createElement('tbody');
  var trow  = document.createElement('tr');
  var td1   = document.createElement('td');
  var td2   = document.createElement('td');
  var td3   = document.createElement('td');

  trow.appendChild(td1);
  trow.appendChild(td2);
  trow.appendChild(td3);
  tbody.appendChild(trow);
  table.appendChild(tbody);
  div.appendChild(table);

  trow.style.verticalAlign  = 'top';
  
  table.style.width  = '100%';
  td1.style.width    = '20px';
  td2.id             = 'title';
  td2.style.zIndex   = '1';
  td3.style.width    = '20px';

  this.btPrev = document.createElement('img');
  this.btPrev.src = 'images/gallery/prev_off.jpg';
  this.btPrev.style.width    = '20px';
  this.btPrev.style.height   = '18px';
  this.btPrev.style.zIndex   = '2';
  this.btPrev.onmouseover    = function() { 
                                 if (mainInstance.index > 0) { 
                                  this.src = 'images/gallery/prev_on.jpg'; 
                                 }; 
                               };
  this.btPrev.onmouseout     = function() { this.src = 'images/gallery/prev_off.jpg'; };
  this.btPrev.onclick        = function() { return mainInstance.showPrevious(); };
  td1.appendChild(this.btPrev);

  this.btNext = document.createElement('img');
  this.btNext.src = 'images/gallery/next_off.jpg';
  this.btNext.style.width    = '20px';
  this.btNext.style.height   = '18px';
  this.btNext.style.zIndex   = '2';
  this.btNext.onmouseover    = function() { 
                                 if (mainInstance.index < (mainInstance.imagelinks.length-1)) { 
                                   this.src = 'images/gallery/next_on.jpg' ; 
                                 };
                               };
  this.btNext.onmouseout     = function() { this.src = 'images/gallery/next_off.jpg'; };
  this.btNext.onclick        = function() { return mainInstance.showNext(); };
  td3.appendChild(this.btNext);

  parent.appendChild(div);
}

ImageGallery.prototype.setIndex = function(ref)
{
  this.index = -1;
  for (var i = 0; i < this.imagelinks.length; i++) {
    if (this.imagelinks[i].href == ref.href) {
      this.index = i;
    }
  }
}

ImageGallery.prototype.setTitle = function()
{
  if (this.index < 0 || this.index >= this.imagelinks.length) { return; }
  
  var span = document.getElementById('title');
  if (span) {
    span.innerHTML = this.imagelinks[this.index].title;
  }
}

ImageGallery.prototype.setPicture = function()
{
  if (this.index < 0 || this.index >= this.imagelinks.length) { return; }

  var img = document.getElementById('picture');
  if (!img) { return; }

  setOpacity('picture', 0);

  var mainInstance = this;
  var theImage     = new Image();
  theImage.onload  = 
    function() 
    { 
      var img = document.getElementById('picture');
      if (!img) { return; }
      
      var wdt = parseInt(this.width , 10);
      var hgt = parseInt(this.height, 10);
      if (wdt > 600 && hgt <= 380) {
        hgt = Math.round(hgt * (600 / wdt));
        wdt = 600;
      } else if (wdt <= 600 && hgt > 380) {
        wdt = Math.round(wdt * (380 / hgt));
        hgt = 380;
      } else if (wdt > 600 && hgt > 380) {
        if ((wdt/hgt) > (600/380)) {
          hgt = Math.round(hgt * (600 / wdt));
          wdt = 600;
        } else {
          wdt = Math.round(wdt * (380 / hgt));
          hgt = 380;
        }
      }
         
      img.src          = this.src;
      img.style.width  = wdt + 'px';
      img.style.height = hgt + 'px';
      img.style.left   = Math.round((600-wdt) / 2) + 'px';
      img.style.top    = Math.round((380-hgt) / 2) + 'px';
      fadeIn('picture', 1000)
    }
  theImage.onerror = function() { return mainInstance.deleteOverlay(); }
  theImage.onabort = function() { return mainInstance.deleteOverlay(); }
  theImage.src     = this.imagelinks[this.index].href;
  return false;
}

ImageGallery.prototype.showPrevious = function()
{
  if (this.index > 0) { 
    this.index--;
    this.setTitle();
    this.setPicture();
  }
  if (this.index == 0) { 
    this.btPrev.src = 'images/gallery/prev_off.jpg';
  }
  
  return false;
}

ImageGallery.prototype.showNext = function()
{
  if (this.index < (this.imagelinks.length-1)) { 
    this.index++;
    this.setTitle();
    this.setPicture();
  }
  if (this.index == (this.imagelinks.length-1)) { 
    this.btNext.src = 'images/gallery/next_off.jpg';
  }
  return false;
}

function getElementPosition(elemId) {
  var offsetTrail = document.getElementById(elemId);
  var offsetLeft = 0;
  var offsetTop = 0;
  while (offsetTrail) {
    offsetLeft += offsetTrail.offsetLeft;
    offsetTop  += offsetTrail.offsetTop;
    offsetTrail = offsetTrail.offsetParent;
  }
  if (navigator.userAgent.indexOf("Mac") != -1 &&
    typeof document.body.leftMargin != "undefined") {
    offsetLeft += document.body.leftMargin;
    offsetTop += document.body.topMargin;
  }
  return {left:offsetLeft, top:offsetTop};
}

function disableContextMenu(evt)
{
  evt = (evt) ? evt : ((window.event) ? event : null);
  if (evt.cancelBubble) {
     evt.cancelBubble = true;
  }
  return false;
}