function addCaptionsToImages() {
   wrapImagesInDiv( 'img.right', [], [ 'float' ] );
   wrapImagesInDiv( 'img.left', [], [ 'float' ] );
}

function wrapImagesInDiv( className, attributes, styles ) {

   var images = $$(className);
   for ( var i = 0; i < images.length; ++i ) {
      var img = images[i];
	  if(img.getAttribute('alt')) {
		  // Lift the image out of the page and insert a div under it.
		  var parent = img.parentNode;
		  var frame = document.createElement('div');
		  var caption = document.createElement('span');
		  var txt = document.createTextNode(img.getAttribute('alt'));
		  parent.insertBefore(frame, img);
		  parent.removeChild(img);
		  frame.appendChild(img);
		  frame.appendChild(caption);
		  caption.appendChild(txt);
		  // These are special cases.  We always copy these from the image to the
		  // div.
		  frame.style.width = img.getAttribute('width') + 'px';
		  frame.className = img.className;
		  // Copy specified attributes and style properties from the image to the
		  // div.
		  for ( var j = 0; j < attributes.length; ++j ) {
			 frame.setAttribute(attributes[j], img.getAttribute(attributes[j]));
		  }
		  for ( var j = 0; j < styles.length; ++j ) {
			 frame.style[styles[j]] = img.style[styles[j]];
		  }
	  }
   }
}

// add to window onload event
loader(addCaptionsToImages);