(function() {
  "use strict";

  /***************
   * DESiGN TRiPLE
   ***************/
  /*!
   * common
   */
  /* title */
  const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return [...document.querySelectorAll(el)]
    } else {
      return document.querySelector(el)
    }
  }


  const on = (type, el, listener, all = false) => {
    let selectEl = select(el, all)
    if (selectEl) {
      if (all) {
        selectEl.forEach(e => e.addEventListener(type, listener))
      } else {
        selectEl.addEventListener(type, listener)
      }
    }
  }


  const onscroll = (el, listener) => {
    el.addEventListener('scroll', listener)
  }

  /*!
   * Nav
   */
  const scrollto = (el) => {
    let header = select('#gnbArea')
    let offset = header.offsetHeight

    if (!header.classList.contains('')) {
      offset -= 16
    }

    let elementPos = select(el).offsetTop
    window.scrollTo({
      top: elementPos - offset,
      behavior: 'smooth'
    })
  }


  /*!
   * Nav
   */
  let selectGnb = select('#header')
  let selectCover = select('#coverArea')
  if (selectGnb) {
    let headerOffset = selectGnb.offsetTop
    let nextElement = selectGnb.nextElementSibling
    const headerFixed = () => {
      if ((headerOffset - window.scrollY) <= 0) {
        selectGnb.classList.add('fixed-top')
        selectCover.classList.add('scrolled-offset')
      } else {
        selectGnb.classList.remove('fixed-top')
        selectCover.classList.remove('scrolled-offset')
      }
    }
    window.addEventListener('load', headerFixed)
    onscroll(document, headerFixed)
  }


  /*!
   * Mobile Nav
   */
  on('click', '.mobile-nav-toggle', function(e) {
    select('#navbar').classList.toggle('mobile-navbar');
  })

  $(document).mouseup(function(e) {
    let navbarLayer = $(".navbar");
    if (navbarLayer.has(e.target).length === 0) {
      navbarLayer.removeClass("mobile-navbar");
    }
  });


  /*!
   * Mobile Nav
   */
  on('click', '.navbar .dropdown > a', function(e) {
    if (select('#navbar').classList.contains('mobile-navbar')) {
      e.preventDefault()
      this.nextElementSibling.classList.toggle('dropdown-active')
    }
  }, true)


  /*!
   * Prevent Scrolling
   */
  $('.gnb').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
      scrollTop = this.scrollTop,
      scrollHeight = this.scrollHeight,
      height = $this.innerHeight(),
      delta = ev.originalEvent.wheelDelta,
      up = delta > 0;

    var prevent = function() {
      ev.stopPropagation();
      ev.preventDefault();
      ev.returnValue = false;
      return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
      $this.scrollTop(scrollHeight);
      return prevent();
    } else if (up && delta > scrollTop) {
      $this.scrollTop(0);
      return prevent();
    }
  });


  /*!
   * Cover
   */
  let coverCarouselIndicators = select("#carouselIndicators")
  let coverCarouselItems = select('#carousel .carousel-item', true)

  coverCarouselItems.forEach((item, index) => {
    (index === 0) ?
    coverCarouselIndicators.innerHTML += "<li data-bs-target='#carousel' data-bs-slide-to='" + index + "' class='active'></li>":
      coverCarouselIndicators.innerHTML += "<li data-bs-target='#carousel' data-bs-slide-to='" + index + "'></li>"
  });


  /*!
   * Swiper Slides
   */

  new Swiper('.swiper-slides', {
    autoHeight: true,
    speed: 600,
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    slidesPerView: 'auto',
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      320: {
        slidesPerView: 1,
        spaceBetween: 30
      },
      768: {
        slidesPerView: 2,
        spaceBetween: 30
      },
      992: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      1200: {
        slidesPerView: 3,
        spaceBetween: 30
      }
    }
  });


  /*!
   * Back to top
   */
  let backtotop = select('#backToTop')
  if (backtotop) {
    const toggleBacktotop = () => {
      if (window.scrollY > 100) {
        backtotop.classList.add('active')
      } else {
        backtotop.classList.remove('active')
      }
    }
    window.addEventListener('load', toggleBacktotop)
    onscroll(document, toggleBacktotop)
  };


}());