$.fn.indexSlider = function() {
    return this.each(function() {
        var $this = $(this);
        var $slideList = $this.find('div.slide');
        var cntSlide = $slideList.length;
        var curSlide = 0;
        var timeoutId = 0;
        var timeout = 7000;
        var fadeSpeed = 1000;
        var $pagination;
        var $paginationA;

        $pagination = $('<ul class="pagination"></ul>');
        $this.append($pagination);
        for (var i = 0; i < $slideList.length; i++) {
            $pagination.append('<li><a href="#">' + (i + 1) + '</a></li>');
        }
        $paginationA = $pagination.find('a');
        $pagination.find('li:first-child').addClass('active');

        $slideList.each(function(index) {
            var $slide = $(this);
            $slide.css({
                width   : $slide.width(),
                position: 'absolute',
                left    : '50%',
                top     : '0',
                margin  : '0 0 0 -' + Math.floor($slide.innerWidth() / 2) + 'px'
            }).wrapInner($('<div class="slide-content"></div>').css({
                backgroundImage: $slide.css("backgroundImage")
            }));

            if (index == 0) {
                $slide.css({display: 'block'});
            } else {
                $slide.css({display: 'none'});
            }
        });

        $paginationA.each(function(index) {
            $(this).click(function(e) {
                if (!($(this).parent('li.active').length || $this.find('div.slide:animated').length)) {
                    stop();
                    gotoSlide(index);
                    start();
                }
                e.preventDefault();
            });
        });

        gotoSlide = function(newSlide) {
            if (newSlide >= cntSlide) {
                return;
            }

            $($paginationA.get(curSlide)).parent().removeClass('active');
            $($paginationA.get(newSlide)).parent().addClass('active');

            var $newSlideContent = $($slideList.get(newSlide)).find('.slide-content');

            if (newSlide > curSlide) {
                $newSlideContent.css({visibility: 'hidden'});
                $($slideList.get(newSlide)).fadeIn(fadeSpeed, function() {
                    $($slideList.get(curSlide)).css({display: 'none'});
                    $newSlideContent.css({
                        visibility: 'visible',
                        opacity: 0
                    }).animate({opacity: 1}, fadeSpeed);
                    curSlide = newSlide;
                });
            } else if (newSlide < curSlide) {
                $newSlideContent.css({visibility: 'hidden'});
                $($slideList.get(newSlide)).css({display: 'block'});
                $($slideList.get(curSlide)).fadeOut(fadeSpeed, function() {
                    $newSlideContent.css({
                        visibility: 'visible',
                        opacity: 0
                    }).animate({opacity: 1}, fadeSpeed);
                });
                curSlide = newSlide;
            }

            Cufon.refresh('#index #slider ul.pagination li a');
        };

        nextSlide = function() {
            if (curSlide == cntSlide - 1) {
                gotoSlide(0);
            } else {
                gotoSlide(curSlide + 1);
            }
        };

        start = function() {
            timeoutId = setTimeout('temp()', timeout);

            temp = function() {
                nextSlide()
                timeoutId = setTimeout('temp()', timeout);
            };
        };

        stop = function() {
            if (timeoutId) {
                clearTimeout(timeoutId);
            }
        };

        $($slideList.get(0)).addClass('active');
        start();
    });
}
