floatimages1.js

function floatImages()
	{
	// adapted from http://www.dithered.com/javascript/browser_detect/
	//**************************************************************//
	// sniff user agent
	var userAgent = navigator.userAgent.toLowerCase();

	// if Mozilla 1.4 then quit
	if ((userAgent.indexOf('gecko') != -1) && (userAgent.indexOf('gecko/') + 14 == userAgent.length) && (parseFloat(userAgent.substring(userAgent.indexOf('rv:') + 3)) == '1.4')) return;

	// if Opera then quit
	if (document.all && window.Event) return;
	//**************************************************************//

	// check this browser can cope with what we want to do
	if (!document.getElementById) return;
	var blogDiv = document.getElementById('blog');
	if (!blogDiv) return;
	if (!blogDiv.offsetWidth) return;

	blogDiv.className = (blogDiv.offsetWidth >= 500) ? "float-images" : "block-images";
	}

floatimages2.js

function imageFloat()
	{
	contentDiv = document.getElementById('content');
	blogDiv = document.getElementById('blog');
	image = blogDiv.getElementsByTagName('img');
	if(document.defaultView && document.defaultView.getComputedStyle && document.defaultView.getComputedStyle(blogDiv, '')){
		textSize = document.defaultView.getComputedStyle(blogDiv,'').getPropertyValue('font-size'); // font size value in px
		textSize = parseInt(textSize);
	} else if(contentDiv.currentStyle && contentDiv.offsetWidth) { // a dirty trick but works
		contentStyleWidth = parseInt(contentDiv.currentStyle.width); // IE fetches the em value, set in the CSS
		contentWidth = contentDiv.offsetWidth; // IE fetches the px value
		textSize = contentWidth / contentStyleWidth; // px divided by em = value of 1em in px
	} else {
		textSize = 13; // fallback value
	}
	for (i = 0; i < image.length; i++)
		{
		var imageWidth = image[i].getAttribute('width');
		var imageDiv = image[i].parentNode;
		var imageDivOuter = imageDiv.parentNode;
		var imageDivOuterWidth = imageDivOuter.offsetWidth;
		characters = 10;
		space = textSize*characters;
		if ((imageDivOuterWidth - imageWidth) <= space)
			{
			if (imageDiv.className.indexOf('standalone') == -1);
				{
				imageDiv.className += " standalone";
				}
			}
		else
			{
			imageDiv.className = imageDiv.className.replace(" standalone","");
			}
		}
}

floatimages3.js

$$('.artwork, .photo, .screenshot, .figure, .illustration').each(function(el){
	var elWidth = el.getSize().x;
	var parentEl;
	do { parentEl = el.getParent('.section'); }
	while(!parentEl);
	var parentWidth = parentEl.getStyle('width').toInt();
	
	if (parentWidth - elWidth < 220){
		if (el.get('tag') == 'div'){
			var standaloneDiv = new Element('div', {'class': 'standalone'});
			standaloneDiv.wraps(el);
		}
		else {
			var innerDiv = new Element('div', {
				'class': el.get('class'),
				html: el.get('html')
			});
			el.empty().removeProperty('class').addClass('standalone').grab(innerDiv);
		}
	}
});