(function($) {
    $.fn.rollingbanner = function() {

        var _pathToBanners = '/images/rolling-banners/';

        var _banners = [
            'b1.jpg',
            'b2.jpg',
            'b3.jpg',
            'b4.jpg',
            'b5.jpg',
            'b6.jpg'
        ]

        var pickedImage = getImage();

        return this.each(function() {

            var selector = $(this);

            selector.before('<div style="position:relative;height:246px"></div>');

            selector.hide();

            var img = new Image();

            $(img)
                .load(function() {

                    selector.css("background-image", "url('" + pickedImage + "')");
                    selector.prev().hide();
                    selector.fadeIn(2000);
                })

                .error(function() {
                    alert("Error while loading the picture.");
                })

                .attr('src', pickedImage);
        });

        function getImage() {
            var index = chooseAnImageIndex();
            return buildFullImageUri(_banners[index]);
        }

        function buildFullImageUri(imageName) {
            return _pathToBanners + imageName;
        }

        function chooseAnImageIndex() {
            return Math.floor(_banners.length * Math.random());
        }
    };

})(jQuery);

$(document).ready(function() {
    $('#BannerWrapper').rollingbanner();
});