(function($) {

    $.layout = function(options) {
        return $.layout.impl.init(options);
    };

    $.fn.layout = function(options) {
        return $.layout.impl.init(options);
    };

    /*
    * layout default options
    */
    $.layout.defaults = {
        mode: "",
        screen: { width: 1024, height: 768 }
    };

    $.layout.impl = {

        /*
        * layout options
        */
        opts: null,

        /*
        * layout helper
        */
        helper: {},

        /*
        * Initialize the layout
        */
        init: function(options) {

            var self = this;

            self.opts = $.extend({}, $.layout.defaults, options);

            // suppress layout image load
            $('img.background').suppressLoad();

            // create the helper objects
            self.helper.page = $('#pageContainer');
            self.helper.main = $('div.main-container');
            self.helper.background = $('div.background-container');
            self.helper.column = $('div.static-column-container');

            //Set the resizeFunction based on mode
            var resizeFunction = function() {
                switch (self.opts.mode) {
                    case "box":
                        self.setContentDimensions(
                            self.helper.main,
                            self.helper.background,
                            self.opts.screen.width,
                            self.opts.screen.height,
                            self.opts.paddingRatio
                        );
                        break;

                    case "columnStatic":
                        self.setContentDimensionsColumn(
                            self.helper.column,
                            self.helper.background,
                            self.opts.screen.width,
                            self.opts.screen.height,
                            self.opts.paddingRatio
                        );
                        //self.helper.main.css("height","auto");
                        self.helper.main.css("overflow", "visible");
                        break;

                    case "columnDynamic":
                        break;

                    default:
                        break;
                }
            }

            // Set inital screen sizing
            resizeFunction();

            // set size on window resize
            $(window).resize(resizeFunction);

            // load the layout image
            $(new Image()).load(function() {
                $(this).css('display', 'none');

                //!!! ratio is hard coded
                var h = (1080 / 1920) * $(window).width();
                if ((h < $(window).height()) || (h < $(document).height())) {
                    var w = (1920 / 1080) * $(window).height();
                    if (w >= $(window).width()) {
                        $(this).css({
                            width: w + 'px',
                            height: $(window).height() + 'px'
                        });
                    }
                    else {
                        $(this).css({
                            width: '100%',
                            height: '100%'
                        });
                    }
                }
                else {
                    $(this).css({
                        width: $(window).width() + 'px',
                        height: h + 'px'
                    });
                }

                self.helper.background.empty().append($(this));
                $(this).fadeIn(500, function() {
                    // trigger backgroundLoaded event
                    $(document).trigger('backgroundLoaded');
                });
            })
            .attr('src', $.data($('img.background').get(0), 'src'))
            .error(function() { });


            return self;
        },

        //Sets the dimensions of the content based on certain constraints.
        setContentDimensions: function(container, background, minW, minH, paddingTopRatio) {
            if ($(window).height() < minH) {
                container.height(minH);
                background.height(minH);
            }
            else {
                container.height($(window).height());
                background.height($(window).height());
            }

            if ($(window).width() < minW) {
                container.width(minW);
                background.width(minW);
            }
            else {
                container.width($(window).width());
                background.width($(window).width());
            }
        },

        setContentDimensionsColumn: function(column, background, minW, minH, paddingTopRatio) {
            if ($(window).height() < minH) {
                column.height(minH);
                background.height(minH);
            }
            else {
                column.height($(window).height());
                background.height($(window).height());
            }

            if ($(window).width() < minW) {
                background.width(minW);
            }
            else {
                background.width($(window).width());
            }
        }
    };

})(jQuery);