/*
 * * ROGERIO AGOSTINI
 *
 * * Exemplo de uso:
 * * Fazer o preloader das imagens (imagens do imageBox e do loading) com o preImage.js
 * * A chamada do script imageBox deve ser feita apos todo o codigo dentro do corpo html e antes do fechamento da tag body
 *
 * <script src="imageBox.js" type="text/javascript"></script>
 * <img src="img01.jpg" alt="" onclick="imageBox('img01_full.jpg', 'Titulo para aparecer no box')" />
 * 
 */

// INICIO CONFIG
var cFechar 	= "color:#333;"; 											// cor link fechar
var cTit 		= "color:#333;"; 											// cor titulo imagem
var styleCarr	= 'color:#666; font-size:11px; font-weight:bold;'; 			// estilo da mensagem do preloader
var msgCarr		= 'Carregando...'; 											// mensagem do preloader
var pathImg 	= 'imagens/banners/'; 										// caminho das imagens carregadas
var pathLoader	= 'imagens/ImageBox/'; 										// caminho da imagem do preloader
var backAlpha 	= 'url(' + pathLoader + 'backBlackAlpha.png)'; 				// imagem do background para fazer camada escura
var loading		= pathLoader + 'ajax-loader.gif'; 							// imagem da animacao do preloader
var mTopLoader	= 'margin-top:60px;'; 										// margem superior da imagem do preloader
var mTopCarr	= 'margin-top:40px;'; 										// margem superior da mensagem do preloader
var timeLoad	= 500; 														// tempo do preloader para padronizar todos navegadores
var timeVer		= 1; 														// tempo para completar a leitura da imagem lida
// FIM CONFIG


var tagBody = document.getElementsByTagName('body')[0];
var divBox 	= document.createElement('div');
var contBox = '<div id="divImgF" style="position:absolute; margin:0px; z-index:500000;"></div>';
contBox    += '<div id="carreg" style="position:absolute; margin:0px;"></div>';
divBox.innerHTML = contBox;
tagBody.appendChild(divBox);

var divImgF;
var divCarreg;
var sty01;
var interval = setInterval('checkImg()',timeVer);

if(window.navigator.appName.indexOf('Opera') > -1)
{
	sty01 = "z-index:6000;";
	document.getElementById('divImgF').style.textAlign = 'center';
}else{
	sty01 = "position:absolute; z-index:6000;";
}

function timerPreload()
{
	document.getElementById('carreg').innerHTML = '';
	document.getElementById('carreg').style.backgroundImage = 'none'; 
	document.getElementById('divImgF').style.display = 'block';
	
	if(document.getElementById('imgFull') != null)
	{
		var ScrollTop = document.body.scrollTop;
		
		if (ScrollTop == 0)
		{
			if (window.pageYOffset)
			{
				ScrollTop = window.pageYOffset;
			}else{
				ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
			}
		}
		var tagImgFull 	= document.getElementById('imgFull');
		var txtImg 		= document.getElementById('txtImg');
		var difArea		= (document.body.parentNode.clientHeight - tagImgFull.height) / 4;
		var intScroll	= ScrollTop != 0 ? difArea + ScrollTop : difArea;
		
		var contImg = document.getElementById('contImg');
		contImg.style.backgroundColor 	= '#FFFFFF';
		contImg.style.padding		 	= '20px 10px 40px 20px';
		contImg.style.width 			= tagImgFull.width + 10 + 'px';
		contImg.style.height	 		= tagImgFull.height + 10 + 'px';
		contImg.style.left 				= '50%';
		contImg.style.marginLeft	 	= -((tagImgFull.width + 40) / 2) + 'px';
		//contImg.style.marginTop 		=  intScroll + 'px';
		contImg.style.marginTop 		=  (tagImgFull.height + 100 >= document.body.parentNode.clientHeight) ? '5px': intScroll + 'px';
		txtImg.style.display 			= 'block';
	}
}

function checkImg()
{
	var imf = document.getElementById('imgFull');
	
	if(imf != null)
	{
		if(window.navigator.appName.indexOf('Microsoft') > -1)
		{
			if(imf.complete)
			{
				clearInterval(interval);
				setTimeout("timerPreload()",timeLoad);
			}
		}else{
			if(imf.naturalWidth != 0)
			{
				clearInterval(interval);
				setTimeout("timerPreload()",timeLoad);
			}
		}
	}
}

function imageBox(imgName, tit)
{
	var wWidth 		= document.body.parentNode.clientWidth; 
	var cliHeight 	= document.body.parentNode.clientHeight;
	
	if(window.navigator.appVersion.indexOf('Safari') > -1 || window.navigator.appVersion.indexOf('Chrome') > -1)
	{
		var scrHeight 	= document.body.scrollHeight;
	}else{
		var scrHeight 	= document.body.parentNode.scrollHeight;
	}
	
	if(scrHeight <= cliHeight)
	{
		var wHeight = cliHeight;
	}else{
		var wHeight = scrHeight;
	}

	var imgFull = '<img id="imgFull" src="' + pathImg + imgName + '" alt="" style="float:left; cursor:pointer" onclick="fechar()" />';
	
	divImgF = document.getElementById('divImgF');
	divImgF.style.backgroundImage 	= backAlpha; 
	divImgF.style.backgroundRepeat 	= 'repeat';
	divImgF.style.display 			= 'none';
	divImgF.style.width 			= wWidth 	+ 'px';
	divImgF.style.height 			= wHeight 	+ 'px';
	
	divImgF.innerHTML  = '<div id="container" style=' + sty01 + '>';
	divImgF.innerHTML += 	'<div id="contImg" style="position:absolute;">' + imgFull + '<div id="txtImg" style="float:left; width:100%;"><p style="float:left; font-weight:bold; margin-top:10px; margin-bottom:0px; ' + cTit + '">' + tit + '</p><a style="' + cFechar + 'cursor:pointer; float:right; margin-top:10px; margin-right:10px;" onclick="fechar()">Fechar <span style="font-weight:bold">X</span></a></div>';
	divImgF.innerHTML += '</div>';																									  
	
	var ScrollTop2 = document.body.scrollTop;
	
	if (ScrollTop2 == 0)
	{
		if (window.pageYOffset)
		{
			ScrollTop2 = window.pageYOffset;
		}else{
			ScrollTop2 = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
		}
	}
	
	divCarreg = document.getElementById('carreg');
	divCarreg.style.width 				= wWidth 	+ 'px';
	divCarreg.style.height 				= wHeight 	+ 'px';
	divCarreg.style.zIndex 				= '3';
	divCarreg.style.backgroundImage 	= backAlpha; 
	divCarreg.style.backgroundRepeat 	= 'repeat';
	divCarreg.innerHTML = '<div id="divContCarr" style="position:absolute; background-color:#FFFFFF; width:200px; height:200px; text-align:center; left:50%; margin-left:-100px; margin-top:' + (ScrollTop2 + ((cliHeight - 200) / 2)) + 'px;"><img src="' + loading + '" alt="" style="' + mTopLoader + '" /><p style="' + styleCarr + mTopCarr + '">' + msgCarr + '</p></div>';

	interval = setInterval('checkImg()',timeVer);
}         
          
function fechar()
{
	divImgF = document.getElementById('divImgF');
	divImgF.innerHTML 		= '';
	divImgF.style.width 	= '0px';
	divImgF.style.height 	= '0px';	
	divImgF.className 		= divImgF.className.replace('visV','visH');
	
	divCarreg = document.getElementById('carreg');
	divCarreg.innerHTML 	= '';
	divCarreg.style.width 	= '0px';
	divCarreg.style.height 	= '0px';	
	
	clearInterval(interval);
}