gistfile1.js

function supportsBoxShadow() {
  var s = document.body.style;
  return s.WebkitBoxShadow !== undefined || s.MozBoxShadow !== undefined || s.boxShadow !== undefined;
}

function frame_pictures(){
  
	// Exit if we don't have boxshadow support at all and fall back on wp-caption
	if(!supportsBoxShadow()) return;
  
  $('.content img').each(function(i, img){
    var el = $(img);
    // Don't do it on smilies or things we manually define to not do it on
    if(!el.hasClass('wp-smiley') && !el.hasClass('no-frames') && !el.hasClass('latex')) {
      
      // If the picture has height and width attributes, you can frame right away
      // If one of these are missing you have to wait for the image to be loaded for
      // the right dimensions to be recieved by width() and height()
      if($(img).attr('height') > 0 && $(img).attr('width') > 0) {
        _frame_picture(img, el)
      } else {
        $(img).load(function(){_frame_picture(img,el)});
      }
    }
  });
  
}

function _frame_picture(img, el){
  // If the parent is a link, put the link inside the frame and remove the underline
  // this is really just to keep things pretty
  if ($(img).parent()[0] instanceof HTMLAnchorElement){
    el = $(img).parent();
    el.css('text-decoration', 'none');
  }
  
  // Create the framing divs and give them the correct properties
  var frameDiv = $('<div></div>').addClass("frame").css('width', $(img).width()+20).css('height', $(img).height()+20);
  var imageDiv = $('<div></div>').addClass("image").css('width', $(img).width()).css('height', $(img).height());

  el.before(frameDiv);
  imageDiv.prependTo(frameDiv);
  el.prependTo(imageDiv);
  if($(img).attr('title') && $(img).attr('title') != ""){
    $(img).before('<div class="caption">' + $(img).attr('title') + '</div>'); 
  }
  
  // Get the image properties for correct floats without the wp-caption (for older posts in my case)
  if($(img).hasClass('alignnone') || $(img).hasClass('alignleft') || $(img).css('float') == 'left'){
    frameDiv.addClass('left');
  } else if($(img).hasClass('alignright') || $(img).css('float') == 'right'){
    frameDiv.addClass('right');
  }

  // This shouldn't be done if the browser isnt IE6
  // Remove the wp-caption frame, but grap the properties from it first
  if(frameDiv.parent().hasClass('wp-caption')){
    wpCaption = frameDiv.parent();
    wpCaption.before(frameDiv);
    if(wpCaption.hasClass('alignleft') || wpCaption.css('float') == 'left'){
      frameDiv.addClass('left');
    } else if(wpCaption.hasClass('alignright') || wpCaption.css('float') == 'right'){
      frameDiv.addClass('right');
    }
    wpCaption.remove();
  }
  
  // Check if the parent has more than one picture
  // If it has more than one picture, make sure all of them floats left and then adjust
  // the padding if the images total width is less than 600
  
  var parent = false;
  if(frameDiv.parent()[0] instanceof HTMLParagraphElement || frameDiv.parent()[0] instanceof HTMLDivElement){
    parent = frameDiv.parent();
  } else if(frameDiv.parent().parent()[0] instanceof HTMLParagraphElement || frameDiv.parent().parent()[0] instanceof HTMLDivElement){
    parent = frameDiv.parent().parent();
  }
  if(parent.hasClass('content')) parent = false;
  if(parent && parent.find('div.frame').length > 1) {
    parent.find('div.frame').removeClass('right');
    parent.find('div.frame').addClass('left');
    var totalWidth = 0;
    parent.find('div.frame').each(function(i, frame){
      totalWidth += $(frame).width()+10;
    });
    if(totalWidth < 600){
      parent.css('padding-left', (600-totalWidth)/2);
    }
    if(!parent.children().last().hasClass('clear'))
      parent.append('<br class="clear" />');
  } else if(parent && (parent.css('text-align') == 'center' || parent.attr('style') == undefined) && $(img).hasClass('alignnone')){
    parent.find('div.frame').removeClass('left');
  }
  
  // Remove all styles to not have the image float inside the frame
  $(img).attr('style','');
}