/**
 * Coder: EzrealY
 * Time: 2017.07.31
 * Mail: 1005526074@qq.com
 * 效果原作者: https://oss.so/article/71
 */
 
;(function ($, window, document, undefined) {

    var Shutter = function (elem, options) {
      this.defaults = {
        shutterW: 1200,
        shutterH: 500,
        isAutoPlay: false,
        playInterval: 3000,
        curDisplay: 0,
        fullPage: false
      };
      this.opts = $.extend({}, this.defaults, options);
  
      this.inital(elem);
    };
  
    Shutter.prototype = {
      play: function () {
        var self = this;
  
        if (this.opts.isAutoPlay) {
          clearInterval(this.playTime);
  
          this.playTime = setInterval(function () {
            self.$nextBtn.click();
          }, this.opts.playInterval);
        }
      },
  
      moveSwitch: function (randomNum, command, index) {
        switch (randomNum) {
          case 0:
            this.gridWhole(index, 0);
          break;
          case 1:
            this.gridWhole(index, 1);
          break;
          case 2:
            this.gridWhole(index, 2);
          break;
          case 3:
            this.gridWhole(index, 3);
          break;
          case 4:
            this.gridTop(index, 0);
          break;
          case 5:
            this.gridTop(index, 1);
          break;
          case 6:
            this.gridTop(index, 2);
          break;
          case 7:
            this.gridLeft(index, 0);
          break;
          case 8:
            this.gridLeft(index, 1);
          break;
          case 9:
            this.gridLeft(index, 2);
          break;
          case 10:
            this.gridOpacity(index);
          break;
          case 11:
            this.gridAccordion(index);
          break;
          case 12:
            this.gridLittle(index);
          break;
          case 13:
            this.gridSwitch(index);
          break;
          default:
            this.gridTop(index, 0);
          break;
        }
      },
  
      toggleMove: function (command, index) {
        if (!command) {
          if (this.curDisplay === index) {
            return;
          } else if (this.curDisplay === 0 && index === this.shutterItem_len - 1
                    || index < this.curDisplay) {
            command = 'prev';
          } else {
            command = 'next';
          }
        }
  
        if (!index) {
          if (command === 'prev') {
            index = this.curDisplay - 1;
  
            if (this.curDisplay === 0) {
              index = this.shutterItem_len - 1;
            }
          } else {
            index = this.curDisplay + 1;
  
            if (this.curDisplay === this.shutterItem_len - 1) {
              index = 0;
            }
          }
        }
  
        this.$shutterDesc.animate({bottom: -36});
  
        var random = function (min, max) {
          return Math.floor(Math.random() * (max + 1) - min);
        };
  
        this.moveSwitch(random(0, 13), command, index);
  
        this.shutterTitle = this.$shutterItem.eq(index).attr('data-shutter-title');
      },
  
      initalShutter: function () {
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $nearlyElem = this.$shutterItem.not($curElem);
  
        $curElem.css('zIndex', 20);
        $nearlyElem.each(function (i) {
          $(this).css('zIndex', ++ i);
        });
  
        this.$shutter.css({width: this.opts.shutterW, height: this.opts.shutterH});
  
        if (this.opts.fullPage) {
          this.$shutter.css({
            width: $(window).width(),
            height: $(window).height(),
            margin: 0,
            borderRadius: 0,
            border: 'none'
          });
        }
      },
  
      inital: function (elem) {
        var self = this;
        this.$shutter = elem;
        this.$shutterItem = this.$shutter.find('.shutter-img a');
        this.$prevBtn = this.$shutter.find('.shutter-btn .prev');
        this.$nextBtn = this.$shutter.find('.shutter-btn .next');
        this.$shutterNav = this.$shutter.find('.shutter-nav li');
        this.$shutterDesc = this.$shutter.find('.shutter-desc');
  
        this.shutterItem_len = this.$shutterItem.length;
        this.curDisplay = this.opts.curDisplay > this.shutterItem_len - 1 ? this.opts.curDisplay = this.shutterItem_len - 1 : this.opts.curDisplay;
        this.b_stop = true;
        this.shutterTitle = '';
        this.playTime = null;
  
        this.initalShutter();
  
        this.shutterW = this.$shutter.width();
        this.shutterH = this.$shutter.height();
  
        this.$prevBtn.bind('click', function () {
          if (self.b_stop) {
            self.b_stop = false;
  
            self.toggleMove('prev');
          }        
        });
        this.$nextBtn.bind('click', function () {
          if (self.b_stop) {
            self.b_stop = false;
  
            self.toggleMove('next');
            self.$shutterDesc.animate({bottom: -36});
          }
        });
  
        if (this.opts.fullPage) {
          $(window).resize(function () {
            setTimeout(function () {
              self.$shutter.css({width: $(this).width(), height: $(this).height()});
  
              self.shutterW = self.$shutter.width();
              self.shutterH = self.$shutter.height();
            }, 30);
          });
        }
  
  
        this.play();
        this.$shutter.hover(function () {
          clearInterval(self.playTime);
        }, function () {
          self.play();
        });
      },
  
  
      // 图片切换方法
      recovery: function (target, cur, index, backup, interval) {
        var self = this;
  
        setTimeout(function () {
          target.css('zIndex', 20);
          cur.css('zIndex', self.curDisplay).html(backup);
          self.curDisplay = index;
          self.$shutterDesc.animate({bottom: 0}).find('p').text(self.shutterTitle);
  
          self.b_stop = true;
        }, interval);
      },
  
      gridWhole: function (index, showNum) {
        var self = this;
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $targetElem = this.$shutterItem.eq(index);
        var backup = $curElem.html();
        var $createElem = $('<div class="created"></div>');
        var movingVal = 0;
  
        $targetElem.css('zIndex', 19);
        $curElem.find('img').fadeOut();
  
        $createElem.html(backup).css({
          position: 'absolute',
          zIndex: 20,
          left: 0,
          top: 0,
          overflow: 'hidden',
          width: this.shutterW,
          height: this.shutterH
        });
  
        $curElem.append($createElem);
  
        if (showNum === 0) {
          movingVal = this.shutterW;
  
          $createElem.velocity({left: movingVal}, {duration: 1000});
        } else if (showNum === 1) {
          movingVal = -this.shutterW;
  
          $createElem.velocity({left: movingVal}, {duration: 1000});
        } else if (showNum === 2) {
          movingVal = this.shutterH;
  
          $createElem.velocity({top: movingVal}, {duration: 1000});
        } else if (showNum === 3) {
          movingVal = -this.shutterH;
  
          $createElem.velocity({top: movingVal}, {duration: 1000});
        }
  
        $createElem.find('img').css({
          display: 'block',
          width: this.shutterW,
          height: this.shutterH
        });
  
        this.recovery($targetElem, $curElem, index, backup, 1200);
      },
  
      gridTop: function (index, showNum) {
        var self = this;
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $targetElem = this.$shutterItem.eq(index);
        var backup = $curElem.html();
        var speed = 0;
  
        $targetElem.css('zIndex', 19);
        $curElem.find('img').fadeOut();
  
        for (var i = 0; i < 12; i ++) {
          var $createElem = $('<div class="created"></div>');
  
          $createElem.html(backup).css({
            position: 'absolute',
            zIndex: 20,
            left: this.shutterW / 12 * i,
            top: 0,
            overflow: 'hidden',
            width: this.shutterW / 12,
            height: this.shutterH
          });
  
          $curElem.append($createElem);
  
          $createElem.find('img').css({
            display: 'block',
            width: this.shutterW,
            height: this.shutterH,
            marginLeft: this.shutterW / -12 * i
          });
        }
  
        if (showNum === 0) {
          var movingVal = 0;
  
          $curElem.find('.created').each(function (i) {
            if (i % 2 === 0) {
              movingVal = self.shutterH;
            } else {
              movingVal = -self.shutterH;
            }
  
            $(this).velocity({top: movingVal}, {duration: 1000});
          });
        } else if (showNum === 1) {
          $curElem.find('.created').each(function (i) {
            speed = 80 * i;
  
            $(this).velocity({top: $(this).height()}, {duration: 120 + speed});
          });
        } else if (showNum === 2) {
          $curElem.find('.created').each(function (i) {
            speed = 80 * i;
  
            $(this).velocity({top: -$(this).height()}, {duration: 120 + speed});
          });
        }
  
        this.recovery($targetElem, $curElem, index, backup, 1000);
      },
  
      gridLeft: function (index, showNum) {
        var self = this;
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $targetElem = this.$shutterItem.eq(index);
        var backup = $curElem.html();
        var speed = 0;
  
        $targetElem.css('zIndex', 19);
        $curElem.find('img').fadeOut();
  
        for (var i = 0; i < 12; i ++) {
          var $createElem = $('<div class="created"></div>');
  
          $createElem.html(backup).css({
            position: 'absolute',
            zIndex: 20,
            left: 0,
            top: this.shutterH / 12 * i,
            overflow: 'hidden',
            width: this.shutterW,
            height: this.shutterH / 12
          });
  
          $curElem.append($createElem);
  
          $createElem.find('img').css({
            display: 'block',
            width: this.shutterW,
            height: this.shutterH,
            marginTop: this.shutterH / -12 * i
          });
        }
  
        if (showNum === 0) {
          var movingVal = 0;
  
          $curElem.find('.created').each(function (i) {
            if (i % 2 === 0) {
              movingVal = self.shutterW;
            } else {
              movingVal = -self.shutterW;
            }
  
            $(this).velocity({left: movingVal}, {duration: 1000});
          });
        } else if (showNum === 1) {
          $curElem.find('.created').each(function (i) {
            speed = 80 * i;
  
            $(this).velocity({left: $(this).width()}, {duration: 120 + speed});
          });
        } else if (showNum === 2) {
          $curElem.find('.created').each(function (i) {
            speed = 80 * i;
  
            $(this).velocity({left: -$(this).width()}, {duration: 120 + speed});
          });
        }
  
        this.recovery($targetElem, $curElem, index, backup, 1000);
      },
  
      gridOpacity: function (index) {
        var self = this;
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $targetElem = this.$shutterItem.eq(index);
        var backup = $curElem.html();
        var $createElem = $('<div class="created"></div>');
  
        $targetElem.css('zIndex', 19);
        $curElem.find('img').fadeOut();
  
        $createElem.html(backup).css({
          position: 'absolute',
          zIndex: 20,
          left: 0,
          top: 0,
          overflow: 'hidden',
          width: this.shutterW,
          height: this.shutterH,
          opacity: 1
        });
  
        $createElem.find('img').css({
          display: 'block',
          width: this.shutterW,
          height: this.shutterH
        });
  
        $curElem.append($createElem);
  
        $createElem.velocity({opacity: 0}, {duration: 1000});
  
        this.recovery($targetElem, $curElem, index, backup, 1000);
      },
  
      gridAccordion: function (index) {
        var self = this;
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $targetElem = this.$shutterItem.eq(index);
        var backup = $curElem.html();
        var iNow = 0;
        var speed = 0;
  
        $targetElem.css('zIndex', 19);
        $curElem.find('img').fadeOut();
  
        for (var i = 0; i < 12; i ++) {
          var $createElem = $('<div class="created"></div>');
  
          $createElem.html(backup).css({
            position: 'absolute',
            zIndex: 20,
            left: this.shutterW / 12 * i,
            top: 0,
            overflow: 'hidden',
            width: this.shutterW / 12,
            height: this.shutterH,
            opacity: 1
          });
  
          $curElem.append($createElem);
  
          $createElem.find('img').css({
            display: 'block',
            width: this.shutterW,
            height: this.shutterH,
            marginLeft: this.shutterW / -12 * i
          });
        }
  
        $curElem.find('.created').each(function (i) {
          speed = i * 80;
  
          $(this).velocity({opacity: 0}, {duration: 320 + speed});
        });
  
        this.recovery($targetElem, $curElem, index, backup, 1200);
      },
  
      gridLittle: function (index) {
        var self = this;
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $targetElem = this.$shutterItem.eq(index);
        var backup = $curElem.html();
        var coordinate = null;
  
        $targetElem.css('zIndex', 19);
        $curElem.find('img').fadeOut();
  
        for (var i = 0; i < 24; i ++) {
          var $createElem = $('<div class="created"></div>');
  
          $createElem.html(backup).css({
            width: this.shutterW / 6,
            height: this.shutterH / 4,
            left: (this.shutterW / 6) * (i % 6),
            top: (this.shutterH / 4) * Math.floor(i / 6)
          });
  
          $curElem.append($createElem);
  
          $createElem.find('img').css({
            display: 'block',
            width: this.shutterW,
            height: this.shutterH,
            marginLeft: -(this.shutterW / 6) * (i % 6),
            marginTop: -(this.shutterH / 4) * Math.floor(i / 6)
          });
        }
  
        coordinate = getXY($curElem.find('.created'), 4, 6);
  
        tab(coordinate, 0, 0, function () {
          var left = parseInt(this.style.left);
          var top = parseInt(this.style.top);
  
          $(this).velocity({
            left: left + 100,
            top: top + 100,
            opacity: 0
          });
        }, 100, +1, +1);
  
        this.recovery($targetElem, $curElem, index, backup, 1200);
      },
  
      gridSwitch: function (index) {
        var self = this;
        var $curElem = this.$shutterItem.eq(this.curDisplay);
        var $targetElem = this.$shutterItem.eq(index);
        var backup = $curElem.html();
  
        $targetElem.css('zIndex', 19);
        $curElem.find('img').fadeOut();
  
        for (var i = 0; i < 20; i ++) {
          var $createElem = $('<div class="created"></div>');
  
          $createElem.html(backup).css({
            width: this.shutterW / 5,
            height: this.shutterH / 4,
            left: (this.shutterW / 5) * (i % 5),
            top: (this.shutterH / 4) * Math.floor(i / 5)
          });
  
          $curElem.append($createElem);
  
          $createElem.find('img').css({
            display: 'block',
            width: this.shutterW,
            height: this.shutterH,
            marginLeft: -(this.shutterW / 5) * (i % 5),
            marginTop: -(this.shutterH / 4) * Math.floor(i / 5)
          });
        }
  
        $curElem.find('.created').each(function (i) {
          if (i % 2 === 0) {
            $(this).find('img').velocity({
              marginLeft: $(this).width()
            }, {duration: 500});
          }
        });
  
        setTimeout(function () {
          $curElem.find('.created').each(function (i) {
            if (i % 1 === 0) {
              $(this).find('img').velocity({
                marginLeft: $(this).width()
              }, {duration: 500});
            }
          });
        }, 600);
  
        this.recovery($targetElem, $curElem, index, backup, 1200);
      },
  
      constructor: Shutter
    };
  
    $.fn.shutter = function (options) {
      this.each(function () {
        var shutter = new Shutter($(this), options);
      });
    };
  
  })(jQuery, window, document);
  
  function tab(arr, x, y, fn, delay, speedX, speedY) {
    if (!arr[y] || !arr[y][x]) {
      return;
    }
  
    if (fn) {
      fn.call(arr[y][x]);
  
      clearTimeout(arr[y][x].timer);
      arr[y][x].timer = setTimeout(function () {
        tab(arr, x, y + speedY, fn, delay, speedX, speedY);
        tab(arr, x + speedX, y, fn, delay, speedX, speedY);
      }, delay);
    }
  };
  
  function getXY(objs, rows, cols) {
    var arr1 = [];
  
    for (var i = 0; i < rows; i ++) {
      var arr2 = [];
  
      for (var j = 0; j < cols; j ++) {
        objs[i * cols + j].xIndex = j;
        objs[i * cols + j].yIndex = i;
  
        arr2.push(objs[i * cols + j]);
      }
  
      arr1.push(arr2);
    }
  
    return arr1;
  };