/** 
 * @projectDescription Scalable Background Image
 * @author 	Matt Hobbs (http://nooshu.com/)
 * @version 0.1
 * 
 * Takes an IMG tag you want as a page / container background
 * and scales the image up / down depending on page size
 */
(function ($) {
    $.fn.backgroundScale = function (customOptions) {
        //Merge default and user options
        var options = $.extend({}, $.fn.backgroundScale.defaultOptions, customOptions);
        return this.each(function (i) {
            var $this = $(this);
            var $bgImage = $(options.imageSelector);

            //Set some basic CSS positioning rules
            $this.css({ position: "absolute" });
            $bgImage.css({ position: "fixed" });

            // this makes the page move
            //$bgImage.css({ position: "absolute" });

            //Define out vars
            var containerWidth, containerHeight, containerRatio;
            var imageWidth, imageHeight, imageRatio;

            //Manipulation function
            var imageManipulation = function () {
                //Set the container details
                containerWidth = $this.width() + options.containerPadding;
                containerHeight = $this.height() + options.containerPadding;
                // or take the height of the window
                //containerWidth = getDocWidth() + options.containerPadding;
                //containerHeight = getDocHeight() + options.containerPadding;


                containerRatio = containerWidth / containerHeight;

                //$this.css("height", getDocHeight() + "px");

                //Set the image details
                imageWidth = $bgImage.width();
                imageHeight = $bgImage.height();
                imageRatio = imageWidth / imageHeight;

                //Center the image within the container?
//                if (options.centerAlign) {
//                    $bgImage.css({
//                        left: '50%',
//                        top: '50%',
//                        marginLeft: -(containerWidth / 2),
//                        marginTop: -(containerHeight / 2)
//                    });
//                }

                //Decide what to do with the image
                if (imageRatio < containerRatio) {//Width less than height

                    $bgImage.css({
                        width: containerWidth,
                        height: containerWidth * (1 / imageRatio)
                    });
                } else if (imageRatio > containerRatio) {//Height less than width
                     $bgImage.css({
                        width: containerHeight * imageRatio,
                        height: containerHeight
                    });
                } else if (imageRatio == containerRatio) {//Unlikely event ratios are equal

                    //Image width less or equal to height, choose width as it's shorter
                    if (imageWidth <= imageHeight) {
                        $bgImage.css({
                            width: containerWidth,
                            height: containerWidth * (1 / imageRatio)
                        });
                    } else {//Else choose shorter height
                        $bgImage.css({
                            width: containerHeight * imageRatio,
                            height: containerHeight
                        });
                    }
                }
            }

            //Fire on page load
            imageManipulation();

            //Add the browser resize event
            $(window).bind("resize.backgroundScale", function () {
                imageManipulation();
            })
        });
    }

    //Set our plugin defaults
    $.fn.backgroundScale.defaultOptions = {
        imageSelector: "#bgImage",
        centerAlign: true,
        containerPadding: 80
    };
})(jQuery);


function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

function getDocWidth() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}