diff --git a/demo/editor.html b/demo/editor.html
index b7b0d7a2..5c3c6cfc 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -52,10 +52,10 @@
 	<script src="../src/TextDocument.js" type="text/javascript" charset="utf-8"></script>
 	<script src="../src/Tokenizer.js" type="text/javascript" charset="utf-8"></script>
 	<script src="../src/BackgroundTokenizer.js" type="text/javascript" charset="utf-8"></script>
-	<script src="../src/CursorLayer.js" type="text/javascript" charset="utf-8"></script>	
-	<script src="../src/GutterLayer.js" type="text/javascript" charset="utf-8"></script>	
-	<script src="../src/TextLayer.js" type="text/javascript" charset="utf-8"></script>	
-	<script src="../src/MarkerLayer.js" type="text/javascript" charset="utf-8"></script>	
+	<script src="../src/layer/Cursor.js" type="text/javascript" charset="utf-8"></script>	
+	<script src="../src/layer/Gutter.js" type="text/javascript" charset="utf-8"></script>	
+	<script src="../src/layer/Text.js" type="text/javascript" charset="utf-8"></script>	
+	<script src="../src/layer/Marker.js" type="text/javascript" charset="utf-8"></script>	
 	<script src="../src/TextInput.js" type="text/javascript" charset="utf-8"></script>
 	<script src="../src/KeyBinding.js" type="text/javascript" charset="utf-8"></script>	
 	<script src="../src/Editor.js" type="text/javascript" charset="utf-8"></script>	
@@ -113,6 +113,15 @@
 
     <script type="text/editor" id="htmltext"><html>
 <head>
+
+<style type="text/css">
+.text-layer {
+    font-family: Monaco, "Courier New", monospace;
+    font-size: 12px;
+    cursor: text;
+}
+</style>
+
 </head>
 <body>
     <h1 style="color:red">Juhu Kinners</h1>
diff --git a/jsTestDriver.conf b/jsTestDriver.conf
index 507fb0c7..48db8236 100644
--- a/jsTestDriver.conf
+++ b/jsTestDriver.conf
@@ -6,6 +6,7 @@ load:
   - src/MEventEmitter.js
   - src/mode/Text.js
   - src/mode/*.js
+  - src/layer/*.js
   - src/*.js
   
   - test/*.js
diff --git a/src/VirtualRenderer.js b/src/VirtualRenderer.js
index 8c92c961..85b4564d 100644
--- a/src/VirtualRenderer.js
+++ b/src/VirtualRenderer.js
@@ -12,16 +12,16 @@ ace.VirtualRenderer = function(container) {
     this.gutter.className = "gutter";
     this.container.appendChild(this.gutter);
 
-    this.gutterLayer = new ace.GutterLayer(this.gutter);
-    this.markerLayer = new ace.MarkerLayer(this.scroller);
+    this.gutterLayer = new ace.layer.Gutter(this.gutter);
+    this.markerLayer = new ace.layer.Marker(this.scroller);
 
-    var textLayer = this.textLayer = new ace.TextLayer(this.scroller);
+    var textLayer = this.textLayer = new ace.layer.Text(this.scroller);
     this.canvas = textLayer.element;
 
     this.characterWidth = textLayer.getCharacterWidth();
     this.lineHeight = textLayer.getLineHeight();
 
-    this.cursorLayer = new ace.CursorLayer(this.scroller);
+    this.cursorLayer = new ace.layer.Cursor(this.scroller);
 
     this.layers = [ this.markerLayer, textLayer, this.cursorLayer ];
 
diff --git a/src/CursorLayer.js b/src/layer/Cursor.js
similarity index 80%
rename from src/CursorLayer.js
rename to src/layer/Cursor.js
index b47f6af4..acb5e56c 100644
--- a/src/CursorLayer.js
+++ b/src/layer/Cursor.js
@@ -1,6 +1,6 @@
-ace.provide("ace.CursorLayer");
+ace.provide("ace.layer.Cursor");
 
-ace.CursorLayer = function(parentEl) {
+ace.layer.Cursor = function(parentEl) {
     this.element = document.createElement("div");
     this.element.className = "layer cursor-layer";
     parentEl.appendChild(this.element);
@@ -11,14 +11,14 @@ ace.CursorLayer = function(parentEl) {
     this.isVisible = false;
 };
 
-ace.CursorLayer.prototype.setCursor = function(position) {
+ace.layer.Cursor.prototype.setCursor = function(position) {
     this.position = {
         row : position.row,
         column : position.column
     };
 };
 
-ace.CursorLayer.prototype.hideCursor = function() {
+ace.layer.Cursor.prototype.hideCursor = function() {
     this.isVisible = false;
     if (this.cursor.parentNode) {
         this.cursor.parentNode.removeChild(this.cursor);
@@ -26,7 +26,7 @@ ace.CursorLayer.prototype.hideCursor = function() {
     clearInterval(this.blinkId);
 };
 
-ace.CursorLayer.prototype.showCursor = function() {
+ace.layer.Cursor.prototype.showCursor = function() {
     this.isVisible = true;
     this.element.appendChild(this.cursor);
 
@@ -35,7 +35,7 @@ ace.CursorLayer.prototype.showCursor = function() {
     this.restartTimer();
 };
 
-ace.CursorLayer.prototype.restartTimer = function() {
+ace.layer.Cursor.prototype.restartTimer = function() {
     clearInterval(this.blinkId);
     if (!this.isVisible) {
         return;
@@ -50,14 +50,14 @@ ace.CursorLayer.prototype.restartTimer = function() {
     }, 1000);
 };
 
-ace.CursorLayer.prototype.getPixelPosition = function() {
+ace.layer.Cursor.prototype.getPixelPosition = function() {
     return this.pixelPos || {
         left : 0,
         top : 0
     };
 };
 
-ace.CursorLayer.prototype.update = function(config) {
+ace.layer.Cursor.prototype.update = function(config) {
     if (!this.position)
         return;
 
diff --git a/src/GutterLayer.js b/src/layer/Gutter.js
similarity index 77%
rename from src/GutterLayer.js
rename to src/layer/Gutter.js
index b2499f6d..00872802 100644
--- a/src/GutterLayer.js
+++ b/src/layer/Gutter.js
@@ -1,12 +1,12 @@
-ace.provide("ace.GutterLayer");
+ace.provide("ace.layer.Gutter");
 
-ace.GutterLayer = function(parentEl) {
+ace.layer.Gutter = function(parentEl) {
     this.element = document.createElement("div");
     this.element.className = "layer gutter-layer";
     parentEl.appendChild(this.element);
 };
 
-ace.GutterLayer.prototype.update = function(config) {
+ace.layer.Gutter.prototype.update = function(config) {
     var html = [];
     for ( var i = config.firstRow; i <= config.lastRow; i++) {
         html.push("<div class='gutter-cell' style='height:" + config.lineHeight
diff --git a/src/MarkerLayer.js b/src/layer/Marker.js
similarity index 88%
rename from src/MarkerLayer.js
rename to src/layer/Marker.js
index 9e2ed0dc..af604603 100644
--- a/src/MarkerLayer.js
+++ b/src/layer/Marker.js
@@ -1,6 +1,6 @@
-ace.provide("ace.MarkerLayer");
+ace.provide("ace.layer.Marker");
 
-ace.MarkerLayer = function(parentEl) {
+ace.layer.Marker = function(parentEl) {
     this.element = document.createElement("div");
     this.element.className = "layer marker-layer";
     parentEl.appendChild(this.element);
@@ -9,11 +9,11 @@ ace.MarkerLayer = function(parentEl) {
     this._markerId = 1;
 };
 
-ace.MarkerLayer.prototype.setDocument = function(doc) {
+ace.layer.Marker.prototype.setDocument = function(doc) {
     this.doc = doc;
 };
 
-ace.MarkerLayer.prototype.addMarker = function(range, clazz, type) {
+ace.layer.Marker.prototype.addMarker = function(range, clazz, type) {
     var id = this._markerId++;
     this.markers[id] = {
         range : range,
@@ -25,7 +25,7 @@ ace.MarkerLayer.prototype.addMarker = function(range, clazz, type) {
     return id;
 };
 
-ace.MarkerLayer.prototype.removeMarker = function(markerId) {
+ace.layer.Marker.prototype.removeMarker = function(markerId) {
     var marker = this.markers[markerId];
     if (marker) {
         delete (this.markers[markerId]);
@@ -33,7 +33,7 @@ ace.MarkerLayer.prototype.removeMarker = function(markerId) {
     }
 };
 
-ace.MarkerLayer.prototype.update = function(config) {
+ace.layer.Marker.prototype.update = function(config) {
     var config = config || this.config;
     if (!config)
         return;
@@ -80,7 +80,7 @@ ace.MarkerLayer.prototype.update = function(config) {
     this.element.innerHTML = html.join("");
 };
 
-ace.MarkerLayer.prototype.drawTextMarker = function(stringBuilder, range, clazz, layerConfig) {
+ace.layer.Marker.prototype.drawTextMarker = function(stringBuilder, range, clazz, layerConfig) {
 
     // selection start
     var row = range.start.row;
@@ -108,7 +108,7 @@ ace.MarkerLayer.prototype.drawTextMarker = function(stringBuilder, range, clazz,
     }
 };
 
-ace.MarkerLayer.prototype.drawMultiLineMarker = function(stringBuilder, range, clazz, layerConfig) {
+ace.layer.Marker.prototype.drawMultiLineMarker = function(stringBuilder, range, clazz, layerConfig) {
 
     var height = layerConfig.lineHeight;
     var width = Math.round(layerConfig.width - (range.start.column * layerConfig.characterWidth));
@@ -144,7 +144,7 @@ ace.MarkerLayer.prototype.drawMultiLineMarker = function(stringBuilder, range, c
     }
 };
 
-ace.MarkerLayer.prototype.drawSingleLineMarker = function(stringBuilder, range, clazz, layerConfig) {
+ace.layer.Marker.prototype.drawSingleLineMarker = function(stringBuilder, range, clazz, layerConfig) {
 
     var height = layerConfig.lineHeight;
     var width = Math.round((range.end.column - range.start.column) * layerConfig.characterWidth);
diff --git a/src/TextLayer.js b/src/layer/Text.js
similarity index 80%
rename from src/TextLayer.js
rename to src/layer/Text.js
index c9700d38..bb322dcd 100644
--- a/src/TextLayer.js
+++ b/src/layer/Text.js
@@ -1,6 +1,6 @@
-ace.provide("ace.TextLayer");
+ace.provide("ace.layer.Text");
 
-ace.TextLayer = function(parentEl) {
+ace.layer.Text = function(parentEl) {
     this.element = document.createElement("div");
     this.element.className = "layer text-layer";
     parentEl.appendChild(this.element);
@@ -9,19 +9,19 @@ ace.TextLayer = function(parentEl) {
     this._tabString = " ";
 };
 
-ace.TextLayer.prototype.setTokenizer = function(tokenizer) {
+ace.layer.Text.prototype.setTokenizer = function(tokenizer) {
     this.tokenizer = tokenizer;
 };
 
-ace.TextLayer.prototype.getLineHeight = function() {
+ace.layer.Text.prototype.getLineHeight = function() {
     return this.lineHeight;
 };
 
-ace.TextLayer.prototype.getCharacterWidth = function() {
+ace.layer.Text.prototype.getCharacterWidth = function() {
     return this.characterWidth;
 };
 
-ace.TextLayer.prototype._measureSizes = function() {
+ace.layer.Text.prototype._measureSizes = function() {
     var measureNode = document.createElement("div");
     var style = measureNode.style;
     style.width = style.height = "auto";
@@ -42,11 +42,11 @@ ace.TextLayer.prototype._measureSizes = function() {
     this.element.removeChild(measureNode);
 };
 
-ace.TextLayer.prototype.setTabSize = function(tabSize) {
+ace.layer.Text.prototype.setTabSize = function(tabSize) {
     this._tabString = new Array(tabSize+1).join("&nbsp;");
 };
 
-ace.TextLayer.prototype.updateLines = function(layerConfig, firstRow, lastRow) {
+ace.layer.Text.prototype.updateLines = function(layerConfig, firstRow, lastRow) {
     var first = Math.max(firstRow, layerConfig.firstRow);
     var last = Math.min(lastRow, layerConfig.lastRow);
 
@@ -61,7 +61,7 @@ ace.TextLayer.prototype.updateLines = function(layerConfig, firstRow, lastRow) {
     };
 };
 
-ace.TextLayer.prototype.update = function(config) {
+ace.layer.Text.prototype.update = function(config) {
     var html = [];
     for ( var i = config.firstRow; i <= config.lastRow; i++) {
         html.push("<div class='line' style='height:" + this.lineHeight + "px;", "width:",
@@ -72,7 +72,7 @@ ace.TextLayer.prototype.update = function(config) {
     this.element.innerHTML = html.join("");
 };
 
-ace.TextLayer.prototype.renderLine = function(stringBuilder, row) {
+ace.layer.Text.prototype.renderLine = function(stringBuilder, row) {
     var tokens = this.tokenizer.getTokens(row);
     for ( var i = 0; i < tokens.length; i++) {
         var token = tokens[i];
