/* ./templates/v21/jscss/js/script.php */
whenReady(function() {
	$('#content .btn').addClass('btn-new-style');
	$('#top .btn').addClass('btn-new-style');
	$('#footer .btn').addClass('');
});

whenReady(() => {
  window.scrollingImages = [];

  let scrolling_images = Array.from(document.getElementsByClassName('slow_scroll_overlay'));
  scrolling_images.forEach(element => {
    let image_object = {};
    image_object.rowElement = element.parentElement.parentElement;
    image_object.imageOverlay = element;
    image_object.imageElement = element.children[0];

    image_object.scrollSpeed = element.dataset.speed;
    image_object.pictureOffset = element.dataset.offset;

    image_object.sticky = false;
    image_object.isFixed = false
    image_object.stopped = false;
    image_object.lastScrollPos = -1;

    window.scrollingImages.push(image_object);
  });

  addEventListener("scroll", handleScroll);
  handleScroll();
});

function handleScroll() {
  const window_pixels_to_top = window.scrollY ;
  window.scrollingImages.forEach(element => {
    renderScrollingImage(element);
  })

  function renderScrollingImage(image_object) {
    if (image_object.lastScrollPos !== window_pixels_to_top) {
      let row_element = image_object.rowElement;
      let header_image = image_object.imageElement;
      let image_overlay = image_object.imageOverlay;
  
      let pixels_to_top = row_element.offsetTop;
      
      if (header_image) {
        if (image_object.sticky) {
          header_image.style.top = "translateY(0px)";
          image_object.stopped = false;
        } else {
          if (window_pixels_to_top > pixels_to_top - window.visualViewport.height && window_pixels_to_top < pixels_to_top + row_element.offsetHeight) {
            let verschuiving = Math.round(window_pixels_to_top - pixels_to_top) * image_object.scrollSpeed - image_object.pictureOffset;
            header_image.style.transform = `translateY(${verschuiving}px)`;
            if (image_object.isFixed) {
              image_overlay.style.transform = `translate3d(0, ${Math.round(pixels_to_top - window_pixels_to_top)}px,0)`;
              image_object.stopped = false;
            }
          } else {
            header_image.style.top = `translateY(${window.visualViewport.height}px)`;
            if (image_object.isFixed) {
              image_overlay.style.transform = "translate3d(0, -100%,0)";
            }
  
            image_object.stopped = true;
          }
        }
      }
  
      image_object.lastScrollPos = window_pixels_to_top;
    }
  }
}