function HTMLImage(sys, formID, code, posX, posY, width, height, alt, value, type, criptografado) {
  this.create(sys, formID, code, posX, posY, width, height, '', value);
  this.report = false;

  this.alt = alt; 
  this.viewMode = "Estender";

  // Type = 1 (Upload) / Type = 2 (Digital Capture) / Type = 3 (URL)
  this.type = 1;
  if (type) {
    this.type = type;
  }

  // Criptografado? -> true = 1 / false = 0
  this.criptografado = false;
  if (criptografado) {
    this.criptografado = criptografado;
  }

  // URL
  this.url = value;
  this.hasImage = false;
}

HTMLImage.inherits(HTMLElementBase);
HTMLImage.prototype.name = 'HTMLImage';
HTMLImage.prototype.tabable = false;

HTMLImage.prototype.getGridShowValue = function(grid, row, column, oldContent, newDataArray) {
	if (newDataArray[column] != '' && newDataArray[column] != ' ') {
    return gridImage(this.url, this.width, this.height);
  } else {
    return "";
  }
}

HTMLImage.prototype.isBinary = true;


HTMLImage.prototype.setValue = function(value, checkDependences) {
	this.callMethod(HTMLElementBase, "setValue", value, checkDependences);
	this.img.src = value;
}

HTMLImage.prototype.setDescription = function(v) {
  if (this.img) {
    if (!this.divText) {
      if (v && v.length > 0) {
        this.divText = this.getDiv('', 0, 0, this.width, this.height, 6, true);
        this.divText.style.cursor = 'pointer';

        var table = getTable(1, 1, '100%', '100%');
        this.label = getLabel(v, true);
        table[CELLS][0][0].setAttribute('align', 'center');
        table[CELLS][0][0].setAttribute('valign', 'middle');
        table[CELLS][0][0].appendChild(this.label);
        this.divText.appendChild(table[TABLE]);

        this.context.appendChild(this.divText);

        this.label.onmousedown = function() { return false; };
        this.label.onselectstart = function() { return false; };

        this.attachEvent(this.divText, 'click', this.doOnClick);
        this.attachEvent(this.divText, 'mouseover', this.doOnMouseOver);
        this.attachEvent(this.divText, 'mouseout', this.doOnMouseOut);

      }
    } else {
      if (v && v.length > 0) {
        this.label.innerHTML = v;
      } else {
        this.context.removeChild(this.divText);
        this.divText = null;
        this.label = null;
      }
    }
  }
}

HTMLImage.prototype.setFont = function(f) {
  if (this.label)
    this.label.style.fontFamily = f;
}

HTMLImage.prototype.setSize = function(s) {
  if (this.label)
    this.label.style.fontSize = s;
}

HTMLImage.prototype.setWeight = function(w) {
  if (this.label) {
    if (w) this.label.style.fontWeight = "bold";
    else this.label.style.fontWeight = "normal";
   }
}

HTMLImage.prototype.setItalic = function(w) {
  if (this.label) {
    if (w) this.label.style.fontStyle = "italic";
    else this.label.style.fontStyle = "normal";
   }
}

HTMLImage.prototype.setUnderline = function(u) {
  if (this.label) {
    if (u) this.label.style.textDecoration = "underline";
    else this.label.style.textDecoration = "none";
  }
}

HTMLImage.prototype.setStrikeout = function(st) {
  if (this.label) {
    if (st) this.label.style.textDecoration = "line-through";
    else this.label.style.textDecoration = "none";
  }
}

HTMLImage.prototype.setColor = function(color) {
  this.color= color;
  if (this.label) this.label.style.color = color;
}

HTMLImage.prototype.setBGColor = function(color) {
  this.bgColor= color;
  if (this.label) this.label.style.backgroundColor = color;
}

HTMLImage.prototype.setEnabled = function(v) {
  this.enabled = v;

  var imageText = this.table.firstChild.firstChild.firstChild.firstChild;
  if (this.enabled) {
    imageText.style.color = "#000000";
  } else {
    imageText.style.color = "#CCCCCC";
  }
  
  visibleDiv(this.lockDiv, this.visible && !this.enabled);
}

HTMLImage.prototype.setReadOnly = function(v) {
  this.readonly = v;

  var imageText = this.table.firstChild.firstChild.firstChild.firstChild;
  if (!this.readonly) {
    imageText.style.color = "#000000";
  } else {
    imageText.style.color = "#CCCCCC";
  }
}

HTMLImage.prototype.designComponent = function(doc) {
  // Testa se é Relatório
  if(this.report) {
    this.enabled = false;
  }
  
  this.lockDiv = this.getDiv("WFRImageLock" + this.code, 0, 0, this.width, this.height, this.zindex + 1, false);
  this.lockDiv.innerHTML = '<table width=100% height=100%><tr><td>&nbsp;</td></tr></table>';
  this.context.appendChild(this.lockDiv);
  
  // Tabela para quando não existir imagem
  this.table = document.createElement("table");
  this.table.setAttribute('border', 0);
  this.table.setAttribute('cellSpacing', 1);
  this.table.setAttribute('cellPadding', 0);
  this.table.setAttribute('width', '100%');
  this.table.setAttribute('height', '100%');
  this.attachEvent(this.table, 'click', this.doOnClick);
  this.table.style.backgroundColor = "#CCCCCC";
  var tbody = document.createElement("tbody");
  this.table.appendChild(tbody);

  var tr = document.createElement("tr");
  tbody.appendChild(tr);

  var td = document.createElement("td");
  td.style.backgroundColor = "#FFFFFF";
  td.style.color = "#000000";
  var descTable;

  if (this.type == 1) {
    descTable = getLabel("(" + getLocaleMessage("LABEL.IMAGE") + ")");
  } else {
    descTable = getLabel("(" + getLocaleMessage("LABEL.DIGITAL_PRINTING") + ")");
  }
  td.appendChild(descTable);
  td.style.textAlign = 'center';
  td.style.verticalAlign = 'middle';
  td.style.cursor = 'pointer';
  tr.appendChild(td);

  this.divTable = this.getDiv('NOIMAGE', 0, 0, this.width, this.height, 5, true);
  this.divTable.appendChild(this.table);

  this.context.appendChild(this.divTable);
  visibleDiv(this.divTable, !this.hasImage);

  var actionClick = null;
  if ((this.onclick) || (this.type != 3) || (this.type == 3 && this.exhibitionType == 1)) {
  	actionClick = this.getAction('doOnClick');
  }
  
  // Imagem a ser mostrada na tela
  var urlImage = "";

  if (this.hasImage) {
    urlImage = this.url + (this.type != 3 ? "&datetime=" + new Date().getMilliseconds() : "");
  } else {
    urlImage = "about:blank";
  }

  if ((this.type == 1) || (this.type == 2) || (this.getViewMode() == "stretch")) {
  	this.img = new ImageObject().getImage(urlImage, this.alt, actionClick, this.height, this.width);
  }
  
  this.divWebcam = this.getDiv('WFRWebcam', this.width-52, this.height-24, 25, 24, 3, '');
  visibleDiv(this.divWebcam, false);
  this.context.appendChild(this.divWebcam);
  if (this.type == 1) {    
    // A imagem do zoom (inferior e a direita) aparece apenas quando o Tipo de Exibição for 0[Desktop] 
    if (this.exhibitionType == 0) {
      this.imgWebcam = new ImageObject().getImage(skin+'capture.gif', getLocaleMessage("LABEL.WEBCAM"), this.getAction('captureClickAction'), 24, 25);
      this.attachEvent(this.imgWebcam, 'mouseover', this.mouseAction);
      this.attachEvent(this.imgWebcam, 'mouseout', this.mouseAction);
      this.attachEvent(this.img, 'mouseover', this.doOnMouseOver);
      this.attachEvent(this.img, 'mouseout', this.doOnMouseOut);
      this.divZoom = this.getDiv('WFRZoom', this.width-25, this.height-24, 25, 24, 3, '');
      this.imgZoom = new ImageObject().getImage(skin+'img_zoom.gif', getLocaleMessage("LABEL.ZOOM_IMAGE"), this.getAction('zoomClickAction'), 24, 25);
      this.attachEvent(this.imgZoom, 'mouseover', this.mouseAction);
      this.attachEvent(this.imgZoom, 'mouseout', this.mouseAction);
      this.divZoom.appendChild(this.imgZoom);
      this.divWebcam.appendChild(this.imgWebcam);
      this.context.appendChild(this.divZoom);
      visibleDiv(this.divZoom, false);
    }
  }

  if (this.type == 1 || this.type == 2 || (this.getViewMode() == "stretch")) {
  	this.context.appendChild(this.img);
  } else {
	if(actionClick)
	  this.attachEvent(this.context, 'onclick', actionClick);
  	this.context.style.backgroundImage = "url("+urlImage+")";
  	this.context.style.backgroundPosition = "left";
  	this.context.style.backgroundRepeat = this.getViewMode();
  }
  
  if(this.type == 3 && this.exhibitionType != 2) {
     this.context.style.zIndex = 100000;
  }

  if (!this.enabled || this.readonly) {
    td.style.color = "#CCCCCC";
  }

  this.setDescription(this.description);
}

HTMLImage.prototype.setWidth = function(width) {
  width = parseInt(width);
  this.width = width;
  this.divTable.style.width = width;
  this.img.style.width = width;
  if (this.divText) this.divText.style.width = width;
}

HTMLImage.prototype.setHeight = function(height) {
  height = parseInt(height);
  this.height = height;
  this.divTable.style.height = height;
  this.img.style.height = height;
  if (this.divText) this.divText.style.height = height;
}

HTMLImage.prototype.mouseAction = function() {
  visibleDiv(this.divZoom, !isVisibleDiv(this.divZoom));
  visibleDiv(this.divWebcam, !isVisibleDiv(this.divWebcam));
}

HTMLImage.prototype.zoomClickAction = function() {
  WFRZoomImg(this.url, this.width, this.height);
}

HTMLImage.prototype.captureClickAction = function() {
  if (this.readonly || !this.enabled) {
    return;
  }
  
  openCapture(this.sys,this.formID,this.code);
}

HTMLImage.prototype.refresh = function(hasImage, navParam, newMd5) {
  
  var changed = this.md5 != newMd5;
  
  this.md5 = newMd5;
  this.hasImage = hasImage;

  if (this.hasImage) {
    if (this.type != 3 || this.getViewMode() == "stretch") {
      if (this.url.indexOf('?') == -1) {
        this.img.src = (this.url + "?datetime=" + new Date().getMilliseconds());
      } else {
        this.img.src = (this.url + "&datetime=" + new Date().getMilliseconds());
      }
    }
    if (this.divTable) {
      visibleDiv(this.divTable, false);
    }
    if (this.divText) {
      visibleDiv(this.divText, true);
    }
  } else {
    this.img.src = "about:blank";
    if (this.divTable) {
      visibleDiv(this.divTable, true);
    }
    if (this.divText) {
      visibleDiv(this.divText, false);
    }
  }
  if (this.onchange && changed)
    this.onchange.call(this);  
}

HTMLImage.prototype.setType = function(type) {
  this.type = type;
}

HTMLImage.prototype.customZoomClickAction = function() {
  var width = (this.zoomWidth > 0 ? this.zoomWidth : this.width);
  var height = (this.zoomHeight > 0 ? this.zoomHeight : this.height);

  if (document.webrunCustomZoom) {
    try {
      document.webrunCustomZoom.close();
    } catch (e) {
      //
    }
  }

  var urlValue = this.url;
  if (urlValue.indexOf("?")) {
    urlValue += "&";
  } else {
    urlValue += "?";
  }
  urlValue += ("time=" + new Date().getMilliseconds());
  document.webrunCustomZoom = customZoomImage(urlValue, width, height);
}

HTMLImage.prototype.doOnClick = function() {
  // Tipo de Exibição:
  // [0] Desktop -> Clica na miniatura do zoom para abrí-la maior. Faz também upload da imagem.
  // [1] Galeria -> Clica na imagem para abrí-la maior.
  // [2] Nenhum  -> Clique inativo. A não ser que o evento "Ao Clicar" esteja ativo.

  if (this.enabled && !this.readonly) {
  	if (this.onclick) {
      this.onclick.call(this);
    } else if (this.exhibitionType == 1) {
    	this.customZoomClickAction();
    } else if (this.exhibitionType != 2) {
    	switch (this.type) {
    		case 1: {
    		  openUpload(this.sys, this.formID, this.code, this.getCriptografado(), true);
    		  break;
    		}
    		
    		case 2: {
    		  openDigitalCapture(this.sys, this.formID, this.code, this.getCriptografado());
    		  break;	
    		}
    	}
    }
  }
}

HTMLImage.prototype.doOnMouseOver = function() {
  if (this.type == 1) {
    visibleDiv(this.divZoom, true);
    visibleDiv(this.divWebcam, true);
  }
}

HTMLImage.prototype.doOnMouseOut = function() {
  if (this.type == 1) {
    visibleDiv(this.divZoom, false);
    visibleDiv(this.divWebcam, false);
  }
}

HTMLImage.prototype.getCriptografado = function() {
  return this.criptografado ? "1" : "0";
}

HTMLImage.prototype.setCriptografado = function(criptografado) {
  this.criptografado = criptografado;
}

HTMLImage.prototype.getViewMode = function() {
  if (this.viewMode == "Estender")
    return "stretch";
  
  if (this.viewMode == "Centralizado")
    return "no-repeat";
  
  if (this.viewMode == "Repetir")
    return "repeat";
  
  if (this.viewMode == "Repetir na Horizontal")
    return "repeat-x";
  
  if (this.viewMode == "Repetir na Vertical")
    return "repeat-y";
  
  //Estendido ou em Branco
  return "stretch";
}

HTMLImage.prototype.setHint = function(hint) {
	this.callMethod(HTMLElementBase, "setHint", [hint]);
	
	if (this.img) {
    this.img.hint = hint;
    this.img.alt = hint;
    this.img.title = hint;
	}
	
	if (this.table) {
    this.table.hint = hint;
    this.table.alt = hint;
    this.table.title = hint;
  }
}

HTMLImage.prototype.getPermissionDescription = function() {
  if (!isNullable(this.permissionDescription)) {
    return this.permissionDescription;
  }
  return this.callMethod(HTMLElementBase, "getPermissionDescription");
}

HTMLImage.prototype.flush = function() {
  this.divText = null;
  this.label = null;
  this.table = null;
  this.divTable = null;
  this.img = null;
  this.divWebcam = null;
  this.imgWebcam = null;
	this.callMethod(HTMLElementBase, "flush");
}