/*
    fullscreen background is a small jquery plugin that allows you to create fullscreen background.

    author:     gaya kessler
    date:       04-25-2012
    url:        http://www.gayadesign.com
*/

(function ($) {
    var parentelement = "";
    var optionsarr = {
        selector: "img",
        fillonresize: true,
        defaultcss: true
    };

    $.fn.fullscreenbackground = function (options) {
        if(options) {
            $.extend(optionsarr, options );
        }

        this.each(function () {
            parentelement = this;

            if (optionsarr.defaultcss == true) {
                $("html,body").css({
                    width: "100%",
                    height: "100%"
                });

                $(parentelement).css({
                    height: "100%",
                    width: "100%",
                    overflow: "hidden",
                    position: "fixed",
                    top: "0px",
                    left: "0px",
                    zindex: 1
                });
            }

            if (optionsarr.fillonresize == true) {
                $(window).resize(function () {
                    fillbg(optionsarr.selector, parentelement);
                });
            }

            fillbg(optionsarr.selector, parentelement);
        });
    };

    function fillbg(selector, parentobj) {
        var windowheight = $(window).height();
        var windowwidth = $(window).width();

        $(selector, parentobj).each(function () {
            var imgheight = $(this).attr("height");
            var imgwidth = $(this).attr("width");

            var newwidth = windowwidth;
            var newheight = (windowwidth / imgwidth) * imgheight;
            var topmargin = ((newheight - windowheight) / 2) * -1;
            var leftmargin = 0;

            if (newheight < windowheight) {
                var newwidth = (windowheight / imgheight) * imgwidth;
                var newheight = windowheight;
                var topmargin = 0;
                var leftmargin = ((newwidth - windowwidth) / 2) * -1;
            }

            $(this).css({
                height: newheight + "px",
                width: newwidth + "px",
                marginleft: leftmargin + "px",
                margintop: topmargin + "px",
                display: "block"
            });
        });
    }
})(jquery);