var Wick = Wick || {};
Wick.GalleryPDP = (function(){
  var $gallery = $('.gallery.gallery_pdp'),
    mainContainer = '.gallery__main',
    thumbContainer = '.gallery__thumbs',
    thumbActive = 'gallery__thumb_active';

  function getMainParams(loopedSlides){
    return {
      roundLengths: true,
      watchOverflow: true,
      navigation: {
        nextEl: $gallery.find('.gallery__btn-next')[0],
        prevEl: $gallery.find('.gallery__btn-prev')[0]
      },
      pagination: {
        el: '.gallery__pagination',
        type: 'bullets',
        bulletClass: 'gallery__pagination-bullet',
        bulletActiveClass: 'gallery__pagination-bullet_active'
      },
      slidesPerView: 1,
      loop: true,
      loopedSlides: loopedSlides,
      autoplay: {
        delay: 5000 //this option intended for specify slider-delay in milliseconds.
      }
    };
  }

  function getThumbParams(){
    var cnt = $gallery.find(thumbContainer)[0],
      slidesPerView = cnt.dataset.slides,
      isLocked = $(cnt).find('.swiper-wrapper').children().length <= slidesPerView,
      width = cnt.offsetWidth,
      spaceBetween = spaceBetween = (width - (width > 260 ? 58 : 51) * slidesPerView) / (slidesPerView - 1);

    return {
      roundLengths: true,
      watchOverflow: true,
      navigation: {
        nextEl: $gallery.find('.thumbs__btn-next'),
        prevEl: $gallery.find('.thumbs__btn-prev')
      },
      spaceBetween: spaceBetween,
      slidesPerView: slidesPerView,
      loop: !isLocked,
      slideToClickedSlide: true
    };
  }

  function ActiveIndex(slider, thumbnails) {
    var self = this;

    this.setActiveImage = function(_index){
      slider.slideTo(_index);
      $(thumbnails.slides).removeClass(thumbActive).eq(_index).addClass(thumbActive);
    };

    this.setActiveThumbnail = function(_index){
      $(thumbnails.slides).removeClass(thumbActive).eq(_index).addClass(thumbActive);
    };

    slider
    .on('slideChange', function(){
      self.setActiveThumbnail(this.realIndex);
      $(document).trigger('_slideChange');
    });

    thumbnails
    .on('tap', function(){
      self.setActiveImage($(this.clickedSlide).index());
    });

    self.setActiveThumbnail(slider.realIndex);
  }

  var createSlider = function(){
    var main = $gallery.find(mainContainer)[0],
      thumbs = $gallery.find(thumbContainer)[0],
      sl = new Swiper(main, getMainParams(thumbs.dataset.slides)),
      th = new Swiper(thumbs, getThumbParams());

    if (!th.isLocked) {
      sl.controller.control = th;
      th.controller.control = sl;
    } else {
      new ActiveIndex(sl, th);
      th.$el.addClass('is-locked');
    }
  };

  function handleZoomHover () {
    var _slider = $gallery.find(mainContainer)[0].swiper;

    $(document).on('_galleryMouseEnter', function () {
      _slider.autoplay.stop();
    });

    $(document).on('_galleryMouseLeave', function () {
      _slider.autoplay.start();
    });
  }

  $(document).ready(function () {
    if (!$gallery.length){
      return;
    }

    createSlider();
    handleZoomHover();
  });
})();
