/**
 * Gallery Module
 *
 * @external SlickSlider
 * @external BaguetteBox
 */

var galleryModule = (function($) {
  var pub = {}; // public facing functions
  const galleries = $('.gallery, .gallery-layout');
  const masonryLayout = $('.gallery-layout--masonry');
  const filmstripLayout = $('.gallery-layout--filmstrip');

  pub.init = function() {
    if (galleries.length > 0) {
      // init Baguette Box for gallery overlay
      pub._initBaguettebox(galleries);

      // init Slick Slider for carousel
        // old gallery layouts/styles - for backwards compatibility
      pub._initSlickSlider('.gallery');
        // new gallery layouts/styles
      pub._initSlickSlider('.gallery-layout--default');
      if (masonryLayout) {
          $(window).on("load", function() {
              pub._initMasonrySlickSlider();
          });
      }
      if (filmstripLayout) {
        pub._initFilmStripSlickSlider();
      }
    }
  };


  /**
  * Initialize BaguetteBox.js for gallery overlay
  */
  pub._initBaguettebox = function () {
    baguetteBox.run('.gallery, .gallery-layout, .gallery-layout--masonry, .gallery-layout--filmstrip', {
      noScrollbars: true,
      afterShow: function() {
        $('#baguetteBox-overlay').attr('aria-labelledby', 'Photo Gallery');
      }
    });

    if (filmstripLayout) {
      baguetteBox.run('.filmstrip-nav', {
        noScrollbars: true
      });
    }
  };


  /**
   * Initialize Slick Slider for carousel
   *
   * @param {HTMLelement} element Gallery Element.
   */
  pub._initSlickSlider = function(element) {
    var gallery = $(element),
    slidesToShow = gallery.attr('data-slides-to-show');

    if (!slidesToShow) {
      return;
    }

    gallery.slick({
      dots: false,
      arrows: true,
      adaptiveHeight: true,
      autoplay: false,
      slidesToShow: slidesToShow,
      slidesToScroll: ((slidesToShow-1)+1),
      prevArrow:
        '<button class="slick-prev" aria-label="Previous" type="button"><svg class="icon icon-chevron-left"><use xlink:href="#icon-chevron-left"></use></svg></button>',
      nextArrow:
        '<button class="slick-next" aria-label="Next" type="button"><svg class="icon icon-chevron-right"><use xlink:href="#icon-chevron-right"></use></svg></button>',
      responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  };

  /**
  * Initialize Slick Slider for Masonry Layout
  *
  */
  pub._initMasonrySlickSlider = function () {
      // select all instances where masonry gallery class is found and apply setting to all on page
      var grid = $('.gallery-grid > .gallery-layout--masonry'), i;

      for (i = 0; i < grid.length; ++i) {
        var msnry = new Masonry(grid[i], {
            // options...
            itemSelector: '.gallery-layout__image',
            columnWidth: '.gallery-layout__image',
            gutter: 16
        });

        if (typeof addthis !== 'undefined') {
          setTimeout(function() {
            imagesLoaded( grid, function() {
              msnry.layout();
            });
          }, 2000);
        } else {
          imagesLoaded( grid, function() {
            msnry.layout();
          });
        }
       }
      };

  /**
  * Initialize Slick Slider for Film Strip Layout
  *
  */
  pub._initFilmStripSlickSlider = function () {
    $(filmstripLayout).slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3000,
      arrows: false,
      fade: true,
      asNavFor: '.filmstrip-nav'
    });

    $('.filmstrip-nav').slick({
      slidesToShow: 10,
      slidesToScroll: 1,
      asNavFor: '.gallery-layout--filmstrip',
      arrows: true,
      dots: false,
      centerMode: true,
      focusOnSelect: true,
      prevArrow:
        '<button class="slick-prev" aria-label="Previous" type="button"><svg class="icon icon-chevron-left"><use xlink:href="#icon-chevron-left"></use></svg></button>',
      nextArrow:
        '<button class="slick-next" aria-label="Next" type="button"><svg class="icon icon-chevron-right"><use xlink:href="#icon-chevron-right"></use></svg></button>',
      responsive: [
        {
          breakpoint: 960,
          settings: {
            slidesToShow: 5
          }
        },
        {
          breakpoint: 620,
          settings: {
            slidesToShow: 3
          }
        }
      ]
    });
  };

  return pub;

})(jQuery);
