(function($) {

Drupal.behaviors.image_caption = {
  attach: function (context, settings) {
    $("img.caption").each(function(i) {
      var imgwidth = $(this).width() ? $(this).width() : false;
      var imgheight = $(this).height() ? $(this).height() : false;

      // Get caption from title attribute
      var captiontitletext = $(this).attr('title');

       // Get caption from alt attribute
      var captionalttext = $(this).attr('alt');

      // Get image alignment and style to apply to container
      if($(this).attr('align')){
        var alignment = $(this).attr('align');
        $(this).css({'float':alignment}); // add to css float
        $(this).removeAttr('align');
      }else if($(this).css('float')){
        var alignment = $(this).css('float');
      }else{
        var alignment = 'normal';
      }
      var style = $(this).attr('style') ? $(this).attr('style') : '';

      // Reset img styles as are added to container instead
      $(this).removeAttr('width');
      $(this).removeAttr('height');
      $(this).css('width', '');
      $(this).css('height', '');
      $(this).removeAttr('align');
      $(this).removeAttr('style');

      //Display inline block so it doesn't break any text aligns on the parent contatiner
      $(this).wrap("<span class=\"image-caption-container\" style=\"display:inline-block;" + style + "\"></span>");
      $(this).parent().addClass('image-caption-container-' + alignment);

      // Add dimensions, if available
      if(imgwidth){
        $(this).width(imgwidth);
        $(this).parent().width(imgwidth);
      }
      if(imgheight){
        $(this).height(imgheight);
      }
      // Append caption
      $(this).parent().append(
        "<span style=\"display:block;\" class=\"image-caption\">" +
        "<span style=\"display:block;\" class=\"image-title-caption\">" + captiontitletext + "</span>" +
        "<span style=\"display:block;\" class=\"image-alt-caption\">" + captionalttext + "</span>" +
        "</span>"
        );
    });
  }
};

})(jQuery);