// hamburger
const hamburger = document.querySelector(".js-hamburger");
const drawer = document.querySelector(".js-drawer");
const drawerLinks = document.querySelectorAll(".js-drawer a");
const body = document.body;

hamburger.addEventListener("click", () => {
  const isActive = drawer.classList.toggle("is-active");
  hamburger.classList.toggle("is-active");

  if (isActive) {
    drawer.style.visibility = "visible";
    body.classList.add("is-fixed"); 
  } else {
    body.classList.remove("is-fixed");
    setTimeout(() => {
      if (!drawer.classList.contains("is-active")) {
        drawer.style.visibility = "hidden";
      }
    }, 300);
  }
});

drawerLinks.forEach((drawerLink) => {
  drawerLink.addEventListener("click", () => {
    hamburger.classList.remove("is-active");
    drawer.classList.remove("is-active");
    body.classList.remove("is-fixed");

    setTimeout(() => {
      drawer.style.visibility = "hidden";
    }, 300);
  });
});

drawer.addEventListener("click", () => {
  hamburger.classList.remove("is-active");
  drawer.classList.remove("is-active");
  body.classList.remove("is-fixed"); 

  setTimeout(() => {
    drawer.style.visibility = "hidden";
  }, 300);
});
// nav2 wrap
const listItems = document.querySelectorAll('.nav2 li');
const listContainer = document.querySelector('.nav2');

function checkWrap() {
  let prevOffsetTop = listItems[0].offsetTop;
  
  listItems.forEach((item, index) => {
    if (item.offsetTop !== prevOffsetTop) {
      listItems[index - 1].querySelector('a').style.borderRight = 'none';
    }
    prevOffsetTop = item.offsetTop;
  });
}

window.addEventListener('resize', checkWrap);

checkWrap();

// delayScroll
function delayScrollAnime() {
  var time = 0.2;
  var value = time;
  $('.delayScroll').each(function () {
    var parent = this; 
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    var childs = $(this).children(); 
    
    if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
      $(childs).each(function () {
        
        if (!$(this).hasClass("fadeUp")) {
          
          $(parent).addClass("play"); 
          $(this).css("animation-delay", value + "s");
          $(this).addClass("fadeUp");
          value = value + time;
          
          var index = $(childs).index(this);
          if((childs.length-1) == index){
            $(parent).removeClass("play");
          }
        }
      })
    }
  })
}

$(window).scroll(function (){
  delayScrollAnime()
});

// anime-up
document.addEventListener("DOMContentLoaded", () => {
  const objects = document.querySelectorAll('.anime-up');

  const cb = function(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('displayed');
        observer.unobserve(entry.target);
      }
    });
  };

  const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0
  };

  const io = new IntersectionObserver(cb, options);

  objects.forEach(object => {
    io.observe(object);
  });
});

const animationTargetElements = document.querySelectorAll(".anime-up");

animationTargetElements.forEach(targetElement => {
  const originalHTML = targetElement.innerHTML;
  const tempDiv = document.createElement("div");
  tempDiv.innerHTML = originalHTML;
  
  targetElement.innerHTML = "";

  let charIndex = 0; 

  tempDiv.childNodes.forEach(node => {
    if (node.nodeType === Node.TEXT_NODE) {

      node.textContent.split("").forEach(char => {
        const spanWrapper = document.createElement("span");
        const innerSpan = document.createElement("span");
        innerSpan.style.animationDelay = `${(charIndex * 0.05)}s`;
        innerSpan.textContent = char;
        spanWrapper.appendChild(innerSpan);
        targetElement.appendChild(spanWrapper);
        charIndex++;
      });
    } else if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains("jp")) {
      const jpWrapper = document.createElement("span");
      jpWrapper.classList.add("jp");

      node.textContent.split("").forEach(char => {
        const spanWrapper = document.createElement("span");
        const innerSpan = document.createElement("span");
        innerSpan.style.animationDelay = `${(charIndex * 0.05)}s`;
        innerSpan.textContent = char;
        spanWrapper.appendChild(innerSpan);
        jpWrapper.appendChild(spanWrapper);
        charIndex++;
      });

      targetElement.appendChild(jpWrapper);
    }
  });
});

// youtube
(function () {
  if ($(".js-modal-video").length) {
    $(".js-modal-video").modalVideo({
      channel: "youtube",
      youtube: {
        controls: 1,
      },
    });
  }
})();

// scroll-in
jQuery(function ($) {
  var fadeIn = $('.scroll-in');
  $(window).on('scroll', function () {
    $(fadeIn).each(function () {
      var offset = $(this).offset().top;
      var scroll = $(window).scrollTop(); 
      var windowHeight = $(window).height();
      if (scroll > offset - windowHeight + 150) {
        $(this).addClass("scroll-opacity");
      }
    });
  });
});

// loading
window.addEventListener('load', () => {
  const loading = document.querySelector('.loading');
  const logo = document.querySelector('.loading__logo');
  const main = document.querySelector('.mainContents');

  const startTime = performance.now();
  const MIN_LOADING_TIME = 3500;

  loading.classList.add('animate');

  const wait = Math.max(0, MIN_LOADING_TIME - (performance.now() - startTime));

  setTimeout(() => {
    loading.classList.add('fade-out');
  }, wait);

  loading.addEventListener('animationend', (e) => {
    if (e.animationName === 'fadeOut') {
      main.classList.add('show');
    }
  });
});