/*

Embeds a floated image within a block of text, so that the text will wrap both above AND below the image.

Usage:
	- Place the IMG tag (and whatever wrapping elements it needs)
	  and the text (no other HTML) within a parent element (DIV, P, whatever)
	- Give the parent element the class "sink_img"
	- Give the outermost element of the IMG tag group the class "sink" (like the A, 
	  if it's a linked image, or a div if you want to include more elements like 
	  captions and credits)
	- The image (or parent A tag or whatever) needs to be floated and should have 
	  some small margins set to pad it from the text.
	  
Notes:
	- If any other HTML elements exist within the containing parent (.sink_img)
	  element, the script will not "sink" the image, but will place it before
	  the text if it wasn't there already.  This is a safety feature to avoid 
	  placement of the IMG element inside of another element's tag. Since the 
	  image is floated, you still get the usual text-flow below the image.
	- The image is placed between words 1/4 of the way through the text -- it 
	  doesn't matter if this placement does not correspond with a rendered line 
	  break/text-wrap since it's floated.

*/

jQuery(function($){
	$('.sink_img').each(function(){
		var $img = $(this).find('.sink').remove();
		var text = $(this).text(), html = $(this).html();
		if(text != html) {
			$(this).prepend($img);
			return;
		}
		var words = text.split(' ');
		var i = Math.floor(words.length/4);
		words.splice(i,0,'<span class="sink_loc"></span>');
		text = words.join(' ');
		$(this).html(text);
		$(this).find('.sink_loc').replaceWith($img);
	});
});