/**
 * Método construtor do HTMLButton. Responsável por criar o componente Button.
 * @param sys - Indica o código do sistema.
 * @param formID - Indica o código do formulário.
 * @param posX - Posição do componente na tela em relação ao eixo X.
 * @param posY - Posição do componente na tela em relação ao eixo Y.
 * @param width - Largura do componente.
 * @param heigth - ALtura do componente.
 * @param description - Descricao do componente. 
 * @param img - imagem do button.
 **/
function HTMLButton(sys, formID, code, posX, posY, width, height, description, img) {
  this.create(sys, formID, code, posX, posY, width, height, description, '');
  if (img) this.img = img; else this.img = '';
  this.hint = '';
  preload(skin+'button_back_over.gif');
  this.description = this.description.replace(/\&/g, '');
}

/**
 * Herança do objeto.
 **/
HTMLButton.inherits(HTMLElementBase);

/**
 * Setando propriedades do componente.
 **/
HTMLButton.prototype.name = 'HTMLButton';
HTMLButton.prototype.tabKeys = [9];
HTMLButton.prototype.tabable = true;
HTMLButton.prototype.zindex = 100000;
HTMLButton.prototype.isBinary = true;

/**
 * @deprecated 
 **/
HTMLButton.prototype.setSkin = function(s) {
  skin = s;
}

/**
 * Seta a descrição do componente button (objeto HTMLButton).
 * @param description - Descrição do componente. 
 **/
HTMLButton.prototype.setDescription = function(description) {
  this.description = description;
  
  // firstChild is the anchor (link). firstChild.firstChild is the node that contains the text
  if (this.label.firstChild && this.label.firstChild.firstChild) {
    this.label.firstChild.firstChild.nodeValue = description;
  }
  
  if (this.description.length > 0 && this.image)
    this.space.setAttribute('width', 3);
  else
    this.space.setAttribute('width', 0);
    
  this.setEnabled(this.enabled);  
  this.setReadOnly(this.readOnly);  
}

/**
 * Seta a cor da fonte da descrição do componente.
 * @param color - cor da fonte. 
 **/
HTMLButton.prototype.setColor = function(color) {
  this.color= color;
  this.label.style.color = color;
}

/**
 * Seta a fonte da descricação do componente.
 * @param f - fonte. 
 **/
HTMLButton.prototype.setFont = function(f) {
  this.label.style.fontFamily = f;
}

/**
 * Seta o tamanho da fonte da descrição do componente.
 * @param s - size. 
 **/
HTMLButton.prototype.setSize = function(s) {
  this.label.style.fontSize = s;
}

/**
 * Seta a largura do button.
 * @param width - largura. 
 **/
HTMLButton.prototype.setWidth = function(width) {
  width = parseInt(width);
  this.width = width;
  this.div.style.width = width;
  this.table.style.width = width;
}

/**
 * Seta a altura do button.
 * @param height - altura.
 **/
HTMLButton.prototype.setHeight = function(height) {
  height = parseInt(height);
  this.height = height;
  this.div.style.height = height;
  this.table.style.height = height;
}

/**
 * @deprecated 
 **/
HTMLButton.prototype.setImage = function(img) {
  this.img = img; 
  
  this.imageTable.firstChild.firstChild.innerHTML = '';

  if (this.img && this.img.length > 0) {

    this.image = new ImageObject();
    this.image = this.image.getImage(this.getInnerImage(), this.hint);

    this.imageTable.firstChild.firstChild.appendChild(this.image);
  }  else {
    this.image = null;
  }

  if (this.description.length > 0 && this.image)
    this.space.setAttribute('width', 3);
  else
    this.space.setAttribute('width', 0);
}

/**
 * 
 **/
HTMLButton.prototype.getInnerImage = function() {
  var r = this.img;
   if (!this.enabled)
    if (this.img.indexOf('_des.gif') == -1)
       r = this.img.replace('.gif', '_des.gif');
  return r;
}

/**
 * Seta o evento onClick do componente.
 **/
HTMLButton.prototype.setOnClick = function(evt) {
  this.onclick = evt;
  this.setEnabled(this.enabled);
}

/**
 * 
 **/
HTMLButton.prototype.updateEvent = function(evt) {
  if (evt == 'click') {
    this.setEnabled(this.enabled);
  }
}

/**
 * Seta a propriedade ReadOnly do componente.
 * @param v - TRUE indica que o componente é somente leitura. Também remove o ovento 'click', 'mouseover' do mesmo. 
 **/
HTMLButton.prototype.setReadOnly = function(v) {
  this.readOnly = v;
  if (this.onclick) {
    if (this.readOnly) {
      this.btdiv.className = '';
      this.removeEvent(this.btdiv, 'click');
      this.removeEvent(this.btdiv, 'mouseover');
      if (this.image) {
        this.removeEvent(this.image, 'click');
      }
    } else {
      this.btdiv.className = 'cur';
      this.attachEvent(this.btdiv, 'click', this.clickAction);
      this.attachEvent(this.btdiv, 'mouseover', this.buttonOver);
      if (this.image) {
        this.attachEvent(this.image, 'click', this.clickAction);
      }
    }
  }
}

/**
 * Seta a propriedade Enable do componente.
 * @param v - FALSE desabilita o botão e também remove os seus eventos 'click' e 'mouseouver'.
 **/
HTMLButton.prototype.setEnabled = function(v) {
  this.enabled = v;

  if (!this.enabled || !this.onclick) {
    this.btdiv.className = '';
    this.removeEvent(this.btdiv, 'click');
    this.removeEvent(this.btdiv, 'mouseover');
    this.removeEvent(this.btdiv, 'mouseout');
  } else {
    this.btdiv.className = 'cur';
    this.attachEvent(this.btdiv, 'click', this.clickAction);
    this.attachEvent(this.btdiv, 'mouseover', this.buttonOver);
    this.attachEvent(this.btdiv, 'mouseout', this.buttonOut);    
  }

  if (this.image) {
    var img = this.image.src;
    if (!this.enabled || !this.onclick) {
      if (img.indexOf('_des.gif') == -1)
        this.image.src = img.replace('.gif', '_des.gif');
        this.removeEvent(this.image, 'click');
    } else {
      if (img.indexOf('_des.gif') != -1)
        this.image.src = img.replace('_des.gif', '.gif');
        this.attachEvent(this.image, 'click', this.clickAction);
    }
  }

  if (this.description) {
    if (!this.enabled || !this.onclick) {
      this.label.firstChild.style.color = '#999999';
    } else {
      if (this.color)
         this.label.firstChild.style.color = this.color;
      else
         this.label.firstChild.style.color = '';
    }
  }

  this.button.setAttribute('background', skin+'button_back.gif');
}

/**
 * Responsável por desenhar o HTML do componente button. 
 * @param doc - documento onde o componente será inserido.
 **/
HTMLButton.prototype.designComponent = function(doc) {
  // Garantir texto para foco na tabulação
  if (!this.img && this.description.length == 0) {
    this.description = "&nbsp";
  }

	// Limita o tamanho da div do botão ao definido no maker
  this.div.style.overflow = "hidden";

  preload(this.img);
  preload(this.img.replace('.gif', '_des.gif'));

  var b ="<table width=\""+this.width+"\" height=\""+this.height+"\"  border=0 cellspacing=0 cellpadding=0>";
  b += "<tr><td width=1 height=1><img src=\""+skin+"button_top_left.gif\"></td><td height=1 background=\""+skin+"button_top.gif\"></td>";
  b += "<td width=1 height=1><img src=\""+skin+"button_top_right.gif\"></td></tr>";
  b += "<tr><td width=1 background=\""+skin+"button_left.gif\"></td>";
  b += "<td id=\"HTMLButton"+this.code+"\"  align=\"center\" background=\""+skin+"button_back.gif\" width=\"100%\">";

  // Botão
  b += "<table border='0' cellspacing='0' cellpadding='0' >";
  b += "<tr>";

  // Imagem do botão
  b += "<td>";
  if (this.img && this.img.length > 0) {
    if (this.description.length > 0) {
      b += "<img src='"+this.getInnerImage()+"' alt='"+this.hint+"' title='"+this.hint+"' border='0'>";
    } else {
      b += "<a href='#' class='clickText'><img src='"+this.getInnerImage()+"' alt='"+this.hint+"' title='"+this.hint+"' border='0'></a>";
    }
  }
  b += "</td>";

  // Espaço
  b += "<td";
  if (this.description.length > 0 && this.img) b += " width='3'";
  b += "></td>";

  // Texto do botão
  b += "<td>";
  if (this.description.length > 0) {
    b += "<a href='#' class='clickText'>"+this.description+"</a>";
  }
  b += "</td>";
  b += "</tr>";
  b += "</table>";

  b += "</td>";
  b += "<td width=1 background=\""+skin+"button_right.gif\"></td></tr>";
  b += "<tr><td width=1 height=1><img src=\""+skin+"button_down_left.gif\"></td><td height=1 background=\""+skin+"button_down.gif\"></td>";
  b += "<td width=1 height=1><img src=\""+skin+"buttton_down_right.gif\"></td></tr></table>";

  this.div.innerHTML = b;

  // Table do botão (Já vai até o TBODY)
  this.button = this.div.firstChild.firstChild.childNodes[1].childNodes[1];

  this.imageTable = this.button.firstChild.firstChild;
  this.table = this.div.firstChild;
  this.space = this.imageTable.firstChild.childNodes[1];
  this.label = this.imageTable.firstChild.childNodes[2];

  if (this.description.length > 0) {
    this.clickArea = this.imageTable.firstChild.childNodes[2].firstChild;
  } else if (this.img && this.img.length > 0) {
    this.clickArea = this.imageTable.firstChild.firstChild.firstChild;
  }

  if (this.img && this.img.length > 0) {
    this.image = this.imageTable.firstChild.firstChild.firstChild;

    if (this.image.tagName.toUpperCase() == "A") this.image = this.image.firstChild;
  }

  this.btdiv = document.createElement("div");
  this.btdiv.style.width = '100%';
  this.btdiv.style.height = '100%';
  this.btdiv.style.left = '0';
  this.btdiv.style.top = '0';
  this.btdiv.style.position = 'absolute';
  this.btdiv.style.zIndex = 11;

  if (this.onclick) {
    this.btdiv.className = 'cur';
    this.attachEvent(this.btdiv, 'mouseover', this.buttonOver);
    this.attachEvent(this.btdiv, 'mouseout', this.buttonOut);
    this.attachEvent(this.btdiv, 'click', this.clickAction);
    if (this.image) {
      this.attachEvent(this.image, 'click', this.clickAction);
    }
  }

  this.input = this.clickArea;

  this.onfocus2 = this.onfocus;
  this.onblur2 = this.onblur;
  this.onfocus = this.buttonFocus;
  this.onblur = this.buttonBlur;

  this.btdiv.innerHTML = "<table border='0' cellspacing='0' cellpadding='0' width='100%' height='100%'><tr><td></td></tr></table>";

  this.context.appendChild(this.btdiv);
  this.setEnabled(this.enabled);
}

/**
 * Método disparado no evento 'mouseover' do componente button. Muda o backgroundo do componente.
 **/
HTMLButton.prototype.buttonOver = function() {
  if (this.onclick) {
    this.lastImage = this.button.getAttribute("background");
    this.button.setAttribute('background', skin+'button_back_over.gif');
  }
}

/**
 * Método disparado no evento 'mouseout' do componente button.
 **/
HTMLButton.prototype.buttonOut = function() {
  if (this.onclick) {
    this.button.setAttribute('background', this.lastImage);
  }
}

/**
 * Evento onFocus do componente HTMLButton.
 **/
HTMLButton.prototype.buttonFocus = function() {
  this.lastImage = this.button.getAttribute('background');
  this.button.setAttribute('background', skin+'button_back_focus.gif');
  this.focuzed = true;
  if (this.onfocus2) this.onfocus2();
}

/**
 * Evento onBlur do componente HTMLButton.
 **/
HTMLButton.prototype.buttonBlur = function() {
  this.button.setAttribute('background', skin+'button_back.gif');
  this.focuzed = false;
  if (this.onblur2) this.onblur2();
}

/**
 * Evento onfocus herdado.
 **/
HTMLButton.prototype.focus = function() {
  var r = this.enabled && this.visible && !this.readonly && !this.resizable && !this.draggable;
  if (this.doc) r = r && isVisibleDiv(this.doc);
  if (r && this.clickArea) this.clickArea.focus();
  return r;
}

/**
 * Evento onblur herdado.
 **/
HTMLButton.prototype.blur = function() {
  var r = this.enabled && this.visible && !this.readonly;
  if (r && this.clickArea) this.clickArea.blur();
  return r;
}

/**
 * Executa o evento onclick do componente.
 **/
HTMLButton.prototype.click = function() {
  if (this.btdiv.onclick) this.btdiv.onclick.call(this);
}

HTMLButton.prototype.finalizeAction = function(filename) {
  if (this.onfinalize)
    this.onfinalize.call(this, filename);
}

HTMLButton.prototype.refresh = function(arg, filename) {
  if (filename) {
    this.finalizeAction(filename);
  } else {
    this.callMethod(HTMLElementBase, 'refresh');
  }
}

HTMLButton.prototype.createUploadAction = function() {
  this.setOnClick(this.getAction(this.openUpload));
}

/**
 * Chama Upload.jsp para realizar Upload de arquivos.
 **/
HTMLButton.prototype.openUpload = function() {
  var w = 250;
  var h = 50;
  var left = (screen.width - w) / 2;
  var top = (screen.height - h) / 2;
  MM_openBrWindow('upload.jsp?sys='+this.sys+'&formID='+this.formID+'&comID='+this.code+'&type=R','UPLOAD'+this.formID+this.code,'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width='+w+',height='+h+',left='+left+',top='+top);
}

HTMLButton.prototype.getGridShowValue = function(grid, row, column, oldContent, newDataArray) {
  return newDataArray[column];
}

HTMLButton.prototype.clickAction = function(e, o) {
	this.focus();
  this.callMethod(HTMLElementBase, "clickAction", [e, o]);
}

/**
 * Seta a propriedade Hint do HTMLButton.  
 * @param hint - valor da propriedade 'Dica' do componente no MAKER.
 **/
HTMLButton.prototype.setHint = function(hint) {
	this.callMethod(HTMLElementBase, "setHint", [hint]);
	
	if(this.btdiv) {
    this.btdiv.alt = hint;
    this.btdiv.title = hint;
	}
}