var etlLayers = new Array();
var _msecs = 80;
var _waitmsecs = 2000;
var _animsteps = 15;

function etlCoords(top, right, bottom, left) {
   this.top    = top;
   this.right  = right;
   this.bottom = bottom;
   this.left   = left;
}

function newetlLayer(id) {
   etlLayers[id] = new etlLayer(id, arguments[1], arguments[2], arguments[3]); //TODO add last arg for clipping
   return id;
}

function getObject(id) {
   if (document.getElementById)
      return document.getElementById(id);
   else if (document.all)
      return document.all[id];
   else if (document.layers)
      return document.layers[id];
   else
      return;
}

function etlResize(content_width) {
   var obj, i;
   var width = window.innerWidth ? window.innerWidth : document.body.clientWidth;

   for (i = 1; i < arguments.length; i++) {
      if (obj = getObject(arguments[i])) {
         if (width < content_width)
            obj.style.left = "0px";
         else
            obj.style.left = (width - content_width) / 2 +"px";
      }
   }
}

function etlLayer(id, events, overevent, outevent, clipping) {
   this.obj   = getObject(id) ? getObject(id) : window.alert("no object"+ id);
   this.id    = id;
   this.style = getObject(id).style;
   this.over  = false;
   this.wait  = false; //convert to int for smoother on mouseout waiting (or add new bool for moving = true/false)
   this.ext   = false;
   this.clip = clipping;
   this.timeout = false;

   if (events && overevent && outevent) {
      if (document.addEventListener) {
         this.obj.addEventListener("mouseover", overevent, false);
         this.obj.addEventListener("mouseout", outevent, false);
      }
      else if (document.attachEvent) {
         this.obj.attachEvent("onmouseover", overevent);
         this.obj.attachEvent("onmouseout", outevent);
      }
      else if (document.captureEvents) { //TODO this probably doesn't work ns4
         this.obj.captureEvents(Event.MOUSEMOVE);
         this.obj.onMouseMove = overevent;
      }
   }
}

//TODO simplify for setPos
etlLayer.prototype.setSource = function(top, right, bottom, left) {
   if (top !== false) {
      this.top       = top;
      this.style.top = top +"px";
   }
   if (right !== false) {
      this.right       = right;
      this.style.right = right +"px";
   }
   if (bottom !== false) {
      this.bottom       = bottom;
      this.style.bottom = bottom +"px";
   }
   if (left !== false) {
      this.left       = left;
      this.style.left = left +"px";
   }

   this.source = new etlCoords(top, right, bottom, left);
}

etlLayer.prototype.setDest = function(top, right, bottom, left) {
   this.dest = new etlCoords(top, right, bottom, left);
   this.direction = false;
}

etlLayer.prototype.setSourceClip = function(top, right, bottom, left) {
   this.clip = new etlCoords(top, right, bottom, left);
   this.sourceclip = new etlCoords(top, right, bottom, left);
   this.style.clip = "rect("+ top +"px "+ right +"px "+ bottom +"px "+ left +"px)";
}

etlLayer.prototype.setDestClip = function(top, right, bottom, left) {
   this.destclip = new etlCoords(top, right, bottom, left);
}

etlLayer.prototype.translate = function(x, y) {
   if (y && (this.top != undefined)) {
      this.top += y;
      this.style.top = this.top +"px";
   }
   else if (y && this.bottom != undefined) {
      this.bottom += y;
      this.style.bottom = this.bottom +"px";
   }

   if (x && this.left != undefined) {
      this.left += x;
      this.style.left = this.left +"px";
   }
   else if (x && this.right != undefined) {
      this.right += x;
      this.style.right = this.right +"px";
   }
}

etlLayer.prototype.setPos = function(target) {
   if (target.left != undefined && target.left !== false) {
      this.left = target.left;
      this.style.left = target.left +"px";
   }
   else if (target.right != undefined && target.right !== false) {
      this.right = target.right;
      this.style.right = target.right +"px";
   }

   if (target.top != undefined && target.top !== false) {
      this.top = target.top;
      this.style.top = target.top +"px";
   }
   else if (target.bottom != undefined && target.bottom !== false) {
      this.bottom = target.bottom;
      this.style.bottom = target.bottom +"px";
   }
}

etlLayer.prototype.setClip = function(c) {
   if (c === false) 
      return;
   this.clip.top = c.top;
   this.clip.right = c.right;
   this.clip.bottom = c.bottom;
   this.clip.left = c.left;
   this.style.clip = "rect("+ c.top +"px "+ c.right +"px "+ c.bottom +"px "+ c.left +"px)";
}

etlLayer.prototype.translateClip = function(t, s) {
   if (t === false || !s)
      return;

   this.clip.top += (t.top - this.clip.top)/ s;
   this.clip.right += (t.right - this.clip.right)/ s;
   this.clip.bottom += (t.bottom - this.clip.bottom)/ s;
   this.clip.left += (t.left - this.clip.left)/ s;

   this.style.clip = "rect("+ this.clip.top +"px "+ this.clip.right +"px "+ this.clip.bottom +"px "+ this.clip.left +"px)";
}

etlLayer.prototype.moveIE = function(tt, tr, tb, tl, ct, cr, cb, cl, s, i, d) {
   this.move(((tt || tr || tb || tl) ? new etlCoords(tt, tr, tb, tl) : false), ((ct || cr || cb || cl) ? new etlCoords(ct, cr, cb, cl) : false), s, i, d);
}

etlLayer.prototype.move = function(target, targetclip, s, id, d) {
   if (etlLayers[id].direction === d) {
      if (target)
	 etlLayers[id].translate((target.right - etlLayers[id].right)/ s, 
				 (target.top - etlLayers[id].top)/ s);
      if (targetclip)
         etlLayers[id].translateClip(targetclip, s);
   }
   else return;

   if (s > 0) {
      if (_moz)
         setTimeout(etlLayers[id].move, _msecs, target, targetclip, --s, id, d);
      else
         setTimeout("etlLayers[\""+ id +"\"].moveIE("+ 
                    (target ?  
                     target.top +","+ target.right +","+ target.bottom +","+ target.left +"," : 
                     "false, false, false, false, ")+
                    (targetclip ?
                     targetclip.top +","+ targetclip.right +","+ targetclip.bottom +","+ targetclip.left +"," :
                     "false, false, false, false, ")+
                     --s +",'"+ id +"',"+ d +");", _msecs);
   }
   else {
      if (target)
         etlLayers[id].setPos(target);
      if (targetclip)
         etlLayers[id].setClip(targetclip);
      etlLayers[id].wait = false;
      etlLayers[id].ext  = d;
   }
}

etlLayer.prototype.moveToDest = function() {
   this.move(this.dest, this.destclip, _animsteps, this.id, this.direction);
}

etlLayer.prototype.moveToSource = function() {
   this.move(this.source, this.sourceclip, _animsteps, this.id, this.direction);
}