/*
BASED ON bgStretcher

Customised by Peter Kula to preload image then display itself using instead of rendering on screen.

use    $(document).csBackground({ images: 'http://imgserv.com/img1.jpg'  }); 

No slideshow support
*/

; (function ($) { 
    /*  Variables  */
    var container = null;
    var allImgs = '', allLIs = '', containerStr = '';

    var element = this;
    var _bgStretcherPause = false;
    var _bgStretcherTm = null;

    $.fn.csBackground = function (settings) {
        settings = $.extend({}, $.fn.csBackground.defaults, settings);
        $.fn.csBackground.settings = settings;

        function _build() {
            if (!settings.images.length) { return; }

            _genHtml();

            containerStr = '#' + settings.imageContainer;
            container = $(containerStr);
            allImgs = '#' + settings.imageContainer + ' IMG';
            allLIs = '#' + settings.imageContainer + ' LI';

            //			$(allLIs).hide();
            //			$(allLIs + ':first').show().addClass('bgs-current');

            if (!container.length) { return; }
            $(window).resize(_resize);

            $(allLIs).hide();
            $(allLIs + ':first').show().addClass('bgs-current');

            _resize();
        };

        function _resize() {
            var winW = $(window).width();
            var winH = $(window).height();
            var imgW = 0, imgH = 0;

            //	Update container's height
            container.width(winW);
            container.height(winH);

            //	Non-proportional resize
            if (!settings.resizeProportionally) {
                imgW = winW;
                imgH = winH;
            } else {
                var initW = settings.imageWidth, initH = settings.imageHeight;
                var ratio = initH / initW;

                imgW = winW;
                imgH = winW * ratio;

                if (imgH < winH) {
                    imgH = winH;
                    imgW = imgH / ratio;
                }
            }

            //	Apply new size for images
            if (!settings.resizeAnimate) {
                $(allImgs).width(imgW).height(imgH);
            } else {
                $(allImgs).animate({ width: imgW, height: imgH }, 'normal');
            }
        };

        function _genHtml() {
            //The original takes all images in the array and creates an UL. In this case i just attach 1 UL item. Then prealod image and attach image to that UL upon load
            var code = '<div id="' + settings.imageContainer + '" class="csBackground"><ul>';
            code += '<li></li>';
            code += '</ul></div>';
            $(code).appendTo('body');

            myImage = new Image();
            $(myImage).load(function () {
                $(this).hide();
                $('.csBackground li').append(this);
                _resize();
                //You can either make it fadeIn/ SlideDown.. etc.. Show is the cleanest
                $(myImage).show();
            }).attr('src', settings.images[0])
        };

        /*  Start csBackground  */
        _build();
    };


    /*  Default Settings  */
    $.fn.csBackground.defaults = {
        imageContainer: 'csBackground',
        resizeProportionally: true,
        resizeAnimate: false,
        images: [],
        imageWidth: 1024,
        imageHeight: 768,
    };
    $.fn.csBackground.settings = {};
})(jQuery);