// shop Slider
$(function () {
    if ( $('#js-shop-slider').length ) {
      $('#js-shop-slider').slick({
        slidesToShow: 3,
        speed: 800,
        arrows: false,
        dots: false,
        autoplaySpeed: 3000,
        autoplay: true,
        infinite: false,
        pauseOnFocus: false,
        responsive: [
        {
          breakpoint: 959,
          settings: {
            slidesToShow: 1.5,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
          }
        },
        ]
      });
    }
  });
// This is the source code for the video popup.
$(function () {
    if ($(".js-modal-video").length) {
      $(".js-modal-video").modalVideo({
        channel: "youtube",
        youtube: {
          controls: 0,
        },
      });
    }
  });
// This is the source code for the scroll.
  var mainElement = document.getElementById('main');
  var videoElement = document.getElementById('video');
  
  window.addEventListener('scroll', function() {
      var scrollTop = window.scrollY || document.documentElement.scrollTop;
      var mainBottom = mainElement.offsetTop + mainElement.offsetHeight;
      var videoTop = videoElement.offsetTop;
      var elementsWithScrollSwitchClass = document.querySelectorAll('.scroll-switch');
  
      elementsWithScrollSwitchClass.forEach(function(element) {
          if (scrollTop > mainBottom && scrollTop < videoTop) {
              element.classList.add('on');
              element.classList.add('fade-in');
              element.classList.remove('fade-out');
          } else if (scrollTop >= videoTop) {
              element.classList.add('fade-out');
              element.classList.remove('fade-in');
              element.classList.remove('on');
          } else {
              element.classList.remove('on');
              element.classList.remove('fade-in');
              element.classList.remove('fade-out');
          }
      });
  });