(function($) {
    $.fn.extend({
        bgslider: function(options) {
            var settings = $.extend({
                images: null,
                speed: 3000,
                loading: null,
                preloadall: false,
                onslidechange: null
            }, options);
            return this.each(function() {
                settings.images = eval(settings.images);
                var galleryContainer = $(this);
                var currentSlide = -1;
                var isLoaded = false;
                var isSlideShowRunning = true;
                var isLoadedAll = false;
                var interval;
                var mid;
                var left;
                var isPlaying = true;
                var imagesCache = [];
                var imgLoadCounter = 0;
                
                for (var i = 0; i < settings.images.length; i++) {
                    imagesCache[i] = $('<img/>').attr('src', settings.images[i].image).load(function() {
                        if (settings.preloadall) {
                            ++imgLoadCounter
                            if (imgLoadCounter == settings.images.length) isLoaded = true;
                        }
                        else
                            isLoaded = true;
                    });
                }
                
                start();
                isLoaded = true;
                currentSlide = 0;
                showImage(0);

                function getValue(val) {
                    return parseInt(val.replace('px', ''));
                }
                function showImage(index) {
                    if (isLoaded) {
                        var src = settings.images[index].title;
                        var backgroundDiv = $('<div/>');
                        backgroundDiv.css('position', galleryContainer.css('position'));
                        backgroundDiv.attr('class', 'bg-slider');
                        backgroundDiv.css('z-index', '-9999');
                        backgroundDiv.css('width', '100%');
                        backgroundDiv.css('height', '100%');
                        /* backgroundDiv.css('background-size', '100%'); //will not work in IE*/
                        backgroundDiv.css('background-image', 'url(' + imagesCache[index].attr('src') + ')');
                        backgroundDiv.css('background-repeat', 'no-repeat');
                        backgroundDiv.css('background-position', 'center');
                        backgroundDiv.css('left', '0px');
                        backgroundDiv.css('position', 'absolute');
                        backgroundDiv.css('opacity', '0');
                        galleryContainer.prepend(backgroundDiv);

                        backgroundDiv.css('z-index', '-1000');
                        if (settings.onslidechange != null) settings.onslidechange(imagesCache[index].attr('src'), index);
                        galleryContainer.find('.bg-slider:eq(0)').animate({ 'opacity': 1.0 }, 3000,
                            function() {
                                backgroundDiv.css('z-index', '-9999');
                                galleryContainer.find('.bg-slider:eq(1)').remove();
                                isLoadedAll = true;
                            });
                    }
                }
                function navigateSlide() {
                    if (isLoaded) {
                        currentSlide++;
                        if (currentSlide == settings.images.length) currentSlide = 0;
                        showImage(currentSlide);
                    }
                }

                function start() {
                    mid = getValue(galleryContainer.css('height')) / 2;
                    left = getValue(galleryContainer.css('width')) / 2 - 24;
                    var backgroundDiv = $('<div/>');
                    backgroundDiv.css('z-index', '1000');
                    backgroundDiv.attr('class', 'bg-slider');
                    backgroundDiv.css('left', left + 'px');
                    backgroundDiv.css('top', mid + 'px');
                    backgroundDiv.css('position', 'absolute');
                    if ( settings.loading ) backgroundDiv.html('<img src="' + settings.loading + '" alt="loading"/>');
                    galleryContainer.prepend(backgroundDiv);
                    interval = setInterval(navigateSlide, settings.speed);
                }
                
                function getParentElement(el) {
                    temp = el;
                    while ((temp != null) && (temp.tagName != "BODY")) {
                        if ($(temp).attr('id') == 'gallery') {
                            el = temp;
                            return el;
                        }
                        temp = temp.parentElement;
                    }
                    return el;
                }
            });

        }
    });
})(jQuery);