{{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
<script defer src="{{ $jquery.RelPermalink }}"></script>
{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
<script defer src="{{ $masonry.RelPermalink }}"></script>
{{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script defer src="{{ $enquire.RelPermalink }}"></script>
{{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
<script defer src="{{ $zzo.RelPermalink }}"></script>
{{ $fancyboxjs := resources.Get "js/jquery.fancybox.min.js" | resources.Fingerprint }}
<script defer src="{{ $fancyboxjs.RelPermalink }}"></script>
{{ $fancyboxcss := resources.Get "css/jquery.fancybox.min.css" | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $fancyboxcss.RelPermalink }}">

<script>
  window.onload = function() {
    // masonry
    var $grid = $('.grid').masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true,
    });
    $grid.imagesLoaded().progress(function () {
      $grid.masonry();
    });

    $('.grid-item').mouseenter(function () {
      $(this).children('.grid-item__desc').show();
    });

    $('.grid-item').mouseleave(function () {
      $(this).children('.grid-item__desc').hide();
    });

    $('.grid-item').click(function () {
      $(this).children('a').get(0).click();
    });

    enquire.register("screen and (max-width:500px)", {
      match: function () {
        $('.grid-item').addClass('full');
        $('.grid-sizer').addClass('full');
        $('.grid-item').removeClass('half');
        $('.grid-sizer').removeClass('half');
      },
      unmatch: function () {
        $('.grid-item').addClass('half');
        $('.grid-sizer').addClass('half');
        $('.grid-item').removeClass('full');
        $('.grid-sizer').removeClass('full');
      },
    }).register("screen and (max-width:700px)", {
      match: function () {
        $('.grid-item').addClass('half');
        $('.grid-sizer').addClass('half');
        $('.grid-item').removeClass('third');
        $('.grid-sizer').removeClass('third');
      },
      unmatch: function () {
        $('.grid-item').addClass('third');
        $('.grid-sizer').addClass('third');
        $('.grid-item').removeClass('half');
        $('.grid-sizer').removeClass('half');
      },
    }).register("screen and (max-width:900px)", {
      match: function () {
        $('.grid-item').addClass('third');
        $('.grid-sizer').addClass('third');
        $('.grid-item').removeClass('quarter');
        $('.grid-sizer').removeClass('quarter');
      },
      unmatch: function () {
        $('.grid-item').addClass('quarter');
        $('.grid-sizer').addClass('quarter');
        $('.grid-item').removeClass('third');
        $('.grid-sizer').removeClass('third');
      },
    }).register("screen and (max-width:1200px)", {
      match: function () {
        $('.grid-item').addClass('quarter');
        $('.grid-sizer').addClass('quarter');
        $('.grid-item').removeClass('fifth');
        $('.grid-sizer').removeClass('fifth');
      },
      unmatch: function () {
        $('.grid-item').addClass('fifth');
        $('.grid-sizer').addClass('fifth');
        $('.grid-item').removeClass('quarter');
        $('.grid-sizer').removeClass('quarter');
      },
    });

    // fancybox
    $('[data-fancybox="gallery"]').fancybox({
      loop: true,
      keyboard: true,
      clickContent: true,
      buttons: [
        "zoom",
        "slideShow",
        "fullScreen",
        "download",
        "thumbs",
        "close",
      ],
      caption: function (instance, item) {
        return $(this).data('alt') || '';
      }
    });

    var imgElements = $('.single__contents:not(".single__contents--gallery")').find('img');
    imgElements.each(function (i, v) {
      $(this).css('cursor', 'pointer');
      $(this).wrap(`<a data-fancybox="gallery" href="${$(this).attr('src')}" data-alt="${$(this).attr('alt')}" data-caption="${$(this).attr('alt')}"></a>`);
    });

    // search
    {{ $searchLanguages := .Site.Params.searchLanguages }}
    var searchLanguages = JSON.parse({{ $searchLanguages | jsonify }});
    {{ if .Site.IsMultiLingual }}
        var baseurl = "{{.Site.BaseURL}}{{.Site.LanguagePrefix}}";
    {{ else }}
        var baseurl = "{{.Site.BaseURL}}";
    {{ end }}

    if (!searchLanguages) {
      searchLanguages = ['en'];
    }

    var lunrIndex = null;
    var pagesIndex = null;
    var searchResults = null;
    var searchMenu = null;

    function endsWith(str, suffix) {
      return str.indexOf(suffix, str.length - suffix.length) !== -1;
    }

    function initLunr() {
      if (!endsWith(baseurl, "/")) {
        baseurl = baseurl + '/';
      };
      
      $.getJSON(baseurl + "index.json")
        .done(function (index) {
          pagesIndex = index;
          lunrIndex = lunr(function () {
            this.use(lunr.multiLanguage(...searchLanguages));
            this.ref('uri');
            this.field('title');
            this.field('description');
            this.field('content');
            //this.field('tags');
            //this.field('series');
            //this.field('categories');

            var that = this;
            index.forEach(function (page) {
              that.add(page);
            });
          });
        })
        .fail(function (jqxhr, textStatus, error) {
          var err = textStatus + ", " + error;
          console.error("Error getting Hugo index file:", err);
        });
    }

    function search(query) {
      return lunrIndex.search(query).map(function (result) {
        return pagesIndex.filter(function (page) {
          return page.uri === result.ref;
        })[0];
      });
    }

    function renderSearchResults(results) {
      searchResults = document.getElementById('search-results');
      searchMenu = document.getElementById('search-menu');
      searchResults.setAttribute('class', 'dropdown is-active');

      var content = document.createElement('div');
      content.setAttribute('class', 'dropdown-content search-content');

      if (results.length > 0) {
        results.forEach(function (result) {
          var item = document.createElement('a');
          item.setAttribute('href', result.uri);
          item.setAttribute('class', 'dropdown-item');
          item.innerHTML = `<div class="menu-item"><div class="menu-item__title">» ${result.title}</div><div class="menu-item__desc">${result.description ? result.description : result.content}</div></div>`;
          content.appendChild(item);
        });
      } else {
        var item = document.createElement('span');
        item.setAttribute('class', 'dropdown-item');
        item.innerText = 'No results found';
        content.appendChild(item);
      }

      while (searchMenu.hasChildNodes()) {
        searchMenu.removeChild(
          searchMenu.lastChild
        );
      }
      searchMenu.appendChild(content);
    }

    function renderSearchResultsMobile(results) {
      searchResults = document.getElementById('search-mobile-results');

      var content = document.createElement('div');
      content.setAttribute('class', 'mobile-search__content');

      if (results.length > 0) {
        results.forEach(function (result) {
          var item = document.createElement('a');
          item.setAttribute('href', result.uri);
          item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">» ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
          content.appendChild(item);
        });
      } else {
        var item = document.createElement('span');
        content.appendChild(item);
      }

      $('#search-mobile-results').empty();
      searchResults.appendChild(content);
    }

    initLunr();

    $("#search").on('input', function (e) {
      if (!e.target.value) {
        $('#search-results').attr('class', 'dropdown');
        return null;
      }

      if ($(window).width() < 770) {
        return null;
      } 

      var results = search(e.target.value);
      renderSearchResults(results);
    });

    $('#search').on('blur', function () {
      if ($(window).width() < 770) {
        return null;
      }
      setTimeout(function () {
        $('#search-results').attr('class', 'dropdown');
      }, 100);
    });

    $('#search').on('click', function (e) {
      if ($(window).width() < 770) {
        return null;
      }
      if (!e.target.value) {
        $('#search-results').attr('class', 'dropdown');
        return null;
      }
      var results = search(e.target.value);
      renderSearchResults(results);
    });

    $('#search').on('keydown', function (e) {
      if ($(window).width() < 770) {
        return null;
      }
      var items = $('#search-menu .dropdown-item');
      var activeIndex = $('#search-menu .dropdown-item.is-active').index();

      items.removeClass('is-active');
      if (e.key === 'ArrowDown') {
        items.eq(activeIndex + 1).addClass('is-active');
      } else if (e.key === 'ArrowUp') {
        items.eq(activeIndex - 1).addClass('is-active');
      } else if (e.key === 'Enter') {
        var currentItemLink = items.eq(activeIndex).attr('href');
        if (currentItemLink) {
          location.href = currentItemLink;
        }
      }
    });

    $("#search-mobile").on('input', function(e) {
      if (!e.target.value) {
        $('#search-mobile-results').empty();
        return null;
      }

      var results = search(e.target.value);
      renderSearchResultsMobile(results);
    });
  }
</script>