scrollLayers = {};
scrollLayer.speed = 100;

function scrollLayer(wnId, lyrId, cntId) {
  this.id = wnId; scrollLayers[this.id] = this;
  this.animString = "scrollLayers." + this.id;
  this.loadLayer(lyrId, cntId);
}

scrollLayer.prototype.loadLayer = function(lyrId, cntId) {
  if (!document.getElementById) return;
  var wndo, lyr;
  if (this.lyrId) {
    lyr = document.getElementById(this.lyrId);
    lyr.style.visibility = "hidden";
  }
  lyr = document.getElementById(lyrId);
  wndo = document.getElementById(this.id);
  lyr.style.top = this.y = 0; lyr.style.left = this.x = 0;
  this.maxY = (lyr.offsetHeight - wndo.offsetHeight > 0)? lyr.offsetHeight - wndo.offsetHeight: 0;
  this.wd = cntId? document.getElementById(cntId).offsetWidth: lyr.offsetWidth;
  this.maxX = (this.wd - wndo.offsetWidth > 0)? this.wd - wndo.offsetWidth: 0;
  this.lyrId = lyrId;
  lyr.style.visibility = "visible";
  this.on_load(); this.ready = true;
}

scrollLayer.prototype.on_load = function() {}

scrollLayer.prototype.shiftTo = function(lyr, x, y) {
  lyr.style.left = (this.x = x) + "px"; 
  lyr.style.top = (this.y = y) + "px";
}

scrollLayer.prototype.startScroll = function(dir, speed) {
  if (!this.ready) return; if (this.timerId) clearInterval(this.timerId);
  this.speed = speed || scrollLayer.speed;
  this.lyr = document.getElementById(this.lyrId);
  if (dir == "up" || dir == "down") {
    this.xdir = 0; this.endX = parseInt(this.lyr.style.left);
    this.ydir = (dir == "down")? -1: 1; this.endY = (dir == "down")? -this.maxY: 0;
  } else if (dir == "right" || dir == "left") {
    this.ydir = 0; this.endY = parseInt(this.lyr.style.top);
    this.xdir = (dir == "right")? -1: 1; this.endX = (dir == "right")? -this.maxX: 0;
  } else {
    alert("Movimiento no soportado.");
    return; 
  }
  this.lastTime = ( new Date() ).getTime();
  this.on_scroll_start();  
  this.timerId = setInterval(this.animString + ".scroll()", 10); 
}

scrollLayer.prototype.scroll = function() {
  var now = ( new Date() ).getTime();
  var x = this.x + this.xdir * (now - this.lastTime)/1000 * this.speed;
  var y = this.y + this.ydir * (now - this.lastTime)/1000 * this.speed;
  if ( ( this.xdir == -1 && x > -this.maxX ) || ( this.xdir == 1 && x < 0 ) || 
    ( this.ydir == -1 && y > -this.maxY ) || ( this.ydir == 1 && y < 0 ) ) {
    this.lastTime = now;
    this.shiftTo(this.lyr, x, y);
    this.on_scroll(x, y);
  } else {
    clearInterval(this.timerId); this.timerId = 0;
    this.shiftTo(this.lyr, this.endX, this.endY);
    this.on_scroll_end(this.endX, this.endY);
  }
}

scrollLayer.prototype.stopScroll = function() {
  if (!this.ready) return;
  if (this.timerId) clearInterval(this.timerId);
  this.timerId = 0;  this.lyr = null;
}
  
scrollLayer.prototype.on_scroll = function() {}
scrollLayer.prototype.on_scroll_start = function() {}
scrollLayer.prototype.on_scroll_end = function() {}
  
function GeckoTableBugFix() {
  var i, wndo, holderId, holder, x, y;
	if ( navigator.userAgent.indexOf("Gecko") > -1 ) {
    scrollLayer.hold = [];
    for (i=0; arguments[i]; i++) {
      if ( scrollLayers[ arguments[i] ] ) {
        wndo = document.getElementById( arguments[i] );
        holderId = wndo.parentNode.id;
        holder = document.getElementById(holderId);
        document.body.appendChild( holder.removeChild(wndo) );
        wndo.style.zIndex = 1000;
        x = holder.offsetLeft; y = holder.offsetTop;
        wndo.style.left = x + "px"; wndo.style.top = y + "px";
        scrollLayer.hold[i] = [ arguments[i], holderId ];
      }
    }
   window.addEventListener("resize", rePositionGecko, true);
  }
}

function rePositionGecko() {
  var i, wndo, holder, x, y;
  if (scrollLayer.hold) {
    for (i=0; scrollLayer.hold[i]; i++) {
      wndo = document.getElementById( scrollLayer.hold[i][0] );
      holder = document.getElementById( scrollLayer.hold[i][1] );
      x = holder.offsetLeft; y = holder.offsetTop;
      wndo.style.left = x + "px"; wndo.style.top = y + "px";
    }
  }
}