(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: 800, height: 600 }
	};
	
	$.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 = (1050/1680) * $(window).width();
                if((h < $(window).height())||(h<$(document).height()))
                {
                    var w = (1680/1050) * $(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);