; (function ($, document, window) {
  $.pictureViewer = function (options) {

    function cover_html(url){
      if(!url){
        return false
      }
      const index = url.toLowerCase().lastIndexOf(".");
      const str = url.substring(index);
      if (/(.*)\.(mp4|mov)$/.test(str)) {
        return '<video autoplay controls class="cover" src="'+ url +'"></video>'
      }else{
        return '<img class="cover" src="' + url + '">'
      }
    }
    //init param
    var $images = options.images
    var cover = cover_html($images[0]);
    var pictureViewer_html = '<div id="pictureViewer">' +
      '<div class="content">' +
      '<div class="menu-bar">' +
      '<div class="handel close-view" title="close(ESC)"></div>' +
      //   '<div class="handel maximization" title="\u6700\u5927\u5316"></div>' +
      '<div class="handel miniaturization hide" title="mini"></div>' +
      '<div class="clear-flex"></div>' +
      '</div>' +
      '<div class="handel-prev left" title="prev(\u2190)"></div>' +
      '<div class="picture-content">' +
      cover +
      '</div>' +
      '<div class="handel-next right" title="next(\u2192)"></div>' +
      '<div class="counter">' +
      '<span class="num"></span> of <span class="total"></span>' +
      '</div>' +
      '</div>' +
      '</div>';
    //init param
      var $initImageIndex = options.initImageIndex,
      $scrollSwitch = options.scrollSwitch;

    if (!$images || !$images.length) return;
    if (!$initImageIndex) $initImageIndex = 1;
    var $nowImageIndex = $initImageIndex;
    //init dom
    if (!$('#pictureViewer').length) $('body').append(pictureViewer_html);
    //definition variable
    var BODY = $(document.body);
    var ESC_KEY_CODE = 27;
    var LEFT_KEY_CODE = 37;
    var RIGHT_KEY_CODE = 39;
    var $pictureViewer = $('#pictureViewer');
    var $pictureViewerContent = $pictureViewer.children('.content');
    var $cover = $pictureViewer.find('.picture-content .cover');
    var $closeBtn = $pictureViewer.find('.close-view');
    //   var $maximizationBtn = $pictureViewer.find('.maximization');
    var $miniaturizationBtn = $pictureViewer.find('.miniaturization');
    var $prevBtn = $pictureViewer.find('.handel-prev');
    var $nextBtn = $pictureViewer.find('.handel-next');
    var $num = $pictureViewer.find('.counter .num');
    var $total = $pictureViewer.find('.counter .total');
    var defaultViewWidth = $pictureViewerContent.css('width');
    var defaultViewHeight = $pictureViewerContent.css('height');
    var $imagesTotal = $images.length;
    //view is show
    var viewIsShow = function viewIsShow () {
      return $pictureViewer.is(':visible');
    };
    //lock body
    var lockBody = function lockBody () {
      BODY.addClass('ofh');
      return BODY.css('overflow', 'hidden');
    };
    //unlock body
    var unlockBody = function unlockBody () {
      BODY.removeClass('ofh');
      return BODY.css('overflow', 'auto');
    };
    //show view
    var showView = function showView () {
      $pictureViewer.show();
      lockBody();
    };
    //hide view
    var hideView = function hideView () {
      // 关闭视频
      if ($('#pictureViewer').has('video').length > 0 ){
        $('.cover')[0].pause();
      }
      $pictureViewer.hide();
      //   $maximizationBtn.show();
      $miniaturizationBtn.hide();
      $pictureViewerContent.css({ 'width': defaultViewWidth, 'height': defaultViewHeight });
      unlockBody();
    };
    //change image
    var changeImage = function changeImage (index) {
      $cover.hide();
      // 判断是否为图片
      const cover_change = cover_html($images[index])
      $pictureViewer.find('.picture-content .cover').replaceWith(cover_change)
      $cover.fadeIn();
      $nowImageIndex = index;
      changeImageNum();
    };
    //change image num
    var changeImageNum = function changeImageNum () {
      $num.text($nowImageIndex + 1);
    };
    //to prev image
    var toPrevImage = function toPrevImage () {
      return changeImage($nowImageIndex === 0 ? $imagesTotal - 1 : $nowImageIndex - 1);
    };
    //to next image
    var toNextImage = function toNextImage () {
      return changeImage($nowImageIndex === $imagesTotal - 1 ? 0 : $nowImageIndex + 1);
    };
    //init state
    changeImage($initImageIndex - 1);
    showView();
    $total.text($imagesTotal);
    //handle close click
    $closeBtn.on('click', hideView);
    //handel maximization click
    //   $maximizationBtn.on('click', function () {
    //       $(this).hide();
    //       $miniaturizationBtn.show();
    //       $pictureViewerContent.css({ 'width': '100%', 'height': '100%' });
    //   });
    //handel miniaturization click
    $miniaturizationBtn.on('click', function () {
      $(this).hide();
      //   $maximizationBtn.show();
      $pictureViewerContent.css({ 'width': defaultViewWidth, 'height': defaultViewHeight });
    });
    //handle document keyDown
    $(document).on('keydown', function (event) {
      if (!viewIsShow()) return;
      var keyCode = event.keyCode;

      if (keyCode === ESC_KEY_CODE) hideView();
      if (keyCode === LEFT_KEY_CODE) toPrevImage();
      if (keyCode === RIGHT_KEY_CODE) toNextImage();
    });
    //handel prev click
    $prevBtn.on('click', toPrevImage);
    //handel next click
    $nextBtn.on('click', toNextImage);

    $pictureViewer.on('click', function () {
      hideView();
    });

    $pictureViewerContent.on('click', function (e) {
      e.stopPropagation()
    });

    var bindSwiperEvent = function (dom, leftFn, rightFn) {
      // 是否位移
      var isMove = false;
      //   起始位置
      var startX = 0;
      //   移动距离
      var moveX = 0;
      //   距离大于50认为是滑动
      var TAG = 50;
      dom.addEventListener('touchstart', function (e) {
        startX = e.touches[0].clientX;
      });
      dom.addEventListener('touchmove', function (e) {
        isMove = true;
        moveX = e.touches[0].clientX - startX;
      });
      dom.addEventListener('touchend', function (e) {
        if (isMove && Math.abs(moveX) > TAG) {
          if (moveX < 0) {
            typeof leftFn === 'function' && leftFn.call(this, e);
          } else {
            typeof rightFn === 'function' && rightFn.call(this, e);
          }
        }
        // 重置
        isMove = false;
        startX = 0;
        moveX = 0;
      });
    }
    bindSwiperEvent($pictureViewerContent[0], function leftFn () {
      // 左滑下一张
      toNextImage();
    }, function RightFn () {
      // 右滑上一张
      toPrevImage();
    })

    if ($scrollSwitch) {
      try {
        $pictureViewerContent.mousewheel(function (event, delta) {
          if (delta === 1) toPrevImage();
          if (delta === -1) toNextImage();
        });
      } catch (e) {
        throw 'mousewheel plugin No import!';
      }
    }
  };
})(jQuery, document, window);