/**
 * Helper to create a page with a LHS and a RHS.
 * This helper relies on jquery theme helper 'ui-helper-clearfix'
 * This can be done away with by using a <div style='{clear:both}'></div> as the last element
 * inside the outer containing div.
 * 
 * Example:
 * 
 * HTML
 * 
 * <div id='example'>
 *    <div class='lhs'>
 *       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut erat eget  
 *       odio commodo pretium et sed mauris. Praesent mollis orci id ante egestas tristique.
 *    </div>
 *    <div class='rhs'>
 *       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut erat eget  
 *       odio commodo pretium et sed mauris. Praesent mollis orci id ante egestas tristique.
 *    </div>
 * </div>
 * 
 * <SCRIPT>
 * 
 *    $(function(){
 *       $("#example").contentpair({widthLhs: '65%', widthRhs: '35%'});  
 *    });
 * 	
 * </SCRIPT>
 *    
 */

(function($){
	$.fn.contentpair = function(options) {
		var settings = $.extend({
			classLhs: 'lhs', /* The name of the class that will be searched and placed left */
			classRhs: 'rhs', /* The name of the class that will be searched and placed right */
			widthLhs: '60%',
			widthRhs: '40%'
		}, options || {});

		this.addClass('ui-helper-clearfix');

		var $lhsOuter = $("<div class='content-lhs-outer'></div>").css("width", settings.widthLhs).css("float", "left").
		css("padding", "0px").css("margin", "0px");
		var $rhsOuter = $("<div class='content-rhs-outer'></div>").css("width", settings.widthRhs).css("float", "right").
		css("padding", "0px").css("margin", "0px");
		
		this.find("." + settings.classLhs).wrap($lhsOuter);
		this.find("." + settings.classRhs).wrap($rhsOuter);
		
		return this;
	};
}) (jQuery);