$(document).ready(initVua);



// Clases
var jsTongueButton = '.js-tongueButton';
var tongueButtonOpen = 'tongueButton--open';
var jsNav = '.js-nav';
var navOpen = 'nav--open';
var navbarButtonActive = 'navbar__button--active';
var jsTopic = '.js-topic';
var topicActive = 'topic--active';
var topicInactive = 'topic--inactive';
var navNextPrev = '.navNextPrev';
var navActive = 'nav--active';




function initVua() {

   $(jsTongueButton).off('click');
   $(jsTongueButton).on('click', openCloseNav);

   $('[data-menu]').off('click');
   $('[data-menu]').on('click', menu);

   activaNavegacion();

   getHeaderHeight();
   $(window).on('resize', getHeaderHeight);


   $('.js-close').off('click')
   $('.js-close').on('click', closeVUA);

   $(document).keydown(function (e) {
      if (e.keyCode == 27) {
         if ($('.redi--activo').length == 1) {
            cerrarRedi();
         } else {
            closeVUA();
         }
      }
      //flechas
      if (e.keyCode == 37) {
         //call function prev
         anterior();
      }
      if (e.keyCode == 39) {
         //call function netx
         siguiente();
      }
   });

   $('.js-lanzadorRedi__contenidoBoton').on('click', abrirREDI);
};


function openCloseNav() {
   if ($(jsNav).hasClass(navOpen)) {
      $(jsNav).removeClass(navOpen);
      $(jsTongueButton).removeClass(tongueButtonOpen);
   } else {
      $(jsNav).addClass(navOpen);
      $(jsTongueButton).addClass(tongueButtonOpen);
   }
}



function menu() {

   var dataMenu = $(this).attr('data-menu');

   $('[data-menu]').removeClass(navbarButtonActive);
   $('[data-menu="' + dataMenu + '"]').addClass(navbarButtonActive);

   $(navNextPrev).removeClass(navActive);
   $(jsTopic).removeClass(topicInactive);
   $('.' + topicActive).addClass(topicInactive);
   setTimeout(() => {
      $(jsTopic).removeClass(topicActive);
      $('#topic' + dataMenu).addClass(topicActive);
   }, 200);

   $(jsNav).removeClass(navOpen);
   $(jsTongueButton).removeClass(tongueButtonOpen);

   activaNavegacion();

}



function activaNavegacion() {
   setTimeout(() => {
      $(navNextPrev).addClass(navActive);
   }, 300);

   var temaActivo;
   var numeroTemaActivo;
   var ultimoTema;

   temaActivo = $('.' + navbarButtonActive);
   numeroTemaActivo = temaActivo.attr('data-menu');
   ultimoTema = getUltimoTema();

   if (numeroTemaActivo > 1) {
      $('.js-navNextPrev__button--prev').show();
      $('.js-navNextPrev__button--prev').off('click');
      $('.js-navNextPrev__button--prev').on('click', anterior);
   } else {
      $('.js-navNextPrev__button--prev').hide();
      $('.js-navNextPrev__button--prev').off('click');
   }

   if (numeroTemaActivo < ultimoTema) {
      $('.js-navNextPrev__button--next').show();
      $('.js-navNextPrev__button--next').off('click');
      $('.js-navNextPrev__button--next').on('click', siguiente);
   } else {
      $('.js-navNextPrev__button--next').hide();
      $('.js-navNextPrev__button--next').off('click');
   }
}



//funcion que tiene la responsabilidad de cargar el item anterior
function anterior() {
   var temaActivo, temaAnterior;
   temaActivo = $('.' + navbarButtonActive);
   var numeroTemaActivo = temaActivo.attr('data-menu');

   if (numeroTemaActivo > 1) {
      numeroTemaActivo = parseInt(numeroTemaActivo) - 1;
      $("[data-menu=" + numeroTemaActivo + "]").click();
   }
}



//funcion que tiene la responsabilidad de cargar el item siguiente
function siguiente() {
   console.log('siguiente');
   var temaActivo, numeroTemaActivo, ultimoTema;
   temaActivo = $('.' + navbarButtonActive);
   numeroTemaActivo = temaActivo.attr('data-menu');
   ultimoTema = getUltimoTema();

   if (numeroTemaActivo < ultimoTema) {
      numeroTemaActivo = parseInt(numeroTemaActivo) + 1;
      $("[data-menu=" + numeroTemaActivo + "]").click();
   }
}




function getUltimoTema() {
   var ultimo = 0;
   $('[data-menu]').each(function (index) {

      if (parseInt($(this).attr("data-menu")) > ultimo) {
         ultimo = parseInt($(this).attr("data-menu"));
      }
   });

   return ultimo;
}



function getHeaderHeight() {
   var headerHeight = $('.js-header__containter').height();
   document.querySelector('.js-vua').style.setProperty('var(--header_height)', headerHeight + 'px');
}


//funcion responsable de enviar el mensaje al padre para que cierre el backdrop
function closeVUA() {
   var data = {
      'close': 'cerrar',
   };
   window.top.postMessage(data, '*');
}


// ABRIR REDI
//Mensajes entre iframes
//Asigna el evento de escuchar mensajes del iframe
//Escucha todos los mensajes enviados por los iframes
window.addEventListener('message', function (event) {
   //cierra el backdrop
   if (event.data.hasOwnProperty("cerrarRedi")) {
      //se cierra el backdrop
      this.console.log('recibe el evento de cerrar el REDI');
      if ($('.backdrop.in').length == 1) {
         $('body').css('overflow', '');
         $('.backdrop.in').removeClass('in');
      }
   }
   if (event.data.hasOwnProperty("cerrarPrecarga")) {
      this.console.log('recibe el evento de cerrar la precarga en la leccion');
      $('.js-precargaRedi').addClass('precargaRedi--invisible');
   }
});
//Funciones del Iframe del REDI
//funcion responsable de cargar el REDI en el iframe
function abrirREDI(event) {
   event.preventDefault();
   //obtiene el id del contenedor del recurso
   var url = $(this).attr('data-target');
   var tipo = $(this).attr('data-tipo');
   abrirPrecarga(tipo);
   $('.js-backdrop__iframe').prop('src', url);
   $('.js-backdrop').addClass("in");
   $('body').css('overflow', 'hidden');
   $('.js-backdrop__iframe').focus();
}
//funcion responsable de ocultar el div de precarga
function abrirPrecarga(tipo) {
   console.log('abriendo la precarga y el REDI ', tipo);
   $('.js-precargaRedi').removeClass('precargaRedi--exploracion precargaRedi--entrenamiento');
   if (tipo == "exploracion") {
      $('.js-precargaRedi').addClass('precargaRedi--exploracion');
   } else {
      $('.js-precargaRedi').addClass('precargaRedi--entrenamiento');
   }
   $('.js-precargaRedi').removeClass('precargaRedi--invisible');
}