/**
 *  Hero module slider
 */
var heroPanelSlider = (function ($) {

  var pub = {}; // public facing functions
  var heroModule = $('.hero__container');
  var heroPanels = $('.hero__panel');

  pub.init = function () {
    pub._heroPanelSlickSlider();

    if (heroPanels.length > 0) {
      pub._setHeroModuleBackground();
      pub._heroModuleResponsiveImages();
    }
  };

  /**
   * Initialize the heroPanels slider
   */
  pub._heroPanelSlickSlider = function () {
    if (heroModule.length > 0 && heroPanels.length > 1) {
      var autoplayOption = false,
        autoplaySpeed = heroModule.attr('data-autoplay');

      // enable autoplay if the hero attribute has a speed set
      if ('off' !== autoplaySpeed) {
        autoplayOption = true;
      }

      // initialize slick slider
      heroModule.slick({
        dots: true,
        fade: true,
        arrows: true,
        adaptiveHeight: true,
        autoplay: autoplayOption,
        autoplaySpeed: autoplaySpeed,
        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
            }
          }
        ]
      });
    }
  };

  /**
   * Check if the current hero module contains a mobile image attribute and switch image sources during resize if needed.
   */
  pub._heroModuleResponsiveImages = function () {
    var resizeTimer;

    // listen for resize
    $(window).on('resize', function (e) {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function () {
        pub._setHeroModuleBackground(heroPanels);
      }, 200);
    });
  };

  /**
   * Loop through the hero panel elements and set the proper image size by viewport width
   */
  pub._setHeroModuleBackground = function () {
    heroPanels.each(function () {
      var mobileSrc = $(this).attr('data-mobile'),
        desktopSrc = $(this).attr('data-desktop'),
        viewWidth = $(window).width();

      // background elements aren't set if parallax is enabled on this panel.
      if ($(this).find('video').length > 0 || $(this).find('.jarallax').length > 0) {
        return true;
      }

      // only continue if we have a mobile image set for this panel
      if (typeof mobileSrc === 'undefined' || typeof desktopSrc === 'undefined') {
        return true;
      }

      // set our default background image
      var panelImage = 'url(' + desktopSrc + ')';

      // switch out panel image src if we're on mobile view
      if (viewWidth < 768) {
        panelImage = 'url(' + mobileSrc + ')';
      }

      // update panel css
      $(this).css({
        'background-image': panelImage
      });
    });
  };

  return pub;

})(jQuery);
