(function() {
  "use strict";


  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('fixed-top')) {
      offset += 70
    }

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


  /*!
   * Nav
   */
  let selectHeader = select('#gnbArea')
  let selectTopbar = select('#topbar')
  if (selectHeader) {
    const headerScrolled = () => {
      if (window.scrollY > 100) {
        selectHeader.classList.add('gnb-scrolled')
        if (selectTopbar) {
          selectTopbar.classList.add('topbar-scrolled')
        }
      } else {
        selectHeader.classList.remove('gnb-scrolled')
        if (selectTopbar) {
          selectTopbar.classList.remove('topbar-scrolled')
        }
      }
    }
    window.addEventListener('load', headerScrolled)
    onscroll(document, headerScrolled)
  }


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

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


  /*!
   * 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>"
  });


  /*!
   * Porfolio
   */
  window.addEventListener('load', () => {
    let portfolioContainer = select('.portfolio-items-wrap');
    if (portfolioContainer) {
      let portfolioIsotope = new Isotope(portfolioContainer, {
        itemSelector: '.portfolio-item',
        layoutMode: 'fitRows'
      });

      let portfolioFilters = select('#portfolioFlters li', true);

      on('click', '#portfolioFlters li', function(e) {
        e.preventDefault();
        portfolioFilters.forEach(function(el) {
          el.classList.remove('filter-active');
        });
        this.classList.add('filter-active');

        portfolioIsotope.arrange({
          filter: this.getAttribute('data-filter')
        });

      }, true);
    }

  });


  /*!
   * Porfolio
   */
  const portfolioLightbox = GLightbox({
    selector: '.portfolio-lightbox'
  });


  /*!
   * Gallery
   */
  $(".gallery-carousel").owlCarousel({
    margin: 30,
    autoplay: true,
    dots: true,
    loop: true,
    responsive: {
      0: {
        items: 2
      },
      768: {
        items: 4
      },
      900: {
        items: 6
      }
    }
  });


  /*!
   * 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)
  };


}());