const html = document.querySelector("html");
const header = document.querySelector("header");

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let mobileWidth = 1200;
let scrollPos = 0;
let stickyPos = 0;
let ticking = false;
let timeout;
// let burgerMenu = document.querySelector(".header_mobile__btn");
let linkToggle;
let delay = 300;
let timer;

// Common Header
function headerEvent() {
  window.addEventListener("scroll", scroll, false);
  window.addEventListener("resize", resize, false);

  (headerAnimate = function (call) {
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
    scrollPos = window.scrollY || window.pageYOffset;

    animated();

    if (windowWidth > mobileWidth) {
      header.setAttribute("data-header-mobile", "off");
      // burgerMenu.setAttribute('aria-pressed','false');
      // burgerMarker();
    }

    if (call === undefined) {
      // initialized();
    } else if (call === "scroll") {
      // scrolled();
    } else if (call === "resize") {
      // resized();
    }
  })();

  function animated() {
    // scrollTop();
    sticky();
  }

  function resize() {
    clearTimeout(timer);
    timer = setTimeout(function () {
      timer = null;
      handle();
    }, 66);
  }

  function handle() {
    call = "resize";
    headerAnimate(call, windowWidth);
  }

  function scroll() {
    // 조건문 실행 - 초기 변수가 참인지 거짓인지 판단 후 변환
    if (!ticking) {
      window.requestAnimationFrame(() => {
        call = "scroll";
        headerAnimate(call);
        ticking = false;
      });
      ticking = true;
    }
  }

  function sticky() {
    let scrollPos = window.pageYOffset || document.documentElement.scrollTop;
    let siteMapMenu = document.querySelector(".site-map_menu");

    if (scrollPos > stickyPos) {
      header.setAttribute("data-header", "sticky");
    } else {
      header.removeAttribute("data-header");
    }

    if (siteMapMenu.classList.contains("on")) {
      header.removeAttribute("data-header");
    }

    if (scrollPos > 0) {
      header.classList.add("active");
    } else {
      header.classList.remove("active");
    }

    // 조건문 실행 후 변수 재설정 하여 조건문 재실행
    stickyPos = scrollPos <= 0 ? 0 : scrollPos;

    // AOS Event Scroll
    AOS.init({
      // offset: 300,
      duration: 800,
      easing: "ease",
      once: true,
    });
  }

  // PC Menu Action
  function hoverAction() {
    header.addEventListener("mouseenter", function () {
      header.classList.add("header-active");
    });

    header.addEventListener("mouseleave", function () {
      header.classList.remove("header-active");
    });

    let menuLists = document.querySelectorAll(".header_menu__list");

    let menu = document.querySelector('.header_menu');
    menuLists.forEach((list) => {
      let submenu = list.querySelector(".header_submenu");

      if (submenu) {
        list.addEventListener("mouseenter", function () {
          menuLists.forEach((current) => {
            current.classList.remove("menu-active");
          });

          list.classList.add("menu-active");
          menu.classList.add("menu-active");
        });
        
        list.addEventListener("mouseleave", function () {
          list.classList.remove("menu-active");
          menu.classList.remove("menu-active");
        });
      }
      
    });
    
    
  }
  hoverAction();

  function LanguageBoxEvent() {
    // Language Box Event
    let languageBox = document.querySelector(".language-box");
    let languageIcon = document.querySelector(".language_icon");

    languageIcon.addEventListener("click", function () {
      languageBox.classList.toggle("on");
    });
  }
  LanguageBoxEvent();

  // Header Site Map Event
  function siteMapEvent() {
    let siteMapIcon = document.querySelector(".site-map_icon");
    let siteMapMenu = document.querySelector(".site-map_menu");

    siteMapIcon.addEventListener("click", function () {
      siteMapMenu.classList.toggle("on");
      siteMapIcon.classList.toggle("active");
    });
  }
  siteMapEvent();

  // Header Site Map Mobile Event
  function siteMapMobileEvent() {
    let siteMapToggle = document.querySelectorAll(".site-map_menu__toggle");
    let siteMapMenuList = document.querySelectorAll(".site-map_submenu_depth");

    for (let i = 0; i < siteMapToggle.length; i++) {
      siteMapToggle[i].addEventListener("click", function () {
        for (let j = 0; j < siteMapToggle.length; j++) {
          siteMapToggle[j].classList.remove("on");
          siteMapMenuList[j].classList.remove("on");
        }
        siteMapToggle[i].classList.add("on");
        siteMapMenuList[i].classList.add("on");
      });
    }
  }
  siteMapMobileEvent();
}

// Common Footer
function footerEvent() {
  let familySite = document.querySelector(".family-site");

  if(window.matchMedia("(min-width: 1201px)").matches) {
    familySite.addEventListener("mouseover", function () {
      familySite.classList.add("on");
    });
  
    familySite.addEventListener("mouseout", function () {
      familySite.classList.remove("on");
    });
  } else {
    familySite.addEventListener("click", function () {
      familySite.classList.toggle("on");
    });
  }

    // 푸터 스크롤 탑
    let scrollTopBtn = document.querySelector('#footer .footer-top-btn');

    scrollTopBtn.addEventListener('click',function(){
      var offset = $(".section--01").offset();
      $("html, .section--01").animate({ scrollTop: offset.top }, 500);
    })
}

// Main Event
// Main Visual
function mainVisual() {
  let options = {
    effect: "fade",
    fadeEffect: {
      crossFade: true,
    },
    speed: 1000,
    allowTouchMove: true,
    breakpointsInverse: true,
    loop: true,
    autoplay: {
      delay: 7000,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: ".section--01 .next",
      prevEl: ".section--01 .prev",
    },
    pagination: {
      el: ".section--01 .pagination",
      clickable: true,
    },

    breakpoints: {
      993: {
        allowTouchMove: false,
      },
    },
  };

  const visualSlider = new Swiper(".section--01 .swiper-container", options);

  let stopBtn = document.querySelector(".section--01 .btn-stop");

  stopBtn.addEventListener("click", function () {
    visualSlider.autoplay.stop();
  });

  // 스크롤다운
  function scrollDownbtn() {
    $(".scroll-down").click(function () {
      var offset = $(".section--02").offset();
      $("html, .section--02").animate({ scrollTop: offset.top }, 500);
    });
  }
  scrollDownbtn();
}

// Main Count Up Event
function counterEvent() {
  $(".section--02 .count").countUp({
    delay: 30,
    time: 1500,
  });
}

// Main Section--03 BackgroundChange
function mainSection3() {
  // Item Box Hover Event
  let technologyItem = document.querySelectorAll(".technology__item");
  let backgroundList = document.querySelectorAll(".background_list");

  // console.log(technologyItem);
  // console.log(backgroundList);

  for (let i = 0; i < technologyItem.length; i++) {
    technologyItem[i].addEventListener("mouseover", function () {
      backgroundList[i].classList.add("on");
      technologyItem[i].classList.add("on");
    });
  }

  for (let i = 0; i < technologyItem.length; i++) {
    technologyItem[i].addEventListener("mouseout", function () {
      backgroundList[i].classList.remove("on");
      technologyItem[i].classList.remove("on");
    });
  }

  for (let i = 0; i < technologyItem.length; i++) {
    technologyItem[i].addEventListener("click", function () {
      for (let j = 0; j < technologyItem.length; j++) {
        technologyItem[j].classList.remove("on");
        backgroundList[j].classList.remove("on");
      }
      technologyItem[i].classList.add("on");
      backgroundList[i].classList.add("on");
    });
  }
}

// Main Section--04 TabContents
function tabContents(){
  let tabList = document.querySelectorAll(".section--04 .list_tab li");
  let tabItem = document.querySelectorAll(".section--04 .tab_con");
  let tabMorebtn = document.querySelectorAll(".section--04 .view-more-btn");

  // console.log(tabList);
  // console.log(tabItem);

  for(let i = 0; i < tabList.length; i++){
    tabList[i].addEventListener('click',function(){
      for(let j =0; j < tabList.length; j++){
        tabList[j].classList.remove('on');
        tabItem[j].classList.remove('on');
        tabMorebtn [j].classList.remove('on');
      }
      tabList[i].classList.add('on');
      tabItem[i].classList.add('on');
      tabMorebtn[i].classList.add('on');
    })
  }
}


// Modal Event
function modalEvent(){
  let modal = document.querySelectorAll('.bbs-modal');
  let modalBtn = document.querySelectorAll('.modal-btn');
  let modalClose = document.querySelectorAll('.close--modal');
  let modalClose2 = document.querySelectorAll('.modal-bg');
  
  for(let i = 0; i < modalBtn.length; i++){
    modalBtn[i].addEventListener('click', function(){
      modal[i].classList.add('open');
    });
    modalClose[i].addEventListener('click', function(){
      modal[i].classList.remove('open');
    });
    modalClose2[i].addEventListener('click', function(){
      modal[i].classList.remove('open');
    });
  }
}



// Sub
// Sub Visual Event 
function subVisualEvent(){
  let subVisualSection = document.querySelector('.subvisual-page');

  if(subVisualSection) {
    // scrollTrigger 플러그인 생성
    gsap.registerPlugin(ScrollTrigger);
  
    let subVisualTrigger = document.querySelector('.sub-path');
    let subVisual = document.querySelector('.sub-visual');
    let subVisualBg = document.querySelector('.sub-visual .bg');
  
    let scrollAction = gsap.timeline({
      scrollTrigger:{
        trigger: subVisualTrigger,
        start: "2.5% top",
        end: "bottom top",
        // markers:true,
        scrub:"1",
        onEnter: function () {
          subVisual.classList.add("on");
          subVisualBg.classList.add("active");
        },
        onLeaveBack: function () {
          subVisual.classList.remove("on");
          subVisualBg.classList.remove("active");
        }
      },
    });
  
  
    // 스크롤다운
    function scrollDownbtn() {
      $(".scroll-down").click(function () {
        var offset = $(".section--02").offset();
        $("html, .section--02").animate({ scrollTop: offset.top }, 500);
      }); 
    }
    scrollDownbtn();
  }

}

// Sub Count Up Event
function subCounterEvent() {
  let about = document.querySelector('.about');
  if(about){
    $(".section--02 .count").countUp({
      delay: 30,
      time: 1500,
    });
  }
}

// Company - About - History Event
function historyTab(){
  let tabNavi = document.querySelectorAll('.historyTab__item');
  let tabContents = document.querySelectorAll('.historyTab__contents');

  for(let i = 0; i < tabNavi.length; i++) {
    tabNavi[i].addEventListener('click',function(){
      for(let j = 0; j < tabNavi.length; j++){
        tabNavi[j].classList.remove('on');
        tabContents[j].classList.remove('on');
      }

      tabNavi[i].classList.add('on');
      tabContents[i].classList.add('on');
    })
  }
}


// Company - Employment - Employment Event
function positionList(){
  let career = document.querySelector('.career');

  if(career) {
    let positionItem = document.querySelectorAll('.section--06 .item');
    let positionLabel = document.querySelectorAll('.section--06 .label');
    // let positionContents = document.querySelectorAll('.position__contents');

    for(let i = 0; i < positionLabel.length; i++) {
      positionLabel[i].addEventListener('click',function(){
        for(let j = 0; j < positionLabel.length; j++) {
          positionItem[j].classList.remove('on');
        }

        positionItem[i].classList.toggle('on');
      });
    }
  }
}

function faqEvent(){
  // 게시판 변수 할당
  const faqList = document.querySelector('.position-inner');
  let questions = document.querySelectorAll('.position-inner .label');


  // 자주묻는질문 페이지에서만 해당 이벤트를 실행합니다.
  if(faqList){
    questions.forEach((question) => {
      question.addEventListener('click', function(){
        question.classList.toggle('active');
        
        console.log(question);
        let questionSibling = question.nextElementSibling;

        if(question.classList.contains('active')){
            questionSibling.style.maxHeight = questionSibling.scrollHeight + "px";
        } else {
            questionSibling.style.maxHeight = 0;
        }
      });
    })
  }
}

function prevPage(seq) {
	if(seq === 0) {
		alert("첫번째 페이지 입니다.");
		return false;
	}
	location.href = "./view.php?seq="+seq;
}

function nextPage(seq) {
	if(seq === 0) {
		alert("마지막 페이지 입니다.");
		return false;
	}
	location.href = "./view.php?seq="+seq;
}