//define tamanho da viewport
var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined'){
    viewportwidth = window.innerWidth;
    viewportheight = window.innerHeight;
}else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0){// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    viewportwidth = document.documentElement.clientWidth;
    viewportheight = document.documentElement.clientHeight;
}else{// older versions of IE
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
    viewportheight = document.getElementsByTagName('body')[0].clientHeight;
}

//executa a configuracao e executa uma vez cada acao para nao dar bug no IE
$(document).ready(function() {
   setupImgBox();
   anima();
   fechaImg();
});

function setupImgBox(){

    //cria divs necessarias para o imgbox
    _body = document.getElementsByTagName('body')[0];
    
    var divImgBox = document.createElement('div');
    divImgBox.setAttribute('id', 'imgBox');
    
    var divFundoImgBox = document.createElement('div');
    divFundoImgBox.setAttribute('id', 'fundoImgBox');
    
    var divImagemImgBox = document.createElement('div');
    divImagemImgBox.setAttribute('id', 'imagemImgBox');
    
    var divCloseImgBox = document.createElement('div');
    divCloseImgBox.setAttribute('id', 'closeImgBox');
    
    divImgBox.appendChild(divFundoImgBox);
    divImgBox.appendChild(divImagemImgBox);
    divImgBox.appendChild(divCloseImgBox);
    
    _body.appendChild(divImgBox);
    
    document.getElementById('imagemImgBox').innerHTML='<img id="imagem" src="" alt="Anima"><img id="loader" src="imgbox/load.gif" alt="Loading" style="display:none;">';
    document.getElementById('closeImgBox').innerHTML='<a href="#" onclick="fechaImg()">Fechar</a>';
}

function anima(srcImg){
    //zera posicao e tamanho do box
    document.getElementById('imagemImgBox').style.width=0;
    document.getElementById('imagemImgBox').style.height=0;
    document.getElementById('imagemImgBox').style.marginLeft=0;
    document.getElementById('imagemImgBox').style.marginTop=0;
    
    //zera posicao e tamanho do bt close
    document.getElementById('closeImgBox').style.marginLeft=0;
    document.getElementById('closeImgBox').style.marginTop=0;
    document.getElementById('closeImgBox').style.display="none";
    
    //mostra loader
    document.getElementById('loader').style.display="block";
    
    //mostra o fundo escuro
    document.getElementById('imgBox').style.display='block';

    //carrega a imagem
    var pic = document.getElementById('imagem');
    pic.src = srcImg;
    
    pic.onload = function(){
        
        //esconde loader
        document.getElementById('loader').style.display="none";
        
        //mostra botao fechar
        document.getElementById('closeImgBox').style.display="block";
        //busca largura da iamgem
        var largura = pic.width;
        //busca altura da imagem
        var altura = pic.height;

        //se a imagem for maior que a tela do usuario
        if(largura>=viewportwidth){
            largura=viewportwidth-50;
            altura = altura+20;
        }
        
        //se a imagem for maior que a tela do usuario
        if(altura>=(viewportheight-150)){
            altura = viewportheight-80;
            largura = largura+18;
        }
        
        //define posicao horizontal
        var margemLeft = -(largura/2);
        //define posicao vertical
        var margemTop = -(altura/2);
        
        //define posicao do botao fechar
        var margemLeftClose = (margemLeft+largura)-35;
        var margemTopClose = (margemTop+altura)+20;
        
        //define o tempo em que ocorre a animacao
        var tempo = 500;
        
        //cria a animacao a partir do jquery
        $('#imagemImgBox').animate({width: largura, height: altura, marginLeft: margemLeft, marginTop: margemTop}, tempo);
        $('#closeImgBox').animate({marginLeft: margemLeftClose, marginTop: margemTopClose}, tempo);
    }
}

function fechaImg(){
    //esconde fundo
    document.getElementById('imgBox').style.display='none';
}