const scroll = new LocomotiveScroll({
    el: document.querySelector('#main'),
    smooth: true
});

//overlay-image
function topicOverlayAnimation() {
    var topic = document.querySelector(".container")
    var fixed = document.querySelector("#overlay-image")
    topic.addEventListener("mouseenter", function () {
        fixed.style.display = "block"
    })
    topic.addEventListener("mouseleave", function () {
        fixed.style.display = "none"
    })

    var topicHead = document.querySelectorAll(".topic")
    topicHead.forEach(function (e) {
        e.addEventListener("mouseenter", function () {
            var image = e.getAttribute("data-image")
            fixed.style.backgroundImage = `url(${image})`
        })
    })
}
topicOverlayAnimation()

//tabs
const allIndicator = document.querySelectorAll('.indicator li');
const allContent = document.querySelectorAll('.content li');

allIndicator.forEach(item=> {
  item.addEventListener('click', function () {
    const content = document.querySelector(this.dataset.target);

    allIndicator.forEach(i=> {
      i.classList.remove('active');
    })

    allContent.forEach(i=> {
      i.classList.remove('active');
    })

    content.classList.add('active');
    this.classList.add('active');
  })
})

//swiper
function swiperAnimation() {
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        centeredSlides: false,
        spaceBetween: 100,
    });
}
swiperAnimation()

//loading animation
function loadingAnimation() {
    var loading = document.querySelector("#loading")
    setTimeout(function () {
        loading.style.top = "-100%"
    }, 4200)
}
loadingAnimation()

//navbar
function menuAnimation() {

  var menu = document.querySelector("nav h3")
  var full = document.querySelector("#full-screen")
  var navimg = document.querySelector("nav img")
  var flag = 0
  menu.addEventListener("click", function () {
      if (flag == 0) {
          full.style.top = 0
          navimg.style.opacity = 0
          flag = 1
      } else {
          full.style.top = "-100%"
          navimg.style.opacity = 1
          flag = 0
      }
  })
}
menuAnimation()
