diff --git a/demo/editor.html b/demo/editor.html
index 0a05bf0f..b7b0d7a2 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -65,6 +65,14 @@
     
     <table id="controls">
       <tr>
+        <td>
+        <label for="doc">Document:</label>
+        <select id="doc" size="1">
+          <option value="js">JS Document</option>
+          <option value="html">HTML Document</option>
+          <option value="css">CSS Document</option>
+        </select>
+      </td>
         <td>
         <label for="mode">Mode:</label>
         <select id="mode" size="1">
@@ -89,11 +97,73 @@
     <div id="container">    
     </div>
     
+    <script type="text/editor" id="jstext">function foo(items) {
+    for (var i=0; i<items.length; i++) {
+        alert(items[i] + "juhu";
+    }
+} 
+    </script>
+
+    <script type="text/editor" id="csstext">.text-layer {
+    font-family: Monaco, "Courier New", monospace;
+    font-size: 12px;
+    cursor: text;
+}
+    </script>
+
+    <script type="text/editor" id="htmltext"><html>
+<head>
+</head>
+<body>
+    <h1 style="color:red">Juhu Kinners</h1>
+</body>
+</html>
+    </script>
+    
 <script type="text/javascript" charset="utf-8">
 
+var docs = {}
+docs.js = new ace.TextDocument(document.getElementById("jstext").innerHTML);
+docs.js.setMode(new ace.mode.JavaScript());
+docs.css = new ace.TextDocument(document.getElementById("csstext").innerHTML);
+docs.css.setMode(new ace.mode.Css());
+docs.html = new ace.TextDocument(document.getElementById("htmltext").innerHTML);
+docs.html.setMode(new ace.mode.Html());
+
+var docEl = document.getElementById("doc");
+
+function onDocChange() {
+  var doc = getDoc();
+  editor.setDocument(doc);
+  
+  var mode = doc.getMode();
+  if (mode instanceof ace.mode.JavaScript) {
+    modeEl.value = "javascript"
+  }
+  else if (mode instanceof ace.mode.Css) {
+    modeEl.value = "css"
+  }
+  else if (mode instanceof ace.mode.Html) {
+    modeEl.value = "html"
+  }
+  else if (mode instanceof ace.mode.Xml) {
+    modeEl.value = "xml"
+  }
+  else {
+    modeEl.value = "text"
+  }
+  
+  editor.focus();
+}
+docEl.onchange = onDocChange;
+
+function getDoc() {
+  return docs[docEl.value];
+}
+
 var modeEl = document.getElementById("mode");
 modeEl.onchange = function() {
-	editor.setMode(getMode());
+	editor.getDocument().setMode(getMode());
 };
 
 var modes = {
@@ -117,17 +187,14 @@ selectEl.onchange = function() {
 	}
 };
 
-var selectEl = document.getElementById("highlight_active");
-selectEl.onchange = function() {
-	editor.setHighlightActiveLine(!!selectEl.checked);
+var activeEl = document.getElementById("highlight_active");
+activeEl.onchange = function() {
+	editor.setHighlightActiveLine(!!activeEl.checked);
 };
 
 var container = document.getElementById("container");
-var editor = new ace.Editor(
-    new ace.VirtualRenderer(container),
-    new ace.TextDocument("Juhu Kinners"),
-    getMode()
-);
+var editor = new ace.Editor(new ace.VirtualRenderer(container));
+onDocChange();
 
 function onResize() {
     container.style.width = (document.documentElement.clientWidth - 4) + "px";
diff --git a/src/Editor.js b/src/Editor.js
index 558dd48f..4854cfa0 100644
--- a/src/Editor.js
+++ b/src/Editor.js
@@ -1,13 +1,10 @@
 ace.provide("ace.Editor");
 
-ace.Editor = function(renderer, doc, mode) {
+ace.Editor = function(renderer, doc) {
     var container = renderer.getContainerElement();
     this.container = container;
     this.renderer = renderer;
 
-    this.setMode(mode || new ace.mode.Text());
-    this.setDocument(doc || new ace.TextDocument(""));
-
     this.textInput = new ace.TextInput(container, this);
     new ace.KeyBinding(container, this);
 
@@ -20,68 +17,59 @@ ace.Editor = function(renderer, doc, mode) {
     this._highlightLineMarker = null;
     this._blockScrolling = false;
 
-    this.renderer.draw();
-    this.onCursorChange();
-    this.onSelectionChange();
-
-    this._initialized = true;
+    this.setDocument(doc || new ace.TextDocument(""));
 };
 
 
 ace.Editor.prototype.setDocument = function(doc) {
-    // TODO: document change is not yet supported
+    if (this.doc == doc) return;
+
     if (this.doc) {
-        throw new Error("TODO: document change is not yet supported");
+        this.doc.removeEventListener("change", this._onDocumentChange);
+        this.doc.removeEventListener("changeMode", this._onDocumentModeChange);
+        this.doc.removeEventListener("changeTabSize", this._onDocumentChangeTabSize);
+
+        var selection = this.doc.getSelection();
+        this.selection.removeEventListener("changeCursor", this._onCursorChange);
+        this.selection.removeEventListener("changeSelection", this._onSelectionChange);
     }
 
     this.doc = doc;
 
-    doc.addEventListener("change", ace.bind(this.onDocumentChange, this));
+    this._onDocumentChange = ace.bind(this.onDocumentChange, this);
+    doc.addEventListener("change", this._onDocumentChange);
     this.renderer.setDocument(doc);
 
-    var self = this;
-    doc.addEventListener("changeTabSize", function() {
-        self.renderer.draw();
-    });
+    this._onDocumentModeChange = ace.bind(this.onDocumentModeChange, this);
+    doc.addEventListener("changeMode", this._onDocumentModeChange);
+
+    this._onDocumentChangeTabSize = ace.bind(this.renderer.draw, this.renderer);
+    doc.addEventListener("changeTabSize", this._onDocumentChangeTabSize);
 
     this.selection = doc.getSelection();
 
-    var onCursorChange = ace.bind(this.onCursorChange, this);
-    this.selection.addEventListener("changeCursor", onCursorChange);
-
-    var onSelectionChange = ace.bind(this.onSelectionChange, this);
-    this.selection.addEventListener("changeSelection", onSelectionChange);
+    this._onCursorChange = ace.bind(this.onCursorChange, this);
+    this.selection.addEventListener("changeCursor", this._onCursorChange);
 
+    this._onSelectionChange = ace.bind(this.onSelectionChange, this);
+    this.selection.addEventListener("changeSelection", this._onSelectionChange);
 
+    this.onDocumentModeChange();
     this.bgTokenizer.setLines(this.doc.lines);
+
+    this.renderer.draw();
+    this.onCursorChange();
+    this.onSelectionChange();
+};
+
+ace.Editor.prototype.getDocument = function() {
+    return this.doc;
 };
 
 ace.Editor.prototype.getSelection = function() {
     return this.selection;
 };
 
-ace.Editor.prototype.setMode = function(mode) {
-    if (this.mode == mode) return;
-
-    this.mode = mode;
-    var tokenizer = mode.getTokenizer();
-
-    if (!this.bgTokenizer) {
-        var onUpdate = ace.bind(this.onTokenizerUpdate, this);
-        this.bgTokenizer = new ace.BackgroundTokenizer(tokenizer);
-        this.bgTokenizer.addEventListener("update", onUpdate);
-    } else {
-        this.bgTokenizer.setTokenizer(tokenizer);
-    }
-
-    this.renderer.setTokenizer(this.bgTokenizer);
-
-    if (this._initialized) {
-        this.renderer.draw();
-    }
-};
-
-
 ace.Editor.prototype.resize = function() {
     this.renderer.onResize();
 };
@@ -116,6 +104,9 @@ ace.Editor.prototype._highlightBrackets = function() {
     }, 10);
 };
 
+ace.Editor.prototype.focus = function() {
+    this.textInput.focus();
+};
 
 ace.Editor.prototype.onFocus = function() {
     this.renderer.showCursor();
@@ -185,8 +176,27 @@ ace.Editor.prototype.onSelectionChange = function() {
     this.onCursorChange();
 };
 
+ace.Editor.prototype.onDocumentModeChange = function() {
+    var mode = this.doc.getMode();
+
+    this.mode = mode;
+    var tokenizer = mode.getTokenizer();
+
+    if (!this.bgTokenizer) {
+        var onUpdate = ace.bind(this.onTokenizerUpdate, this);
+        this.bgTokenizer = new ace.BackgroundTokenizer(tokenizer);
+        this.bgTokenizer.addEventListener("update", onUpdate);
+    } else {
+        this.bgTokenizer.setTokenizer(tokenizer);
+    }
+
+    this.renderer.setTokenizer(this.bgTokenizer);
+    this.renderer.draw();
+};
+
+
 ace.Editor.prototype.onMouseDown = function(e) {
-    this.textInput.focus();
+    this.focus();
 
     var pageX = ace.getDocumentX(e);
     var pageY = ace.getDocumentY(e);
diff --git a/src/MEventEmitter.js b/src/MEventEmitter.js
index 6ae1983f..c5951f24 100644
--- a/src/MEventEmitter.js
+++ b/src/MEventEmitter.js
@@ -6,7 +6,7 @@ ace.MEventEmitter.$initEvents = function() {
 
 ace.MEventEmitter.$dispatchEvent = function(eventName, e) {
     var listeners = this._eventRegistry[eventName];
-    if (!listeners) return;
+    if (!listeners || !listeners.length) return;
 
     var e = e || {};
     e.type = eventName;
@@ -24,4 +24,15 @@ ace.MEventEmitter.addEventListener = function(eventName, callback) {
     if (ace.arrayIndexOf(listeners, callback) == -1) {
         listeners.push(callback);
     }
-};
\ No newline at end of file
+};
+
+ace.MEventEmitter.removeEventListener = function(eventName, callback) {
+    var listeners = this._eventRegistry[eventName];
+    if (!listeners) {
+      return;
+    }
+    var index = ace.arrayIndexOf(listeners, callback);
+    if (index !== -1) {
+        listeners.splice(index, 1);
+    }
+};
diff --git a/src/TextDocument.js b/src/TextDocument.js
index 1c66c0e5..7c16330e 100644
--- a/src/TextDocument.js
+++ b/src/TextDocument.js
@@ -1,16 +1,19 @@
 ace.provide("ace.TextDocument");
 
-ace.TextDocument = function(text) {
+ace.TextDocument = function(text, mode) {
+    this.$initEvents();
+
     this.lines = this._split(text);
     this.modified = true;
     this.selection = new ace.Selection(this);
 
     this.listeners = [];
-
-    this.$initEvents();
+    if (mode) {
+        this.setMode(mode);
+    }
 };
-ace.mixin(ace.TextDocument.prototype, ace.MEventEmitter);
 
+ace.mixin(ace.TextDocument.prototype, ace.MEventEmitter);
 
 ace.TextDocument.prototype._split = function(text) {
     return text.split(/\r\n|\r|\n/);
@@ -62,6 +65,21 @@ ace.TextDocument.prototype.getTabSize = function() {
     return this._tabSize;
 };
 
+ace.TextDocument.prototype._mode = null;
+ace.TextDocument.prototype.setMode = function(mode) {
+    if (this._mode === mode) return;
+
+    this._mode = mode;
+    this.$dispatchEvent("changeMode");
+};
+
+ace.TextDocument.prototype.getMode = function() {
+    if (!this._mode) {
+        this._mode = new ace.mode.Text();
+    }
+    return this._mode;
+};
+
 ace.TextDocument.prototype.getWidth = function() {
     if (this.modified) {
         this.modified = false;
diff --git a/test/ChangeDocumentTest.js b/test/ChangeDocumentTest.js
new file mode 100644
index 00000000..895fda1f
--- /dev/null
+++ b/test/ChangeDocumentTest.js
@@ -0,0 +1,107 @@
+var ChangeDocumentTest = new TestCase("ChangeDocumentTest", {
+
+    setUp : function() {
+        this.doc1 = new ace.TextDocument(["abc", "def"].join("\n"));
+        this.doc2 = new ace.TextDocument(["ghi", "jkl"].join("\n"));
+        this.editor = new ace.Editor(new MockRenderer());
+    },
+
+    "test: change document" : function() {
+        this.editor.setDocument(this.doc1);
+        assertEquals(this.doc1, this.editor.getDocument());
+
+        this.editor.setDocument(this.doc2);
+        assertEquals(this.doc2, this.editor.getDocument());
+    },
+
+    "test: only changes to the new document should have effect" : function() {
+        var called = false;
+        this.editor.onDocumentChange = function() {
+            called = true;
+        };
+
+        this.editor.setDocument(this.doc1);
+        this.editor.setDocument(this.doc2);
+
+        this.doc1.duplicateLines(0, 0);
+        assertFalse(called);
+
+        this.doc2.duplicateLines(0, 0);
+        assertTrue(called);
+    },
+
+    "test: should use cursor of new document" : function() {
+        this.doc1.getSelection().moveCursorTo(0, 1);
+        this.doc2.getSelection().moveCursorTo(1, 0);
+
+        this.editor.setDocument(this.doc1);
+        assertPosition(0, 1, this.editor.getCursorPosition());
+
+        this.editor.setDocument(this.doc2);
+        assertPosition(1, 0, this.editor.getCursorPosition());
+    },
+
+    "test: only changing the cursor of the new doc should not have an effect" : function() {
+        this.editor.onCursorChange = function() {
+            called = true;
+        };
+
+        this.editor.setDocument(this.doc1);
+        this.editor.setDocument(this.doc2);
+        assertPosition(0, 0, this.editor.getCursorPosition());
+
+        var called = false;
+        this.doc1.getSelection().moveCursorTo(0, 1);
+        assertPosition(0, 0, this.editor.getCursorPosition());
+        assertFalse(called);
+
+        this.doc2.getSelection().moveCursorTo(1, 1);
+        assertPosition(1, 1, this.editor.getCursorPosition());
+        assertTrue(called);
+    },
+
+    "test: should use selection of new document" : function() {
+        this.doc1.getSelection().selectTo(0, 1);
+        this.doc2.getSelection().selectTo(1, 0);
+
+        this.editor.setDocument(this.doc1);
+        assertPosition(0, 1, this.editor.getSelection().getSelectionLead());
+
+        this.editor.setDocument(this.doc2);
+        assertPosition(1, 0, this.editor.getSelection().getSelectionLead());
+    },
+
+    "test: only changing the selection of the new doc should not have an effect" : function() {
+        this.editor.onSelectionChange = function() {
+            called = true;
+        };
+
+        this.editor.setDocument(this.doc1);
+        this.editor.setDocument(this.doc2);
+        assertPosition(0, 0, this.editor.getSelection().getSelectionLead());
+
+        var called = false;
+        this.doc1.getSelection().selectTo(0, 1);
+        assertPosition(0, 0, this.editor.getSelection().getSelectionLead());
+        assertFalse(called);
+
+        this.doc2.getSelection().selectTo(1, 1);
+        assertPosition(1, 1, this.editor.getSelection().getSelectionLead());
+        assertTrue(called);
+    },
+
+    "test: should use mode of new document" : function() {
+        this.editor.onDocumentModeChange = function() {
+            called = true;
+        };
+        this.editor.setDocument(this.doc1);
+        this.editor.setDocument(this.doc2);
+
+        var called = false;
+        this.doc1.setMode(new ace.mode.Text());
+        assertFalse(called);
+
+        this.doc2.setMode(new ace.mode.JavaScript());
+        assertTrue(called);
+    }
+});
\ No newline at end of file
diff --git a/test/TextEditTest.js b/test/TextEditTest.js
index cb635f35..7bec2205 100644
--- a/test/TextEditTest.js
+++ b/test/TextEditTest.js
@@ -118,8 +118,8 @@ var TextEditTest = TestCase("TextEditTest",
     },
 
     "test: comment lines should perserve selection" : function() {
-        var doc = new ace.TextDocument(["  abc", "cde"].join("\n"));
-        var editor = new ace.Editor(new MockRenderer(), doc, new ace.mode.JavaScript());
+        var doc = new ace.TextDocument(["  abc", "cde"].join("\n"), new ace.mode.JavaScript());
+        var editor = new ace.Editor(new MockRenderer(), doc);
 
         editor.moveCursorTo(0, 2);
         editor.getSelection().selectDown();
@@ -134,8 +134,8 @@ var TextEditTest = TestCase("TextEditTest",
     },
 
     "test: uncomment lines should perserve selection" : function() {
-        var doc = new ace.TextDocument(["//  abc", "//cde"].join("\n"));
-        var editor = new ace.Editor(new MockRenderer(), doc, new ace.mode.JavaScript());
+        var doc = new ace.TextDocument(["//  abc", "//cde"].join("\n"), new ace.mode.JavaScript());
+        var editor = new ace.Editor(new MockRenderer(), doc);
 
         editor.moveCursorTo(0, 1);
         editor.getSelection().selectDown();
