joosy 0.1.0.RC1

data/vendor/assets/javascripts/jquery.hashchange.js

@@ -0,0 +1,390 @@
+/*!
+ * jQuery hashchange event - v1.3 - 7/21/2010
+ * http://benalman.com/projects/jquery-hashchange-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+
+// Script: jQuery hashchange event
+//
+// *Version: 1.3, Last updated: 7/21/2010*
+//
+// Project Home - http://benalman.com/projects/jquery-hashchange-plugin/
+// GitHub       - http://github.com/cowboy/jquery-hashchange/
+// Source       - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js
+// (Minified)   - http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.min.js (0.8kb gzipped)
+//
+// About: License
+//
+// Copyright (c) 2010 "Cowboy" Ben Alman,
+// Dual licensed under the MIT and GPL licenses.
+// http://benalman.com/about/license/
+//
+// About: Examples
+//
+// These working examples, complete with fully commented code, illustrate a few
+// ways in which this plugin can be used.
+//
+// hashchange event - http://benalman.com/code/projects/jquery-hashchange/examples/hashchange/
+// document.domain - http://benalman.com/code/projects/jquery-hashchange/examples/document_domain/
+//
+// About: Support and Testing
+//
+// Information about what version or versions of jQuery this plugin has been
+// tested with, what browsers it has been tested in, and where the unit tests
+// reside (so you can test it yourself).
+//
+// jQuery Versions - 1.2.6, 1.3.2, 1.4.1, 1.4.2
+// Browsers Tested - Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5,
+//                   Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
+// Unit Tests      - http://benalman.com/code/projects/jquery-hashchange/unit/
+//
+// About: Known issues
+//
+// While this jQuery hashchange event implementation is quite stable and
+// robust, there are a few unfortunate browser bugs surrounding expected
+// hashchange event-based behaviors, independent of any JavaScript
+// window.onhashchange abstraction. See the following examples for more
+// information:
+//
+// Chrome: Back Button - http://benalman.com/code/projects/jquery-hashchange/examples/bug-chrome-back-button/
+// Firefox: Remote XMLHttpRequest - http://benalman.com/code/projects/jquery-hashchange/examples/bug-firefox-remote-xhr/
+// WebKit: Back Button in an Iframe - http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/
+// Safari: Back Button from a different domain - http://benalman.com/code/projects/jquery-hashchange/examples/bug-safari-back-from-diff-domain/
+//
+// Also note that should a browser natively support the window.onhashchange
+// event, but not report that it does, the fallback polling loop will be used.
+//
+// About: Release History
+//
+// 1.3   - (7/21/2010) Reorganized IE6/7 Iframe code to make it more
+//         "removable" for mobile-only development. Added IE6/7 document.title
+//         support. Attempted to make Iframe as hidden as possible by using
+//         techniques from http://www.paciellogroup.com/blog/?p=604. Added
+//         support for the "shortcut" format $(window).hashchange( fn ) and
+//         $(window).hashchange() like jQuery provides for built-in events.
+//         Renamed jQuery.hashchangeDelay to <jQuery.fn.hashchange.delay> and
+//         lowered its default value to 50. Added <jQuery.fn.hashchange.domain>
+//         and <jQuery.fn.hashchange.src> properties plus document-domain.html
+//         file to address access denied issues when setting document.domain in
+//         IE6/7.
+// 1.2   - (2/11/2010) Fixed a bug where coming back to a page using this plugin
+//         from a page on another domain would cause an error in Safari 4. Also,
+//         IE6/7 Iframe is now inserted after the body (this actually works),
+//         which prevents the page from scrolling when the event is first bound.
+//         Event can also now be bound before DOM ready, but it won't be usable
+//         before then in IE6/7.
+// 1.1   - (1/21/2010) Incorporated document.documentMode test to fix IE8 bug
+//         where browser version is incorrectly reported as 8.0, despite
+//         inclusion of the X-UA-Compatible IE=EmulateIE7 meta tag.
+// 1.0   - (1/9/2010) Initial Release. Broke out the jQuery BBQ event.special
+//         window.onhashchange functionality into a separate plugin for users
+//         who want just the basic event & back button support, without all the
+//         extra awesomeness that BBQ provides. This plugin will be included as
+//         part of jQuery BBQ, but also be available separately.
+
+(function($,window,undefined){
+  '$:nomunge'; // Used by YUI compressor.
+
+  // Reused string.
+  var str_hashchange = 'hashchange',
+
+    // Method / object references.
+    doc = document,
+    fake_onhashchange,
+    special = $.event.special,
+
+    // Does the browser support window.onhashchange? Note that IE8 running in
+    // IE7 compatibility mode reports true for 'onhashchange' in window, even
+    // though the event isn't supported, so also test document.documentMode.
+    doc_mode = doc.documentMode,
+    supports_onhashchange = 'on' + str_hashchange in window && ( doc_mode === undefined || doc_mode > 7 );
+
+  // Get location.hash (or what you'd expect location.hash to be) sans any
+  // leading #. Thanks for making this necessary, Firefox!
+  function get_fragment( url ) {
+    url = url || location.href;
+    return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
+  };
+
+  // Method: jQuery.fn.hashchange
+  //
+  // Bind a handler to the window.onhashchange event or trigger all bound
+  // window.onhashchange event handlers. This behavior is consistent with
+  // jQuery's built-in event handlers.
+  //
+  // Usage:
+  //
+  // > jQuery(window).hashchange( [ handler ] );
+  //
+  // Arguments:
+  //
+  //  handler - (Function) Optional handler to be bound to the hashchange
+  //    event. This is a "shortcut" for the more verbose form:
+  //    jQuery(window).bind( 'hashchange', handler ). If handler is omitted,
+  //    all bound window.onhashchange event handlers will be triggered. This
+  //    is a shortcut for the more verbose
+  //    jQuery(window).trigger( 'hashchange' ). These forms are described in
+  //    the <hashchange event> section.
+  //
+  // Returns:
+  //
+  //  (jQuery) The initial jQuery collection of elements.
+
+  // Allow the "shortcut" format $(elem).hashchange( fn ) for binding and
+  // $(elem).hashchange() for triggering, like jQuery does for built-in events.
+  $.fn[ str_hashchange ] = function( fn ) {
+    return fn ? this.bind( str_hashchange, fn ) : this.trigger( str_hashchange );
+  };
+
+  // Property: jQuery.fn.hashchange.delay
+  //
+  // The numeric interval (in milliseconds) at which the <hashchange event>
+  // polling loop executes. Defaults to 50.
+
+  // Property: jQuery.fn.hashchange.domain
+  //
+  // If you're setting document.domain in your JavaScript, and you want hash
+  // history to work in IE6/7, not only must this property be set, but you must
+  // also set document.domain BEFORE jQuery is loaded into the page. This
+  // property is only applicable if you are supporting IE6/7 (or IE8 operating
+  // in "IE7 compatibility" mode).
+  //
+  // In addition, the <jQuery.fn.hashchange.src> property must be set to the
+  // path of the included "document-domain.html" file, which can be renamed or
+  // modified if necessary (note that the document.domain specified must be the
+  // same in both your main JavaScript as well as in this file).
+  //
+  // Usage:
+  //
+  // jQuery.fn.hashchange.domain = document.domain;
+
+  // Property: jQuery.fn.hashchange.src
+  //
+  // If, for some reason, you need to specify an Iframe src file (for example,
+  // when setting document.domain as in <jQuery.fn.hashchange.domain>), you can
+  // do so using this property. Note that when using this property, history
+  // won't be recorded in IE6/7 until the Iframe src file loads. This property
+  // is only applicable if you are supporting IE6/7 (or IE8 operating in "IE7
+  // compatibility" mode).
+  //
+  // Usage:
+  //
+  // jQuery.fn.hashchange.src = 'path/to/file.html';
+
+  $.fn[ str_hashchange ].delay = 50;
+  /*
+  $.fn[ str_hashchange ].domain = null;
+  $.fn[ str_hashchange ].src = null;
+  */
+
+  // Event: hashchange event
+  //
+  // Fired when location.hash changes. In browsers that support it, the native
+  // HTML5 window.onhashchange event is used, otherwise a polling loop is
+  // initialized, running every <jQuery.fn.hashchange.delay> milliseconds to
+  // see if the hash has changed. In IE6/7 (and IE8 operating in "IE7
+  // compatibility" mode), a hidden Iframe is created to allow the back button
+  // and hash-based history to work.
+  //
+  // Usage as described in <jQuery.fn.hashchange>:
+  //
+  // > // Bind an event handler.
+  // > jQuery(window).hashchange( function(e) {
+  // >   var hash = location.hash;
+  // >   ...
+  // > });
+  // >
+  // > // Manually trigger the event handler.
+  // > jQuery(window).hashchange();
+  //
+  // A more verbose usage that allows for event namespacing:
+  //
+  // > // Bind an event handler.
+  // > jQuery(window).bind( 'hashchange', function(e) {
+  // >   var hash = location.hash;
+  // >   ...
+  // > });
+  // >
+  // > // Manually trigger the event handler.
+  // > jQuery(window).trigger( 'hashchange' );
+  //
+  // Additional Notes:
+  //
+  // * The polling loop and Iframe are not created until at least one handler
+  //   is actually bound to the 'hashchange' event.
+  // * If you need the bound handler(s) to execute immediately, in cases where
+  //   a location.hash exists on page load, via bookmark or page refresh for
+  //   example, use jQuery(window).hashchange() or the more verbose
+  //   jQuery(window).trigger( 'hashchange' ).
+  // * The event can be bound before DOM ready, but since it won't be usable
+  //   before then in IE6/7 (due to the necessary Iframe), recommended usage is
+  //   to bind it inside a DOM ready handler.
+
+  // Override existing $.event.special.hashchange methods (allowing this plugin
+  // to be defined after jQuery BBQ in BBQ's source code).
+  special[ str_hashchange ] = $.extend( special[ str_hashchange ], {
+
+    // Called only when the first 'hashchange' event is bound to window.
+    setup: function() {
+      // If window.onhashchange is supported natively, there's nothing to do..
+      if ( supports_onhashchange ) { return false; }
+
+      // Otherwise, we need to create our own. And we don't want to call this
+      // until the user binds to the event, just in case they never do, since it
+      // will create a polling loop and possibly even a hidden Iframe.
+      $( fake_onhashchange.start );
+    },
+
+    // Called only when the last 'hashchange' event is unbound from window.
+    teardown: function() {
+      // If window.onhashchange is supported natively, there's nothing to do..
+      if ( supports_onhashchange ) { return false; }
+
+      // Otherwise, we need to stop ours (if possible).
+      $( fake_onhashchange.stop );
+    }
+
+  });
+
+  // fake_onhashchange does all the work of triggering the window.onhashchange
+  // event for browsers that don't natively support it, including creating a
+  // polling loop to watch for hash changes and in IE 6/7 creating a hidden
+  // Iframe to enable back and forward.
+  fake_onhashchange = (function(){
+    var self = {},
+      timeout_id,
+
+      // Remember the initial hash so it doesn't get triggered immediately.
+      last_hash = get_fragment(),
+
+      fn_retval = function(val){ return val; },
+      history_set = fn_retval,
+      history_get = fn_retval;
+
+    // Start the polling loop.
+    self.start = function() {
+      timeout_id || poll();
+    };
+
+    // Stop the polling loop.
+    self.stop = function() {
+      timeout_id && clearTimeout( timeout_id );
+      timeout_id = undefined;
+    };
+
+    // This polling loop checks every $.fn.hashchange.delay milliseconds to see
+    // if location.hash has changed, and triggers the 'hashchange' event on
+    // window when necessary.
+    function poll() {
+      var hash = get_fragment(),
+        history_hash = history_get( last_hash );
+
+      if ( hash !== last_hash ) {
+        history_set( last_hash = hash, history_hash );
+
+        $(window).trigger( str_hashchange );
+
+      } else if ( history_hash !== last_hash ) {
+        location.href = location.href.replace( /#.*/, '' ) + history_hash;
+      }
+
+      timeout_id = setTimeout( poll, $.fn[ str_hashchange ].delay );
+    };
+
+    // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
+    // vvvvvvvvvvvvvvvvvvv REMOVE IF NOT SUPPORTING IE6/7/8 vvvvvvvvvvvvvvvvvvv
+    // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
+    $.browser.msie && !supports_onhashchange && (function(){
+      // Not only do IE6/7 need the "magical" Iframe treatment, but so does IE8
+      // when running in "IE7 compatibility" mode.
+
+      var iframe,
+        iframe_src;
+
+      // When the event is bound and polling starts in IE 6/7, create a hidden
+      // Iframe for history handling.
+      self.start = function(){
+        if ( !iframe ) {
+          iframe_src = $.fn[ str_hashchange ].src;
+          iframe_src = iframe_src && iframe_src + get_fragment();
+
+          // Create hidden Iframe. Attempt to make Iframe as hidden as possible
+          // by using techniques from http://www.paciellogroup.com/blog/?p=604.
+          iframe = $('<iframe tabindex="-1" title="empty"/>').hide()
+
+            // When Iframe has completely loaded, initialize the history and
+            // start polling.
+            .one( 'load', function(){
+              iframe_src || history_set( get_fragment() );
+              poll();
+            })
+
+            // Load Iframe src if specified, otherwise nothing.
+            .attr( 'src', iframe_src || 'javascript:0' )
+
+            // Append Iframe after the end of the body to prevent unnecessary
+            // initial page scrolling (yes, this works).
+            .insertAfter( 'body' )[0].contentWindow;
+
+          // Whenever `document.title` changes, update the Iframe's title to
+          // prettify the back/next history menu entries. Since IE sometimes
+          // errors with "Unspecified error" the very first time this is set
+          // (yes, very useful) wrap this with a try/catch block.
+          doc.onpropertychange = function(){
+            try {
+              if ( event.propertyName === 'title' ) {
+                iframe.document.title = doc.title;
+              }
+            } catch(e) {}
+          };
+
+        }
+      };
+
+      // Override the "stop" method since an IE6/7 Iframe was created. Even
+      // if there are no longer any bound event handlers, the polling loop
+      // is still necessary for back/next to work at all!
+      self.stop = fn_retval;
+
+      // Get history by looking at the hidden Iframe's location.hash.
+      history_get = function() {
+        return get_fragment( iframe.location.href );
+      };
+
+      // Set a new history item by opening and then closing the Iframe
+      // document, *then* setting its location.hash. If document.domain has
+      // been set, update that as well.
+      history_set = function( hash, history_hash ) {
+        var iframe_doc = iframe.document,
+          domain = $.fn[ str_hashchange ].domain;
+
+        if ( hash !== history_hash ) {
+          // Update Iframe with any initial `document.title` that might be set.
+          iframe_doc.title = doc.title;
+
+          // Opening the Iframe's document after it has been closed is what
+          // actually adds a history entry.
+          iframe_doc.open();
+
+          // Set document.domain for the Iframe document as well, if necessary.
+          domain && iframe_doc.write( '<script>document.domain="' + domain + '"</script>' );
+
+          iframe_doc.close();
+
+          // Update the Iframe's hash, for great justice.
+          iframe.location.hash = hash;
+        }
+      };
+
+    })();
+    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    // ^^^^^^^^^^^^^^^^^^^ REMOVE IF NOT SUPPORTING IE6/7/8 ^^^^^^^^^^^^^^^^^^^
+    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+    return self;
+  })();
+
+})(jQuery,this);

data/vendor/assets/javascripts/metamorph.js

@@ -0,0 +1,409 @@
+// ==========================================================================
+// Project:   metamorph
+// Copyright: ©2011 My Company Inc. All rights reserved.
+// ==========================================================================
+
+(function(window) {
+
+  var K = function(){},
+      guid = 0,
+      document = window.document,
+
+      // Feature-detect the W3C range API, the extended check is for IE9 which only partially supports ranges
+      supportsRange = ('createRange' in document) && (typeof Range !== 'undefined') && Range.prototype.createContextualFragment,
+
+      // Internet Explorer prior to 9 does not allow setting innerHTML if the first element
+      // is a "zero-scope" element. This problem can be worked around by making
+      // the first node an invisible text node. We, like Modernizr, use ­
+      needsShy = (function(){
+        var testEl = document.createElement('div');
+        testEl.innerHTML = "<div></div>";
+        testEl.firstChild.innerHTML = "<script></script>";
+        return testEl.firstChild.innerHTML === '';
+      })();
+
+  // Constructor that supports either Metamorph('foo') or new
+  // Metamorph('foo');
+  // 
+  // Takes a string of HTML as the argument.
+
+  var Metamorph = function(html) {
+    var self;
+
+    if (this instanceof Metamorph) {
+      self = this;
+    } else {
+      self = new K();
+    }
+
+    self.innerHTML = html;
+    var myGuid = 'metamorph-'+(guid++);
+    self.start = myGuid + '-start';
+    self.end = myGuid + '-end';
+
+    return self;
+  };
+
+  K.prototype = Metamorph.prototype;
+
+  var rangeFor, htmlFunc, removeFunc, outerHTMLFunc, appendToFunc, afterFunc, prependFunc, startTagFunc, endTagFunc;
+
+  outerHTMLFunc = function() {
+    return this.startTag() + this.innerHTML + this.endTag();
+  };
+
+  startTagFunc = function() {
+    return "<script id='" + this.start + "' type='text/x-placeholder'></script>";
+  };
+
+  endTagFunc = function() {
+    return "<script id='" + this.end + "' type='text/x-placeholder'></script>";
+  };
+
+  // If we have the W3C range API, this process is relatively straight forward.
+  if (supportsRange) {
+
+    // IE 9 supports ranges but doesn't define createContextualFragment
+    if (!Range.prototype.createContextualFragment) {
+      Range.prototype.createContextualFragment = function(html) {
+        var frag = document.createDocumentFragment(),
+             div = document.createElement("div");
+        frag.appendChild(div);
+        div.outerHTML = html;
+        return frag;
+      };
+    }
+
+    // Get a range for the current morph. Optionally include the starting and
+    // ending placeholders.
+    rangeFor = function(morph, outerToo) {
+      var range = document.createRange();
+      var before = document.getElementById(morph.start);
+      var after = document.getElementById(morph.end);
+
+      if (outerToo) {
+        range.setStartBefore(before);
+        range.setEndAfter(after);
+      } else {
+        range.setStartAfter(before);
+        range.setEndBefore(after);
+      }
+
+      return range;
+    };
+
+    htmlFunc = function(html, outerToo) {
+      // get a range for the current metamorph object
+      var range = rangeFor(this, outerToo);
+
+      // delete the contents of the range, which will be the
+      // nodes between the starting and ending placeholder.
+      range.deleteContents();
+
+      // create a new document fragment for the HTML
+      var fragment = range.createContextualFragment(html);
+
+      // insert the fragment into the range
+      range.insertNode(fragment);
+    };
+
+    removeFunc = function() {
+      // get a range for the current metamorph object including
+      // the starting and ending placeholders.
+      var range = rangeFor(this, true);
+
+      // delete the entire range.
+      range.deleteContents();
+    };
+
+    appendToFunc = function(node) {
+      var range = document.createRange();
+      range.setStart(node);
+      range.collapse(false);
+      var frag = range.createContextualFragment(this.outerHTML());
+      node.appendChild(frag);
+    };
+
+    afterFunc = function(html) {
+      var range = document.createRange();
+      var after = document.getElementById(this.end);
+
+      range.setStartAfter(after);
+      range.setEndAfter(after);
+
+      var fragment = range.createContextualFragment(html);
+      range.insertNode(fragment);
+    };
+
+    prependFunc = function(html) {
+      var range = document.createRange();
+      var start = document.getElementById(this.start);
+
+      range.setStartAfter(start);
+      range.setEndAfter(start);
+
+      var fragment = range.createContextualFragment(html);
+      range.insertNode(fragment);
+    };
+
+  } else {
+    /**
+     * This code is mostly taken from jQuery, with one exception. In jQuery's case, we
+     * have some HTML and we need to figure out how to convert it into some nodes.
+     *
+     * In this case, jQuery needs to scan the HTML looking for an opening tag and use
+     * that as the key for the wrap map. In our case, we know the parent node, and
+     * can use its type as the key for the wrap map.
+     **/
+    var wrapMap = {
+      select: [ 1, "<select multiple='multiple'>", "</select>" ],
+      fieldset: [ 1, "<fieldset>", "</fieldset>" ],
+      table: [ 1, "<table>", "</table>" ],
+      tbody: [ 2, "<table><tbody>", "</tbody></table>" ],
+      tr: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
+      colgroup: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
+      map: [ 1, "<map>", "</map>" ],
+      _default: [ 0, "", "" ]
+    };
+
+    /**
+     * Given a parent node and some HTML, generate a set of nodes. Return the first
+     * node, which will allow us to traverse the rest using nextSibling.
+     *
+     * We need to do this because innerHTML in IE does not really parse the nodes.
+     **/
+    var firstNodeFor = function(parentNode, html) {
+      var arr = wrapMap[parentNode.tagName.toLowerCase()] || wrapMap._default;
+      var depth = arr[0], start = arr[1], end = arr[2];
+
+      if (needsShy) { html = '&shy;'+html; }
+
+      var element = document.createElement('div');
+      element.innerHTML = start + html + end;
+
+      for (var i=0; i<=depth; i++) {
+        element = element.firstChild;
+      }
+
+      // Look for &shy; to remove it.
+      if (needsShy) {
+        var shyElement = element;
+
+        // Sometimes we get nameless elements with the shy inside
+        while (shyElement.nodeType === 1 && !shyElement.nodeName && shyElement.childNodes.length === 1) {
+          shyElement = shyElement.firstChild;
+        }
+
+        // At this point it's the actual unicode character.
+        if (shyElement.nodeType === 3 && shyElement.nodeValue.charAt(0) === "\u00AD") {
+          shyElement.nodeValue = shyElement.nodeValue.slice(1);
+        }
+      }
+
+      return element;
+    };
+
+    /**
+     * In some cases, Internet Explorer can create an anonymous node in
+     * the hierarchy with no tagName. You can create this scenario via:
+     *
+     *     div = document.createElement("div");
+     *     div.innerHTML = "<table>&shy<script></script><tr><td>hi</td></tr></table>";
+     *     div.firstChild.firstChild.tagName //=> ""
+     *
+     * If our script markers are inside such a node, we need to find that
+     * node and use *it* as the marker.
+     **/
+    var realNode = function(start) {
+      while (start.parentNode.tagName === "") {
+        start = start.parentNode;
+      }
+
+      return start;
+    };
+
+    /**
+     * When automatically adding a tbody, Internet Explorer inserts the
+     * tbody immediately before the first <tr>. Other browsers create it
+     * before the first node, no matter what.
+     *
+     * This means the the following code:
+     *
+     *     div = document.createElement("div");
+     *     div.innerHTML = "<table><script id='first'></script><tr><td>hi</td></tr><script id='last'></script></table>
+     *
+     * Generates the following DOM in IE:
+     *
+     *     + div
+     *       + table
+     *         - script id='first'
+     *         + tbody
+     *           + tr
+     *             + td
+     *               - "hi"
+     *           - script id='last'
+     *
+     * Which means that the two script tags, even though they were
+     * inserted at the same point in the hierarchy in the original
+     * HTML, now have different parents.
+     *
+     * This code reparents the first script tag by making it the tbody's
+     * first child.
+     **/
+    var fixParentage = function(start, end) {
+      if (start.parentNode !== end.parentNode) {
+        end.parentNode.insertBefore(start, end.parentNode.firstChild);
+      }
+    };
+
+    htmlFunc = function(html, outerToo) {
+      // get the real starting node. see realNode for details.
+      var start = realNode(document.getElementById(this.start));
+      var end = document.getElementById(this.end);
+      var parentNode = end.parentNode;
+      var node, nextSibling, last;
+
+      // make sure that the start and end nodes share the same
+      // parent. If not, fix it.
+      fixParentage(start, end);
+
+      // remove all of the nodes after the starting placeholder and
+      // before the ending placeholder.
+      node = start.nextSibling;
+      while (node) {
+        nextSibling = node.nextSibling;
+        last = node === end;
+
+        // if this is the last node, and we want to remove it as well,
+        // set the `end` node to the next sibling. This is because
+        // for the rest of the function, we insert the new nodes
+        // before the end (note that insertBefore(node, null) is
+        // the same as appendChild(node)).
+        //
+        // if we do not want to remove it, just break.
+        if (last) {
+          if (outerToo) { end = node.nextSibling; } else { break; }
+        }
+
+        node.parentNode.removeChild(node);
+
+        // if this is the last node and we didn't break before
+        // (because we wanted to remove the outer nodes), break
+        // now.
+        if (last) { break; }
+
+        node = nextSibling;
+      }
+
+      // get the first node for the HTML string, even in cases like
+      // tables and lists where a simple innerHTML on a div would
+      // swallow some of the content.
+      node = firstNodeFor(start.parentNode, html);
+
+      // copy the nodes for the HTML between the starting and ending
+      // placeholder.
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.insertBefore(node, end);
+        node = nextSibling;
+      }
+    };
+
+    // remove the nodes in the DOM representing this metamorph.
+    //
+    // this includes the starting and ending placeholders.
+    removeFunc = function() {
+      var start = realNode(document.getElementById(this.start));
+      var end = document.getElementById(this.end);
+
+      this.html('');
+      start.parentNode.removeChild(start);
+      end.parentNode.removeChild(end);
+    };
+
+    appendToFunc = function(parentNode) {
+      var node = firstNodeFor(parentNode, this.outerHTML());
+
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.appendChild(node);
+        node = nextSibling;
+      }
+    };
+
+    afterFunc = function(html) {
+      // get the real starting node. see realNode for details.
+      var end = document.getElementById(this.end);
+      var parentNode = end.parentNode;
+      var nextSibling;
+      var node;
+
+      // get the first node for the HTML string, even in cases like
+      // tables and lists where a simple innerHTML on a div would
+      // swallow some of the content.
+      node = firstNodeFor(parentNode, html);
+
+      // copy the nodes for the HTML between the starting and ending
+      // placeholder.
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.insertBefore(node, end.nextSibling);
+        node = nextSibling;
+      }
+    };
+
+    prependFunc = function(html) {
+      var start = document.getElementById(this.start);
+      var parentNode = start.parentNode;
+      var nextSibling;
+      var node;
+
+      node = firstNodeFor(parentNode, html);
+      var insertBefore = start.nextSibling;
+
+      while (node) {
+        nextSibling = node.nextSibling;
+        parentNode.insertBefore(node, insertBefore);
+        node = nextSibling;
+      }
+    }
+  }
+
+  Metamorph.prototype.html = function(html) {
+    this.checkRemoved();
+    if (html === undefined) { return this.innerHTML; }
+
+    htmlFunc.call(this, html);
+
+    this.innerHTML = html;
+  };
+
+  Metamorph.prototype.replaceWith = function(html) {
+    this.checkRemoved();
+    htmlFunc.call(this, html, true);
+  };
+
+  Metamorph.prototype.remove = removeFunc;
+  Metamorph.prototype.outerHTML = outerHTMLFunc;
+  Metamorph.prototype.appendTo = appendToFunc;
+  Metamorph.prototype.after = afterFunc;
+  Metamorph.prototype.prepend = prependFunc;
+  Metamorph.prototype.startTag = startTagFunc;
+  Metamorph.prototype.endTag = endTagFunc;
+
+  Metamorph.prototype.isRemoved = function() {
+    var before = document.getElementById(this.start);
+    var after = document.getElementById(this.end);
+
+    return !before || !after;
+  };
+
+  Metamorph.prototype.checkRemoved = function() {
+    if (this.isRemoved()) {
+      throw new Error("Cannot perform operations on a Metamorph that is not in the DOM.");
+    }
+  };
+
+  window.Metamorph = Metamorph;
+})(this);
+