/** 
 * @projectDescription Centraliza um objeto HTML na página com um elemento por baixo de cor preta sobrepondo todos os outros da página
 *                     Testado em: IE6 IE7 FF2.0 Safari-1.3.2
 *
 * @author  Roberto Robson (Bode) rnogueira@uolinc.com
 * @version 2.5.beta.3
 * @since   1.0
 */

/**
 * Aplica opacidade sobrepondo todos os elementos da página
 * @type {Object}
 */
FullOpacity = {

  /**
   * Seletor de elementos HTML por ID
   * @param {Object} id
   * @return {Object} HTML Element
   */
  $id : function(id){
    return document.getElementById(id);
  },
  
  /**
   * Definições para IE
   */
  MSIE : {
    status : navigator.userAgent.indexOf('MSIE')>=0 ? true : false
  },
    
  /**
   * Id do elemento HTML que vai ser centralizado
   */
  HTMLElementId : null,
  
  /**
   * Thumbnail encontrado
   */
  imgTb : null,
  
  /**
   * URL para realizar requisição quando exibir o elemento centralizado com opacidade, normalmente utilizado para contabilizar audiência
   */
  hit : "",
  
  /**
   * Callback executado quando o fullopacity e fechado
   */
  hideCallback : null,

  init : function(){
    var e = "eval(document.compatMode && document.compatMode=='CSS1Compat')";
    var de ="documentElement";
    var db ="document.body";
    var st = "scrollTop";
    var sl = "scrollLeft";
    var cw = "clientWidth";
    var ch = "clientHeight";
    document.write("<style>\
      #FullOpacity {position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#000;opacity:.45;-moz-opacity:.45;filter:alpha(opacity=45)}\
      * html #FullOpacity {position:absolute;\
        top:expression("+e+" ? "+de+"."+st+"+'px' : "+db+"."+st+"+'px');\
        left:expression("+e+" ? "+de+"."+sl+"+'px' : "+db+"."+sl+"+'px');\
        height:expression("+e+" ? "+de+"."+ch+"+'px' : "+db+"."+ch+"+'px');\
        width:expression("+e+" ? "+de+"."+cw+"+'px' : "+db+"."+cw+"+'px');}\
      #FullOpacityPopUp.carregandoImg {background:#fff url(http://img.uol.com.br/libs/loading.gif) no-repeat 50%;min-width:100px;min-height:100px}\
      #FullOpacityPopUp.carregandoImg #FullOpacityPopUpImg {display:none;visibility:hidden;}\
      #FullOpacityPopUp.carregado {visibility:hidden;}\
      #FullOpacityPopUp.carregado #FullOpacityPopUpImg {display:block;visibility:inherit;}\
      #FullOpacityPopUp.exibindo {visibility:visible;}\
      .FullOpacityPopUpFixed {position:fixed !important;top:50% !important;left:50% !important;z-index:1001 !important;\
        margin-top:expression(this."+ch+"/2*-1+'px');\
        margin-left:expression(this."+cw+"/2*-1+'px');\
      }\
      * html .FullOpacityPopUpFixed {position:absolute;background-color:blue;margin:0;\
         top:expression("+e+"\
         ? "+de+"."+st+"+(("+de+"."+ch+"-this."+ch+")/2)+'px'\
         : "+db+"."+st+"+(("+db+"."+ch+"-this."+ch+")/2)+'px'\
         );\
         left:expression("+e+"\
         ? "+de+"."+sl+"+(("+de+"."+cw+"-this."+cw+")/2)+'px'\
         : "+db+"."+sl+"+(("+db+"."+cw+"-this."+cw+")/2)+'px'\
         );\
      }\
      body.fullOpacityShow embed,\
      body.fullOpacityShow object {visibility:hidden}\
      body.fullOpacityShow .FullOpacityPopUpFixed embed,\
      body.fullOpacityShow .FullOpacityPopUpFixed object {visibility:visible}\
    </style>");
  },
  
  /**
   * Defini URL do hit
   * @type {Method}
   * @param {String} url url do hit
   */
  setHit : function(url){
    this.hit = url;
  },
  
  /**
   * Fechar FullOpacity
   * @type {Method}
   */
  hide : function(){
    this.$id('FullOpacity').style.display='none';
    this.$id(this.HTMLElementId).style.display='none';
    this.$id(this.HTMLElementId).className = this.oldClassName;
    if(typeof this.hideCallback == "function")
      this.hideCallback();
    document.getElementsByTagName('body')[0].className=document.getElementsByTagName('body')[0].className.replace(/fullOpacityShow/g,'');
  },
  
  /**
   *  Cria elemento HTML com opacidade
   *  @type {Method}
   */
  appendFullOpacity : function(){
    if(!this.$id('FullOpacity')){
      var HTML_DIV_FullOpacity=document.createElement('div');
      HTML_DIV_FullOpacity.id="FullOpacity";
      HTML_DIV_FullOpacity.onclick=function(){FullOpacity.hide()};
      document.getElementsByTagName('body')[0].childNodes[0].parentNode.insertBefore(HTML_DIV_FullOpacity,document.getElementsByTagName('body')[0].childNodes[0]);
    }
  },
  
  /**
   * Procura por Thumbnail, São identificados pela class="fotb" ou class="shot" e devem estar sempre dentro de um "a href"
   * É necessário do elemento de id FullOpacityPopUpImg para que a imagem apareça
   * @type {Method}
   * @param {Object} Id Elemento HTML
   */
  findThumbnail : function(id){
    if(typeof(id)!="string"){
      var imgs=id.getElementsByTagName('img');
      this.imgTb="";
      for(i=0;i<imgs.length;i++){
        if(imgs[i].className.indexOf("fotb")>=0 || imgs[i].className.indexOf("shot")>=0)
          this.imgTb=imgs[i].src;
      }
      if(this.imgTb!="" && this.$id('FullOpacityPopUpImg')){
       this.$id('FullOpacityPopUpImg').innerHTML="";
       this.$id(this.HTMLElementId).className+=" carregandoImg";
       setTimeout(function(){FullOpacity.$id('FullOpacityPopUpImg').innerHTML="<img src=\""+FullOpacity.imgTb.replace("t.",".")+"\" onload=\"FullOpacity.showImage()\" />"},200);
      }
    }
  },

  /**
   * Exibe elemento centralizado com opacidade
   * @type {Method}
   * @param {Id} Referencia do Elemento HTML a ser centralizado
   */
  show : function(id, callback){
    
    this.hideCallback = callback || null;

    this.appendFullOpacity();
    
    if(document.getElementsByTagName('body')[0].className.indexOf('fullOpacityShow')==-1)
      document.getElementsByTagName('body')[0].className+=' fullOpacityShow';
    
    this.HTMLElementId=(typeof(id)=="string"? id : "FullOpacityPopUp" );
    if(!this.$id(this.HTMLElementId) && this.HTMLElementId=="FullOpacityPopUp"){
      var HTML_POPUP = document.createElement("div");
      HTML_POPUP.id=HTMLElementId;
      HTML_POPUP.innerHTML="<div id=\"FullOpacityPopUpImg\"></div>";
      document.getElementsByTagName('body')[0].childNodes[0].parentNode.insertBefore(HTML_POPUP,document.getElementsByTagName('body')[0].childNodes[0]);
    }
    this.oldClassName=this.$id(this.HTMLElementId).className;
    
    this.findThumbnail(id);

    this.$id(this.HTMLElementId).className+=" FullOpacityPopUpFixed";
    this.$id('FullOpacity').style.display=this.$id(this.HTMLElementId).style.display='block';

    this.setPosition();

    /**
     * Move objeto a ser centralizado para depois do BODY para evitar problemas de relatividade
     */
    document.getElementsByTagName('body')[0].childNodes[0].parentNode.insertBefore(this.$id(this.HTMLElementId),document.getElementsByTagName('body')[0].childNodes[0]);

    if(this.hit!='')
      this.requestHit();

  },
  
  /**
   * Exibi imagem encontrada nos thumbs depois que estiver carregado
   * @type {Method}
   */
  showImage : function(){
    this.$id(this.HTMLElementId).className = this.$id(this.HTMLElementId).className.replace("carregandoImg","carregado");
    this.setPosition();
    this.$id(this.HTMLElementId).className = this.$id(this.HTMLElementId).className.replace("carregado","exibindo");
  },

  /**
   *  Posiciona elementos no centro da tela
   *  @type {Method}
   *  @param {Boolean} ativarIntervalo Caso seja 1 executa de tempos em tempos o metodo setPosition().
   */
  setPosition : function(){
    if (this.MSIE.status == false) {
      this.$id(this.HTMLElementId).style.marginLeft = ((this.$id(this.HTMLElementId).offsetWidth / 2) * -1) + "px";
      this.$id(this.HTMLElementId).style.marginTop = ((this.$id(this.HTMLElementId).offsetHeight / 2) * -1) + "px";
    }
  },

  requestHit : function(){
    var id="fullOpacityHit";
    var gE=this.$id(id);
    var ts = (new Date()).getTime();
    var HTML;
    if(gE)
      gE.parentNode.removeChild(gE);
    
    HTML=document.createElement('div');
    HTML.id=id;
    var hitTemp = this.hit+(this.hit.indexOf("?")==-1?"?":"&")+"ts="+ts;
    if(this.imgTb!="")
      hitTemp += (hitTemp.indexOf("?")==-1?"?":"&")+"img="+escape(this.imgTb);
    HTML.innerHTML="<iframe src=\""+hitTemp+"\" name=\""+id+ts+"\" style=\"width:1px;height:1px;position:absolute;top:-1000px;left:-1000px\"></iframe>";
    document.getElementsByTagName('body')[0].insertBefore(HTML,document.getElementsByTagName('body')[0].firstChild);
  }

},

/**
 * Previnir chamada de função antiga
 * @type {Function}
 * @param {String} Id Elemento a ser centralizado
 */
function FullOpacityShow(t){
  FullOpacity.show(t);
}

FullOpacity.init();