document.write("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"skin/gallery.css\" />");
if (document.all) {
document.write("<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"skin/gallery-ie.css\" />");
}

function GalleryManager(list) {
  this.list = list;
  this.items = [];
  this.activeItem = -1;
  
  this.showImage = function(i) {
    //alert(i);
    if (this.items[i].image) {
      this.items[i].el.getElementsByTagName("img")[0].src = this.items[i].image.src;
      this.items[i].state = "showing";
    }
    else {
      this.items[i].image = new Image();
      this.items[i].image.onload = (function() { this.showImage(i); }).bind(this);
      this.items[i].image.src = this.items[i].path;
    }
    
    for (var j=0; j<this.items.length; j++) {
      if (i != j) {
        this.hideImage(j);
      }
    }
  }
  
  this.hideImage = function(i) {
    this.items[i].state = "hiding";
  }
  
  // Grab items and set them up
  var items = list.getElementsByTagName("li");
  for (var i=0; i<items.length; i++) {
  
    ((function() {
      var item  = items[i];
      var link  = item.getElementsByTagName("a")[0];
      var image = link.getElementsByTagName("img")[0];
      
      var el = document.createElement("div");
      
      el.className = "gallery-image-holder";
      el.style.left = "-9999px";
      /*
      el.style.position = "absolute";
      el.style.visibility = "hidden";
      el.style.border = "none";//"2px solid #8b7d72";
      */
      
      var img = document.createElement("img");
      img.alt = "Click image to close";
      el.appendChild(img);
      
      var borderN  = document.createElement("div");  borderN.className = "g-borderN";
      var borderE  = document.createElement("div");  borderE.className = "g-borderE";
      var borderS  = document.createElement("div");  borderS.className = "g-borderS";
      var borderW  = document.createElement("div");  borderW.className = "g-borderW";
      var borderNE = document.createElement("div"); borderNE.className = "g-borderNE";
      var borderSW = document.createElement("div"); borderSW.className = "g-borderSW";
      var borderNW = document.createElement("div"); borderNW.className = "g-borderNW";
      var borderSE = document.createElement("div"); borderSE.className = "g-borderSE";      
      
      this.items[i] = {
        "el"   : el,
        "path" : image.src.replace("/small/", "/large/"),
        "x"    : getPageOffsetLeft(image) + image.offsetWidth * 0.5,
        "y"    : getPageOffsetTop(image) + image.offsetHeight * 0.5,
        "borderN"  : borderN ,
        "borderE"  : borderE ,
        "borderS"  : borderS ,
        "borderW"  : borderW ,
        "borderNE" : borderNE,
        "borderSW" : borderSW,
        "borderNW" : borderNW,
        "borderSE" : borderSE,
        "image": false,
        "state": "hidden",
        "amount" : 0
      }
      
      link.onclick = (new Function("this.showImage(" + i + "); return false;")).bind(this);
      el.onclick = (new Function("this.hideImage(" + i + "); return false;")).bind(this);
      
      var root = document.body;
      root.appendChild(el);
      
      el.appendChild(borderN);
      el.appendChild(borderE);
      el.appendChild(borderS);
      el.appendChild(borderW);
      el.appendChild(borderNE);
      el.appendChild(borderSW);
      el.appendChild(borderNW);
      el.appendChild(borderSE);
      
    }).bind(this)) ();
  }
  
  this.tick = function() {
    for (var i=0; i<this.items.length; i++) {
      if (this.items[i].state == "showing") {
        if (this.items[i].amount >= 1.0) {
          this.items[i].state = "visible";
          this.items[i].el.style.visibility = "visible";
        }
        else {
          var amount = this.items[i].amount + 0.1;
          //var amount = this.items[i].amount + 0.01 * Math.round( 101 * (1.0-this.items[i].amount)/3);
          if (amount >= 1.0) { amount = 1.0; }
          this.items[i].amount = amount;
          var w = Math.round(145 + (this.items[i].image.width-145)  * this.items[i].amount);
          var h = Math.round(145 + (this.items[i].image.height-145) * this.items[i].amount);
          var x = Math.round(this.items[i].x - w/2);
          var y = Math.round(this.items[i].y - h/2);
          
          this.items[i].borderN.style.width  = w + "px";
          this.items[i].borderE.style.height = h + "px";
          this.items[i].borderS.style.width  = w + "px";
          this.items[i].borderW.style.height = h + "px";
          
          this.items[i].el.style.left   = (x-16) + "px";
          this.items[i].el.style.top    = (y-16) + "px";
          this.items[i].el.style.width  = (w+32) + "px";
          this.items[i].el.style.height = (h+32) + "px";
          this.items[i].el.style.visibility = "visible";
          setOpacity(this.items[i].el, Math.sqrt(amount));
          
          var image = this.items[i].el.getElementsByTagName("img")[0];
          image.style.left   = "16px";
          image.style.top    = "16px";
          image.style.width  = w + "px";
          image.style.height = h + "px";

          //var s = "position: absolute; visibility: visible; left: " + x + "px; top: " + y + "px; width: " + w + "px; height: " + h + "px;";
          //this.items[i].el.style.cssText = s;
          //document.title = this.items[i].y + " -- " + this.items[i].el.offsetTop;
        }
      }
      else if (this.items[i].state == "hiding") {
        var amount = this.items[i].amount - 0.1;
        //var amount = this.items[i].amount - 0.01 * Math.round( 101 * (1.0-this.items[i].amount)/3);
        if (amount <= 0) {
          this.items[i].el.style.visibility = "hidden";
          this.items[i].state = "hidden";
        }
        else {
          this.items[i].amount = amount;
          var w = Math.round(145 + (this.items[i].image.width-145)  * this.items[i].amount);
          var h = Math.round(145 + (this.items[i].image.height-145) * this.items[i].amount);
          var x = Math.round(this.items[i].x - w/2);
          var y = Math.round(this.items[i].y - h/2);
          
          this.items[i].borderN.style.width  = w + "px";
          this.items[i].borderE.style.height = h + "px";
          this.items[i].borderS.style.width  = w + "px";
          this.items[i].borderW.style.height = h + "px";
          
          this.items[i].el.style.left   = (x-16) + "px";
          this.items[i].el.style.top    = (y-16) + "px";
          this.items[i].el.style.width  = (w+32) + "px";
          this.items[i].el.style.height = (h+32) + "px";
          this.items[i].el.style.visibility = "visible";
          setOpacity(this.items[i].el, Math.sqrt(amount));
          
          var image = this.items[i].el.getElementsByTagName("img")[0];
          image.style.left   = "16px";
          image.style.top    = "16px";
          image.style.width  = w + "px";
          image.style.height = h + "px";
          
          //this.items[i].el.style.cssText = "position: absolute; visibility: visible; left: " + x + "px; top: " + y + "px; width: " + w + "px; height: " + h + "px;";
        }
      }
    }
  }
  
  this.timerID = setInterval( (function() { this.tick(); }).bind(this), 100);
}

var galleries = [];

addLoadHandler(function() {
  var lists = document.getElementsByTagName("ul");
  for (var i=0; i<lists.length; i++) {
    if (hasClassName(lists[i], "thumbnails")) {
      galleries[i] = new GalleryManager(lists[i]);
    }
  }
});