$(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';



function initVua() {

   cerrarPrecarga();

   $(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', cerrarVUA);

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


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);

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

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

   activaNavegacion();
}



function activaNavegacion() {
   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('--header_height', headerHeight + 'px');
}


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


//funcion responsable de enviar el mensaje al padre para que cerrar la precarga
function cerrarPrecarga() {
   console.log('Cerrando Precarga');
   var data = {
      'cerrarPrecarga': 'cerrar',
   };
   window.top.postMessage(data, '*');
}