(function($) {
  $.fn.smallslider = function(options) {
    var defaults = {
      Time: 3000,              // 切换时间间隔，单位毫秒，1秒=1000毫秒
      ButtonImage: '',         // 按钮的背景图
      ButtonImageOn: '',       // 当播放到某按钮时，按钮的背景图
      ShowText: true,          // 是否显示标题，如果不显示，则只显示按钮
      TextLink: true,          // 是否给显示的标题加上链接，如果为false，则，只显示标题，标题不可单击，链接的地址自动和当前播放到的图片地址一致
      AutoStart: true,         // 是否自动开始播放
      SwitchMode: 'Click',     // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换
      SwitchEffect: 'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,
      SwitchTime: 300,         // 切换时间，单位毫秒，1秒=1000毫秒
      Position: 'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom   
      OffsetX: 10,             // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
      OffsetY: 4,              // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
      ButtonSpace: 4           // 按钮之间的间隔 单位为像素，但不要加px
    };
    var opts = $.extend(defaults, options);
    var $this = $(this);
    var slider = new Array();
    var ButtonBgColor = '';
    var ButtonBgColorOn = '';
    if ($this.length > 0) {
      $.each($this, function() {
        Init(this);
        CreateButtons(this, 0);
        if (opts.AutoStart) StartSlider(this, 0);
        onImage(this);
      });
    }

    function onImage(obj) {
      $(obj).find('img').hover(function() {
        StopSlider(obj);
      }, function() {
        var i = $(obj).find('li').index($(obj).find('.current-li'));
        StartSlider(obj, i + 1);
      });
    }
    function Slide(obj, index) {
      StopSlider(obj); // 先清楚掉以前的setTimeOut;

      // index表示当前停止在哪个元素上上面，其上一张为 prev，后一个，也就是将要显示的为 next
      var listArr = $(obj).find('li');
      var count = listArr.length;
      if (index > count - 1) index = 0;
      // index 可能会传入-1 值，表示当前需要切换到状态0，即第一张图片，那么next正好是0
      // 所以这里需要先经过运算，得出next，然后再进行限定0 - count-1之间
      var prev = index - 1 < -1 ? count - 1 : index - 1;
      var next = index + 1 < count ? index + 1 : 0;

      if (index < 0) index = 0;
      if (next < 0) next = 0;

      listArr.hide();
      listArr.eq(index).show();
      switch (opts.SwitchEffect) {
        case 'fadeOut':
          listArr.eq(index).fadeOut(opts.SwitchTime, function() {
            listArr.eq(next).show();
          });
          break;
        case 'fadeIn':
          listArr.eq(index).hide();
          listArr.eq(next).fadeIn(opts.SwitchTime);
          break;
        case 'slideUp':
          listArr.eq(index).slideUp(opts.SwitchTime, function() { listArr.hide(); listArr.eq(next).show(); });
          break;
        case 'slideDown':
          listArr.eq(index).hide();
          listArr.eq(next).slideDown(opts.SwitchTime, function() { listArr.hide(); listArr.eq(next).show(); });
          break;
        case 'none':
          listArr.eq(index).hide();
          listArr.eq(next).show();
          break;
        default:
          listArr.eq(index).hide();
          listArr.eq(next).show();
          break;
      }

      // 切换表示当前元素
      $(obj).find('li').removeClass('current-li');
      $(obj).find('li').eq(index).addClass('current-li');
      $(obj).find('span').removeClass('current-btn');
      $(obj).find('span').eq(next).addClass('current-btn');

      // 切背景图标
      if (opts.ButtonImageOn != '') {
        if (opts.ButtonImage != '') {
          $(obj).find('span').css({ background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
        } else {
          $(obj).find('span').css({ backgroundColor: ButtonBgColor, backgroundImage: '', borderWidth: '1px' });
        }
        $(obj).find('span.current-btn').css({ background: 'transparent url(' + opts.ButtonImageOn + ') no-repeat 0 0', borderWidth: 0 });
      }
      //切换标题

      var tit = $(obj).find('img').eq(next).attr('alt');
      if (opts.TextLink) {
        tit = '<a href="' + $(obj).find('img').eq(next).parent('a').attr('href') + '" target="_blank">' + tit + '</a>';
      }
      $(obj).find('h3').html(tit);
      ++index;
      index = index > count - 1 ? 0 : index;
      StartSlider(obj, index);
    }

    function CreateButtons(obj, index) {
      var listArr = $(obj).find('li');
      var count = listArr.length;
      var buttons = '';
      for (var i = 1; i <= count; i++) {
        buttons += '<span>' + i + '</span>';
      }
      buttons = '<div class="smallslider-btns">' + buttons + '</div>';
      var left = 0, right = 0, top = 0, bottom = 0;
      var style_btns = {}, style_lays = {};
      switch (opts.Position) {
        case 'LeftTop':
          left = opts.OffsetX;
          top = opts.OffsetY;
          style_btns = { left: left + 'px', top: top + 'px' };
          style_lays = { left: 0, top: 0, textAlign: 'right' };
          break;
        case 'RightTop':
          right = opts.OffsetX;
          top = opts.OffsetY;
          style_btns = { right: right + 'px', top: top + 'px' };
          style_lays = { left: 0, top: 0, textAlign: 'left' };
          break;
        case 'RightBottom':
          right = opts.OffsetX;
          bottom = opts.OffsetY;
          style_btns = { right: right + 'px', bottom: bottom + 'px' };
          style_lays = { left: 0, bottom: 0, textAlign: 'left' };
          break;
        case 'LeftBottom':
          left = opts.OffsetX;
          bottom = opts.OffsetY;
          style_btns = { left: left + 'px', bottom: bottom + 'px' };
          style_lays = { left: 0, bottom: 0, textAlign: 'right' };
          break;
      }
      $(buttons).css(style_btns).appendTo($(obj));
      if (opts.ShowText) {
        $('<div class="smallslider-lay"></div>').css(style_lays).appendTo($(obj));
        var tit = $(obj).find('img').eq(index).attr('alt');
        if (opts.TextLink) {
          tit = '<a href="' + $(obj).find('img').eq(index).parent('a').attr('href') + '">' + tit + '</a>';
        }
        $('<h3></h3>').html(tit).css(style_lays).appendTo($(obj));
      }
      $(obj).find('span:not(:first)').css({ marginLeft: opts.ButtonSpace + 'px' });
      $(obj).find('span').removeClass('current-btn');
      $(obj).find('span').eq(index).addClass('current-btn');

      if (opts.ButtonImage != '') {
        $(obj).find('span').css({ border: 0, background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
      }

      if (opts.ButtonImageOn != '') {
        if (opts.ButtonImage != '') {
          $(obj).find('span').css({ background: 'transparent url(' + opts.ButtonImage + ') no-repeat 0 0' });
        } else {
          $(obj).find('span').css({ backgroundColor: ButtonBgColor, backgroundImage: '', borderWidth: '1px' });
        }
        $(obj).find('span.current-btn').css({ background: 'transparent url(' + opts.ButtonImageOn + ') no-repeat 0 0', borderWidth: 0 });
      }

      if (opts.SwitchMode == 'Click') {
        $(obj).find('span').click(function() {
          var ix = $(obj).find('span').index($(this));
          Slide(obj, ix - 1); // 传入ix-1表示当前是他前面一个，则在调用函数后，就会自然的切换到下一张图片，正好是ix
        });
      } else if (opts.SwitchMode == 'Hover') {
        $(obj).find('span').hover(function() {
          var ix = $(obj).find('span').index($(this));
          Slide(obj, ix - 1);
        });
      }
      ButtonBgColor = $(obj).find('span:not(.current-btn)').css('backgroundColor');
      ButtonBgColorOn = $(obj).find('span.current-btn').css('backgroundColor');
    }

    function Init(obj) {
      var listArr = $(obj).find('li');
      listArr.hide();
      listArr.eq(0).show();
    }
    function StartSlider(obj, index) {
      // 由第几个序号开始 初始为-1
      var st = setTimeout(function() {
        Slide(obj, index);
      }, opts.Time);
      var i = $this.index(obj);
      slider[i] = st;
    }
    function StopSlider(obj) {
      var i = $this.index(obj);
      clearTimeout(slider[i]);
      slider[i] = 0;
    }

    return this.each(function() {
      this.AccessStop = function() {
        $.each($this, function() {
          StopSlider($this);
        });
      }
    });

  }

})(jQuery);