diff --git a/includes/media.filter.inc b/includes/media.filter.inc
index e34b6ec..d5c8a04 100644
--- a/includes/media.filter.inc
+++ b/includes/media.filter.inc
@@ -167,39 +167,62 @@ function media_token_to_markup($match, $wysiwyg = FALSE) {
     // Track the fid of this file in the {media_filter_usage} table.
     media_filter_track_usage($file->fid);
 
-    $attributes = is_array($tag_info['attributes']) ? $tag_info['attributes'] : array();
-    $attribute_whitelist = media_variable_get('wysiwyg_allowed_attributes');
-    $settings['attributes'] = array_intersect_key($attributes, array_flip($attribute_whitelist));
-
-    // Many media formatters will want to apply width and height independently
-    // of the style attribute or the corresponding HTML attributes, so pull
-    // these two out into top-level settings. Different WYSIWYG editors have
-    // different behavior with respect to whether they store user-specified
-    // dimensions in the HTML attributes or the style attribute, so check both.
-    // Per http://www.w3.org/TR/html5/the-map-element.html#attr-dim-width, the
-    // HTML attributes are merely hints: CSS takes precedence.
-    if (isset($settings['attributes']['style'])) {
-      $css_properties = media_parse_css_declarations($settings['attributes']['style']);
-      foreach (array('width', 'height') as $dimension) {
-        if (isset($css_properties[$dimension]) && substr($css_properties[$dimension], -2) == 'px') {
-          $settings[$dimension] = substr($css_properties[$dimension], 0, -2);
-        }
-        elseif (isset($settings['attributes'][$dimension])) {
-          $settings[$dimension] = $settings['attributes'][$dimension];
+    if (isset($tag_info['attributes'])) {
+      $attributes = is_array($tag_info['attributes']) ? $tag_info['attributes'] : array();
+      $attribute_whitelist = media_variable_get('wysiwyg_allowed_attributes');
+      $settings['attributes'] = array_intersect_key($attributes, array_flip($attribute_whitelist));
+
+      // Many media formatters will want to apply width and height independently
+      // of the style attribute or the corresponding HTML attributes, so pull
+      // these two out into top-level settings. Different WYSIWYG editors have
+      // different behavior with respect to whether they store user-specified
+      // dimensions in the HTML attributes or the style attribute, so check both.
+      // Per http://www.w3.org/TR/html5/the-map-element.html#attr-dim-width, the
+      // HTML attributes are merely hints: CSS takes precedence.
+      if (isset($settings['attributes']['style'])) {
+        $css_properties = media_parse_css_declarations($settings['attributes']['style']);
+        foreach (array('width', 'height') as $dimension) {
+          if (isset($css_properties[$dimension]) && substr($css_properties[$dimension], -2) == 'px') {
+            $settings[$dimension] = substr($css_properties[$dimension], 0, -2);
+          }
+          elseif (isset($settings['attributes'][$dimension])) {
+            $settings[$dimension] = $settings['attributes'][$dimension];
+          }
         }
       }
     }
 
-    if ($wysiwyg) {
-      $settings['wysiwyg'] = $wysiwyg;
-    }
   }
   catch (Exception $e) {
     watchdog('media', 'Unable to render media from %tag. Error: %error', array('%tag' => $tag, '%error' => $e->getMessage()));
     return '';
   }
 
-  $element = media_get_file_without_label($file, $tag_info['view_mode'], $settings);
+  if ($wysiwyg) {
+    $settings['wysiwyg'] = $wysiwyg;
+    // If sending markup to a WYSIWYG, we need to pass the file infomation so 
+    // that a inline macro can be generated when the WYSIWYG is detached.
+    // The WYSIWYG plugin is expecting this information in the format of a 
+    // urlencoded JSON string stored in the data-file_info attribute of the
+    // element.
+    //
+    // The view-mode of the media representation is hard-coded to be
+    // 'media_preview'. This code assumes that the 'media_preview' view-mode 
+    // display has been configured to output a <img /> representation of the 
+    // inline media item to be shown in the WYSIWYG.
+    $element = media_get_file_without_label($file, 'media_preview', $settings);
+    $data = drupal_json_encode(array(
+      'type' => 'media',
+      'fid' => $file->fid,
+      'view_mode' => $tag_info['view_mode'],
+    ));
+    $element['#attributes']['data-file_info'] = urlencode($data);
+    $element['#attributes']['class'][] = 'media-element';
+  }
+  else {
+    $element = media_get_file_without_label($file, $tag_info['view_mode'], $settings);
+  }
+
   return drupal_render($element);
 }
 
diff --git a/js/media.format_form.js b/js/media.format_form.js
index 446cb54..4e77d63 100644
--- a/js/media.format_form.js
+++ b/js/media.format_form.js
@@ -37,7 +37,10 @@ Drupal.media.formatForm.getOptions = function () {
 
 Drupal.media.formatForm.getFormattedMedia = function () {
   var formatType = $("select#edit-format option:selected").val();
-  return { type: formatType, options: Drupal.media.formatForm.getOptions(), html: Drupal.settings.media.formatFormFormats[formatType] };
+  // NOTE: Hard-coded to grab 'media-preview' display format.
+  // @see wysiwyg-media.js Drupal.wysiwyg.plugins.media.detach() and
+  // media.filter.inc media_token_to_markup().
+  return { type: formatType, options: Drupal.media.formatForm.getOptions(), html: Drupal.settings.media.formatFormFormats.media_preview };
 };
 
 Drupal.media.formatForm.submit = function () {
diff --git a/js/wysiwyg-media.js b/js/wysiwyg-media.js
index 97697f0..d3e938a 100644
--- a/js/wysiwyg-media.js
+++ b/js/wysiwyg-media.js
@@ -6,158 +6,126 @@
 
 (function ($) {
 
-Drupal.media = Drupal.media || {};
+/**
+ * Defining InsertMedia object to manage the sequence of actions involved in
+ * inserting a media element into the WYSIWYG.
+ * Keeps track of the WYSIWYG instance id.
+ */
+var InsertMedia = function (instance_id) {
+  this.instanceId = instance_id;
+  return this;
+};
 
-// Define the behavior.
-Drupal.wysiwyg.plugins.media = {
+InsertMedia.prototype = {
 
   /**
-   * Initializes the tag map.
+   * Prompt user to select a media item with the media browser.
+   *
+   * @param settings
+   *    Settings object to pass on to the media browser.
+   *    TODO: Determine if this is actually necessary.
    */
-  initializeTagMap: function () {
-    if (typeof Drupal.settings.tagmap == 'undefined') {
-      Drupal.settings.tagmap = { };
-    }
+  prompt: function (settings) {
+    Drupal.media.popups.mediaBrowser($.proxy(this, 'onSelect'), settings);
   },
+
   /**
-   * Execute the button.
-   * @TODO: Debug calls from this are never called. What's its function?
+   * On selection of a media item, display item's display configuration form.
    */
-  invoke: function (data, settings, instanceId) {
-    if (data.format == 'html') {
-      Drupal.media.popups.mediaBrowser(function (mediaFiles) {
-        Drupal.wysiwyg.plugins.media.mediaBrowserOnSelect(mediaFiles, instanceId);
-      }, settings['global']);
-    }
+  onSelect: function (media_files) {
+    this.mediaFile = media_files[0];
+    Drupal.media.popups.mediaStyleSelector(this.mediaFile, $.proxy(this, 'insert'), {});
   },
 
   /**
-   * Respond to the mediaBrowser's onSelect event.
-   * @TODO: Debug calls from this are never called. What's its function?
+   * When display config has been set, insert the placeholder markup into the
+   * wysiwyg and generate its corresponding json macro pair to be added to the
+   * tagmap.
    */
-  mediaBrowserOnSelect: function (mediaFiles, instanceId) {
-    var mediaFile = mediaFiles[0];
-    var options = {};
-    Drupal.media.popups.mediaStyleSelector(mediaFile, function (formattedMedia) {
-      Drupal.wysiwyg.plugins.media.insertMediaFile(mediaFile, formattedMedia.type, formattedMedia.html, formattedMedia.options, Drupal.wysiwyg.instances[instanceId]);
-    }, options);
-
-    return;
-  },
-
-  insertMediaFile: function (mediaFile, viewMode, formattedMedia, options, wysiwygInstance) {
+  insert: function (formatted_media) {
+    var element = create_element(formatted_media.html, {
+          fid: this.mediaFile.fid,
+          view_mode: formatted_media.type
+        });
+    
+    var markup = outerHTML(element),
+        macro = create_macro(element);
+        
+    // Insert placeholder markup into wysiwyg.
+    Drupal.wysiwyg.instances[this.instanceId].insert(markup);
+
+    // Store macro/markup pair in the tagmap.
+    ensure_tagmap();
+    Drupal.settings.tagmap[macro] = markup;
+  }
 
-    this.initializeTagMap();
-    // @TODO: the folks @ ckeditor have told us that there is no way
-    // to reliably add wrapper divs via normal HTML.
-    // There is some method of adding a "fake element"
-    // But until then, we're just going to embed to img.
-    // This is pretty hacked for now.
-    //
-    var imgElement = $(this.stripDivs(formattedMedia));
-    this.addImageAttributes(imgElement, mediaFile.fid, viewMode, options);
+};
 
-    var toInsert = this.outerHTML(imgElement);
-    // Create an inline tag
-    var inlineTag = Drupal.wysiwyg.plugins.media.createTag(imgElement);
-    // Add it to the tag map in case the user switches input formats
-    Drupal.settings.tagmap[inlineTag] = toInsert;
-    wysiwygInstance.insert(toInsert);
-  },
 
-  /**
-   * Gets the HTML content of an element
-   *
-   * @param jQuery element
-   */
-  outerHTML: function (element) {
-    return $('<div>').append( element.eq(0).clone() ).html();
-  },
-
-  addImageAttributes: function (imgElement, fid, view_mode, additional) {
-    //    imgElement.attr('fid', fid);
-    //    imgElement.attr('view_mode', view_mode);
-    // Class so we can find this image later.
-    imgElement.addClass('media-image');
-    this.forceAttributesIntoClass(imgElement, fid, view_mode, additional);
-    if (additional) {
-      for (k in additional) {
-        if (additional.hasOwnProperty(k)) {
-          if (k === 'attr') {
-            imgElement.attr(k, additional[k]);
-          }
-        }
-      }
-    }
-  },
+/**
+ * Register the plugin with WYSIWYG.
+ */
+Drupal.wysiwyg.plugins.media = {
 
   /**
-   * Due to problems handling wrapping divs in ckeditor, this is needed.
-   *
-   * Going forward, if we don't care about supporting other editors
-   * we can use the fakeobjects plugin to ckeditor to provide cleaner
-   * transparency between what Drupal will output <div class="field..."><img></div>
-   * instead of just <img>, for now though, we're going to remove all the stuff surrounding the images.
-   *
-   * @param String formattedMedia
-   *  Element containing the image
+   * Execute the button.
    *
-   * @return HTML of <img> tag inside formattedMedia
+   * @param data
+   *   An object containing data about the current selection:
+   *   - format: 'html' when the passed data is HTML content, 'text' when the
+   *     passed data is plain-text content.
+   *   - node: When 'format' is 'html', the focused DOM element in the editor.
+   *   - content: The textual representation of the focused/selected editor
+   *     content.
+   * @param settings
+   *   The plugin settings, as provided in the plugin's PHP include file.
+   * @param instanceId
+   *   The ID of the current editor instance.
    */
-  stripDivs: function (formattedMedia) {
-    // Check to see if the image tag has divs to strip
-    var stripped = null;
-    if ($(formattedMedia).is('img')) {
-      stripped = this.outerHTML($(formattedMedia));
-    } else {
-      stripped = this.outerHTML($('img', $(formattedMedia)));
+  invoke: function (data, settings, instanceId) {
+    if (data.format == 'html') {
+      var insert = new InsertMedia(instanceId);
+      insert.prompt(settings.global);
     }
-    // This will fail if we pass the img tag without anything wrapping it, like we do when re-enabling WYSIWYG
-    return stripped;
   },
 
   /**
    * Attach function, called when a rich text editor loads.
-   * This finds all [[tags]] and replaces them with the html
-   * that needs to show in the editor.
    *
+   * This finds all json macros and replaces them with the html placeholder
+   * that will show in the editor.
    */
   attach: function (content, settings, instanceId) {
-    var matches = content.match(/\[\[.*?\]\]/g);
-    this.initializeTagMap();
-    var tagmap = Drupal.settings.tagmap;
+    ensure_tagmap();
+
+    var tagmap = Drupal.settings.tagmap,
+        matches = content.match(/\[\[.*?\]\]/g),
+        media_definition;
+
     if (matches) {
-      var inlineTag = "";
-      for (i = 0; i < matches.length; i++) {
-        inlineTag = matches[i];
-        if (tagmap[inlineTag]) {
-          // This probably needs some work...
-          // We need to somehow get the fid propogated here.
-          // We really want to
-          var tagContent = tagmap[inlineTag];
-          var mediaMarkup = this.stripDivs(tagContent); // THis is <div>..<img>
+      for (var index in matches) {
+        var macro = matches[index];
+        if (tagmap[macro]) {
+          var markup = tagmap[macro],
+              media_json = macro.replace('[[', '').replace(']]', '');
 
-          var _tag = inlineTag;
-          _tag = _tag.replace('[[','');
-          _tag = _tag.replace(']]','');
           try {
-            mediaObj = JSON.parse(_tag);
+            media_definition = JSON.parse(media_json);
           }
           catch(err) {
-            mediaObj = null;
+            media_definition = null;
           }
-          if(mediaObj) {
-            var imgElement = $(mediaMarkup);
-            this.addImageAttributes(imgElement, mediaObj.fid, mediaObj.view_mode);
-            var toInsert = this.outerHTML(imgElement);
-            content = content.replace(inlineTag, toInsert);
+
+          if (media_definition) {
+            content = content.replace(macro, markup);
           }
         }
         else {
-          debug.debug("Could not find content for " + inlineTag);
+          debug.debug("Could not find content for " + macro);
         }
       }
     }
+
     return content;
   },
 
@@ -165,221 +133,86 @@ Drupal.wysiwyg.plugins.media = {
    * Detach function, called when a rich text editor detaches
    */
   detach: function (content, settings, instanceId) {
-    // Replace all Media placeholder images with the appropriate inline json
-    // string. Using a regular expression instead of jQuery manipulation to
-    // prevent <script> tags from being displaced.
-    // @see http://drupal.org/node/1280758.
-    if (matches = content.match(/<img[^>]+class=([\'"])media-image[^>]*>/gi)) {
-      for (var i = 0; i < matches.length; i++) {
-        var imageTag = matches[i];
-        var inlineTag = Drupal.wysiwyg.plugins.media.createTag($(imageTag));
-        Drupal.settings.tagmap[inlineTag] = imageTag;
-        content = content.replace(imageTag, inlineTag);
-      }
-    }
-    return content;
-  },
-
-  /**
-   * @param jQuery imgNode
-   *  Image node to create tag from
-   */
-  createTag: function (imgNode) {
-    // Currently this is the <img> itself
-    // Collect all attribs to be stashed into tagContent
-    var mediaAttributes = {};
-    var imgElement = imgNode[0];
-    var sorter = [];
+    ensure_tagmap();
+    var tagmap = Drupal.settings.tagmap,
+        i = 0,
+        markup,
+        macro;
 
-    // @todo: this does not work in IE, width and height are always 0.
-    for (i=0; i< imgElement.attributes.length; i++) {
-      var attr = imgElement.attributes[i];
-      if (attr.specified == true) {
-        if (attr.name !== 'class') {
-          sorter.push(attr);
-        }
-        else {
-          // Exctract expando properties from the class field.
-          var attributes = this.getAttributesFromClass(attr.value);
-          for (var name in attributes) {
-            if (attributes.hasOwnProperty(name)) {
-              var value = attributes[name];
-              if (value.type && value.type === 'attr') {
-                sorter.push(value);
-              }
-            }
-          }
-        }
+    // Replace all media placeholders with their json macro representations.
+    //
+    // NOTE: Due to issues with jQuery (see http://drupal.org/node/1280758) and
+    //       the horror of parsing html with regular expressions (see 
+    //       http://stackoverflow.com/a/1732454/854985). We are forced to
+    //       represent the media element in the WYSIWYG with a plain <img />
+    //       tag.
+    //       This code assumes that the inline file's media_preview view-mode
+    //       has been configured to output a image representation.
+    var matches = content.match(/<img[^>]+class=([\'"])media-element[^>]*>/gi);
+    if (matches) {
+      for (i = 0; i < matches.length; i++) {
+        markup = matches[i];
+        macro = create_macro($(markup));
+        tagmap[macro] = markup;
+        content = content.replace(markup, macro);
       }
     }
 
-    sorter.sort(this.sortAttributes);
+    return content;
+  }
+};
 
-    for (var prop in sorter) {
-      mediaAttributes[sorter[prop].name] = sorter[prop].value;
-    }
 
-    // The following 5 ifs are dedicated to IE7
-    // If the style is null, it is because IE7 can't read values from itself
-    if (jQuery.browser.msie && jQuery.browser.version == '7.0') {
-      if (mediaAttributes.style === "null") {
-        var imgHeight = imgNode.css('height');
-        var imgWidth = imgNode.css('width');
-        mediaAttributes.style = {
-          height: imgHeight,
-          width: imgWidth
-        }
-        if (!mediaAttributes['width']) {
-          mediaAttributes['width'] = imgWidth;
-        }
-        if (!mediaAttributes['height']) {
-          mediaAttributes['height'] = imgHeight;
-        }
-      }
-      // If the attribute width is zero, get the CSS width
-      if (Number(mediaAttributes['width']) === 0) {
-        mediaAttributes['width'] = imgNode.css('width');
-      }
-      // IE7 does support 'auto' as a value of the width attribute. It will not
-      // display the image if this value is allowed to pass through
-      if (mediaAttributes['width'] === 'auto') {
-        delete mediaAttributes['width'];
-      }
-      // If the attribute height is zero, get the CSS height
-      if (Number(mediaAttributes['height']) === 0) {
-        mediaAttributes['height'] = imgNode.css('height');
-      }
-      // IE7 does support 'auto' as a value of the height attribute. It will not
-      // display the image if this value is allowed to pass through
-      if (mediaAttributes['height'] === 'auto') {
-        delete mediaAttributes['height'];
-      }
-    }
+/** Helper functions */
 
-   // Convert style-based floating of images to classes. Note we leave the
-   // the attribute so that the WYSIWYG editor will remember the setting.
-   // First, remove any previous left/right classes, note that class will
-   // contain at least 'media-image'
-   mediaAttributes['class'] = mediaAttributes['class'].replace(/\s*media-image-(left|right)\s*/g, ' ');
+/**
+ * Ensures the tag map has been initialized.
+ */
+function ensure_tagmap () {
+  Drupal.settings.tagmap = Drupal.settings.tagmap || {};
+}
 
-   // Add appropriate left/right class to the <img> tag.
-   if (mediaAttributes['style']) {
-     if (-1 != mediaAttributes['style'].indexOf('float: right;')) {
-       mediaAttributes['class'] += ' media-image-right';
-    }
-    if (-1 != mediaAttributes['style'].indexOf('float: left;')) {
-      mediaAttributes['class'] += ' media-image-left';
-     }
-   }
+/**
+ * Serializes file information as a url-encoded JSON object and stores it as a
+ * data attribute on the html element.
+ *
+ * @param html (string)
+ *    A html element to be used to represent the inserted media element.
+ * @param info (object)
+ *    A object containing the media file information (fid, view_mode, etc).
+ */
+function create_element (html, info) {
+  var element = $(html);
 
-    // Remove elements from attribs using the blacklist
-    for (var blackList in Drupal.settings.media.blacklist) {
-      delete mediaAttributes[Drupal.settings.media.blacklist[blackList]];
-    }
-    tagContent = {
-      "type": 'media',
-      // @todo: This will be selected from the format form
-      "view_mode": attributes['view_mode'].value,
-      "fid" : attributes['fid'].value,
-      "attributes": mediaAttributes
-    };
-    return '[[' + JSON.stringify(tagContent) + ']]';
-  },
+  // Important to url-encode the file information as it is being stored in an
+  // html data attribute.
+  info.type = info.type || "media";
+  element.attr('data-file_info', encodeURI(JSON.stringify(info)));
 
-  /**
-   * Forces custom attributes into the class field of the specified image.
-   *
-   * Due to a bug in some versions of Firefox
-   * (http://forums.mozillazine.org/viewtopic.php?f=9&t=1991855), the
-   * custom attributes used to share information about the image are
-   * being stripped as the image markup is set into the rich text
-   * editor.  Here we encode these attributes into the class field so
-   * the data survives.
-   *
-   * @param imgElement
-   *   The image
-   * @fid
-   *   The file id.
-   * @param view_mode
-   *   The view mode.
-   * @param additional
-   *   Additional attributes to add to the image.
-   */
-  forceAttributesIntoClass: function (imgElement, fid, view_mode, additional) {
-    var wysiwyg = imgElement.attr('wysiwyg');
-    if (wysiwyg) {
-      imgElement.addClass('attr__wysiwyg__' + wysiwyg);
-    }
-    var format = imgElement.attr('format');
-    if (format) {
-      imgElement.addClass('attr__format__' + format);
-    }
-    var typeOf = imgElement.attr('typeof');
-    if (typeOf) {
-      imgElement.addClass('attr__typeof__' + typeOf);
-    }
-    if (fid) {
-      imgElement.addClass('img__fid__' + fid);
-    }
-    if (view_mode) {
-      imgElement.addClass('img__view_mode__' + view_mode);
-    }
-    if (additional) {
-      for (var name in additional) {
-        if (additional.hasOwnProperty(name)) {
-          if (name !== 'alt') {
-            imgElement.addClass('attr__' + name + '__' + additional[name]);
-          }
-        }
-      }
-    }
-  },
+  // Adding media-element class so we can find markup element later.
+  element.addClass('media-element');
 
-  /**
-   * Retrieves encoded attributes from the specified class string.
-   *
-   * @param classString
-   *   A string containing the value of the class attribute.
-   * @return
-   *   An array containing the attribute names as keys, and an object
-   *   with the name, value, and attribute type (either 'attr' or
-   *   'img', depending on whether it is an image attribute or should
-   *   be it the attributes section)
-   */
-  getAttributesFromClass: function (classString) {
-    var actualClasses = [];
-    var otherAttributes = [];
-    var classes = classString.split(' ');
-    var regexp = new RegExp('^(attr|img)__([^\S]*)__([^\S]*)$');
-    for (var index = 0; index < classes.length; index++) {
-      var matches = classes[index].match(regexp);
-      if (matches && matches.length === 4) {
-        otherAttributes[matches[2]] = {name: matches[2], value: matches[3], type: matches[1]};
-      }
-      else {
-        actualClasses.push(classes[index]);
-      }
-    }
-    if (actualClasses.length > 0) {
-      otherAttributes['class'] = {name: 'class', value: actualClasses.join(' '), type: 'attr'};
-    }
-    return otherAttributes;
-  },
+  return element;
+}
 
-  /*
-   *
-   */
-  sortAttributes: function (a, b) {
-    var nameA = a.name.toLowerCase();
-    var nameB = b.name.toLowerCase();
-    if (nameA < nameB) {
-      return -1;
-    }
-    if (nameA > nameB) {
-      return 1;
-    }
-    return 0;
-  }
-};
+/**
+ * Create a macro representation of the inserted media element.
+ *
+ * @param element (jQuery object)
+ *    A media element with attached serialized file info.
+ */
+function create_macro (element) {
+  var file_info = element.data('file_info');
+  return '[[' + decodeURIComponent(file_info) + ']]';
+}
+
+/**
+ * Gets the HTML content of an element.
+ *
+ * @param element (jQuery object)
+ */
+function outerHTML (element) {
+  return $('<div>').append( element.eq(0).clone() ).html();
+}
 
 })(jQuery);