(function($) { 
	$.fn.clipBy = function(options) { 
		var defaults = { 
			clipdiv: '#myClipDiv',
			logging: false
		};
		var opts = $.extend(defaults, options);
		var clipper = $(opts.clipdiv);
				var basepos = clipper.offset();
				var epos = $(this).offset();
				var bx1 = parseInt(basepos.left) + parseInt(clipper.css("margin-left").replace("px","")) + parseInt(clipper.css('border-left-width'));
				var by1 = parseInt(basepos.top) + parseInt(clipper.css("margin-top").replace("px","")) + parseInt(clipper.css('border-left-width'));
				var bx2 = bx1 + clipper.width();
				var by2 = by1 + clipper.height();
				var ex1 = parseInt(epos.left);
				var ey1 = parseInt(epos.top);
				var ex2 = ex1 + $(this).width(); // widest point
				var ey2 = ey1 + $(this).height();
				// okay, now have all 4 points. Generate clip. 
				var cliptop = "auto";
				var clipbottom = "auto";
				var clipleft = "auto";
				var clipright="auto";
				if(ex1 < bx1) { 
					// clipping left side. 
					clipleft = bx1 - ex1;
					clipleft = clipleft + 'px';
				}
				if(ey1 < by1) { 
					// clipping top
					cliptop = by1 - ey1;
					cliptop = cliptop + 'px';
				}
				if(ex2 > bx2) { 
					// is the widest point of e outside of b? If so, we need to clip the right side. 
					// clipping right side
					clipright = $(this).width() - (ex2 - bx2);
					clipright = clipright + 'px';
				}
				if (ey2 > by2) { 
					// clipping bottom
					clipbottom = $(this).height() - (ey2 - by2);
					clipbottom = clipbottom + 'px';
				}
				if(opts.logging) {
					console.log("bx1: %s by1: %s bx2: %s by2: %s",bx1, by1, bx2,by2 );
					console.log("ex1: %s ey1: %s ex2: %s ey2: %s", ex1, ey1, ex2, ey2);
				}
				var clipping = 'rect('+ cliptop + ' '+ clipright + ' ' + clipbottom+ ' '+ clipleft+ ')';
				$(this).css('clip',clipping);
			}
})(jQuery);