function setimage (i) {
  objGet ('realsize').firstChild.src = 'img/' + i + '.jpg';
}

function clickme (div) {
  div.className = "button click";
  window.setTimeout ('objGet ("' + div.id + '").className = "button"', 200);
}

function tn_calc() {
  this.img.style.width = Math.floor (this.size) + 'px';
  this.img.style.height = Math.floor (this.size) + 'px';
  this.img.style.left = Math.floor (this.posx + (this.gal.min - this.size) / 2.0) + 'px';
  this.img.style.top = Math.floor (this.posy + (this.gal.min - this.size) / 2.0) + 'px';
}

function tn_dogrow () {
 this.size = this.size * 1.1;
 if (this.size < this.gal.max) {
  this.calc ();
  return;
 }

 this.size = this.gal.max;
 this.calc ();
 this.int_clear ();
}

function tn_doshrink () {
 this.size = this.size * 0.9;
 if (this.size > this.gal.min) {
  this.calc ();
  return;
 }

 this.img.style.zIndex = 1;
 this.size = this.gal.min;
 this.calc ();
 this.int_clear ();
}

function tn_int_clear () {
 if (this.int_id) { 
  window.clearInterval (this.int_id); 
  this.int_id = 0; 
 }
}

function tn_growme () {
 this.img.style.zIndex = 3;
 this.int_clear ();
 this.int_id = window.setInterval ('gals[' + this.gal.id + '].tn[' + this.id + '].dogrow ()', this.gal.speed);
}

function tn_shrinkme () {
 this.img.style.zIndex = 2;
 this.int_clear ();
 this.int_id = window.setInterval ('gals[' + this.gal.id + '].tn[' + this.id + '].doshrink ()', this.gal.speed);
}

function cbGrow (evt) {
 var tn = evt.target.tn;
 tn.growme ();
}

function cbShrink (evt) {
 var tn = evt.target.tn;
 tn.shrinkme ();
}

function cbClick (evt) {
 var tn = evt.target.tn;
 setimage (tn.img.alt);
}

function ThumbNail (gal, id) {
 this.calc = tn_calc;
 this.growme = tn_growme;
 this.shrinkme = tn_shrinkme;
 this.dogrow = tn_dogrow;
 this.doshrink = tn_doshrink;
 this.int_clear = tn_int_clear;

 this.gal = gal;
 this.id = id;
 this.size = this.gal.min;
 this.int_id = 0;

 this.img = objGet ('gal' + this.gal.id + 'img' + id);
 this.img.tn = this;
 this.img.onmouseover = cbGrow;
 this.img.onmouseout = cbShrink;
 this.img.onclick = cbClick;

 this.posx = (id % cols) * (this.gal.min + this.gal.padding);
 this.posy = Math.floor (id / cols) * (this.gal.min + this.gal.padding);

 this.img.style.left = this.posx + 'px';
 this.img.style.top = this.posy + 'px';
 this.img.style.width = this.gal.min + 'px';
 this.img.style.height = this.gal.min + 'px';
}

function gal_scroll_set () {
 this.scroll.button.style.top = (this.top / this.cols / this.max_rows * this.height) + 'px';
}

function gal_scroll_to (pos) {
 this.top = pos;

 var i;
 var p;

 for (i = 0; i < this.cols * this.rows; i++) {
  p = i + pos;
  this.tn[i].img.src = this.base + 'tn/' + ((p >= this.num_tn)? 'nil': p) + '.png';
  this.tn[i].img.alt = (p >= this.num_tn)? '': p;
 }
}

function gal_scroll_up () {
 if (this.top - this.cols < 0) {
  return;
 }

 var i;

 for (i = this.cols * this.rows - 1; i >= this.cols; i --) {
  this.tn[i].img.src = this.tn[i - this.cols].img.src;
  this.tn[i].img.alt = this.tn[i - this.cols].img.alt;
 }

 this.top -= this.cols;
 for (i = 0; i < this.cols; i++) {
//  this.tn[i].img.src = this.base + 'tn/clock.gif';
//  window.setTimeout ('gals[' + this.id + '].tn[' + i + '].img.src = "' + (this.base + 'tn/' + (this.top + i)) + '.png"', 600);
  this.tn[i].img.src = this.base + 'tn/' + (this.top + i) + '.png';
  this.tn[i].img.alt = this.top + i;
 }

 this.scroll_set ();
}

function gal_scroll_down () {
 if (this.top + this.cols * this.rows + this.cols >= this.num_tn + this.cols) {
  return;
 }

 var i;

 var limit = this.cols * (this.rows - 1);

 for (i = 0; i < limit; i ++) {
  this.tn[i].img.src = this.tn[i + this.cols].img.src;
  this.tn[i].img.alt = this.tn[i + this.cols].img.alt;
 }

 this.top += this.cols;
 for (i = 0; i < this.cols; i++) {
//  this.tn[i + limit].img.src = this.base + 'tn/clock.gif';
//  window.setTimeout ('gals[' + this.id + '].tn[' + (i + limit) + '].img.src = "' + (this.base + 'tn/' + (this.top + limit + i)) + '.png"', 600);
  this.tn[i + limit].img.src = this.base + 'tn/' + ((this.top + limit + i >= this.num_tn)? "nil": (this.top + limit + i)) + '.png';
  this.tn[i + limit].img.alt = (this.top + limit + i >= this.num_tn)? "": this.top + limit + i;
 }

 this.scroll_set ();
}


function gal_scroll_click (evt) {
 if (evt.target == this.scroll.button)
  return;
 var delta = evt.layerY - parseInt (this.scroll.button.style.top);
 if (delta < 0)
  this.scroll_up ();
 if (delta > parseInt (this.scroll.button.style.height)) {
  this.scroll_down ();
 }
}

function gal_scroll_drag_start (evt) {
 var y = evt.pageY;

 scrollCtrl.inDrag = true;
 scrollCtrl.active = evt.target;
 scrollCtrl.active.className = 'scroll_button active';
 scrollCtrl.yOffset = evt.target.offsetTop - y;
 
 document.addEventListener ('mousemove', gal_scroll_drag_go,   true);
 document.addEventListener ('mouseup',   gal_scroll_drag_stop, true);
 evt.preventDefault ();
}

function gal_scroll_drag_go (evt) {
 var y;

 if (!scrollCtrl.inDrag)
  return;

 y = evt.pageY;
 evt.preventDefault ();
 
 var gal = scrollCtrl.active.scroll.gal;
 var h = gal.height - scrollCtrl.active.offsetHeight;

 y += scrollCtrl.yOffset;
 if (y < 0)
  y = 0;
 else if (y > h)
   y = h;
 
 scrollCtrl.active.style.top = y + 'px';
 if (y == h)
  y++;

 gal.scroll_to (Math.floor (y / gal.height * gal.max_rows) * gal.cols);
}

function gal_scroll_drag_stop (evt) {
 scrollCtrl.inDrag = false;
 scrollCtrl.active.className = 'scroll_button';
 scrollCtrl.active.scroll.gal.scroll_set ();

 document.removeEventListener ('mousemove', gal_scroll_drag_go,   true);
 document.removeEventListener ('mouseup',   gal_scroll_drag_stop, true);
}

scrollCtrl = new Object;

function Gallery (id, base, cols, rows, min, max, padding, speed, num_tn) {
 this.scroll_to = gal_scroll_to;
 this.scroll_up = gal_scroll_up;
 this.scroll_down = gal_scroll_down;
 this.scroll_set = gal_scroll_set;
 this.scroll_click = gal_scroll_click;
 this.scroll_drag_start = gal_scroll_drag_start;

 this.id = id;
 this.base = base;
 this.cols = cols;
 this.rows = rows;
 this.min = min;
 this.max = max;
 this.padding = padding;
 this.speed = speed;
 this.top = 0;
 this.num_tn = num_tn;
 this.max_rows = Math.ceil (num_tn / cols);
 this.height = (rows * (min + padding) - padding);

 this.div = document.getElementById ('gallery' + id);
 this.div.style.height = this.height + 'px';
 this.div.style.width = (cols * (min + padding) - padding) + 'px';

 this.scroll = this.div.firstChild;
 this.scroll.gal = this;
 this.scroll.style.left = (cols * (min + padding)) + 'px';
 this.scroll.style.height = this.height + 'px';

 this.scroll.button = this.scroll.firstChild;
 this.scroll.button.scroll = this.scroll;
 this.scroll.button.style.height = (Math.max (12, Math.floor (this.height * rows / this.max_rows)) - 3) + 'px';
 this.scroll.button.style.top = 0;

 this.tn = new Array (cols * rows);
 for (var i = 0; i < cols * rows; i++) {
  this.tn[i] = new ThumbNail (this, i);
 }
}

gals = new Array;