﻿(function ($) {
    $.fn.fullbg = function (options) {

        //default settings
        var settings = {
            mode        : 'css',        //how to get css source image: (css/img)
            dest        : null,         //destination to append new bg image
            position    : 'fixed',      //css position of the bg
            align       : 'center',     //center, left, right
            top         : 0,            //css top location of the bg
            hTrim       : 0,            //how much to extend the background past the edge of the window (min)
            minWidth    : 0,            //explicit minimum width of bg (ignored if smaller than the img / window size)
            minHeight   : 0,            //explicit minimum height of bg (ignored if smaller than the img / window size)
            allowShrink : false,        //allows img to be resized to smaller than original size
            exact       : false,        //allow distort to fit window exactly
            zindex      : "-9999",      //css z-index of background
            adjust      : "both"        //which dimensions to adjust to fit (both/width/height)
        };

        //apply options
        return this.each(function () {
            if (options) {
                $.extend(settings, options);
            }

            //get img destination
            var dest = $(this);

            if (settings.dest) {
                dest = settings.dest;
            }

            var newImg;

            //get img source
            if (settings.mode == 'css') {
                var imgSource = $(this).css('background-image')
                    .replace('url("', '').replace('")', '')
                    .replace("url('", "").replace("')", "")
                    .replace("url(", "").replace(")", "");
                $(this).css('background-image', 'none');

                newImg = $("<img />").attr("src", imgSource);
            } else {
                newImg = $(this).detach();
            }

            //set css
            newImg.css({
                position: settings.position,
                top: settings.top,
                'z-index': settings.zindex
            });

            //if we are not doing center alignment
            if (settings.align != 'center') {

                //determine the left or right position using trim (probably 0)
                var hPos = (settings.hTrim * -1).toString() + 'px';

                //this will either set the "left" or "right" property
                newImg.css(settings.align, hPos);
            }

            //insert new image
            dest.append(newImg);

            //get img dimensions
            var imgWidth = newImg.width();
            var imgHeight = newImg.height();

            //define resize function
            function doResizeBg() {

                //get the window dimensions
                var winWidth = $(window).width();
                var winHeight = $(window).height();

                //set initial min dimensions
                //including the trim
                var minWidth = winWidth + (settings.hTrim * 2);
                var minHeight = winHeight;

                //update for user options
                minWidth = Math.max(settings.minWidth, minWidth);
                minHeight = Math.max(settings.minHeight, minHeight);

                //if the bg can't be shrunk
                if (settings.allowShrink == false) {
                    //make sure the min dimensions are at least that of the original image
                    minWidth = Math.max(minWidth, imgWidth);
                    minHeight = Math.max(minHeight, imgHeight);
                }

                //set the dimensions
                var width = minWidth;
                var height = minHeight;

                if (!settings.exact) {
                    if (settings.adjust == "width") {
                        height = imgHeight;
                    } else if (settings.adjust = "height") {
                        width = imgWidth;
                    }
                }

                //update dimensions if we are not making it exact
                //and preserve the apsect ratio
                if (settings.exact == false) {
                    var winRatio = winWidth / winHeight;
                    var imgRatio = imgWidth / imgHeight;

                    if (settings.adjust == "width") {
                        height = width / imgRatio;
                    } else if (settings.adjust == "height") {
                        width = height * imgRatio;
                    } else {
                        if (imgRatio > winRatio) {
                            //img is wider than window
                            //leave height at target, adjust width to ratio
                            width = height * imgRatio;
                        } else {
                            //img is taller than window
                            //leave width at target, adjust height to ratio
                            height = width / imgRatio;
                        }
                    }
                }

                //Apply dimensions to background
                newImg.css({
                    width: width + 'px',
                    height: height + 'px'
                });


                //if centering
                if (settings.align == 'center') {
                    if (width > winWidth) {
                        var offset = ((winWidth - width) / 2).toString() + 'px';
                        newImg.css('left', offset);
                    } else {
                        newImg.css('left', '0px');
                    }
                }
            }

            //resize right away
            doResizeBg();

            //also resize whenever the window is resized
            $(window).resize(function () {
                doResizeBg();
            });
        });
    };
})(jQuery);
