/**
 * 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;
};