gistfile1.js

if(jQuery) (function($){

    $.widget("pb.layout", {
        _init : function() {
            var o = this.options;
            
            this.baseClass = '.' + this.widgetBaseClass + '-',
            
            this._initPanels();
        },
        
        _initPanels : function() {
            var body = $('body');
            
            // init north panel
            var north = $(this.baseClass + this.options.north.selector);
            if(north) {
                north.css({
                    position : 'fixed',
                    top : 0, 
                    left : 0,
                    height : parseInt(this.options.north.height) + 'px'
                });
                body.css({'padding-top' : north.height() + 'px'});
            }
            
            // init south panel
            var south = $(this.baseClass + this.options.south.selector);
            if(south) {
                south.css({
                    position : 'fixed', 
                    bottom : 0, 
                    left : 0,
                    height : parseInt(this.options.south.height) + 'px'
                });
                body.css({'bottom-top' : south.height() + 'px'});
            }
            
            // offset to contract from east and west panels height
            var offset = (north.height() || 0) + (south.height() || 0);
            
            // init east panel
            var east = $(this.baseClass + this.options.east.selector);
            if(east) {
                east.css({
                    position : 'fixed', 
                    top : offset + 'px' , 
                    right : 0, 
                    height : $(window).height() - offset + 'px',
                    width : parseInt(this.options.east.width) + 'px'
                });
                body.css({'padding-right' : east.width() + 'px'})
                
                $(window).resize(function(e) {
                    east.height($(this).height() - offset);
                });
            }
            
            // init west panel
            var west = $(this.baseClass + this.options.west.selector);
            if(west) {
                west.css({
                    position : 'fixed', 
                    top : offset + 'px' , 
                    left : 0, 
                    height : $(window).height() - offset + 'px',
                    width : parseInt(this.options.east.width) + 'px'
                });
                body.css({'padding-left' : west.width() + 'px'})
                
                $(window).resize(function(e) {
                    west.height($(this).height() - offset);
                });
            }
        }
    });
    
    $.extend($.pb.layout, {
    	version: "0.1",
    	defaults: {
            north : {
                selector : 'north',
                height : 50
            },
            east : {
                selector : 'east',
                width : 200
            },
            west : {
                selector : 'west',
                width : 200
            },
            south : {
                selector : 'south',
                height : 20
            }
        }
    });

})(jQuery);

$(document).ready(function () {
	$('body').layout({
	   north : {
	       height : 80
	   }
	});
});