var theScroller = null;

//////

function mapImageId(id, category) {
  var res = id;
  if (category == undefined) {
    if (id.indexOf('?') >= 0) {
      category = getParam('category', id);
      id = getParam('img', id);
    }
  }
  if (id == 'first' || id == 'last') {
    for (imageId in images) {
      if (images[imageId].category != category)
        continue;
      res = imageId;
      if (id == 'first') 
        break;
    }
  }
  return res;
}

function getParam(name, params) {
  var res = undefined;
  var params = (params == undefined) ? window.location.search : params;
  var idx = params.indexOf(name + '=');
  if (idx >= 0) {
    res = params.substr(idx + name.length + 1);
    idx = res.indexOf('&');
    if (idx >= 0) {
      res = res.substr(0, idx);
    }
  }
  return res;
}

//////

function smallImage(id, imageId) {
  image(id, imageId, "small", 107, 80);
}

function largeImage(id, imageId) {
  image(id, imageId, "large", 330, 300);
}

function image(id, imageId, typeId, maxWW, maxHH) {
  var element = document.getElementById(id);
  if (element == null) {
    alert("Element id not found: " + id);
    return;
  }
  if (element.tagName != 'IMG') {
    element.outerHTML = '<span class="error" id="' + id + '">IMG_TAG_EXPECTED: ' + id + '</span>';
    return;
  }
  var descr = images[mapImageId(imageId)];
  if (descr == null) {
    element.outerHTML = '<span class="error" id="' + id + '">IMAGEID_NOT_FOUND: ' + imageId + '</span>';
    return;
  }
  var tDescr = descr[typeId];
  if (tDescr == null) {
    element.outerHTML = '<span class="error" id="' + id + '">TYPEID_NOT_FOUND: ' + typeId + ' for image: ' + imageId + '</span>';
    return;
  }
  element.alt = descr.alt;
  element.src = tDescr.src;
  var ww = tDescr.width;
  var hh = tDescr.height;
  var rr = ww / hh;
  if (maxWW != null && maxWW != undefined && ww > maxWW) {
    ww = maxWW;
    hh = ww / rr;
  }
  if (maxHH != null && maxHH != undefined && hh > maxHH) {
    hh = maxHH;
    ww = hh * rr;
  }
  element.width = ww;
  element.height = hh;
}

function imageDescription(id, imageId) {
  var element = document.getElementById(id);
  if (element == null) {
    alert("Element id not found: " + id);
    return;
  }
  if (element.tagName != 'SPAN') {
    element.outerHTML = '<span class="error" id="' + id + '">SPAN_TAG_EXPECTED: ' + id + '</span>';
    return;
  }
  var descr = images[mapImageId(imageId)];
  if (descr == null) {
    element.outerHTML = '<span class="error" id="' + id + '">IMAGEID_NOT_FOUND: ' + imageId + '</span>';
    return;
  }
  var dd = (descr.description != undefined && descr.description != null) ? descr.description : "";
  element.innerHTML = dd;
}

function imagePopup(imageId) {
  //if (imageId == undefined)
  //  imageId = theImage;
  var descr = images[mapImageId(imageId)];
  if (descr == null) {
    alert('IMAGEID_NOT_FOUND: ' + imageId);
    return;
  }
  var large = descr.large;
  var rr = large.width / large.height;
  var max = 700;
  var ww, hh;
  if (rr >= 1) {
    ww = max;
    hh = ww / rr;
  }
  else {
    hh = max;
    ww = hh * rr;
  }
  var props = "dependent=yes,hotkeys=no,height=" + hh + ",width=" + ww + ",status=no,resizable=yes,scrollbars=yes"
  var win = window.open(large.src, imageId, props);
  win.focus();
}

function lbImagePopup(imageId) {
  if (!Lightbox.prototype._resizeImageContainer) {
    Lightbox.prototype._resizeImageContainer = Lightbox.prototype.resizeImageContainer;
    Lightbox.prototype.resizeImageContainer = function(ww, hh) {
      var rr = ww / hh;
      var maxW = 640;
      var maxH = 480;
      var ww, hh;
      if (ww > maxW) {
        ww = maxW;
        hh = ww / rr;
      }
      if (hh > maxH) {
        hh = maxH;
        ww = hh * rr;
      }
      Element.setWidth('lightboxImage', ww);
      Element.setHeight('lightboxImage', hh);
      this._resizeImageContainer(ww, hh);
    }
    overlayOpacity = 0.7;
    resizeSpeed = 8;
    resizeDuration = (11 - resizeSpeed) * 0.15;    
  }

  hideSelectBoxes();
  hideFlash();
  
  // stretch overlay to fill page and fade in
  var arrayPageSize = getPageSize();
  Element.setWidth('overlay', arrayPageSize[0]);
  Element.setHeight('overlay', arrayPageSize[1]);
  
  new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
  
  imageArray = [];
  imageNum = 0;		
  
  if (!document.getElementsByTagName){ return; }
  
  var descr = images[mapImageId(imageId)];
  if (descr == null) {
    alert('IMAGEID_NOT_FOUND: ' + imageId);
    return;
  }
  var currentImage = descr;
  var category = currentImage.category;
  var idx = 0;
  for (iName in images) {
    var image = images[iName];
    if (image.category != category)
      continue;
    imageArray.push(new Array(image.large.src, (image.description) ? image.description : " "));
    if (currentImage == image)
      imageNum = idx;
    idx++;
  }  
  
  // calculate top and left offset for the lightbox 
  var arrayPageScroll = getPageScroll();
  //var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
  var lightboxTop = arrayPageScroll[1] + 20;
  var lightboxLeft = arrayPageScroll[0];
  Element.setTop('lightbox', lightboxTop);
  Element.setLeft('lightbox', lightboxLeft);
  
  Element.show('lightbox');
  
  myLightbox.changeImage(imageNum);
}

//////

function Gallery(id, phId, theImage) {
  var element = document.getElementById(id);
  if (element == null) {
    alert("Element id not found: " + id);
    return;
  }
  if (element.tagName != 'DIV') {
    element.outerHTML = '<span class="error" id="' + id + '">DIV_TAG_EXPECTED: ' + id + '</span>';
    return;
  }
  var category = null;
  var currentImage = null;
  if (theImage != undefined && theImage != null) {
    currentImage = mapImageId(theImage);
    category = images[theImage].category;
  }
  
  var html = '<table border="0"><tr><td>&nbsp;</td>';
  for (iName in images) {
    var image = images[iName];
    if (image.category != category)
      continue;
    //html += '<td><a href="detail.html?img=' + iName + '"><img id="_G' + iName + '" border="0"></a>';
    html += '<td><a href="javascript:setCurrentImage(\'' + iName + '\')"><img id="_G' + iName + '" border="0"></a>';
    html += '</td><td>&nbsp;</td>';
  }  
  html += '</tr></table>';
  element.innerHTML = html;
  for (iName in images) {
    var image = images[iName];
    if (image.category != category)
      continue;
    smallImage('_G' + iName, iName);
  }
  var gallery = this;
  var makeItVisible = function() {
    if (currentImage != null) {
      gallery.setCurrentImage(currentImage);
    }
  };
  setTimeout(makeItVisible, 0);
  
  this.setCurrentImage = function(imageId) {
    var imgEl = document.getElementById('_G' + imageId);
    if (imgEl != null) {
      if (currentImage != null) {
        var oldImgEl = document.getElementById('_G' + currentImage);
        oldImgEl.border = 0;
      }
      imgEl.border = 2;
      currentImage = imageId;
      var xx = 0;
      for (var parent = imgEl; parent != null && parent != element; parent = parent.parentNode) {
        xx += parent.offsetLeft;
      }
      if (xx < element.scrollLeft)
        element.scrollLeft = xx - 6;
      else if ((xx + imgEl.offsetWidth) > (element.scrollLeft  + element.offsetWidth))
        element.scrollLeft += (xx + imgEl.offsetWidth) - (element.scrollLeft  + element.offsetWidth);
    }
  }
  
  this.getCurrentImage = function() {
    return currentImage;
  }
  
  this.scrollBegin = function(direction) {
    new Scroller(id, direction);
  }

  this.scrollEnd = function() {
    theScroller = null;
  }
}

//////

function Scroller(_id, _direction) {
  
  var id = _id;
  var direction = _direction;
  var element = document.getElementById(id);
  if (element == null) {
    alert("Element id not found: " + id);
    return;
  }

  var scroller = this;
  theScroller = this;
  _tick();

  function _tick() {
    if (theScroller != scroller)
      return;
    dx = (direction == "left") ? -60 :
           (direction == "right") ? 60 : 0;
    element.scrollLeft += dx;
    setTimeout(_tick, 250);
  }
}