function divCreate(divId) {
  // Nao vamos criar uma div se ela ja' existe.
  var checar = document.getElementById(divId);
  if (checar != null) return checar;
  // A div nao existe ainda.
  var divTag = document.createElement('div');
  divTag.id = divId;
  return divTag;
}

function divCreateInner(divId, titulo, largura, altura) {
  // Max necessario: 716x456
  largura = largura + 20;
  altura = altura + 40;
  var divTag = divCreate(divId);
  divTag.setAttribute('align', 'center');
  divTag.style.margin = '0px auto';
  divTag.style.width = largura + 'px';
  divTag.style.height = altura + 'px';
  divTag.style.position = 'absolute';
  divTag.style.left = ((pageWidth() / 2) - (largura / 2)) + 'px';
  divTag.style.top = ((pageHeight() / 2) - (altura / 2)) + 'px';
  divTag.style.color = 'white';
  divTag.style.background = 'black';
  divTag.style.opacity = '0';
  divTag.style.filter = 'alpha(opacity=0)';
  divTag.style.visibility = 'hidden';
  return divTag;
}

function divCreateOuter(divId) {
  var divTag = divCreate(divId);
  divTag.setAttribute('align', 'center');
  divTag.style.margin = '0px auto';
  divTag.style.height = '100%';
  divTag.style.width = '100%';
  divTag.style.position = 'absolute';
  divTag.style.left = '0px';
  divTag.style.top = '0px';
  divTag.style.background = 'black';
  divTag.style.opacity = '0';
  divTag.style.filter = 'alpha(opacity=0)';
  divTag.style.visibility = 'hidden';
  return divTag;
}

function divDelete(divId) {
  var theDiv = document.getElementById(divId);
  theDiv.parentNode.removeChild(theDiv);
}

function divFadeIn(divId, topOpacity, tempoFade) {
  var fator = tempoFade / topOpacity;
  var startOp = .5 * topOpacity
  for (var n = startOp; n <= topOpacity; n++) {
    setTimeout('divOpacity(\'' + divId + '\', ' + n + ')',  n * fator);
  }
}

function divFadeOut(divId, startOpacity, tempoFade) {
  var fator = tempoFade / startOpacity;
  for (var n = startOpacity; n > 0; n--) {
    setTimeout('divOpacity(\'' + divId + '\', ' + n + ')',  (startOpacity - n) * fator);
  }
}

function divHide(theDiv) {
  theDiv.style.visibility = 'hidden';
}

function divInsert(theDiv) {
  // Essa div ja' existe?
  var checar = document.getElementById(theDiv.id);
  if (checar != null) return;
  document.body.appendChild(theDiv);
}

function divOpacity(divId, opacity) {
  var theDiv = document.getElementById(divId)
  theDiv.style.opacity = opacity / 100;
  theDiv.style.filter = 'alpha(opacity=' + opacity + ')';
}

function divShow(theDiv) {
  theDiv.style.visibility = 'visible';
}

function imageInsert(imgName, theDiv) {
  theDiv.innerHTML = imgName;
}

function imageClose(identificador) {
  var outerDiv = document.getElementById('div_fundo_' + identificador);
  var innerDiv = document.getElementById('div_imagem_' + identificador);
  divFadeOut('div_imagem_' + identificador, 100, 250);
  setTimeout('divFadeOut(\'div_fundo_' + identificador + '\', 50, 250)', 250);;
  setTimeout('divDelete(\'div_imagem_' + identificador + '\')', 450);
  setTimeout('divDelete(\'div_fundo_' + identificador + '\')', 750);
}

function imageShow(titulo, imagem, largura, altura, identificador) {
  var outerDiv = divCreateOuter('div_fundo_' + identificador);
  var innerDiv = divCreateInner('div_imagem_' + identificador, titulo, largura, altura);
  divInsert(outerDiv);
  divInsert(innerDiv);
  imageInsert(titulo + '<br/><a href="#"><img src="' + imagem +
      '" class="screenshot" onclick="imageClose(\'' + identificador + '\')"/></a>', innerDiv);
  divShow(outerDiv);
  divFadeIn('div_fundo_' + identificador, 50, 250);
  divShow(innerDiv);
  setTimeout('divFadeIn(\'div_imagem_' + identificador + '\', 100, 500)', 250);;
}


function pageWidth() {
  return document.documentElement.clientWidth;
}

function pageHeight() {
  return document.documentElement.clientHeight;
}