;
(function($, window, document, undefined) {
    var pluginName = "bcatBGSwitcher",
            defaults = {
        urls: [],
        startIndex: 0, 
        timeout: 5000, //轮播速度
        alt: 'Picture',
        speed: 800, // 场景转变速度
        links: false 
    };
    function Plugin(element, options) {

        this._defaults = defaults;
        this._name = pluginName;

        this.init(element, options);
    }
    Plugin.prototype = {
        init: function(element, options) {
            var instance = {};
            instance.currentIndex = options.startIndex;
            instance.currentImage = this.preloadImage(element, options, instance.currentIndex);
            var that = this;
            instance.currentImage.load(function() {
                instance.currentImage.appendTo(element);
                instance.currentImage.fadeIn(options.speed);
                instance.currentIndex++;
                if (options.urls[instance.currentIndex]) {
                    if (options.links) {
                        var loaderDiv = $('<div />').attr({
                            'id': element.id + '-loader',
                            'style': 'display: none;'
                        });
                        loaderDiv.appendTo(element);                        
                        that.generateLinks(element, options, instance);
                    }
                    that.runSlideShow(element, options, instance);
                }
            });
        },
        runSlideShow: function(element, options, instance) {
            var that = this;
            instance.intervalId = setInterval(function() {
                that.updateImage(element, options, instance);
            }, options.timeout);
        },
        updateImage: function(element, options, instance) {
            if (!options.urls[instance.currentIndex]) {
                instance.currentIndex = 0;
            }
            var nextImage = $('#' + element.id + instance.currentIndex);
            if (nextImage.length) {           
                instance.currentImage.fadeOut(options.speed);
                nextImage.fadeIn(options.speed);
            } else {             
                nextImage = this.preloadImage(element, options, instance.currentIndex);
                this.swapPreloadedImages(instance.currentImage, nextImage, element, options);
            }
            if (options.links) {
                this.setActiveLink(element, options, instance);
            }
            instance.currentImage = nextImage;
            instance.currentIndex++;
        },
        preloadImage: function(element, options, index, style) {
            if (!style) {
                style = 'display: none;';
            }

            var img = $('<img />');
            img.attr({
                'id': element.id + index,
                'src': options.urls[index],
                'alt': options.alt,
                'style': style
            });
            return img;
        },
        swapPreloadedImages: function(currentImage, nextImage, element, options, showLoader) {
            if (showLoader) {
                $(element).addClass('loading');
            }

            nextImage.load(function() {
                if (showLoader) {
                    $(element).removeClass('loading');
                }
                nextImage.appendTo(element);
                currentImage.fadeOut(options.speed);
                nextImage.fadeIn(options.speed);
            });
        },
        generateLinks: function(element, options, instance) {
            instance.linkParent = $('<div />');
            instance.linkParent.attr({
                'id': element.id + '-navigation',
                'style': 'display: none;'
            });
            var that = this;

            $.each(options.urls, function(index, value) {
                var link = $('<a />');
                var linkClass = '';
                if (index === options.startIndex) {
                    linkClass = 'active';
                }
                link.attr({
                    'id': element.id + '-link' + index,
                    'href': '#',
                    'class': linkClass
                });
                link.click(function(event) {
                    event.preventDefault();
                    that.switchImageTo(element, options, instance, index);
                });
                instance.linkParent.append(link);
            });

            instance.linkParent.insertAfter(element);
            instance.linkParent.fadeIn(options.speed);
        },
        switchImageTo: function(element, options, instance, index) {
            
            if (!options.urls[index]) {
                console.log('can not switch to a non-existent element');
                return;
            }
            var nextImage = $('#' + element.id + index);
            if (nextImage.attr('id') !== instance.currentImage.attr('id')) {                
                instance.currentIndex = index;
                clearInterval(instance.intervalId);
                if (nextImage.length) {           
                    instance.currentImage.fadeOut(options.speed);
                    nextImage.fadeIn(options.speed);
                } else {           
                    nextImage = this.preloadImage(element, options, instance.currentIndex);
                    this.swapPreloadedImages(instance.currentImage, nextImage, element, options, true);
                }
                this.setActiveLink(element, options, instance);
                instance.currentImage = nextImage;
                instance.currentIndex++;
                var that = this;
                instance.intervalId = setInterval(function() {
                    that.updateImage(element, options, instance);
                }, options.timeout);

            }

        },
        setActiveLink: function(element, options, instance) {
            if (instance.linkParent.length) {
                instance.linkParent.find('a').removeClass('active');
                instance.linkParent.find('a#' + element.id + '-link' + instance.currentIndex).addClass('active');
            }
        }
    };
    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                var localOptions = $.extend({}, defaults, options);
                $.data(this, "plugin_" + pluginName, new Plugin(this, localOptions));

            }
        });
    };
})(jQuery, window, document);