/*
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; }
           
            if ($("body").hasClass("MainImage")){
        
             }
            else
            {  
                $(window).resize(_resize);
                $(document).bind('forceResize', _resize); //Use this globally to force a resize of the background if needed.
                $(allLIs).hide();
                $(allLIs + ':first').show().addClass('bgs-current');

            _resize();}
           
          

           
        };

        function _resize() {
         if ($("body").hasClass("MainImage")){
        
             }
            else{
            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>';

            if ($("body").hasClass("MainImage")){
//            $(".Header").prepend($(code));$(code).appendTo('body');

                $(code).appendTo($('.Header'));
             }
            else
            {$(code).appendTo($('#BodyColour'));}
            

            myImage = new Image();
            $(myImage).load(function () {
                //$(this).hide(); //had to comment out becase we use the css to control visiblity and this overwrites it on long loads
                $('.csBackground li').append(this);
                if ($("body").hasClass("MainImage")!=null){  _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);