<script>

document.addEventListener("DOMContentLoaded", function() {
    const activationThreshold = 0.25;
  	const fbTopBottom = 100;
    // Cacheo de elementos
    var portfolioElement = document.querySelector('.fb-portfolio-coudix');
    var stickyElement = document.querySelector('.fb-portfolio-coudix__sticky');
    var progressBar = document.querySelector('.fb-progressbar');

    // Cálculo de valores constantes
    var portfolioTop = portfolioElement.offsetTop;
    var portfolioHeight = portfolioElement.offsetHeight;
    var windowHeight = window.innerHeight;
    var stickyWidth = stickyElement.scrollWidth;
    var clientWidth = stickyElement.clientWidth;
  
  	var usingKeyboard = false;
  
    // Temporizador para actualizar dimensiones cada segundo en lugar de en cada evento de redimensionamiento de ventana
    var resizeTimer;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            // Recalcular valores de dimensiones cuando cambia el tamaño de la ventana
              var portfolioTop = portfolioElement.offsetTop;
    var portfolioHeight = portfolioElement.offsetHeight;
            windowHeight = window.innerHeight;
            stickyWidth = stickyElement.scrollWidth;
            clientWidth = stickyElement.clientWidth;
        }, 200); // Esperar 1 segundo después de que termine el redimensionamiento
    });

    // Función para calcular y asignar la posición del scroll al elemento sticky
    function updateStickyScroll(scrollPosition) {
        var scrollLeft = scrollPosition * (stickyWidth - clientWidth);
        stickyElement.scrollLeft = scrollLeft;
    }

    // Función para calcular la posición del scroll con respecto al elemento
    function calculateScrollPosition() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var scrollPosition = (scrollTop - portfolioTop - fbTopBottom) / (portfolioHeight - windowHeight - (fbTopBottom * 2));
        return Math.min(1, Math.max(0, scrollPosition));
    }

    // Función para actualizar la barra de progreso
    function updateProgressBar(scrollPosition) {
        progressBar.value = scrollPosition * 100;
    }

    // Función para determinar si un elemento es al menos 25% visible en el viewport horizontalmente
    function isElementPartiallyVisible(element) {
        var rect = element.getBoundingClientRect();
        var threshold = window.innerWidth * activationThreshold;
        return (
            rect.left + threshold < window.innerWidth &&
            rect.right - threshold > 0
        );
    }

    // Función para actualizar la visibilidad de los bloques dentro de sticky
    function updateBlockVisibility() {
        var blocks = stickyElement.querySelectorAll('.fb-portfolio-coudix--dim');
        blocks.forEach(function(block) {
            if (isElementPartiallyVisible(block)) {
                block.classList.add('fb-visible');
            } else {
                block.classList.remove('fb-visible');
            }
        });
    }

    // Inicializar la visibilidad de los bloques al cargar la página
    updateBlockVisibility();


    // Evento de scroll
    window.addEventListener('scroll', function() {
        var scrollPosition = calculateScrollPosition();
      
      
      if(scrollPosition > 0 && scrollPosition < 1 && usingKeyboard == false){
        //console.log(scrollPosition, usingKeyboard);
        updateStickyScroll(scrollPosition);
        updateProgressBar(scrollPosition);
      }
      
        setTimeout(function() {
            usingKeyboard = false;
            if(calculateScrollPosition() == 1){
              updateStickyScroll(1);
              updateProgressBar(1);
            }
        }, 1200);
      
              updateBlockVisibility();


      
    });
  
      // Colocar el scroll horizontal del sticky y el progress bar al final cuando la página carga
  
  if(calculateScrollPosition() == 1){
    updateStickyScroll(1);
    updateProgressBar(1);
  }

    // Evento de enfoque de elemento enfocable
    document.addEventListener('focus', function(event) {
          usingKeyboard = true;
          console.log(usingKeyboard);
      		updateBlockVisibility();
    }, true); // Utilizar captura para asegurar que el evento se maneje antes que otros
});


</script>