﻿(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: 5,             // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px
            OffsetY: 1,              // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加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') + '">' + 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);