$(function () {
  // 缩略图展示个数
  var slidesPerView = 5;

  // 元素集
  var elements = {
    gallery: '.gallery',
    thumbnailsSwiper: '.gallery #gallery-thumbnails-swiper',
    thumbnailsSwiperSlides: '.gallery #gallery-thumbnails-swiper .swiper-slide',
    mainSwiper: '.gallery #gallery-main-swiper',
    mainSwiperSlides: '.gallery #gallery-main-swiper .swiper-slide',
    overSize: '.gallery-oversize',
    overSizeBox: '.gallery-oversize .gallery-oversize-helper-box',
    expand: '.gallery-expand',
  };

  // 缩略图 Swiper
  var thumbnails = new Swiper(elements.thumbnailsSwiper, {
    slidesPerView: slidesPerView,
    direction: $('.gallery').attr('data-direction') || 'horizontal',
    spaceBetween: 20,
    mousewheelControl: true,
    fade: {
      crossFade: false,
    }
  });

  // 大图 Swiper
  var main = new Swiper(elements.mainSwiper, {
    effect: 'fade',
    fade: {
      crossFade: false,
    }
  });

  // Video.js
  window.HELP_IMPROVE_VIDEOJS = false; // 为避免用到 7 以下的版本，设置取消收集数据。
  var videos = {};
  $(elements.gallery).find('video').each(function (_, video) {
    var videoItem = videojs(video.id, {
      language: 'zh',
      // muted: true
    });

    videos[video.id] = videoItem;
  });

  var mainWidth = $(elements.mainSwiperSlides).width();
  var mainHeight = $(elements.mainSwiperSlides).height();
  var overSizeWidth = $(elements.overSize).width();
  var overSizeHeight = $(elements.overSize).height();
  var overSizeImgWidth = $(elements.overSize).find('img').width();
  var overSizeImgHeight = $(elements.overSize).find('img').height();
  var minOverSizeBox = 80;

  var maxTop = 340;
  var maxLeft = -180;

  // 放大镜
  $(elements.mainSwiperSlides).find('img').on('mousemove', function (e) {
    // 因为布局形式 (absolute)，所以把 mainRect 放在了 MouseMove 里边。
    var mainRect = $(elements.mainSwiper)[0].getBoundingClientRect();

    // 设置图片并显示出来
    var src = $(this).attr('src');
    var newSrc = $(elements.overSize).find('img').attr('src');
    $(elements.overSize).attr('data-active', 'true');
    if (src !== newSrc) $(elements.overSize).find('img').attr('src', src);

    // var x = e.clientX - mainRect.x;
    // var y = e.clientY - mainRect.y;
    var x = e.clientX - mainRect.left;
    var y = e.clientY - mainRect.top;

    // 移动辅助盒子
    $(elements.overSizeBox).css({
      top: Math.min(y, maxTop),
      left: Math.min(-520 + x, maxLeft),
    });

    var rateX = parseFloat((x / mainWidth).toFixed(8));
    var rateY = parseFloat((y / mainHeight).toFixed(8));

    var top = overSizeImgHeight * rateY;
    var left = overSizeImgWidth * rateX;

    // $(elements.overSize).find('.gallery-oversize-image')[0].scrollTo({
    //   top: top,
    //   left: left
    // });
    $(elements.overSize).find('.gallery-oversize-image')[0].scrollTop  = top;
    $(elements.overSize).find('.gallery-oversize-image')[0].scrollLeft = left;
  }).on('mouseout', function () {
    $(elements.overSize).attr('data-active', 'false');
  });

  // 将缩略图第一个元素设置为激活状态
  $(elements.thumbnailsSwiperSlides).first().addClass('active');

  // 处理缩略图 Swiper 元素点击事件
  $(elements.thumbnailsSwiperSlides).click(function () {
    var index = $(this).index();
    var activeIndex = $(this).attr('data-swiper-slide-index');

    // 暂停所有视频
    var keys = Object.keys(videos);
    for (var i = 0; i < keys.length; i++) {
      videos[keys[i]].pause();
    }

    if (activeIndex === undefined) activeIndex = index;

    if (index === activeIndex && index >= (slidesPerView - 1)) {
      index += 2;
    } else {
      index = 0;
    }

    thumbnails.slideTo(index);
    main.slideTo(activeIndex);

    $(this).siblings().removeClass('active');
    $(this).addClass('active');

    // 播放视频
    var video = $(elements.mainSwiper).find('.swiper-slide:nth-child(' + (activeIndex + 1) + ') video');
    if (video.length && video[0].id && 0) {
      videos[video[0].id].play();
    }
  });

});