﻿(function($) {
    $.fn.swapSlider = function(options) {
        // default configuration properties
        var defaults = {
            speed: 1000,
            pause: 10000,
            width: 0,
            height: 0,
            continuous: false,
            onSwapping: function(oldEl, newEl) { },
            onSwapped: function(oldEl, newEl) { }
        };

        var options = $.extend(defaults, options);
        this.each(function() {
            var obj = $(this);
            var elements = $("li", obj);
            var size = elements.length;
            var clickable = true;
            var index = 0;
            var container = null;
            if (size > 0) {
                container = $("<div>").addClass("swap_container").css({ position: 'relative' });
                obj.after(container);
                var currEl = appendItem(0);
                var width = options.width;
                if (width <= 0) {
                    width = currEl.width();
                }
                var height = options.height;
                if (height <= 0) {
                    height = currEl.height();
                }
                container.width(width);
                container.height(height);
                currEl.show();
                if (size > 1) {
                    setTimeout(swapNext, options.pause);
                }
            }

            function appendItem(index) {
                var item = $("<div>").addClass("swap_item").css({ position: 'absolute', top: '0px', left: '0px' });
                item.html(elements.eq(index).html());
                container.append(item);
                return item.hide();
            };

            function swapNext() {
                index++;
                if (index >= size) {
                    index = 0;
                }
                var currItem = $(".swap_item", container);
                var newItem = appendItem(index);
                if (options.onSwapping && typeof options.onSwapping == 'function') {
                    options.onSwapping(currItem, newItem);
                }
                currItem.fadeOut(options.speed, function() {
                    currItem.remove();
                });
                newItem.fadeIn(options.speed, function() {
                    if (options.onSwapped && typeof options.onSwapped == 'function') {
                        options.onSwapped(currItem, newItem);
                    }
                    if (options.continuous) {
                        setTimeout(swapNext, options.pause);
                    }
                });
            };
        });
    };

})(jQuery);