/*
Usage:

	$('#header, #footer').fullPageWidthBar();
	
	#wrapper
		-> #header
		-> #content
		-> #footer

Original Code:

	jQuery.fn.fullPageWidthBar = function (config) {
		var conf = $.extend({
			wrapper:	'#Container_WebPage'
		}, config);
	
		var els = this;
	
		var bar = function () {
			var docWidth	= $(document).width();
			var wrapWidth	= $(conf.wrapper).width();
	
			if (docWidth > wrapWidth) {
				var distance = (docWidth - wrapWidth) / 2;
	
				els.css({
					marginLeft:		'-' + distance + 'px', 
					marginRight:	'-' + distance + 'px', 
					paddingLeft:	distance + 'px', 
					paddingRight:	distance + 'px'
				});
			}
		};
	
		bar();
		$(window).resize(bar);
	
		return els;
	};

This works to center a child div in the browser window:

	// $(window).width();   // returns width of browser viewport
	// $(document).width(); // returns width of HTML document
	
	<script>
	jQuery(document).ready(function() { 
		// This function will fire on browser resize.
		jQuery('#Container_Header').fullPageWidthBar();	
	});
	</script>	

	<div id="Container_WebPage">
		<div id="Container_Header"></div>
	</div>

	jQuery.fn.fullPageWidthBar = function (config) {
		var conf = $.extend({
			wrapper:	'#Container_WebPage'
		}, config);
		var els = this;
		var bar = function () {
			var docWidth	= $(document).width();
			var wrapWidth	= $(conf.wrapper).width();
			var windowWidth = $(window).width();
			var test_distance = (windowWidth - wrapWidth) / 2;
			els.css({
				marginLeft: test_distance + 'px'
			});
		};
		bar();
		$(window).resize(bar);
		return els;
	};

*/

/*
<script>
	jQuery(document).ready(function() { 
		jQuery('#Container_WebPage').CenterContainerInBrowser('#Container_WebPage');	
	});
</script>
*/

jQuery.fn.CenterContainerInBrowser = function (Container) {
	var CenterTheContainer = function () {
		var ContainerWidth	= jQuery(Container).width();
		var BrowserWidth = jQuery(window).width();
		var LeftMargin = (BrowserWidth - ContainerWidth) / 2;
		jQuery(Container).css({marginLeft: LeftMargin + 'px'});
	};
	CenterTheContainer();		
	jQuery(window).resize(CenterTheContainer);				
	return jQuery(Container).css;
};
