// Criado 24/04/2021
// Obj: facilitar testes com a responsividade

// Alterado:
// 21/08/2021
// 27/07/2022 
// 05/06/2023: problema com páginas 800x600 pq nao estava fazendo a análise do ED__.yMob -> SOLUÇÃO: raizInterface.posicionaPagina()
// 18/06/2024: ajuste nos botões zoom e FullScreen pra compensar zoom (scale) na página
// 20/07/2024: novo visual Mob
// 03/09/2024: introdução da div dom_react_container


//console.log("ED",ED);	<<-- Dá erro pq ainda nao tá definido

//var tempRes;
function handleCompleteInt(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var DOMButton, DOMBtnFS;	// do Zoom e FullScreen
	
	var lib=comp.getLibrary();
	libInterface = lib;				// avaliar se precisa mesmo
	var ss=comp.getSpriteSheet();	// Forma de encapsular-esconder (animate 2019)
	var queue = evt.target;
	var ssMetadata = lib.ssMetadata;
	for(i=0; i<ssMetadata.length; i++) {
		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
	}
	
	//console.log("new de lib.skinMatematica_Canvas");
	
	if (lib.skinMatematica_Canvas) {
		exportRoot = new lib.skinMatematica_Canvas();
	} else {
		exportRoot = new lib.skinPadrao_H5();
	}
	
	stage = new lib.Stage(canvas);
	stage.enableMouseOver();	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		//createjs.Ticker.setFPS(lib.properties.fps);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	
	
	
	stage2 = new lib.Stage(canvas2);
	stage2.enableMouseOver();	
	//Registers the "tick" event listener.
	fnStartAnimation2 = function() {
		//stage.addChild(exportRoot);
		//createjs.Ticker.setFPS(lib.properties.fps);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage2);
	}	
	
	//Cria a função de LMS
	//raizInterface.salvaLmsBD(raizInterface.aula.paginas[paginaEmCarregamento].id , raizInterface.aula.idLicao, "T")
	raizInterface.salvaLmsBD = function (evento) {
		 var id_lo   = raizInterface.aula.paginas[paginaEmCarregamento].id;
		 var id_aula = raizInterface.aula.idLicao;
		 
		 if (!raizInterface.aula.id_usu) raizInterface.aula.id_usu = ED__.Mat.random(100) + 1000;
		 if (!raizInterface.aula.id_ses) raizInterface.aula.id_ses = ED__.Mat.random(100) + 1000;
		 
//             var evento = "E";
		var dados = { id_lo:id_lo, id_aula: id_aula, evento: evento, id_usu: "1", id_ses: "1" };
		dados.id_usu = raizInterface.aula.id_usu;
		dados.id_ses = raizInterface.aula.id_ses;
		dados.abertura = "Comp";
		if (ED__.Mob) dados.abertura = "Mob_";
		
		//console.log("dados", dados);
		$.ajax({
			type: "POST",
			url: "https://www.aprovacaoead.com.br/administracao/conversaoLOs/salvarLmsBD/",
			data: dados
		});
		
		var dados2 = {id_pag:id_lo, id_aula, id_usu: dados.id_usu, id_ses: dados.id_ses, evento, abertura: dados.abertura};

		// Chamada pro react
		$.ajax({
			type: "POST",
			url: window.location.protocol + "//www.aprovacaoead.com.br:50002/lms/",
			data: dados2,
			dataType: "json",
			success: function(json){
				console.log("success salvaLmsBD REACT", json);
			},
			error: function(){
				//alert("Ocorreu um erro no ajax");
				console.log("erro salvaLmsBD REACT", "ERRO");
			}
		});
	}
	
	
	console.log("ED__.Mob", ED__.Mob)
	if (ED__.Mob) {
  		criar_botao_zoom();
		
		window.addEventListener('touchend', fimTouch);		
		function fimTouch() {
			console.log("fimTouch" + window.visualViewport.scale);
			pos_btn_zoom()
			//tempRes();
		}
		
		function pos_btn_zoom () {
			if (!DOMButton) return;
			
			// 2024-06:
// 			const novaEscala = (window.visualViewport.scale > 0.01)?(1/window.visualViewport.scale): 1;
			const novaEscala = (window.visualViewport.scale > 1)?(1/window.visualViewport.scale): 1;
// 			const novaEscala =  1;
			
			DOMBtnFS.style.scale = novaEscala;
			DOMButton.style.scale = novaEscala;
					
			var wid = DOMButton.wid * novaEscala;	//100-10-5;
			var hei = DOMButton.hei * novaEscala;	//40+10;
			const margem = 3* novaEscala;
//		var iw = window.innerWidth, ih=window.innerHeight;
//		var iw = window.outerWidth, ih=window.outerHeight;
// 			var posX = ih - hei - 5;
// 			var posY = iw - wid - 5

			var iw = window.visualViewport.width, ih=window.visualViewport.height;
		
			var offX = window.visualViewport.offsetLeft;
			var offY = window.visualViewport.offsetTop;
		
			var posY = offY + ih - hei -(DOMButton.hei-hei)/2 - margem;
			var posX = offX + iw - wid -(DOMButton.wid-wid)/2 - margem;
			
// 			var posY = offY  -(DOMButton.hei-hei)/2;
// 			var posX = offX  -(DOMButton.wid-wid)/2;
			
//			DOMButton.style.pointerEvents = "all";
// 			DOMButton.style.height = hei + "px";
// 			DOMButton.style.width = wid + "px";
//			DOMButton.style.position = "absolute";
			// A ordem abaixo define quem fica a esquerda ou direita
			DOMBtnFS.style.top =  posY + 'px';
			DOMBtnFS.style.left = posX + 'px';
			
			posX -= wid + margem;		// Para ficar a esquerda
// 			posY -= hei+5;		// Para ficar emcima
			DOMButton.style.top =  posY + 'px';
			DOMButton.style.left = posX + 'px';
			

			console.log("DOMButton", DOMButton.wid, wid , novaEscala);
// 			console.log("pos", posX,posY);
		}

	}
	
	
	//  Animate 2017
	//Code to support hidpi screens and responsive scaling. 
	function makeResponsive (isResp, respDim, isScale, scaleType, domContainers) {		
		// DOM relativo ao react que se relaciona ao createjs
		const dom_react_container = document.getElementById("dom_react_container");
		console.log("dom_react_container",dom_react_container);
		
		
		var lastW, lastH, lastS=1;		
		window.addEventListener('resize', resizeCanvas);
		
		const arrObjInt = [raizSkin.voltar_mc, raizSkin.passar_mc, raizSkin.reiniciar_mc, raizSkin.canguru_btn, raizSkin.indicador_txt, raizSkin.pagina_mc, raizSkin.logoEdu_btn, raizSkin.info_btn, raizSkin.quiz_btn];
		salvarPropsSkinMob();
		function salvarPropsSkinMob() {
			console.log("salvarPropsSkinMob dentro de resizeCanvas");
			for(let elem of arrObjInt) salvar(elem);
// 			salvar(raizSkin.voltar_mc);
// 			salvar(raizSkin.passar_mc);
// 			salvar(raizSkin.reiniciar_mc);
// 			salvar(raizSkin.canguru_btn);
// 			salvar(raizSkin.indicador_txt);
// 			salvar(raizSkin.pagina_mc);
// 			salvar(raizSkin.instance); // logoEdu_btn
			function salvar(vObj) {	// <<-- usar depois
// 				vObj.mat_ = [vObj.x , vObj.y, vObj.regX, vObj.regY];
				vObj.mat_ = { x: vObj.x , y: vObj.y, scaleX: vObj.scaleX, scaleY: vObj.scaleY, regX: vObj.regX, regY: vObj.regY };
			}
		}
// 		function salvarPropsSkinMob() {
// 			versão inicial sem function salvar
// 		}

		
		resizeCanvas();		

		function resizeCanvas() {
			console.log("resizeCanvas");		
			var w = lib.properties.width, h = lib.properties.height;			
			var iw = window.innerWidth, ih=window.innerHeight;
			ED__.telaHor = true;
			if (iw<ih) ED__.telaHor = false;
			
			// Fazer teste horizontal também
			if (ED__.Mob && w==800) {
				if (ED__.telaHor) {
					w += 155;	// No Moto G4 (ok: 155) (sobra embaixo: 156..158..160)
					ED__.yMob = 22; //50;
					h -= (85-ED__.yMob);
					console.log('h',h,w);
					atualizarSkinMob_hor();
				} else {
					ED__.yMob = 50;
					atualizarSkinMob_ver();
				}
				// Aqui se trata a página apenas dentro da interface
				if (exportRootProximo) raizInterface.posicionaPagina();
				
				if (raizSkin.teclado_mc && raizSkin.DOMTec && raizSkin.DOMTec.visible) {
					if (raizSkin.teclado_mc.confirmaOrientacao) raizSkin.teclado_mc.confirmaOrientacao();
					else if (ED__.Dev) console.log("ED__.Dev: Teclado sem a opção de confirmaOrientacao");
				}
// 				if (exportRootProximo) {
// 					if (paginasLib[paginaEmCarregamento].properties.height == 600) {
// 						exportRootProximo.setTransform(0,ED__.yMob-50);
// 						
// 					} else exportRootProximo.setTransform(0,ED__.yMob);
// 				}
			}
			
			function atualizarSkinMob_hor() {
				// Seria interessante achar o x do 'meio' do dashboard
// 				const xMeio = (955+800)/2;	-> não dá certo por conta da posição da quina do objeto, nao dá simetria
				console.log("atualizarSkinMob dentro de resizeCanvas");
								
				raizSkin.voltar_mc.setTransform(792,259,3,3);
				raizSkin.passar_mc.setTransform(865,310,3,3);
				
				raizSkin.quiz_btn.setTransform(845, 460,1.2,1.2);
				raizSkin.info_btn.setTransform(914, 460,1.2,1.2);
				
// 				raizSkin.voltar_mc.setTransform(793,300 +25,3,3);
// 				raizSkin.passar_mc.setTransform(868,375 +25,3,3);
// 				
// 				raizSkin.quiz_btn.setTransform(850,290,1,1);
// 				raizSkin.info_btn.setTransform(910,290,1,1);

				
				raizSkin.reiniciar_mc.setTransform(800, 91,2.75,2.75);
				raizSkin.canguru_btn.setTransform(865,147,2.75,2.75);
				
// 				var dx = 30;
// 				raizSkin.reiniciar_mc.setTransform(820-dx +10,80 +10,3,3);
// 				raizSkin.canguru_btn.setTransform(900-dx -10,180-10,3,3);
				
				raizSkin.pagina_mc.setTransform(450,11);
				raizSkin.pagina_mc.tampagina_mc.scaleX = 6;
				raizSkin.pagina_mc.pagina_txt.x = 20;
				
// 				raizSkin.indicador_txt.setTransform(900-dx,465,2,2);	EMBAIXO
				raizSkin.indicador_txt.setTransform(880,40,2.5,2.5);	// EMCIMA
				raizSkin.indicador_txt.textAlign = "center"
				
				raizSkin.logoEdu_btn.setTransform(438, -0.5, 0.5, 0.5);	// antigo instance
				
				instancias_skin(false);
			}
			
			function atualizarSkinMob_ver() {
				console.log("atualizarSkinMob dentro de resizeCanvas");
				for(let elem of arrObjInt) ajuste(elem);
				
// 				ajuste(raizSkin.voltar_mc);
// 				ajuste(raizSkin.passar_mc);
// 				ajuste(raizSkin.reiniciar_mc);
// 				ajuste(raizSkin.canguru_btn);
				
// 				ajuste(raizSkin.pagina_mc);
				raizSkin.pagina_mc.tampagina_mc.scaleX = 4;
				raizSkin.pagina_mc.pagina_txt.x = 8;
				
// 				ajuste(raizSkin.indicador_txt);
				raizSkin.indicador_txt.textAlign = "left"
				
// 				ajuste(raizSkin.logoEdu_btn);
// 				raizSkin.instance.x = 384.8;

				instancias_skin(true);
				
				function ajuste(vObj) {
					vObj.setTransform(vObj.mat_.x,vObj.mat_.y,vObj.mat_.scaleX,vObj.mat_.scaleY,0,0,0,vObj.mat_.regX,vObj.mat_.regY);
// 					vObj.setTransform(vObj.mat_[0],vObj.mat_[1],1,1,0,0,0,vObj.mat_[2],vObj.mat_[3]);
// 					vObj.transformMatrix = null;
				}
			}
			
			// Ajusta objetos com nome 'instance_'
			function instancias_skin(xVisible) {
				var lista = ['3','4','5','6','7'];	// 19/06/2024 Retirado o 11
				for (var el of lista) raizSkin['instance_' + el].visible = xVisible;
				
				if (xVisible) raizSkin.instance_9.scaleY = 1;
				else raizSkin.instance_9.scaleY = 0.46;
			}
			
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
			if(isResp) {                
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
					sRatio = lastS;                
				}				
				else if(!isScale) {					
					if(iw<w || ih<h)						
						sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==1) {					
					sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==2) {					
					sRatio = Math.max(xRatio, yRatio);				
				}			
			}			
			if (true) {	//(!ED__.Mob)
				domContainers[0].width = w * pRatio * sRatio;		// [0] = canvas	
				domContainers[0].height = h * pRatio * sRatio;		//	<<-- aqui: width e height servem pro createjs
				domContainers[1].width = w * pRatio * sRatio;		// [1] = canvas2	
				domContainers[1].height = h * pRatio * sRatio;		//	<<-- aqui: width e height servem pro createjs
			
				domContainers.forEach(function(container) {	
					//console.log(container);	
						container.style.width = w * sRatio + 'px';			// Esse é pra página HTML, pega todos, inclusivo o [0] canvas	
						container.style.height = h * sRatio + 'px';			
					});
					
				//#V 17/01/2024: tem que repensar a adaptação do campo de texto dom_dev_obs pq foram colocadas margens no 'olho'
// 				if (dom_dev) {
// 					if (ih - h * sRatio-40 > 10) {
// 						dom_dev.style.left = '0px';			// Esse é pra página DEV, ocupa o que sobra	
// 						dom_dev.style.top = (h * sRatio + 4) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
// 						dom_dev.style.width = (iw -20) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
// 						dom_dev.style.height = (ih - h * sRatio-40) + 'px';	
// 						dom_dev_obs.style.width = "80%";
// 					
// 					} else {
// 						dom_dev.style.left = (w * sRatio + 7) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
// 						dom_dev.style.top = '0px';
// 						dom_dev.style.width = (iw - w * sRatio -20) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
// 						dom_dev.style.height = (ih -200) + 'px';	
// // 						dom_dev.style.height = (h * sRatio-200) + 'px';	
// 						dom_dev_obs.style.width = "100%";
// 					}					
// 				}
					

				if (dom_react_container) {
					// Alterar o tamanho da div com base na variável
					dom_react_container.style.transform = `scale(${sRatio})`;
					dom_react_container.style.transformOrigin = '0% 0%';
					
// 					var offX = window.visualViewport.offsetLeft;
// 					var offY = window.visualViewport.offsetTop;
    
    				// ih=window.visualViewport.height	| h = lib.properties.height
					if (ED__.Mob && ED__.telaHor) {	
						const maxWid = 800;
						const distLeft = iw - maxWid * sRatio + 10; // Afastamento de 10
						const distTop = ED__.yMob * sRatio;
						
						console.log("### horizontal Mob == sobra a direita");	

						dom_react_container.style.left = (distLeft) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
						dom_react_container.style.top = distTop + 'px';
						dom_react_container.style.height = (500) +'px'; //(ih -150) + 'px';	
						dom_react_container.style.width = (maxWid-20)  + 'px';
						
					} else if (ih - h * sRatio-40 > 10) {	
						// Vertical não muda se Mob
						const minHei = 500;
						const vpHei = ih/sRatio	;	// ViewPort traz pras dimensões 'create' | 
						let novoHei = vpHei -h;	// -40 é pra não ficar por cima dos botões Zoom e FullScreen
						let posTop = h;
						if (vpHei-h < minHei) {
							posTop = vpHei-minHei;
							novoHei = minHei;	// -40 é pra não ficar por cima dos botões Zoom e FullScreen
						}
						novoHei -= 40;
						
// 						const distLeft = iw - maxWid * sRatio + 10; // Afastamento de 10
// 						const distTop = 55 * sRatio;

						console.log("### if - vertical == sobra embaixo --> tem que refazer pra tirar debaixo",ih,  vpHei, sRatio);
						console.log("### ", h, novoHei , novoHei * sRatio);
						dom_react_container.style.left = '2px';			// Esse é pra página DEV, ocupa o que sobra	
						dom_react_container.style.width = (iw-6)/sRatio + 'px';			// Esse é pra página DEV, ocupa o que sobra	

// 						dom_react_container.style.top = ((vpHei - novoHei - 0) * sRatio + 0) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
						dom_react_container.style.top = posTop * sRatio + 'px';			// Esse é pra página DEV, ocupa o que sobra	
						dom_react_container.style.height = novoHei + 'px';	// já estou aplicando um zoom no transform
// 						dom_react_container.style.height = (novoHei * sRatio) + 'px';	
// 						dom_react_container.style.height = ((ih-40)/sRatio - h ) + 'px';	
					
					} else {
						const maxWid = 800;
						const distLeft = iw - maxWid * sRatio + 10; // Afastamento de 10
						const distTop = 55 * sRatio;	//ED__.yMob
						
						console.log("### else - horizontal == sobra a direita");	
// 						dom_react_container.style.left = (w * sRatio + 7) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
						dom_react_container.style.left = (distLeft) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
						dom_react_container.style.top = distTop + 'px';
						dom_react_container.style.height = (500) +'px'; //(ih -150) + 'px';	
// 						dom_react_container.style.height = (h * sRatio-200) + 'px';	
// 						dom_react_container.style.width = (iw - w * sRatio -20) + 'px';			// Esse é pra página DEV, ocupa o que sobra	
						dom_react_container.style.width = (maxWid-20)  + 'px';//  (iw - distLeft -10) "100%";//
					}					
				}
					
			} else {
				alert("Area completa no celular " + stage.preventSelection);
				// Obj: ocupar toda área do celular
				domContainers[0].width = iw * pRatio;		// [0] = canvas	
				domContainers[0].height = ih * pRatio;		//	<<-- aqui: width e height servem pro createjs (Tamanho interno sem px)
				domContainers[1].width = w * pRatio * sRatio;		// [1] = canvas2	
				domContainers[1].height = h * pRatio * sRatio;		//	<<-- aqui: width e height servem pro createjs
				
				domContainers.forEach(function(container) {				
						container.style.width  = iw + 'px';			// Esse é pra página HTML, pega todos, inclusivo o [0] canvas	
						container.style.height = ih + 'px';			
					});
					
				//createjs.Touch.disable(stage);	//<< dá errros
				stage.preventSelection = false;
				stage2.preventSelection = false;
			}
				
			if (ED__.Mob) {
				//alert("Ajuste no touch 2 " + stage.preventSelection);
				createjs.Touch.enable(stage,false, true);
				pos_btn_zoom();
				//stage.preventSelection = false;
			}
			
			if (ED__.vto) {
				domContainers[0].width = iw * pRatio;		// [0] = canvas	
				domContainers[0].height = ih * pRatio;		//	<<-- aqui: width e height servem pro createjs (Tamanho interno sem px)
				domContainers[1].width = w * pRatio * sRatio;		// [1] = canvas2	
				domContainers[1].height = h * pRatio * sRatio;		//	<<-- aqui: width e height servem pro createjs
				
				domContainers.forEach(function(container) {				
						container.style.width  = iw + 'px';			// Esse é pra página HTML, pega todos, inclusivo o [0] canvas	
						container.style.height = ih + 'px';			
					});
			}
			
			raizInterface.te = [w,h,iw,ih, w * pRatio * sRatio, h * pRatio * sRatio , w * sRatio + 'px', h * sRatio + 'px',pRatio*sRatio];
						
			stage.scaleX = pRatio*sRatio;			
			stage.scaleY = pRatio*sRatio;			
			lastW = iw; lastH = ih; lastS = sRatio;            
			stage.tickOnUpdate = false;            
			stage.update();            
			stage.tickOnUpdate = true;		
		}
		
		//tempRes = resizeCanvas;
	}

// 	function makeResponsive(isResp, respDim, isScale, scaleType) {			
// 		Código do Animate 2017	
// 	}
	
	// Animate 2019    
	//Code to support hidpi screens and responsive scaling.
	//AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);	
	//AdobeAn.compositionLoaded(lib.properties.id);
	//fnStartAnimation();
	//
	
	makeResponsive(true,'both',true,1,[canvas, canvas2, anim_container, dom_overlay_container, dom_overlay_container2]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	//makeResponsive(true,'both',false,1);	
	fnStartAnimation();
	fnStartAnimation2();
	
	console.log("pp = " + raizInterface.pp);
	
//	loadComponente();


	var testaXml = setInterval(testaCarregamento, 100);
	
	function testaCarregamento() {
		console.log("testaCarregamento 100")
		if (ED__.vto) alert("testaCarregamento 100");
		
		if ( raizInterface.aula && raizInterface.aula.paginas && raizInterface.aula.paginas[0] ) {
			//alert("100 TEM raizInterface.aula",raizInterface.aula)
			clearInterval (testaXml); 
			loadPagina(0);
			
			criarBotaoPuffin();	// Apenas cria o botão no modo invisível
		} else {
			//alert("100 NAO DEFINIDO raizInterface.aula");
		}

	}

	function criar_botao_zoom_INI() {		
		var titulo = "Entrar Modo Zoom";
		DOMButton = document.createElement("button");
		var texto = document.createTextNode(titulo);
		DOMButton.appendChild(texto);
		
		var wid = 100-10-5;
		var hei = 40+10;

//		var iw = window.innerWidth, ih=window.innerHeight;
		var iw = window.outerWidth, ih=window.outerHeight;
//		alert("outer " + iw)
		var posX = iw -2* (wid + 5);
		var posY = ih - hei - 5;
		
		DOMButton.wid = wid;
		DOMButton.hei = hei;
			
		DOMButton.style.pointerEvents = "all";
		DOMButton.style.height = hei + "px";
		DOMButton.style.width = wid + "px";
		DOMButton.style.position = "absolute";
		DOMButton.style.top =  posY + 'px';
		DOMButton.style.left = posX + 'px';
		DOMButton.style.visibility = "hidden"
// 		DOMButton.style.top = 'calc(100vh - ' + (hei + 5) + 'px)';
// 		DOMButton.style.left = 'calc(100vw - ' + (wid + 5) + 'px)';
		
		DOMButton.setAttribute("data-grupo" , "inter"); //  data-grupo = "inter";
	
// 		document.getElementById("dom_overlay_container").style.overflow = "visible"; animation_container
// 		document.getElementById("dom_overlay_container").appendChild(DOMButton);
		document.getElementById("animation_container").appendChild(DOMButton);

		ED__.Zoom = false;
		DOMButton.onclick = function(){
		    //alert("Modo Zoom 1 " + stage.preventSelection);
		    
		    //console.log("clickkkk")
			createjs.Touch.enable(stage,false, true);
			stage.preventSelection = ED__.Zoom;
			ED__.Zoom = !ED__.Zoom
			if (ED__.Zoom) {
				texto.nodeValue = "Sair Modo Zoom";
			} else {
				texto.nodeValue = "Entrar Modo Zoom";
			}
			
		    //alert("Modo Zoom 4 " + stage.preventSelection);
		}
		
		DOMBtnFS = document.createElement("button");
		var textoFS = document.createTextNode("FullScreen Telacheia");	// usa a var texto, mas é criado um novo Texto
		DOMBtnFS.appendChild(textoFS);
		
// 		var wid = 100;
// 		var hei = 40;
//		var iw = window.outerWidth, ih=window.outerHeight;
//		alert("outer " + iw)
//		var posY = ih - hei - 5;
		var posX = iw - wid - 5;
			
		DOMBtnFS.style.pointerEvents = "all";
		DOMBtnFS.style.height = hei + "px";
		DOMBtnFS.style.width = wid + "px";
		DOMBtnFS.style.position = "absolute";
		DOMBtnFS.style.top =  posY + 'px';
		DOMBtnFS.style.left = posX + 'px';
		
		DOMBtnFS.setAttribute("data-grupo" , "inter"); //  data-grupo = "inter";
// 		document.getElementById("dom_overlay_container").appendChild(DOMBtnFS);
		document.getElementById("animation_container").appendChild(DOMBtnFS);
		
		function toggleFullScreen() {
			var doc = window.document;
			var docEl = doc.documentElement;

			var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
			var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

			if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
				requestFullScreen.call(docEl);
			}
			else {
				cancelFullScreen.call(doc);
			}
		}
		DOMBtnFS.onclick = toggleFullScreen;
	}

	function criar_botao_zoom() {		
		var titulo = "Entrar Modo Zoom";
				

		
	// 		DOMButton.setAttribute("data-grupo" , "inter"); //  data-grupo = "inter";
	// 	
	// // 		document.getElementById("dom_overlay_container").style.overflow = "visible"; animation_container
	// // 		document.getElementById("dom_overlay_container").appendChild(DOMButton);
	// 		document.getElementById("animation_container").appendChild(DOMButton);
	// 
	// 		ED__.Zoom = false;
	// 		DOMButton.onclick = function(){
	// 		    //alert("Modo Zoom 1 " + stage.preventSelection);
	// 		    
	// 		    //console.log("clickkkk")
	// 			createjs.Touch.enable(stage,false, true);
	// 			stage.preventSelection = ED__.Zoom;
	// 			ED__.Zoom = !ED__.Zoom
	// 			if (ED__.Zoom) {
	// 				DOMButton.innerText = "Sair Modo Zoom";
	// 			} else {
	// 				DOMButton.innerText = "Entrar Modo Zoom";
	// 			}
	// 			
	// 		    //alert("Modo Zoom 4 " + stage.preventSelection);
	// 		}
	// 		
	// 		DOMBtnFS = document.createElement("button");
	// 		var textoFS = document.createTextNode("FullScreen Telacheia");	// usa a var texto, mas é criado um novo Texto
	// 		DOMBtnFS.appendChild(textoFS);
// 		
// // 		var wid = 100;
// // 		var hei = 40;
// //		var iw = window.outerWidth, ih=window.outerHeight;
// //		alert("outer " + iw)
// //		var posY = ih - hei - 5;
// 		var posX = iw - wid - 5;
// 			
// 		DOMBtnFS.style.pointerEvents = "all";
// 		DOMBtnFS.style.height = hei + "px";
// 		DOMBtnFS.style.width = wid + "px";
// 		DOMBtnFS.style.position = "absolute";
// 		DOMBtnFS.style.zIndex = "2";
// // 		DOMBtnFS.style.top =  posY + 'px';
// // 		DOMBtnFS.style.left = posX + 'px';
// 		
	// 		DOMBtnFS.setAttribute("data-grupo" , "inter"); //  data-grupo = "inter";
	// // 		document.getElementById("dom_overlay_container").appendChild(DOMBtnFS);
	// 		document.getElementById("animation_container").appendChild(DOMBtnFS);
		
// 		function toggleFullScreen() {
// 			var doc = window.document;
// 			var docEl = doc.documentElement;
// 
// 			var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
// 			var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
// 
// 			if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
// 				requestFullScreen.call(docEl);
// 			}
// 			else {
// 				cancelFullScreen.call(doc);
// 			}
// 		}
// 		DOMBtnFS.onclick = toggleFullScreen;
		var wid = 100-10-5-5;
		var hei = 40+10-10;
		
		// Cria e estiliza o botão DOMButton
		 DOMButton = createButton('Entrar Modo Zoom', '20px'); // Ajusta a posição direita para deixar espaço para o segundo botão
		// Adiciona o botão DOMButton ao corpo do documento
		document.body.appendChild(DOMButton);
		DOMButton.style.visibility = "hidden";
		
		// Cria e estiliza o botão DOMBtnFS
		 DOMBtnFS = createButton('FullScreen Telacheia', '20px'); // Ajusta a posição direita para alinhar ao lado do primeiro botão
		// Adiciona o botão DOMBtnFS ao corpo do documento
		document.body.appendChild(DOMBtnFS);

		DOMButton.wid = wid;
		DOMButton.hei = hei;

		ED__.Zoom = false;
		DOMButton.onclick = function(){
		    //alert("Modo Zoom 1 " + stage.preventSelection);
		    
		    //console.log("clickkkk")
			createjs.Touch.enable(stage,false, true);
			stage.preventSelection = ED__.Zoom;
			ED__.Zoom = !ED__.Zoom
			if (ED__.Zoom) {
				DOMButton.innerText = "Sair Modo Zoom";
			} else {
				DOMButton.innerText = "Entrar Modo Zoom";
			}
			
		    //alert("Modo Zoom 4 " + stage.preventSelection);
		}

		function toggleFullScreen() {
			var doc = window.document;
			var docEl = doc.documentElement;

			var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
			var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

			if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
				requestFullScreen.call(docEl);
			}
			else {
				cancelFullScreen.call(doc);
			}
		}
		DOMBtnFS.onclick = toggleFullScreen;

		// Função para criar e estilizar um botão
		function createButton(text, rightPositionPx) {
			const button = document.createElement('button');
			button.innerText = text;
			button.style.position = 'fixed';
			button.style.bottom = '20px'; // Distância do botão da parte inferior da tela em pixels
			button.style.right = rightPositionPx; // Distância do botão da parte direita da tela em pixels
			button.style.width = wid+'px'; // Largura fixa do botão em pixels
			button.style.height = hei+'px'; // Altura fixa do botão em pixels
			button.style.backgroundColor = '#007bff';
			button.style.color = 'white';
			button.style.border = 'none';
			button.style.borderRadius = '5px';
			button.style.cursor = 'pointer';
			button.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
			button.style.fontSize = '12px'; // Tamanho da fonte fixo em pixels
			button.style.zIndex = '9999'; // Garante que o botão fique à frente de qualquer outro elemento
			
			button.setAttribute("data-grupo" , "inter"); //  data-grupo = "inter";
		
// 			button.onmouseover = function() {
// 				button.style.backgroundColor = '#0056b3';
// 			};
// 		
// 			button.onmouseout = function() {
// 				button.style.backgroundColor = '#007bff';
// 			};
		
			return button;
		}
		

	}


//	loadPagina(0); // <-- vai carregar a primeira página... Após carregado o componente	/ Deveria ser o indice da primeira pagina pedida
}