/* Intersection Observer *//*
//elements
var elements_to_watch = document.querySelectorAll('.watch')
//callback
var callback = function(items){
  items.forEach((item) => { 
    if(item.isIntersecting){ 
      item.target.classList.add("in-page");
    } else{
      item.target.classList.remove("in-page");
    }
  });
}
//observer
var observer = new IntersectionObserver(callback, { threshold: 0.2 } ); 
//apply
elements_to_watch.forEach((element) => {
  observer.observe(element);
}); 
*/

/* INTERSECTION OBSERVER*/
const observerOptions = {
  root: null, // Null = based on viewport
  rootMargin: "0px", // Margin for root if desired
  threshold: 0.3 // Percentage of visibility needed to execute function
};

function observerCallback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Fade in observed elements that are in view
      entry.target.classList.add('fadeIn');
    }
    else {
      // Fade out observed elements that are not in view
    }
  });
}

// Grab all relevant elements from DOM
const fadeElms = document.querySelectorAll('.fade');

// Call function for each element
const observer = new IntersectionObserver(observerCallback, observerOptions);
fadeElms.forEach(el => observer.observe(el));


/* page on scroll con menu con anchors corresponding to menu items*/
jQuery(document).ready(function(jQuery) {            
  var topMenu = jQuery("#primary-menu"),
      offset = 40,
      topMenuHeight = topMenu.outerHeight()+offset,
      // All list items
      menuItems =  topMenu.find('a[href*="#"]'),
      // Anchors corresponding to menu items
      scrollItems = menuItems.map(function(){
        var href = jQuery(this).attr("href"),
        id = href.substring(href.indexOf('#')),
        item = jQuery(id);
        //console.log(item)
        if (item.length) { return item; }
      });

  // so we can get a fancy scroll animation
  menuItems.click(function(e){
    var href = jQuery(this).attr("href"),
      id = href.substring(href.indexOf('#'));
        offsetTop = href === "#" ? 0 : jQuery(id).offset().top-topMenuHeight+1;
    jQuery('html, body').stop().animate({ 
        scrollTop: offsetTop
    }, 500);
    e.preventDefault();
  });

  // Bind to scroll
  jQuery(window).scroll(function(){
     // Get container scroll position
     var fromTop = jQuery(this).scrollTop()+topMenuHeight;

     // Get id of current scroll item
     var cur = scrollItems.map(function(){
       if (jQuery(this).offset().top < fromTop)
         return this;
     });

     // Get the id of the current element
     cur = cur[cur.length-1];
     var id = cur && cur.length ? cur[0].id : "";               

     menuItems.parent().removeClass("active");
     if(id){
          menuItems.parent().end().filter("[href*='#"+id+"']").parent().addClass("active");
     }

  })
})

// INTERSECTION OBSERVER API

const observerOptions = {
  root: null, // Null = based on viewport
  rootMargin: "0px", // Margin for root if desired
  threshold: 0.3 // Percentage of visibility needed to execute function
};

function observerCallback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Fade in observed elements that are in view
      entry.target.classList.add('fadeIn');
    }
    else {
      // Fade out observed elements that are not in view
      //entry.target.classList.replace('fadeIn', 'fadeOut');
    }
  });
}

// Grab all relevant elements from DOM
const fadeElms = document.querySelectorAll('.fade');

// Call function for each element
const observer = new IntersectionObserver(observerCallback, observerOptions);
fadeElms.forEach(el => observer.observe(el));


/* Animation on Scroll System v2 (INTERSECTION OBSERVER API) */
(() => {
  const SELECTOR = '.reveal';

  if (!('IntersectionObserver' in window)) {
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll(SELECTOR).forEach(el => el.classList.add('is-inview'));
    });
    return;
  }

  const io = new IntersectionObserver((entries) => {
    for (const e of entries) {
      if (e.isIntersecting) {
        const el = e.target;
        requestAnimationFrame(() => el.classList.add('is-inview'));
        io.unobserve(el);
      }
    }
  }, { rootMargin: '0px 0px -20% 0px', threshold: 0 });

  const observeAll = () => {
    document.querySelectorAll(SELECTOR).forEach(el => {
      if (!el.classList.contains('is-inview')) io.observe(el);
    });
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', observeAll, { once: true });
  } else {
    observeAll();
  }

  // Per supportare elementi aggiunti dopo (es. CMS, SPA)
  new MutationObserver(observeAll)
    .observe(document.documentElement, { childList: true, subtree: true });
})();
/* Animation on Scroll System End */


/* arrow dropmenu *//*
(function ($) {
		$('.icon').click(function(e) {
	  e.preventDefault();
	  if ($(this).parent().hasClass('open')) {
		$('.menu-item-has-children').removeClass('open');
	  } else {
		$('.menu-item-has-children').removeClass('open');
		$(this).parent().addClass('open');
	  }
	});

	var viburno_scroll_position = 0;
$(document).scroll(function(){
	viburno_scroll_position = $(this).scrollTop();
  if(viburno_scroll_position > 50){
	$("body").addClass('is-scrolled');
  } else {
	  $("body").removeClass('is-scrolled');
  }
})

}(jQuery));

/* menu-toggle click active *//*
let viburno_menu = document.querySelector('.menu-toggle');
viburno_menu.addEventListener("click", function() {
	document.body.classList.toggle('primary-open');
});
*/

// parallax cover
const simpleParallax = (selector, modifier) => {
  const paras = Array.from(document.querySelectorAll(selector));
  if (!paras.length) return;

  let ticking = false;

  const update = () => {
    ticking = false;

    for (let i = 0; i < paras.length; i++) {
      const el = paras[i];
      const rect = el.getBoundingClientRect();

      if (rect.bottom < 0 || rect.top > window.innerHeight) continue;

      const y = Math.round((rect.top / modifier) * 100) / 100;
      el.style.objectPosition = `0% ${y}%`;
    }
  };

  const requestTick = () => {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  };

  window.addEventListener("scroll", requestTick, { passive: true });
  window.addEventListener("resize", requestTick, { passive: true });

  requestTick();
};

simpleParallax(".parallax-cover .wp-block-cover__image-background", 15);