function renderMenuModulos(){
	renderloader();
	modulo.section.modulos.map((elem,i)=>{
		
		//Obeter o numero de acesso do modulo 
	
    	const countModulos = modulo.section.controlTrackModulo[modulo.id_controller][i].join(",");
		const numeroTotalModulo = countModulos.length;
		const numeroAcessoModulo = countModulos.split(',').filter(elem => {return elem ==1}).length;
		//Habilitando o menu do primeiro modulo curso
		modulo.section.modulos[0].completed =100;

		if(numeroTotalModulo === numeroAcessoModulo){
			//Adicionar valor no proximo vetor
			const proximoVetor = i+1;
			modulo.section.modulos[proximoVetor].completed = 100;
		}
		
	  	var renderMenu  = `renderSubMenu(${i})`;
		var menu        = (modulo.section.controllerStatusTracker === true ? (elem.completed === 100 ? renderMenu : "javaScript: void(0)"):renderMenu);
		var status_menu = (modulo.section.controllerStatusTracker === true ?(elem.completed === 100 ? modulo.classMenuAativo : modulo.classMenuInativo):modulo.classMenuAativo);
		$(modulo.classMenu).append(`<li><a href="javaScript: void(0)" onclick="${menu}" class="menu_${i} ${status_menu}">${elem.titulo}</a></li>`);
		$(modulo.classMenuMobile).append(`<li><a href="javaScript: void(0)" onclick="${menu}" class="menu_${i} ${status_menu} bt-menu-hamburgue-action">${elem.titulo}</a></li>`);
	
	});

	const get_select_modulo = parseInt(localStorage.getItem("select_modulo"));
	renderSubMenu((get_select_modulo?get_select_modulo:0));
	checkSelectMenu(get_select_modulo);

}

function renderSubMenu(id_modulo){
	renderloader();
	$('.modulo_esquerdo ul li a').removeClass('select_ativo');
	const subMenu      = modulo.section.modulos[id_modulo].menu;
	const limitSubMenu = modulo.section.modulos[id_modulo].menu.length;

	localStorage.setItem("select_modulo",id_modulo);	
	$(modulo.classSubMenuDesktop).html('');
	$(modulo.classSubMenuMobile).html('');

	subMenu.map((elem,i)=>{
	
		modulo.section.modulos[id_modulo].menu[0].completed = 100;
		const countSomaTreckedSubMenu = modulo.section.controlTrackModulo[modulo.id_controller][id_modulo][i].length
		const countUserTreckedSubMenu = modulo.section.controlTrackModulo[modulo.id_controller][id_modulo][i].filter(elem => {return elem ==1}).length;
		const checked = (modulo.id_sub_modulo === i ? 'checked':'');
		if(countSomaTreckedSubMenu === countUserTreckedSubMenu) {

			const proximoVetor = i+1;
			if(proximoVetor <=limitSubMenu-1) {
				modulo.section.modulos[id_modulo].menu[proximoVetor].completed=100;
			}
		}
		
		var card         = `card.html?id=${modulo.id_controller}/${id_modulo}/${i}`;
		var menu         = (modulo.section.controllerStatusTracker === true ? (elem.completed === 100 ? card : "javaScript:void(0)"): card);
		var status_menu  = (modulo.section.controllerStatusTracker === true ? (elem.completed === 100 ? modulo.classMenuAativo: modulo.classMenuInativo):modulo.classMenuAativo);
	
		$(modulo.classSubMenuDesktop).append(`<li class="item_sub_menu_${id_modulo}_${i}"><div class="menu-text-content"><a href='${menu}' class='${status_menu}'>${elem.titulo}</a></div></li>`);
		$(modulo.classSubMenuMobile).append(`<li class="item_sub_menu_${id_modulo}_${i}"><a href='${menu}' class='${status_menu}'>${elem.titulo}</a></li>`);
		$('.card-menu-list-group').append(`<li class="item_sub_menu_${id_modulo}_${i} card-menu-list-group-itens"><a href='${menu}' class='${status_menu} ${checked}'>${elem.titulo}</a></li>`);

		if(countSomaTreckedSubMenu === countUserTreckedSubMenu) {
			checkSelecteSubMenu(id_modulo,i);
		}

	});

	checkSelectMenu(id_modulo);
}

function checkSelecteSubMenu(modulo,i){

	$(`.item_sub_menu_${modulo}_${i}`).addClass('changed');
}

function checkSelectMenu(id){

	$(`.menu_${id}`).addClass('select_ativo');
	const icone_modulo = modulo.section.modulos[id].icone_modulo;
	const id_controller = modulo.id_controller;
	$('.modulos-icones img').attr('src',`../../src/imgs/icones/curso${id_controller+1}/${icone_modulo}.svg`)

}

function renderControllModel(visitados){

	//Modulos do curso
	var modulos = modulo.section.modulos;
	//Convertendo a lista de visitados em array
	var lista1 = visitados.split("");
	//var lista2 = lista1.shift();
	var limitModulo = modulos.limiteModulo-1;
	//Listando os modulos na estrutura JSON, que estao configurado no arquivo modulo.section.JS 
		modulos.map((elem,i)=>{
	
		var cont = 0;
		var soma = converteIntegerArray(elem).filter((elem2,i2)=>{
			//Filtrando se a lista de acesso ao modulo e verificando se o usuario, quantas paginas acessou.
			return (lista1[elem2] ==='1' ? cont = cont+1 : "");
		});

		//Se a quantidade do retorno do ponteiro do array for igual ao numero de paginas do mudulo
		//Deve - se liberar o proximo modulo do curso
		if(soma.length == elem.num_pag) {
			var proximoId = i+1;
			if (proximoId <= limitModulo) {
			
			$(`.menu_${proximoId}`).removeClass(`.${modulo.classMenuInativo}`);
			$(`.menu_${proximoId} a`).attr("href",`card.html?index=${proximoId}`);
			modulos[proximoId].status = 1;
			console.log(">>>")
		}
		}else{
			console.log("<<<") 
		}
	});

}

function renderControlMenuHeader(){
	
	const conteudoHeader = `<li class="titulo"><b>${modulo.section.modulos[modulo.id_modulo].menu[modulo.id_sub_modulo].titulo.toUpperCase()}</b></li>
							<li style='margin-right: 35px;'><b>PÁGINA ${modulo.section.paginaSelecionada}  de ${modulo.section.selected_sub_modulo.pag_fim}</b></li>
							<li><a href="modulo.html?id=${modulo.id_controller}" class=""><div class="modulo"></div></a></li>
							<li><a href="javascript:void(0)" class="btn-link bt-menu-hamburgue bt-menu-hamburgue-action"><div class="hamburgue"></div></a></li>
							`;	
					



	$(".col-right .menu-topo").html(conteudoHeader);
}

function gerarPaginasdosModulos( id_modulo,id_sub_modulo ) {

	modulo.id_modulo                   = id_modulo;
	modulo.id_sub_modulo               = id_sub_modulo;
	const sub_modulo                   = modulo.section.modulos[modulo.id_modulo].menu[modulo.id_sub_modulo];
	modulo.section.selected_modulo     = modulo.section.modulos[modulo.id_modulo];
	modulo.section.selected_sub_modulo = sub_modulo;
	controlesModulos();
	//carrega a primeira página do bloco
	carregarPagina(sub_modulo.pag_inicio);
}

function controlesModulos() {

	//const modulos = modulo.section.modulos[modulo.id_modulo];
	const modulos = modulo.section.selected_sub_modulo;
	(modulo.section.paginaSelecionada == modulos.pag_inicio ? $(modulo.btn_voltar).addClass('disabled'):$(modulo.btn_voltar).removeClass('disabled'));	
	(modulo.section.paginaSelecionada == modulos.pag_fim    ? $(modulo.btn_avancar).addClass('disabled'):$(modulo.btn_avancar).removeClass('disabled'));	
	
}

function avancarModulo() {

	var paginaLimite      = modulo.section.selected_sub_modulo.limit;
	var paginaSelecionada = modulo.section.paginaSelecionada;
	
	if(paginaSelecionada  === paginaLimite-1) {
	
		$(`.item_sub_menu_${modulo.id_modulo}_${modulo.id_sub_modulo+1} a`).removeClass('menu_inativo');
		$(`.item_sub_menu_${modulo.id_modulo}_${modulo.id_sub_modulo+1} a`).attr('href',`card.html?id=${modulo.id_controller}/${modulo.id_modulo}/${modulo.id_sub_modulo+1}`);
		
		setTimeout(() => {
			pulseMenu(false)
		}, 100);
		
	}

	if ( paginaSelecionada != paginaLimite ) {
		// mudar a página
		console.log('avancar uma página');
		carregarPagina( paginaSelecionada+1 );
		return false;
	}
}

function pulseMenu(action){
	const countSubModulo = modulo.id_sub_modulo;
	const limitSubModulo = modulo.section.modulos[modulo.id_modulo].menu.length-1;
	const checkMenu = (countSubModulo===limitSubModulo?'modulo':'hamburgue');
	$(`.${checkMenu}`).css({'animation':(action === true ?'none':'pulse 2s infinite')});
}

function voltarModulo() {

	
	const paginaLimite       = modulo.section.selected_sub_modulo.pag_inicio;
	const paginaSelecionada  = modulo.section.paginaSelecionada;

	if(paginaSelecionada != paginaLimite ){
		// mudar a página
		console.log('voltar uma página');
		carregarPagina(paginaSelecionada-1 );
		return false;		
	}

	//------------------
	
	if(modulo.id_modulo){

		if(modulo.section.modulos[modulo.id_modulo-1].bloqueado ) return false;
			modulo.id_modulo = modulo.id_modulo-1;
			gerarPaginasdosModulos( modulo.id_modulo,modulo.id_sub_modulo );
			controlesModulos();
	}else{
		console.log('não tem módulo para voltar');
	}
}

function carregarPagina( numero_pagina ) {
	console.log("Numero de pagina "+ numero_pagina);
	//Select o modulo do curso
	modulo.section.paginaSelecionada = numero_pagina;
	renderControlPagSlider(numero_pagina);
	paginaSelecionada = numero_pagina;
	go( numero_pagina );
	controlesModulos();
	renderControlMenuHeader();
}

function renderControlPagSlider(pag){

	$(function () {
		var handle = $("#custom-handle");
		$("#slider").slider({
			orientation: "vertical",
			animate: "slow",
			disabled: true,
			min: modulo.section.selected_sub_modulo.pag_inicio,
			max: modulo.section.selected_sub_modulo.pag_fim,
			value:  pag,
			create: function () {
				handle.text($(this).slider("value"));
			},
			change: function (event, ui) {

				handle.text(ui.value);
			}, slide: function (event, ui) {
				
				handle.text(ui.value);
				paginaSelecionada = ui.value;
				go(ui.value);
				controlesModulos();
			}
		});
	});
}

function alertSweet(objeto){
	swal(objeto.conteudo,{ className : objeto.class}).then((result) => {
		if(!objeto.feedback){return retornoAtividade();}
	});
}

function renderVideoModulo(objeto){

	var id_curso = modulo.id_controller+1;
	var conteudo = `<video controls autoplay><source src="../../src/videos/curso${id_curso}/${objeto.url}" type="video/mp4"><source src="mov_bbb.ogg" type="video/ogg">  <track default label="Portugues" kind="subtitles" src="../../src/videos/${objeto.legenda}" srclang="br"></video>`;				
	$(`.${objeto.class}`).html(`<div class='container_video'>${conteudo}</div>`);
	//$('nav').hide();
}

function renderBoxPlay(objeto) {
	
	const conteudo = ` <div class="box-player">
							<img src="../../src/imgs/images/global/icone_play.png" alt="" srcset="">
							<div class="descricao">
								${objeto.texto}
							</div>
						</div>`;
	$(objeto.class).html(conteudo);
}

function renderBoxAviso(objeto) {
	
	const conteudo = ` <div class="box-player">
							<img src="../../src/imgs/images/global/icone_aviso.png" alt="" srcset="">
							<div class="descricao" style="border-left: 5px #33333300 solid;">
								${objeto.texto}
							</div>
						</div>`;
	$(objeto.class).html(conteudo);
}

function renderQuestao(){

	$('.conteudo_questao').remove();
	$('.pagina').append(loadMicrosoft());

	setTimeout(() => {
			
	     modulo.section.limitQuestaoSelect = modulo.section.selected_sub_modulo.sub_menu.length;
		 var questaoDados                  = modulo.section.selected_sub_modulo.sub_menu[modulo.section.limitQuestaoSelect-1];
		 var dados                         = modulo.section.selected_sub_modulo.sub_menu[modulo.section.limitQuestaoSelect-1].questao[modulo.section.questaoSelect];

		const listaItens = questaoDados.questao.map((elem,i)=>{return `<li class="list-group-item"></li>`;});	

		const listCards = dados.cards.map((elem,i)=>{
			return `<div class="col-md-4 margin-top-20 pull-center">
						<div class="card" id="${i++}">
							<div class="card-body">
								<div class="form-check">
									<p> <b>${elem.titulo}</b></p>
									<p class="card-text">${elem.descricao}</p>
								</div>
							</div>
						</div>
					</div>`;
		});	

		var conteudo = `<div class='conteudo_questao'><div class="row questao">
							<div class="col-md-12">
								<ul class="list-group list-group-horizontal">
									${listaItens.join('')}
								</ul>

							<div class="row">
							<div class="col-md-12">
							<div class="media">
								<div class="questao-titulo">
									<span class="mr-3">${modulo.section.questaoSelect+1}</span>
								</div>
								<div class="media-body">
									${dados.titulo}
								</div>
							</div>
						</div>
						${listCards.join('')}
						<div class="col-md-12">
							<button type="button" class="btn btn-dark confirmar pull-center class_visible">confirmar</button>
						</div>
							
							</div>


							</div>
					
							</div>
						</div>`;

		$('.load_questao').remove();
		$('.pagina').append(conteudo);

		$( `.list-group-item:nth-child(${modulo.section.questaoSelect+1})` ).addClass('check-ativo');

		$(document).ready(function(){
					
			const questaoObj = {questaoSelect:null,selectButton:false}

				$('.card').click(function (e){ 
			
					var id = e.currentTarget.id;
					
					if(id){
						questaoObj.questaoSelect = parseInt(id);
						questaoObj.selectButton  = true;
						$('.card').removeClass('card-escuro');
						$('.btn').removeClass('class_visible');
						$(`#${id}`).addClass('card-escuro');
					}
				});

				$('.confirmar').click(function (e){ 
		
					 modulo.section.questaoSelect = modulo.section.questaoSelect+1;
					 
					 if (modulo.section.questaoSelect <= modulo.section.limitQuestaoSelect-1) {
						 renderQuestao();			
					 }
					
				});
		});

	}, 2000);

}

function loadMicrosoft(){
	return `<div class="load_questao">
				<div class="spinner-grow text-danger" role="status">
				<span class="sr-only">Loading...</span>
				</div>
				<div class="spinner-grow text-success" role="status">
				<span class="sr-only">Loading...</span>
				</div>
				<div class="spinner-grow text-info" role="status">
				<span class="sr-only">Loading...</span>
				</div>
				<div class="spinner-grow text-warning" role="status">
				<span class="sr-only">Loading...</span>
				</div>
			</div>`;
}

function gerarMenuModulos() {}

function converteIntegerArray(valor){
   var arr = [];
  for(var i=1; i<=valor; i++){
	arr.push(0);
  }
  return arr;
}

function renderAnimateHome() {
	setTimeout(() => {
		//   var tl = new TimelineMax();
		//         var a = document.getElementById("alphasvg");
		//         var elem1 = a.contentDocument.getElementsByClassName('elemnto1');
		//         tl.staggerFromTo(elem1, 3, { x:0,y:0}, {x:-20, y:20, repeat:-1,yoyo:true, ease: "linear"}, 2);
		
		var tl = new TimelineMax();
				var a = document.getElementById("alphasvg");
				var elem1 = a.contentDocument.getElementsByClassName('elemnto1');
				var elem2 = a.contentDocument.getElementsByClassName('elemento2');
				var elem3 = a.contentDocument.getElementsByClassName('elemento3');
				var elem4 = a.contentDocument.getElementsByClassName('elemento4');
				tl.from([elem1],{ duration: 0.4,scale:0});
				tl.from([elem2],{ duration: 0.6, scale:0});
				tl.from([elem3],{ duration: 1, ease: "bounce.out", x: -500 });
				
		
		
				// tl.staggerFromTo(`${elem4} path`, 1, {drawSVG:0}, {drawSVG:true},0.1);
				// tl.staggerTo(`${elem4} path`, 0.5, {fill:'white'}, 0.1, 0.5);
			   
		
		
			}, 200);
}

function renderHomeCard() {

	const id_modulo  = modulo.id_modulo;
	$('.cards .menu-hamburgue .menu-hamburgue-container .titulo-curso').html(modulo.section.tituloCurso);
	$(modulo.card_menu_group).append(`<ul class="card-menu-list-group"><li class="card-menu-list-group-item">${modulo.section.modulos[id_modulo].titulo}</li></ul>`);
	renderSubMenu(id_modulo);
	gerarPaginasdosModulos(modulo.id_modulo,modulo.id_sub_modulo);
}

function renderModulos() {
	config.map((elem,i)=>{

		
		if (elem.statusModulo === 0) {
			$(`.modulo${i}`).addClass('inativo_svg')
			$(`.modulo${i}`).attr('id',null)
		
		}
		$('.modulos-container-bottom .modulos-menu-itens').append(`<li><a href='${(elem.statusModulo === 0 ? "javaScript:void(0)" : `modulo.html?id=${i}` )}'><p class="numero">${i+1}</p><p>${elem.tituloCurso}</p></a></li>`);
		$('.modulos-menu-itens-mobile').append(`<td><p>${elem.tituloCurso}</p> </td>`);
	});
}

function renderloader(){

	$('.modulo_esquerdo div, .modulo_esquerdo ul, .modulo_center').hide();
	$('.load').css({'display':'flex'});
	$('.load').show();
	setTimeout(() => {
		$('.modulo_esquerdo div, .modulo_esquerdo ul, .modulo_center').show()	
		$('.load').hide();
	}, 2000);

}

function renderListGruposDestaques(objeto){
	const conteudo = objeto.itens.map((elem,i)=>{
						return ` <li>
									<p><b>${(elem.titulo?elem.titulo:"")}</b></p>
									<p><span>${(elem.conteudo?elem.conteudo:"")}</span></p>
								</li>`;
					});

	$(objeto.class).html(`<ul class="list_itens_grupos_destaques">${conteudo.join('')}</ul>`);
}

function renderListGruposBadge(objeto){

	const conteudo = objeto.itens.map((elem, i) => {
		return `<li><div class="titulo ${elem.class?elem.class:""}">${elem.titulo}</div><div class="descricao">${elem.conteudo}</div></li>`;
	});

	$(objeto.class).html(`<ul class="list_itens_grupos_badge">${conteudo.join('')}</ul>`);
}

function renderCardList(objeto){

			const conteudo = objeto.itens.map((elem, i) => {
				return `<div class="${(elem.class?elem.class:"col-md-4")}">
							${eval(objeto.function)(elem)}
						</div>`;
			});

		$(objeto.class).html(`<div class="row">${conteudo.join('')}</div>`);
}

function renderCardLinearItem(objeto){
		
	return `<div class="card card-gradiente margin-botom-10">
				<div class="card-header card-header-gradiente">
					<b>${objeto.titulo}</b> 
				</div>
				<div class="card-body">
					<p class="card-text">${objeto.conteudo}</p>
				</div>
			</div>`;
}

function renderCardStyleItem(objeto){
	
	return `<div class="card-style ${objeto.class_style?objeto.class_style:""}"><p>${objeto.conteudo}</p></div>`;
}

function renderCardMarcadorItem(objeto){
		
	return `<div class="card card-marcador">
				<div class="card-body">${objeto.conteudo}</div>
			</div>`;
}

function renderCardItem(objeto){
		
	return `<div class="container-item">
				<div class="item-numero">
					<span>${objeto.numeracao}</span>
				</div>
				<div class="item-descricao font-16"><span> ${objeto.conteudo}</span></div>
			</div>`;
}

function renderCardItemAviso(objeto){
		
	return `<div class="item_aviso">
				<p class="titulo">
					${objeto.titulo?objeto.titulo:""}
				</p>
				<p class="descricao">
					${objeto.conteudo}
				</p>
			</div>`;
}


function renderResponsiveModelCards(){

}

(function($, sr) {
    var debounce = function(func, threshold, execAsap) {
        var timeout;
  
        return function debounced() {
          var obj = this,
            args = arguments;
  
          function delayed() {
            if (!execAsap)
              func.apply(obj, args);
            timeout = null;
          };
  
          if (timeout)
            clearTimeout(timeout);
          else if (execAsap)
            func.apply(obj, args);
  
          timeout = setTimeout(delayed, threshold || 100);
        };
      }
      // smartresize 
    jQuery.fn[sr] = function(fn) {
      return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };
  
  })(jQuery, 'smartresize');

function dynamicH(){
	var width   = window.innerWidth;
	var heights = window.innerHeight;
	$('#conteudo #bg-conteudo').css('height', (heights-210) + "px");
	$('.bg-cards').css('height', (heights) + "px");
	$('#conteudo video').css('width', (width-20) + "px");
	$('#conteudo video').css('height', (heights-90) + "px");
	$('.pagina').css('height', (width <= 770? 'auto':heights-140 + "px"));
	$('.container').css('height', (width <= 900 ? heights-110 :heights-140 ) +"px");
};
	
dynamicH();
  
$(window).smartresize(function() {
dynamicH();

});

$(document).ready(function(){

$('.main-menu li a').click(function (e) { 
	e.preventDefault();
	$('.main-menu li a').removeClass('menu-active');		
	$(this).addClass('menu-active');
});

$(this).on('click','.bt-menu-hamburgue-action',function (e) { 
	e.preventDefault();
	pulseMenu(true)
	if ($('.menu-hamburgue-action').is(':visible')) {
		$('.menu-hamburgue').removeClass('menu-hamburgue-action');
	}else{
		$('.menu-hamburgue').addClass('menu-hamburgue-action');
	}
});

$('.mod_bg').on('click',function (e) { 
	const id = e.currentTarget.id;
	if (id) {
		if (config[id].statusModulo == 100) {
			location.href = 'modulo.html?id='+id;
		}
	
	}
});


var tl = new TimelineMax();
setTimeout(() => {
	
	tl.staggerFromTo('.elemento7', 2, { x: 0,y: 0}, {x: 20, y : 20, repeat: -1,yoyo: true, ease: "linear"}, 1);
	tl.staggerFromTo('.elemento6', 2, { x: 0,y: 0}, {x: -20, y: 20, repeat: -1,yoyo: true, ease: "linear"}, 1);
	tl.staggerFromTo('.elemento5', 2, { x: 0,y: 0}, {x: -20, y: 20, repeat: -1,yoyo: true, ease: "linear"}, 1);
	tl.staggerFromTo('.elemento4', 2, { x: 0,y: 0}, {x: 20, y : 20, repeat: -1,yoyo: true, ease: "linear"}, 1);
	tl.staggerFromTo('.elemento3', 2, { x: 0,y: 0}, {x: 20, y : 0, repeat : -1,yoyo: true, ease: "linear"}, 1);
	tl.staggerFromTo('.elemento2', 3, { x: 0,y: 0}, {x: 20, y: 20, repeat: -1,yoyo: true, ease: "linear"}, 2);
	tl.staggerFromTo('.elemento1', 4, { x: 0,y: 0}, {x: 20, y : 0, repeat : -1,yoyo: true, ease: "linear"}, 2);
}, 2);

tl.staggerFromTo(['.cloud1','.cloud2','.cloud3','.cloud4','.cloud5','.cloud6','.cloud7','.esfera1'], 4, {
	x:0,
	y:0
  }, {
	x:-20,
	y:20,
	repeat:-1,
	yoyo:true,
	ease: "linear"
  }, 2)




});

function resizeStyle(){
	const resizes = ['#bg-conteudo','#conteudo','.card'];
	resizes.map((elem,i)=>{
		$(elem).attr('style', '');
	})
}




 