// Instrucoes
// 1- Importe o modal.js e o modal.css
// 2- Sete a popupDefaultPage com o endereço da pagina default (Obs: isso deve feito depois do import do modal.js, e não se deve colocar o var);
// 3- Depois quando for exibir o modal basta chamar por showPopup(pagina, titulo, width, height), e pronto o modal é aberto;

var popupBody, popupMask, popupContent, popupModal, popupTitle, popupFrame, popupDefaultPage, popupBar;

// Funcao para adicionar eventos nos objetos da pagina
function addPopupEvent(objeto, evento, funcao){
	if (objeto.addEventListener){
		objeto.addEventListener(evento, funcao, false);
	} else if (objeto.attachEvent){
		objeto.attachEvent("on"+evento, funcao);
	}
}

// Retorna o tamanho do height da tela
function getPopupHeight() {
	return 	document.compatMode == 'CSS1Compat' 	? document.documentElement.clientHeight :
			document.body 							? document.body.clientHeight :
			window.screen.height;
}

// Retorna o tamanho do width da tela
function getPopupWidth() {
	return 	document.compatMode == 'CSS1Compat' 	? document.documentElement.clientWidth :
			document.body 							? document.body.clientWidth :
			window.screen.width;
}

// Corrige o padding do content para ficar no centro
function setPopupContentPadding(){
	
	if(getPopupHeight() >= popupModal.offsetHeight){
		popupContent.style.paddingTop = (getPopupHeight() - popupModal.offsetHeight)/2 + "px";
	} else {
		popupContent.style.paddingTop = "0px";
	}
	
	if(getPopupWidth() >= popupModal.offsetWidth){
		popupContent.style.paddingLeft = (getPopupWidth() - popupModal.offsetWidth)/2 + "px";
	}else{
		popupContent.style.paddingLeft = "0px";
	}
	
}

// Exibe o popup
function showPopup(pagina, titulo, width, height){
	
	popupMask.style.display="block";
	popupContent.style.display="block";

	if(pagina != null && pagina != ""){
		popupFrame.src = pagina;
	}
	
	popupFrame.style.width = width + "px";
	popupFrame.style.height = height + "px";
	
	popupModal.style.width = width + "px";
	
	if(titulo != null){
		popupTitle.innerHTML = titulo;
	} else {
		popupTitle.innerHTML = "";
	}
	
	setPopupContentPadding();
}

// Esconde o popup
function hidePopup(){
	popupFrame.src = popupDefaultPage;
	
	popupMask.style.display="none";
	popupContent.style.display="none";
}

// Metodo usado para iniciar o popup, cria os objetos necessarios
var popupIniciada = false;

function initPopup(){
	
	if(!popupIniciada){
		popupIniciada = true;
		
		popupBody = document.getElementsByTagName("body")[0];
		
		popupMask = document.createElement("div");
		popupMask.id = "popupMask";
		popupBody.appendChild(popupMask);
		
		popupContent = document.createElement("div");
		popupContent.id = "popupContent";
		popupContent.innerHTML = 	" <div id=\"popupModal\"> " +
										" <div id=\"popupBar\"> " +
											" <div id=\"popupTitle\" ></div> " +
											" <div id=\"popupClose\" ></div> " +
										" </div> " +
										" <iframe id=\"popupFrame\" name=\"popupFrame\" frameborder=\"0\" src=\"" + popupDefaultPage + "\" /> " +
									" </div> ";
		popupBody.appendChild(popupContent);
		
		popupModal = document.getElementById("popupModal");
		popupBar = document.getElementById("popupBar");
		popupTitle = document.getElementById("popupTitle");
		popupFrame = document.getElementById("popupFrame");
		addPopupEvent(window, "resize", setPopupContentPadding);
		
		var popupClose = document.getElementById("popupClose");
		addPopupEvent(popupClose, "click", hidePopup);
	}
}

addPopupEvent(window, "load", initPopup);