/*
 DynEl.js
*/

/* 
  Constructor for DynEl class
*/

function DynEl(window, id, body, left, top, width)
{
  this.window = window;
  this.id = id;
  this.body = body;
  //CCS-P Style Sheet
  var d = window.document;
  d.writeln("<style type='text/css'>");
  d.writeln("#" + id + " {position: absolute;");
  if(left){
    d.write("left:" + left + ";");
  }
  if(top){
    d.write("top:" + top + ";");
  }
  if(width){
    d.write("width:" + width + ";");
  }
  d.writeln("}");
  d.writeln("</style>");
}


/*
  Navagator Methods
*/
  
if(navigator.appName.indexOf("Netscape") != -1){


  /*
    Output the element itself.  Must be called first before 
    other methods
  */
  DynEl.prototype.output = function(){
    var d = this.window.document;
    
    //Output the element
    d.writeln("<div id='" + this.id + "'>");
    d.writeln(this.body);
    d.writeln("</div>");
    
    //Save a reference to the layer object
    this.layer = d[this.id];
    
  }
  
  
  //Modify the element
  DynEl.prototype.moveTo = function(x, y){
    this.layer.moveTo(x, y);
  }
  DynEl.prototype.moveBy = function(x, y){
    this.layer.moveBy(x, y);
  }
  DynEl.prototype.show = function(){
    this.layer.visibility = "show";
  }
  DynEl.prototype.hide = function(){
    this.layer.visibility = "hide";
  }
  DynEl.prototype.setStackingOrder = function(z){
    this.layer.zIndex = z;
  }
  DynEl.prototype.setBgColor = function(color){
    this.layer.bgColor = color;
  }
  DynEl.prototype.setBgImage = function(image){
    this.layer.background.src = image;
  }

  
  //Query the element
  DynEl.prototype.getX = function(){
    return this.layer.left;
  }
  DynEl.prototype.getY = function(){
    return this.layer.top;
  }
  DynEl.prototype.getWidth = function(){
    return this.layer.width;
  }
  DynEl.prototype.getHeight = function(){
    return this.layer.height;
  }
  DynEl.prototype.getStackingOrder = function(){
    return this.layer.zIndex;
  }
  DynEl.prototype.isVisible = function(){
    return this.layer.visibility == "show";
  }
  
  /*
    Dynamically change the contents of the element
    Then arg(s) should be HTML strings which become the new body
  */
  DynEl.prototype.setBody = function(){
    for(var i = 0; i < arguments.length; i++){
      this.layer.document.writeln(arguments[i]);
    }
    this.layer.document.close();
  }
  
  /*
    Register handlers.  Ex "onmouseover", etc.
  */
  DynEl.prototype.addEventHandler = function(eventname, handler){
    //Capture events to this layer
    this.layer.captureEvents(DynEl._eventmasks[eventname]);
    var dynel = this;
    this.layer[eventname] = function(event){
      return handler(dynel, event.type, event.x, event.y,
                     event.which, event.which, 
                     ((event.modifiers & Event.SHIFT_MASK) != 0),
                     ((event.modifiers & Event.CTRL_MASK) != 0),
                     ((event.modifiers & Event.ALT_MASK) != 0));         
    }
  }

  /*
    Unregister handlers.  Ex "onmouseover", etc.
  */
  DynEl.prototype.removeEventHandler = function(eventname){
    //Capture events to this layer
    this.layer.releaseEvents(DynEl._eventmasks[eventname]);
    delete this.layer[eventname];
  }
  
  /*
    Array to map event name to type - need to add the rest of the events...
  */
  DynEl._eventmasks = {
    onabort:Event.ABORT, onblur:Event.BLUR, onchange:Event.CHANGE,
    onclick:Event.CLICK, ondbclick:Event.DBLCLICK,
    onmouseover:Event.MOUSEOVER, onmousedown:Event.MOUSEDOWN,
    onmouseup:Event.MOUSEUP
  };
  
}

/*
  IE Methods
*/
  
if(navigator.appName.indexOf("Microsoft") != -1){

  /*
    Output the element itself.  Must be called first before 
    other methods
  */
  DynEl.prototype.output = function(){
    var d = this.window.document;

    //Output the element
    d.writeln("<div id='" + this.id + "'>");
    d.writeln(this.body);
    d.writeln("</div>");
    
    //Save a reference to the layer object
    this.element = d.all[this.id];
    this.style = this.element.style;    
  }
  
  //Modify the element
  DynEl.prototype.moveTo = function(x, y){
    this.style.pixelLeft = x;
    this.style.pixelTop = y;
  }
  DynEl.prototype.moveBy = function(x, y){
    this.style.pixelLeft += x;
    this.style.pixelTop += y;
  }
  DynEl.prototype.show = function(){
    this.style.visibility = "visible";
  }
  DynEl.prototype.hide = function(){
    this.style.visibility = "hidden";
  }
  DynEl.prototype.setStackingOrder = function(z){
    this.style.zIndex = z;
  }
  DynEl.prototype.setBgColor = function(color){
    this.style.backgroundColor = color;
  }
  DynEl.prototype.setBgImage = function(image){
    this.style.backgroundImage = image;
  }

  //Query the element
  DynEl.prototype.getX = function(){
    return this.style.pixelLeft;
  }
  DynEl.prototype.getY = function(){
    return this.style.pixelTop;
  }
  DynEl.prototype.getWidth = function(){
    return this.style.width;
  }
  DynEl.prototype.getHeight = function(){
    return this.style.height;
  }
  DynEl.prototype.getStackingOrder = function(){
    return this.style.zIndex;
  }
  DynEl.prototype.isVisible = function(){
    return this.style.visibility == "show";
  }
  
  
  /*
    Dynamically change the contents of the element
    Then arg(s) should be HTML strings which become the new body
  */
  DynEl.prototype.setBody = function(){
    var body = "";
    for(var i = 0; i < arguments.length; i++){
      body += arguments[i] + "\n";
    }
    this.element.innerHTML = body;
  }
  
  /*
    Register handlers.  Ex "onmouseover", etc.
  */
  DynEl.prototype.addEventHandler = function(eventname, handler){
    //Capture events to this layer
    var dynel = this;
    this.element[eventname] = function(){
      var e = dynel.window.event;
      e.cancelBubble = true;
      return handler(dynel, e.type, e.x, e.y,
                     e.button, e.keyCode, 
                     e.shiftKey,
                     e.ctrkKey,
                     e.altKey);         
    }
  }

  /*
    Unregister handlers.  Ex "onmouseover", etc.
  */
  DynEl.prototype.removeEventHandler = function(eventname){
    //Capture events to this layer
    delete this.element[eventname];
  }
  

}