(function($) {
    $.fn.fadeshow = function(options) {
        var defaults = {
            imageArray: "",
            imagePath: "",
            interval: 3000,
            fadeSpeed: 1000
        };
        var settings = $.extend({}, defaults, options);

        return this.each(function() {
            var images = settings.imageArray.split(',');
            var container = $(this);
            var innerContainer,
            storage,
            containerHeight,
            containerWidth,
            currentImage,
            nextImage,
            perviousControl,
            nextControl,
            pauseControl,
            direction,
            timer;
            var isPaused = false;
            var currentIndex = 0;
            var counter = images.length - 1;

            init();

            function init() {

                containerHeight = container.height();
                containerWidth = container.width();
                innerContainer = $('<div id="slideshow-inner"/>').width(containerWidth)
                                                                 .height(containerHeight)
                                                                 .css({
                                                                     'position': 'absolute',
                                                                     'z-index': '0'
                                                                 })
                                                                 .appendTo(container);
                storage = $('<div id="storage"/>').hide()
                                                  .appendTo(container);
                perviousControl = $('<a href="#"/>').addClass('slideshow-control previous')
                                                  .bind('click', function() {
                                                      direction = 'previous';
                                                      handlePause($(this));
                                                  })
                                                  .appendTo(container);
                nextControl = $('<a href="#"/>').addClass('slideshow-control next')
                                                .bind('click', function() {
                                                    direction = 'next';
                                                    handlePause($(this));
                                                })
                                                 .appendTo(container);
                pauseControl = $('<a href="#"/>').addClass('slideshow-control pause')
                                                .bind('click', function() {
                                                    handlePause($(this));
                                                })
                                                 .appendTo(container);
                currentIndex = 0;
                currentImage = settings.imagePath + images[currentIndex];
                innerContainer.css({
                    'background-image': 'url(' + currentImage + ')'
                }).fadeIn(settings.fadeSpeed);
                storage.css('background-image', 'url(' + nextImage + ')');
                direction = 'next';
                run();
            }

            function run() {
                clearInterval(timer);
                isPaused = false;
                loadImage();
                timer = setInterval(loadImage, settings.interval);
            }

            function pause() {
                if (!isPaused) {
                    clearInterval(timer);
                    isPaused = true;
                }
            }

            function handlePause(elem) {
                if (elem.hasClass('pause')) {
                    elem.addClass('play')
                        .removeClass('pause');
                    pause();
                }
                else {
                    $('.play').removeClass('play')
                              .addClass('pause');
                    run();
                }
            }

            function loadImage() {
                if (innerContainer.is(':not(:animated)')) {
                    innerContainer.stop()
                              .fadeOut(settings.fadeSpeed, function() {
                                  currentImage = settings.imagePath + images[currentIndex];
                                  innerContainer.css({
                                      'background-image': 'url(' + currentImage + ')',
                                      'opacity': '1'
                                  }).fadeIn(settings.fadeSpeed);
                                  setIndex();
                                  nextImage = settings.imagePath + images[currentIndex];
                                  storage.css('background-image', 'url(' + nextImage + ')');
                              });
                }
            }

            function setIndex() {
                if (direction == 'next')
                    currentIndex == counter ? currentIndex = 0 : currentIndex++;
                else
                    currentIndex == 0 ? currentIndex = counter : currentIndex--;
            }
        });
    }
})(jQuery);