function e4Panel (id, top, left, incX, incY, trkX, trkY) {
    this.x =  function() {
        return parseFloat (this.obj.style.left);
    }

    this.y =  function() {
        return parseFloat (this.obj.style.top);
    }

    this.movementX = function() {
        return this.x() - this.left;
    }

    this.movementY = function() {
        return this.y() - this.top;
    }

    this.reposition = function (left, top) {
        var movX = this.movementX();
        var movY = this.movementY();
        
        this.left = left;
        this.top = top;
      
        this.obj.style.left = this.left + movX;
        this.obj.style.top = this.top + movY;
    }

    this.move = function (direction) {
        var bMoving = false;
        var inc;
        var lim;
        
        lim = this.trkX;
        if (direction == -1) {
          lim = 0;
        }
        
        if (this.movementX() != lim) {
          bMoving = true;

          inc = this.movementX() + this.incX * direction - lim;
          if (Math.abs(inc) > Math.abs(this.incX)) {
              inc = this.incX * direction;
          } else {
              inc = Math.abs(inc) * this.dirX * direction;
          }
          this.obj.style.left = this.x() + inc;
        }         

        lim = this.trkY;
        if (direction == -1) {
          lim = 0;
        }
        if (this.movementY() != lim) {
          bMoving = true;

          inc = this.movementY() + this.incY * direction - lim;
          if (inc==0 || Math.abs(inc) > Math.abs(this.incY)) {
              inc = this.incY * direction;
          } else {
              inc = Math.abs(inc) * this.dirY * direction;
          }
          this.obj.style.top = this.y() + inc;
        }         
        
        return bMoving;         
    }
    
    this.changeMovement = function(incX, incY) {
        this.incX = incX;
        this.incY = incY;
        this.dirX = 0;
        this.dirY = 0;
        
        if (this.incX != 0) {
          this.dirX = this.incX / Math.abs(this.incX);
        }
        
        if (this.incY != 0) {
          this.dirY = this.incY / Math.abs(this.incY);
        }
    }

    this.incX = 0;
    this.incY = 0;
    this.dirX = 0;
    this.dirY = 0;    
    this.changeMovement(incX, incY);

    this.id = id;
    this.left = left;    
    this.top = top;
    this.trkX = trkX * this.dirX;
    this.trkY = trkY * this.dirY;

    this.obj = document.getElementById(id);
    this.obj.style.left = left;
    this.obj.style.top = top;
}

function e4Panels(callbackObject) {
    this.inc = 5;
    this.speed = 20;  

    this.pnlSup = new e4Panel('divCaseSup', 0, 0, 0, this.inc * -1, 0, 70);
    this.pnlCen = document.getElementById('divCaseCentral');
    this.pnlInf = new e4Panel('divCaseInf', 0, 0, 0, this.inc, 0, 70);
    
    this.direction = 1;
    this.isMoving = false;
    this.callbackObject = callbackObject; 
    
    this.reposition = function() {
      var lX, lY, obj;
    
      lX = document.getElementById('tabCentral').offsetLeft;
      lY = document.getElementById('tabRef').offsetTop;

      obj = document.getElementById('tabCentral');
      while (obj != null) {
         lY = lY + obj.offsetTop;
         obj = obj.offsetParent;
      }

      this.pnlSup.reposition (lX + 25, lY + 74)
      
      this.pnlCen.style.left = lX + 16;
      this.pnlCen.style.top = parseFloat(this.pnlSup.top) + parseFloat(this.pnlSup.obj.style.height) - 68;       
      this.pnlInf.reposition (lX + 25, parseFloat(this.pnlSup.top) + parseFloat(this.pnlSup.obj.style.height) + 4);
    }
    
    this.show = function() {
      this.pnlSup.obj.style.display = 'block';
      this.pnlInf.obj.style.display = 'block';
    } 

    this.open = function() {
      this.pnlCen.style.display = 'block';

      if (this.direction == -1) {
        this.direction = 1;
      }
      
      if (!this.isMoving) {
        this.move(); 
      } 
    }
    
    this.close = function() {
      if (this.direction == 1) {
        this.direction = -1;
      }
      
      if (!this.isMoving) {
        this.move(); 
      } 
    }
    
    this.move = function() {
       var bContinue = false;
    
       this.isMoving = true; 
       if (this.pnlSup.move(this.direction)) {
          bContinue = true;
       }
       if (this.pnlInf.move(this.direction)) {
          bContinue = true;
       }

       if (bContinue) { 
          window.setTimeout(this.callbackObject + '.move();', this.speed);
       } else {
          this.isMoving = false;
          if (this.direction == -1) {
             this.pnlCen.style.display = 'none';
          }
       }
    }
}