(function ($) {
    $.fn.slidebox = function (options) {
        var defaults = {
            direction: 'left',
            duration: 0.6,
            easing: 'swing',
            delay: 3,
            startindex: 0,
            hideclickbar: true,
            clickbarradius: 5,
            hidebottombar: false,
            width: null,
            height: null
        };
        var settings = $.extend(defaults, options || {});
        var wrapper = $(this),
            ul = wrapper.children('ul.items'),
            lis = ul.find('li'),
            firstpic = lis.first().find('img');
        var li_num = lis.size(),
            li_height = 0,
            li_width = 0;
        var order_by = 'asc';
        var init = function () {
            if (!wrapper.size()) return false;
            li_height = settings.height ? settings.height : lis.first().height();
            li_width = settings.width ? settings.width : lis.first().width();
            wrapper.css({
                width: li_width + 'px',
                height: li_height + 'px'
            });
            lis.css({
                width: li_width + 'px',
                height: li_height + 'px'
            });
            if (settings.direction == 'left') {
                ul.css('width', li_num * li_width + 'px');
            } else {
                ul.css('height', li_num * li_height + 'px');
            }
            ul.find('li:eq(' + settings.startindex + ')').addclass('active');
            if (!settings.hidebottombar) {
                var tips = $('<div class="tips"></div>').css('opacity', 1).appendto(wrapper);
                var title = $('<div class="title"></div>').html(function () {
                    var active = ul.find('li.active').find('a'),
                        text = active.attr('title'),
                        href = active.attr('href');
                    return $('<a>').attr('href', href).text(text);
                }).appendto(tips);
                var nums = $('<div class="nums"></div>').hide().appendto(tips);
                lis.each(function (i, n) {
                    var a = $(n).find('a'),
                        text = a.attr('title'),
                        href = a.attr('href'),
                        css = '';
                    i == settings.startindex && (css = 'active');
                    $('<a>').attr('href', href).text(text).addclass(css).css('borderradius', settings.clickbarradius + 'px').mouseover(function () {
                        $(this).addclass('active').siblings().removeclass('active');
                        ul.find('li:eq(' + $(this).index() + ')').addclass('active').siblings().removeclass('active');
                        start();
                        stop();
                    }).appendto(nums);
                });
                if (settings.hideclickbar) {
                    tips.hover(function () {
                        nums.animate({
                            top: '0px'
                        }, 'fast');
                    }, function () {
                        nums.animate({
                            top: tips.height() + 'px'
                        }, 'fast');
                    });
                    nums.show().delay(2000).animate({
                        top: tips.height() + 'px'
                    }, 'fast');
                } else {
                    nums.show();
                }
            }
            lis.size() > 1 && start();
        }
        var start = function () {
            var active = ul.find('li.active'),
                active_a = active.find('a');
            var index = active.index();
            if (settings.direction == 'left') {
                offset = index * li_width * -1;
                param = {
                    'left': offset + 'px'
                };
            } else {
                offset = index * li_height * -1;
                param = {
                    'top': offset + 'px'
                };
            }
            wrapper.find('.nums').find('a:eq(' + index + ')').addclass('active').siblings().removeclass('active');
            wrapper.find('.title').find('a').attr('href', active_a.attr('href')).text(active_a.attr('title'));
            ul.stop().animate(param, settings.duration * 1000, settings.easing, function () {
                active.removeclass('active');
                if (order_by == 'asc') {
                    if (active.next().size()) {
                        active.next().addclass('active');
                    } else {
                        order_by = 'desc';
                        active.prev().addclass('active');
                    }
                } else if (order_by == 'desc') {
                    if (active.prev().size()) {
                        active.prev().addclass('active');
                    } else {
                        order_by = 'asc';
                        active.next().addclass('active');
                    }
                }
            });
            wrapper.data('timeid', window.settimeout(start, settings.delay * 1000));
        };
        var stop = function () {
            window.cleartimeout(wrapper.data('timeid'));
        };
        wrapper.hover(function () {
            stop();
        }, function () {
            wrapper.data('timeid', window.settimeout(start, settings.delay * 1000));
        });
        var imgloader = new image();
        imgloader.onload = function () {
            imgloader.onload = null;
            init();
        }
        imgloader.src = firstpic.attr('src');
    };
})(jquery);