diff --git a/guacamole-common-js/src/main/webapp/modules/Client.js b/guacamole-common-js/src/main/webapp/modules/Client.js
index 4459c8f7a..f34eb53d6 100644
--- a/guacamole-common-js/src/main/webapp/modules/Client.js
+++ b/guacamole-common-js/src/main/webapp/modules/Client.js
@@ -23,9 +23,9 @@
 var Guacamole = Guacamole || {};
 
 /**
- * Guacamole protocol client. Given a display element and {@link Guacamole.Tunnel},
+ * Guacamole protocol client. Given a {@link Guacamole.Tunnel},
  * automatically handles incoming and outgoing Guacamole instructions via the
- * provided tunnel, updating the display using one or more canvas elements.
+ * provided tunnel, updating its display using one or more canvas elements.
  * 
  * @constructor
  * @param {Guacamole.Tunnel} tunnel The tunnel to use to send and receive
@@ -47,10 +47,6 @@ Guacamole.Client = function(tunnel) {
     var currentTimestamp = 0;
     var pingInterval = null;
 
-    var displayWidth = 0;
-    var displayHeight = 0;
-    var displayScale = 1;
-
     /**
      * Translation from Guacamole protocol line caps to Layer line caps.
      * @private
@@ -71,62 +67,16 @@ Guacamole.Client = function(tunnel) {
         2: "round"
     };
 
-    // Create bounding div 
-    var bounds = document.createElement("div");
-    bounds.style.position = "relative";
-    bounds.style.width = (displayWidth*displayScale) + "px";
-    bounds.style.height = (displayHeight*displayScale) + "px";
-
-    // Create display
-    var display = document.createElement("div");
-    display.style.position = "relative";
-    display.style.width = displayWidth + "px";
-    display.style.height = displayHeight + "px";
-
-    // Ensure transformations on display originate at 0,0
-    display.style.transformOrigin =
-    display.style.webkitTransformOrigin =
-    display.style.MozTransformOrigin =
-    display.style.OTransformOrigin =
-    display.style.msTransformOrigin =
-        "0 0";
-
-    // Create default layer
-    var default_layer_container = new Guacamole.Client.LayerContainer(0, displayWidth, displayHeight);
-
-    // Position default layer
-    var default_layer_container_element = default_layer_container.getElement();
-    default_layer_container_element.style.position = "absolute";
-    default_layer_container_element.style.left = "0px";
-    default_layer_container_element.style.top  = "0px";
-    default_layer_container_element.style.overflow = "hidden";
-    default_layer_container_element.style.zIndex = "0";
-
-    // Create cursor layer
-    var cursor = new Guacamole.Client.LayerContainer(null, 0, 0);
-    cursor.getLayer().setChannelMask(Guacamole.Layer.SRC);
-    cursor.getLayer().autoflush = true;
-
-    // Position cursor layer
-    var cursor_element = cursor.getElement();
-    cursor_element.style.position = "absolute";
-    cursor_element.style.left = "0px";
-    cursor_element.style.top  = "0px";
-    cursor_element.style.zIndex = "1";
-
-    // Add default layer and cursor to display
-    display.appendChild(default_layer_container.getElement());
-    display.appendChild(cursor.getElement());
-
-    // Add display to bounds
-    bounds.appendChild(display);
-
-    // Initially, only default layer exists
-    var layers =  [default_layer_container];
-
-    // No initial buffers
-    var buffers = [];
+    /**
+     * The underlying Guacamole display.
+     */
+    var display = new Guacamole.Display();
 
+    /**
+     * All available layers and buffers
+     */
+    var layers = {};
+    
     // No initial parsers
     var parsers = [];
 
@@ -155,33 +105,16 @@ Guacamole.Client = function(tunnel) {
             || currentState == STATE_WAITING;
     }
 
-    var cursorHotspotX = 0;
-    var cursorHotspotY = 0;
-
-    var cursorX = 0;
-    var cursorY = 0;
-
-    function moveCursor(x, y) {
-
-        // Move cursor layer
-        cursor.translate(x - cursorHotspotX, y - cursorHotspotY);
-
-        // Update stored position
-        cursorX = x;
-        cursorY = y;
-
-    }
-
     /**
-     * Returns an element containing the display of this Guacamole.Client.
-     * Adding the element returned by this function to an element in the body
-     * of a document will cause the client's display to be visible.
+     * Returns the underlying display of this Guacamole.Client. The display
+     * contains an Element which can be added to the DOM, causing the
+     * display to become visible.
      * 
-     * @return {Element} An element containing ths display of this
-     *                   Guacamole.Client.
+     * @return {Guacamole.Display} The underlying display of this
+     *                             Guacamole.Client.
      */
     this.getDisplay = function() {
-        return bounds;
+        return display;
     };
 
     /**
@@ -230,7 +163,7 @@ Guacamole.Client = function(tunnel) {
             return;
 
         // Update client-side cursor
-        moveCursor(
+        display.moveCursor(
             Math.floor(mouseState.x),
             Math.floor(mouseState.y)
         );
@@ -443,16 +376,6 @@ Guacamole.Client = function(tunnel) {
      */
     this.onclipboard = null;
 
-    /**
-     * Fired when the default layer (and thus the entire Guacamole display)
-     * is resized.
-     * 
-     * @event
-     * @param {Number} width The new width of the Guacamole display.
-     * @param {Number} height The new height of the Guacamole display.
-     */
-    this.onresize = null;
-
     /**
      * Fired when a file stream is created. The stream provided to this event
      * handler will contain its own event handlers for received data.
@@ -488,60 +411,37 @@ Guacamole.Client = function(tunnel) {
      */
     this.onsync = null;
 
-    // Layers
-    function getBufferLayer(index) {
-
-        index = -1 - index;
-        var buffer = buffers[index];
-
-        // Create buffer if necessary
-        if (buffer == null) {
-            buffer = new Guacamole.Layer(0, 0);
-            buffer.autoflush = 1;
-            buffer.autosize = 1;
-            buffers[index] = buffer;
-        }
-
-        return buffer;
-
-    }
-
-    function getLayerContainer(index) {
+    /**
+     * Returns the layer with the given index, creating it if necessary.
+     * Positive indices refer to visible layers, an index of zero refers to
+     * the default layer, and negative indices refer to buffers.
+     * 
+     * @param {Number} index The index of the layer to retrieve.
+     * @return {Guacamole.Display.VisibleLayer|Guacamole.Layer} The layer having the given index.
+     */
+    function getLayer(index) {
 
+        // Get layer, create if necessary
         var layer = layers[index];
-        if (layer == null) {
+        if (!layer) {
 
+            // Create layer based on index
+            if (index === 0)
+                layer = display.getDefaultLayer();
+            else if (index > 0)
+                layer = display.createLayer();
+            else
+                layer = display.createBuffer();
+                
             // Add new layer
-            layer = new Guacamole.Client.LayerContainer(index, displayWidth, displayHeight);
             layers[index] = layer;
 
-            // Get and position layer
-            var layer_element = layer.getElement();
-            layer_element.style.position = "absolute";
-            layer_element.style.left = "0px";
-            layer_element.style.top = "0px";
-            layer_element.style.overflow = "hidden";
-
-            // Add to default layer container
-            layer.move(default_layer_container, 0, 0, 0);
-
         }
 
         return layer;
 
     }
 
-    function getLayer(index) {
-       
-        // If buffer, just get layer
-        if (index < 0)
-            return getBufferLayer(index);
-
-        // Otherwise, retrieve layer from layer container
-        return getLayerContainer(index).getLayer();
-
-    }
-
     function getParser(index) {
 
         var parser = parsers[index];
@@ -576,7 +476,7 @@ Guacamole.Client = function(tunnel) {
     var layerPropertyHandlers = {
 
         "miter-limit": function(layer, value) {
-            layer.setMiterLimit(parseFloat(value));
+            display.setMiterLimit(layer, parseFloat(value));
         }
 
     };
@@ -622,7 +522,7 @@ Guacamole.Client = function(tunnel) {
             var endAngle = parseFloat(parameters[5]);
             var negative = parseInt(parameters[6]);
 
-            layer.arc(x, y, radius, startAngle, endAngle, negative != 0);
+            display.arc(layer, x, y, radius, startAngle, endAngle, negative != 0);
 
         },
 
@@ -671,9 +571,8 @@ Guacamole.Client = function(tunnel) {
             var b = parseInt(parameters[4]);
             var a = parseInt(parameters[5]);
 
-            layer.setChannelMask(channelMask);
-
-            layer.fillColor(r, g, b, a);
+            display.setChannelMask(layer, channelMask);
+            display.fillColor(layer, r, g, b, a);
 
         },
 
@@ -681,7 +580,7 @@ Guacamole.Client = function(tunnel) {
 
             var layer = getLayer(parseInt(parameters[0]));
 
-            layer.clip();
+            display.clip(layer);
 
         },
 
@@ -706,7 +605,7 @@ Guacamole.Client = function(tunnel) {
 
             var layer = getLayer(parseInt(parameters[0]));
 
-            layer.close();
+            display.close(layer);
 
         },
 
@@ -722,17 +621,9 @@ Guacamole.Client = function(tunnel) {
             var dstX = parseInt(parameters[7]);
             var dstY = parseInt(parameters[8]);
 
-            dstL.setChannelMask(channelMask);
-
-            dstL.copy(
-                srcL,
-                srcX,
-                srcY,
-                srcWidth, 
-                srcHeight, 
-                dstX,
-                dstY 
-            );
+            display.setChannelMask(dstL, channelMask);
+            display.copy(srcL, srcX, srcY, srcWidth, srcHeight, 
+                         dstL, dstX, dstY);
 
         },
 
@@ -748,38 +639,23 @@ Guacamole.Client = function(tunnel) {
             var b = parseInt(parameters[7]);
             var a = parseInt(parameters[8]);
 
-            layer.setChannelMask(channelMask);
-
-            layer.strokeColor(cap, join, thickness, r, g, b, a);
+            display.setChannelMask(layer, channelMask);
+            display.strokeColor(layer, cap, join, thickness, r, g, b, a);
 
         },
 
         "cursor": function(parameters) {
 
-            cursorHotspotX = parseInt(parameters[0]);
-            cursorHotspotY = parseInt(parameters[1]);
+            var cursorHotspotX = parseInt(parameters[0]);
+            var cursorHotspotY = parseInt(parameters[1]);
             var srcL = getLayer(parseInt(parameters[2]));
             var srcX = parseInt(parameters[3]);
             var srcY = parseInt(parameters[4]);
             var srcWidth = parseInt(parameters[5]);
             var srcHeight = parseInt(parameters[6]);
 
-            // Reset cursor size
-            cursor.resize(srcWidth, srcHeight);
-
-            // Draw cursor to cursor layer
-            cursor.getLayer().copy(
-                srcL,
-                srcX,
-                srcY,
-                srcWidth, 
-                srcHeight, 
-                0,
-                0 
-            );
-
-            // Update cursor position (hotspot may have changed)
-            moveCursor(cursorX, cursorY);
+            display.setCursor(cursorHotspotX, cursorHotspotY,
+                              srcL, srcX, srcY, srcWidth, srcHeight);
 
         },
 
@@ -793,7 +669,7 @@ Guacamole.Client = function(tunnel) {
             var x = parseInt(parameters[5]);
             var y = parseInt(parameters[6]);
 
-            layer.curveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+            display.curveTo(layer, cp1x, cp1y, cp2x, cp2y, x, y);
 
         },
 
@@ -805,8 +681,8 @@ Guacamole.Client = function(tunnel) {
             if (layer_index > 0) {
 
                 // Remove from parent
-                var layer_container = getLayerContainer(layer_index);
-                layer_container.dispose();
+                var layer = getLayer(layer_index);
+                layer.dispose();
 
                 // Delete reference
                 delete layers[layer_index];
@@ -815,7 +691,7 @@ Guacamole.Client = function(tunnel) {
 
             // If buffer, just delete reference
             else if (layer_index < 0)
-                delete buffers[-1 - layer_index];
+                delete layers[layer_index];
 
             // Attempting to dispose the root layer currently has no effect.
 
@@ -833,12 +709,9 @@ Guacamole.Client = function(tunnel) {
 
             // Only valid for visible layers (not buffers)
             if (layer_index >= 0) {
-
-                // Set layer transform 
-                var layer_container = getLayerContainer(layer_index);
-                layer_container.transform(a, b, c, d, e, f);
-
-             }
+                var layer = getLayer(layer_index);
+                layer.distort(a, b, c, d, e, f);
+            }
 
         },
  
@@ -889,7 +762,7 @@ Guacamole.Client = function(tunnel) {
 
             var layer = getLayer(parseInt(parameters[0]));
 
-            layer.setTransform(1, 0, 0, 1, 0, 0);
+            display.setTransform(layer, 1, 0, 0, 1, 0, 0);
 
         },
 
@@ -899,9 +772,8 @@ Guacamole.Client = function(tunnel) {
             var layer = getLayer(parseInt(parameters[1]));
             var srcLayer = getLayer(parseInt(parameters[2]));
 
-            layer.setChannelMask(channelMask);
-
-            layer.fillLayer(srcLayer);
+            display.setChannelMask(layer, channelMask);
+            display.fillLayer(layer, srcLayer);
 
         },
 
@@ -911,7 +783,7 @@ Guacamole.Client = function(tunnel) {
             var x = parseInt(parameters[1]);
             var y = parseInt(parameters[2]);
 
-            layer.lineTo(x, y);
+            display.lineTo(layer, x, y);
 
         },
 
@@ -921,9 +793,8 @@ Guacamole.Client = function(tunnel) {
             var layer = getLayer(parseInt(parameters[1]));
             var srcLayer = getLayer(parseInt(parameters[2]));
 
-            layer.setChannelMask(channelMask);
-
-            layer.strokeLayer(srcLayer);
+            display.setChannelMask(layer, channelMask);
+            display.strokeLayer(layer, srcLayer);
 
         },
 
@@ -937,14 +808,9 @@ Guacamole.Client = function(tunnel) {
 
             // Only valid for non-default layers
             if (layer_index > 0 && parent_index >= 0) {
-
-                // Get container element
-                var layer_container = getLayerContainer(layer_index);
-                var parent = getLayerContainer(parent_index);
-
-                // Move layer
-                layer_container.move(parent, x, y, z);
-
+                var layer = getLayer(layer_index);
+                var parent = getLayer(parent_index);
+                layer.move(parent, x, y, z);
             }
 
         },
@@ -984,13 +850,8 @@ Guacamole.Client = function(tunnel) {
             var y = parseInt(parameters[3]);
             var data = parameters[4];
 
-            layer.setChannelMask(channelMask);
-
-            layer.draw(
-                x,
-                y,
-                "data:image/png;base64," + data
-            );
+            display.setChannelMask(layer, channelMask);
+            display.draw(layer, x, y, "data:image/png;base64," + data);
 
         },
 
@@ -998,7 +859,7 @@ Guacamole.Client = function(tunnel) {
 
             var layer = getLayer(parseInt(parameters[0]));
 
-            layer.pop();
+            display.pop(layer);
 
         },
 
@@ -1006,7 +867,7 @@ Guacamole.Client = function(tunnel) {
 
             var layer = getLayer(parseInt(parameters[0]));
 
-            layer.push();
+            display.push(layer);
 
         },
  
@@ -1018,7 +879,7 @@ Guacamole.Client = function(tunnel) {
             var w = parseInt(parameters[3]);
             var h = parseInt(parameters[4]);
 
-            layer.rect(x, y, w, h);
+            display.rect(layer, x, y, w, h);
 
         },
         
@@ -1026,7 +887,7 @@ Guacamole.Client = function(tunnel) {
 
             var layer = getLayer(parseInt(parameters[0]));
 
-            layer.reset();
+            display.reset(layer);
 
         },
         
@@ -1050,8 +911,8 @@ Guacamole.Client = function(tunnel) {
 
             // Only valid for visible layers (not buffers)
             if (layer_index >= 0) {
-                var layer_container = getLayerContainer(layer_index);
-                layer_container.shade(a);
+                var layer = getLayer(layer_index);
+                layer.shade(a);
             }
 
         },
@@ -1059,43 +920,11 @@ Guacamole.Client = function(tunnel) {
         "size": function(parameters) {
 
             var layer_index = parseInt(parameters[0]);
+            var layer = getLayer(layer_index);
             var width = parseInt(parameters[1]);
             var height = parseInt(parameters[2]);
 
-            // If not buffer, resize layer and container
-            if (layer_index >= 0) {
-
-                // Resize layer
-                var layer_container = getLayerContainer(layer_index);
-                layer_container.resize(width, height);
-
-                // If layer is default, resize display
-                if (layer_index == 0) {
-
-                    displayWidth = width;
-                    displayHeight = height;
-
-                    // Update (set) display size
-                    display.style.width = displayWidth + "px";
-                    display.style.height = displayHeight + "px";
-
-                    // Update bounds size
-                    bounds.style.width = (displayWidth*displayScale) + "px";
-                    bounds.style.height = (displayHeight*displayScale) + "px";
-
-                    // Call resize event handler if defined
-                    if (guac_client.onresize)
-                        guac_client.onresize(width, height);
-
-                }
-
-            }
-
-            // If buffer, resize layer only
-            else {
-                var layer = getBufferLayer(parseInt(parameters[0]));
-                layer.resize(width, height);
-            }
+            display.resize(layer, width, height);
 
         },
         
@@ -1111,61 +940,18 @@ Guacamole.Client = function(tunnel) {
 
         "sync": function(parameters) {
 
-            var timestamp = parameters[0];
+            var timestamp = parseInt(parameters[0]);
 
-            // When all layers have finished rendering all instructions
-            // UP TO THIS POINT IN TIME, send sync response.
-
-            var layersToSync = 0;
-            function syncLayer() {
-
-                layersToSync--;
-
-                // Send sync response when layers are finished
-                if (layersToSync == 0) {
-                    if (timestamp != currentTimestamp) {
-                        tunnel.sendMessage("sync", timestamp);
-                        currentTimestamp = timestamp;
-                    }
-                }
-
-            }
-
-            // Count active, not-ready layers and install sync tracking hooks
-            for (var i=0; i<layers.length; i++) {
-
-                var layer_container = layers[i];
-                if (layer_container) {
-
-                    var layer = layer_container.getLayer();
-                    if (layer) {
-
-                        // Flush layer
-                        layer.flush();
-
-                        // If still not ready, sync later
-                        if (!layer.isReady()) {
-                            layersToSync++;
-                            layer.sync(syncLayer);
-                        }
-
-                    }
-
-                } // end if layer exists
-
-            } // end for each layer
-
-            // If all layers are ready, then we didn't install any hooks.
-            // Send sync message now,
-            if (layersToSync == 0) {
-                if (timestamp != currentTimestamp) {
+            // Flush display, send sync when done
+            display.flush(function __send_sync_response() {
+                if (timestamp !== currentTimestamp) {
                     tunnel.sendMessage("sync", timestamp);
                     currentTimestamp = timestamp;
                 }
-            }
+            });
 
             // If received first update, no longer waiting.
-            if (currentState == STATE_WAITING)
+            if (currentState === STATE_WAITING)
                 setState(STATE_CONNECTED);
 
             // Call sync handler if defined
@@ -1330,432 +1116,6 @@ Guacamole.Client = function(tunnel) {
         setState(STATE_WAITING);
     };
 
-    /**
-     * Sets the scale of the client display element such that it renders at
-     * a relatively smaller or larger size, without affecting the true
-     * resolution of the display.
-     *
-     * @param {Number} scale The scale to resize to, where 1.0 is normal
-     *                       size (1:1 scale).
-     */
-    this.scale = function(scale) {
-
-        display.style.transform =
-        display.style.WebkitTransform =
-        display.style.MozTransform =
-        display.style.OTransform =
-        display.style.msTransform =
-
-            "scale(" + scale + "," + scale + ")";
-
-        displayScale = scale;
-
-        // Update bounds size
-        bounds.style.width = (displayWidth*displayScale) + "px";
-        bounds.style.height = (displayHeight*displayScale) + "px";
-
-    };
-
-    /**
-     * Returns the width of the display.
-     *
-     * @return {Number} The width of the display.
-     */
-    this.getWidth = function() {
-        return displayWidth;
-    };
-
-    /**
-     * Returns the height of the display.
-     *
-     * @return {Number} The height of the display.
-     */
-    this.getHeight = function() {
-        return displayHeight;
-    };
-
-    /**
-     * Returns the scale of the display.
-     *
-     * @return {Number} The scale of the display.
-     */
-    this.getScale = function() {
-        return displayScale;
-    };
-
-    /**
-     * Returns a canvas element containing the entire display, with all child
-     * layers composited within.
-     *
-     * @return {HTMLCanvasElement} A new canvas element containing a copy of
-     *                             the display.
-     */
-    this.flatten = function() {
-       
-        // Get default layer
-        var default_layer = getLayerContainer(0);
-
-        // Get destination canvas
-        var canvas = document.createElement("canvas");
-        canvas.width = default_layer.width;
-        canvas.height = default_layer.height;
-
-        var context = canvas.getContext("2d");
-
-        // Returns sorted array of children
-        function get_children(layer) {
-
-            // Build array of children
-            var children = [];
-            for (var index in layer.children)
-                children.push(layer.children[index]);
-
-            // Sort
-            children.sort(function children_comparator(a, b) {
-
-                // Compare based on Z order
-                var diff = a.z - b.z;
-                if (diff !== 0)
-                    return diff;
-
-                // If Z order identical, use document order
-                var a_element = a.getElement();
-                var b_element = b.getElement();
-                var position = b_element.compareDocumentPosition(a_element);
-
-                if (position & Node.DOCUMENT_POSITION_PRECEDING) return -1;
-                if (position & Node.DOCUMENT_POSITION_FOLLOWING) return  1;
-
-                // Otherwise, assume same
-                return 0;
-
-            });
-
-            // Done
-            return children;
-
-        }
-
-        // Draws the contents of the given layer at the given coordinates
-        function draw_layer(layer, x, y) {
-
-            // Draw layer
-            if (layer.width > 0 && layer.height > 0) {
-
-                // Save and update alpha
-                var initial_alpha = context.globalAlpha;
-                context.globalAlpha *= layer.alpha / 255.0;
-
-                // Copy data
-                context.drawImage(layer.getLayer().getCanvas(), x, y);
-
-                // Draw all children
-                var children = get_children(layer);
-                for (var i=0; i<children.length; i++) {
-                    var child = children[i];
-                    draw_layer(child, x + child.x, y + child.y);
-                }
-
-                // Restore alpha
-                context.globalAlpha = initial_alpha;
-
-            }
-
-        }
-
-        // Draw default layer and all children
-        draw_layer(default_layer, 0, 0);
-
-        // Return new canvas copy
-        return canvas;
-        
-    };
-
-};
-
-/**
- * Simple container for Guacamole.Layer, allowing layers to be easily
- * repositioned and nested. This allows certain operations to be accelerated
- * through DOM manipulation, rather than raster operations.
- * 
- * @constructor
- *
- * @param {Number} index The unique integer which identifies this layer.
- *
- * @param {Number} width The width of the Layer, in pixels. The canvas element
- *                       backing this Layer will be given this width.
- *                       
- * @param {Number} height The height of the Layer, in pixels. The canvas element
- *                        backing this Layer will be given this height.
- */
-Guacamole.Client.LayerContainer = function(index, width, height) {
-
-    /**
-     * Reference to this LayerContainer.
-     * @private
-     */
-    var layer_container = this;
-
-    /**
-     * Unique integer identifying this layer container.
-     * @type Number
-     */
-    this.index = index;
-
-    /**
-     * The opacity of the layer container, where 255 is fully opaque and 0 is
-     * fully transparent.
-     */
-    this.alpha = 0xFF;
-
-    /**
-     * X coordinate of the upper-left corner of this layer container within
-     * its parent, in pixels.
-     * @type Number
-     */
-    this.x = 0;
-
-    /**
-     * Y coordinate of the upper-left corner of this layer container within
-     * its parent, in pixels.
-     * @type Number
-     */
-    this.y = 0;
-
-    /**
-     * Z stacking order of this layer relative to other sibling layers.
-     * @type Number
-     */
-    this.z = 0;
-
-    /**
-     * The affine transformation applied to this layer container. Each element
-     * corresponds to a value from the transformation matrix, with the first
-     * three values being the first row, and the last three values being the
-     * second row. There are six values total.
-     * 
-     * @type Number[]
-     */
-    this.matrix = [1, 0, 0, 1, 0, 0];
-
-    /**
-     * The width of this layer in pixels.
-     * @type Number
-     */
-    this.width = width;
-
-    /**
-     * The height of this layer in pixels.
-     * @type Number
-     */
-    this.height = height;
-
-    /**
-     * The parent layer container of this layer, if any.
-     * @type Guacamole.Client.LayerContainer
-     */
-    this.parent = null;
-
-    /**
-     * Set of all children of this layer, indexed by layer index. This object
-     * will have one property per child.
-     */
-    this.children = {};
-
-    // Create layer with given size
-    var layer = new Guacamole.Layer(width, height);
-
-    // Set layer position
-    var canvas = layer.getCanvas();
-    canvas.style.position = "absolute";
-    canvas.style.left = "0px";
-    canvas.style.top = "0px";
-
-    // Create div with given size
-    var div = document.createElement("div");
-    div.appendChild(canvas);
-    div.style.width = width + "px";
-    div.style.height = height + "px";
-
-    /**
-     * Changes the size of this LayerContainer and the contained Layer to the
-     * given width and height.
-     * 
-     * @param {Number} width The new width to assign to this Layer.
-     * @param {Number} height The new height to assign to this Layer.
-     */
-    this.resize = function(width, height) {
-
-        layer_container.width = width;
-        layer_container.height = height;
-
-        // Resize layer
-        layer.resize(width, height);
-
-        // Resize containing div
-        div.style.width = width + "px";
-        div.style.height = height + "px";
-
-    };
-  
-    /**
-     * Returns the Layer contained within this LayerContainer.
-     * @returns {Guacamole.Layer} The Layer contained within this
-     *                            LayerContainer.
-     */
-    this.getLayer = function() {
-        return layer;
-    };
-
-    /**
-     * Returns the element containing the Layer within this LayerContainer.
-     * @returns {Element} The element containing the Layer within this
-     *                    LayerContainer.
-     */
-    this.getElement = function() {
-        return div;
-    };
-
-    /**
-     * The translation component of this LayerContainer's transform.
-     * @private
-     */
-    var translate = "translate(0px, 0px)"; // (0, 0)
-
-    /**
-     * The arbitrary matrix component of this LayerContainer's transform.
-     * @private
-     */
-    var matrix = "matrix(1, 0, 0, 1, 0, 0)"; // Identity
-
-    /**
-     * Moves the upper-left corner of this LayerContainer to the given X and Y
-     * coordinate.
-     * 
-     * @param {Number} x The X coordinate to move to.
-     * @param {Number} y The Y coordinate to move to.
-     */
-    this.translate = function(x, y) {
-
-        layer_container.x = x;
-        layer_container.y = y;
-
-        // Generate translation
-        translate = "translate("
-                        + x + "px,"
-                        + y + "px)";
-
-        // Set layer transform 
-        div.style.transform =
-        div.style.WebkitTransform =
-        div.style.MozTransform =
-        div.style.OTransform =
-        div.style.msTransform =
-
-            translate + " " + matrix;
-
-    };
-
-    /**
-     * Moves the upper-left corner of this LayerContainer to the given X and Y
-     * coordinate, sets the Z stacking order, and reparents this LayerContainer
-     * to the given LayerContainer.
-     * 
-     * @param {Guacamole.Client.LayerContainer} parent The parent to set.
-     * @param {Number} x The X coordinate to move to.
-     * @param {Number} y The Y coordinate to move to.
-     * @param {Number} z The Z coordinate to move to.
-     */
-    this.move = function(parent, x, y, z) {
-
-        // Set parent if necessary
-        if (layer_container.parent !== parent) {
-
-            // Maintain relationship
-            if (layer_container.parent)
-                delete layer_container.parent.children[layer_container.index];
-            layer_container.parent = parent;
-            parent.children[layer_container.index] = layer_container;
-
-            // Reparent element
-            var parent_element = parent.getElement();
-            parent_element.appendChild(div);
-
-        }
-
-        // Set location
-        layer_container.translate(x, y);
-        layer_container.z = z;
-        div.style.zIndex = z;
-
-    };
-
-    /**
-     * Sets the opacity of this layer to the given value, where 255 is fully
-     * opaque and 0 is fully transparent.
-     * 
-     * @param {Number} a The opacity to set.
-     */
-    this.shade = function(a) {
-        layer_container.alpha = a;
-        div.style.opacity = a/255.0;
-    };
-
-    /**
-     * Removes this layer container entirely, such that it is no longer
-     * contained within its parent layer, if any.
-     */
-    this.dispose = function() {
-
-        // Remove from parent container
-        if (layer_container.parent) {
-            delete layer_container.parent.children[layer_container.index];
-            layer_container.parent = null;
-        }
-
-        // Remove from parent element
-        if (div.parentNode)
-            div.parentNode.removeChild(div);
-        
-    };
-
-    /**
-     * Applies the given affine transform (defined with six values from the
-     * transform's matrix).
-     * 
-     * @param {Number} a The first value in the affine transform's matrix.
-     * @param {Number} b The second value in the affine transform's matrix.
-     * @param {Number} c The third value in the affine transform's matrix.
-     * @param {Number} d The fourth value in the affine transform's matrix.
-     * @param {Number} e The fifth value in the affine transform's matrix.
-     * @param {Number} f The sixth value in the affine transform's matrix.
-     */
-    this.transform = function(a, b, c, d, e, f) {
-
-        // Store matrix
-        layer_container.matrix = [a, b, c, d, e, f];
-
-        // Generate matrix transformation
-        matrix =
-
-            /* a c e
-             * b d f
-             * 0 0 1
-             */
-    
-            "matrix(" + a + "," + b + "," + c + "," + d + "," + e + "," + f + ")";
-
-        // Set layer transform 
-        div.style.transform =
-        div.style.WebkitTransform =
-        div.style.MozTransform =
-        div.style.OTransform =
-        div.style.msTransform =
-
-            translate + " " + matrix;
-
-    };
-
 };
 
 /**
diff --git a/guacamole-common-js/src/main/webapp/modules/Display.js b/guacamole-common-js/src/main/webapp/modules/Display.js
new file mode 100644
index 000000000..f5f9eefae
--- /dev/null
+++ b/guacamole-common-js/src/main/webapp/modules/Display.js
@@ -0,0 +1,1309 @@
+/*
+ * Copyright (C) 2014 Glyptodon LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+var Guacamole = Guacamole || {};
+
+/**
+ * @constructor
+ */
+Guacamole.Display = function() {
+
+    /**
+     * Reference to this Guacamole.Display.
+     * @private
+     */
+    var guac_display = this;
+
+    var displayWidth = 0;
+    var displayHeight = 0;
+    var displayScale = 1;
+
+    // Create display
+    var display = document.createElement("div");
+    display.style.position = "relative";
+    display.style.width = displayWidth + "px";
+    display.style.height = displayHeight + "px";
+
+    // Ensure transformations on display originate at 0,0
+    display.style.transformOrigin =
+    display.style.webkitTransformOrigin =
+    display.style.MozTransformOrigin =
+    display.style.OTransformOrigin =
+    display.style.msTransformOrigin =
+        "0 0";
+
+    // Create default layer
+    var default_layer = new Guacamole.Display.VisibleLayer(displayWidth, displayHeight);
+
+    // Create cursor layer
+    var cursor = new Guacamole.Display.VisibleLayer(0, 0);
+    cursor.setChannelMask(Guacamole.Layer.SRC);
+
+    // Add default layer and cursor to display
+    display.appendChild(default_layer.getElement());
+    display.appendChild(cursor.getElement());
+
+    // Create bounding div 
+    var bounds = document.createElement("div");
+    bounds.style.position = "relative";
+    bounds.style.width = (displayWidth*displayScale) + "px";
+    bounds.style.height = (displayHeight*displayScale) + "px";
+
+    // Add display to bounds
+    bounds.appendChild(display);
+
+    /**
+     * The X coordinate of the hotspot of the mouse cursor. The hotspot is
+     * the relative location within the image of the mouse cursor at which
+     * each click occurs.
+     * 
+     * @type Number
+     */
+    this.cursorHotspotX = 0;
+
+    /**
+     * The Y coordinate of the hotspot of the mouse cursor. The hotspot is
+     * the relative location within the image of the mouse cursor at which
+     * each click occurs.
+     * 
+     * @type Number
+     */
+    this.cursorHotspotY = 0;
+
+    /**
+     * The current X coordinate of the local mouse cursor. This is not
+     * necessarily the location of the actual mouse - it refers only to
+     * the location of the cursor image within the Guacamole display, as
+     * last set by moveCursor().
+     * 
+     * @type Number
+     */
+    this.cursorX = 0;
+
+    /**
+     * The current X coordinate of the local mouse cursor. This is not
+     * necessarily the location of the actual mouse - it refers only to
+     * the location of the cursor image within the Guacamole display, as
+     * last set by moveCursor().
+     * 
+     * @type Number
+     */
+    this.cursorY = 0;
+
+    /**
+     * Fired when the default layer (and thus the entire Guacamole display)
+     * is resized.
+     * 
+     * @event
+     * @param {Number} width The new width of the Guacamole display.
+     * @param {Number} height The new height of the Guacamole display.
+     */
+    this.onresize = null;
+
+    /**
+     * The queue of all pending Tasks. Tasks will be run in order, with new
+     * tasks added at the end of the queue and old tasks removed from the
+     * front of the queue (FIFO). These tasks will eventually be grouped
+     * into a Frame.
+     * @private
+     * @type Task[]
+     */
+    var tasks = [];
+
+    /**
+     * The queue of all frames. Each frame is a pairing of an array of tasks
+     * and a callback which must be called when the frame is rendered.
+     * @private
+     * @type Frame[]
+     */
+    var frames = [];
+
+    /**
+     * Flushes all pending frames.
+     * @private
+     */
+    function __flush_frames() {
+
+        var rendered_frames = 0;
+
+        // Draw all pending frames, if ready
+        while (rendered_frames < frames.length) {
+
+            var frame = frames[rendered_frames];
+            if (!frame.isReady())
+                break;
+
+            frame.flush();
+            rendered_frames++;
+
+        } 
+
+        // Remove rendered frames from array
+        frames.splice(0, rendered_frames);
+
+    }
+
+    /**
+     * An ordered list of tasks which must be executed atomically. Once
+     * executed, an associated (and optional) callback will be called.
+     *
+     * @private
+     * @constructor
+     * @param {function} callback The function to call when this frame is
+     *                            rendered.
+     * @param {Task[]} tasks The set of tasks which must be executed to render
+     *                       this frame.
+     */
+    function Frame(callback, tasks) {
+
+        /**
+         * Returns whether this frame is ready to be rendered. This function
+         * returns true if and only if ALL underlying tasks are unblocked.
+         * 
+         * @returns {Boolean} true if all underlying tasks are unblocked,
+         *                    false otherwise.
+         */
+        this.isReady = function() {
+
+            // Search for blocked tasks
+            for (var i=0; i < tasks.length; i++) {
+                if (tasks[i].blocked)
+                    return false;
+            }
+
+            // If no blocked tasks, the frame is ready
+            return true;
+
+        };
+
+        /**
+         * Renders this frame, calling the associated callback, if any, after
+         * the frame is complete. This function MUST only be called when no
+         * blocked tasks exist. Calling this function with blocked tasks
+         * will result in undefined behavior.
+         */
+        this.flush = function() {
+
+            // Draw all pending tasks.
+            for (var i=0; i < tasks.length; i++)
+                tasks[i].execute();
+
+            // Call callback
+            if (callback) callback();
+
+        };
+
+    }
+
+    /**
+     * A container for an task handler. Each operation which must be ordered
+     * is associated with a Task that goes into a task queue. Tasks in this
+     * queue are executed in order once their handlers are set, while Tasks 
+     * without handlers block themselves and any following Tasks from running.
+     *
+     * @constructor
+     * @private
+     * @param {function} taskHandler The function to call when this task 
+     *                               runs, if any.
+     * @param {boolean} blocked Whether this task should start blocked.
+     */
+    function Task(taskHandler, blocked) {
+       
+        var task = this;
+       
+        /**
+         * Whether this Task is blocked.
+         * 
+         * @type boolean
+         */
+        this.blocked = blocked;
+
+        /**
+         * Unblocks this Task, allowing it to run.
+         */
+        this.unblock = function() {
+            if (task.blocked) {
+                task.blocked = false;
+                __flush_frames();
+            }
+        };
+
+        /**
+         * Calls the handler associated with this task IMMEDIATELY. This
+         * function does not track whether this task is marked as blocked.
+         * Enforcing the blocked status of tasks is up to the caller.
+         */
+        this.execute = function() {
+            if (taskHandler) taskHandler();
+        };
+
+    }
+
+    /**
+     * Schedules a task for future execution. The given handler will execute
+     * immediately after all previous tasks upon frame flush, unless this
+     * task is blocked. If any tasks is blocked, the entire frame will not
+     * render (and no tasks within will execute) until all tasks are unblocked.
+     * 
+     * @private
+     * @param {function} handler The function to call when possible, if any.
+     * @param {boolean} blocked Whether the task should start blocked.
+     * @returns {Task} The Task created and added to the queue for future
+     *                 running.
+     */
+    function scheduleTask(handler, blocked) {
+        var task = new Task(handler, blocked);
+        tasks.push(task);
+        return task;
+    }
+
+
+    /**
+     * Returns the element which contains the Guacamole display.
+     * 
+     * @return {Element} The element containing the Guacamole display.
+     */
+    this.getElement = function() {
+        return bounds;
+    };
+
+    /**
+     * Returns the width of this display.
+     * 
+     * @return {Number} The width of this display;
+     */
+    this.getWidth = function() {
+        return displayWidth;
+    };
+
+    /**
+     * Returns the height of this display.
+     * 
+     * @return {Number} The height of this display;
+     */
+    this.getHeight = function() {
+        return displayHeight;
+    };
+
+    /**
+     * Returns the default layer of this display. Each Guacamole display always
+     * has at least one layer. Other layers can optionally be created within
+     * this layer, but the default layer cannot be removed and is the absolute
+     * ancestor of all other layers.
+     * 
+     * @return {Guacamole.Display.VisibleLayer} The default layer.
+     */
+    this.getDefaultLayer = function() {
+        return default_layer;
+    };
+
+    /**
+     * Returns the cursor layer of this display. Each Guacamole display contains
+     * a layer for the image of the mouse cursor. This layer is a special case
+     * and exists above all other layers, similar to the hardware mouse cursor.
+     * 
+     * @return {Guacamole.Display.VisibleLayer} The cursor layer.
+     */
+    this.getCursorLayer = function() {
+        return cursor;
+    };
+
+    /**
+     * Creates a new layer. The new layer will be a direct child of the default
+     * layer, but can be moved to be a child of any other layer. Layers returned
+     * by this function are visible.
+     * 
+     * @return {Guacamole.Display.VisibleLayer} The newly-created layer.
+     */
+    this.createLayer = function() {
+        var layer = new Guacamole.Display.VisibleLayer(displayWidth, displayHeight);
+        layer.move(default_layer, 0, 0, 0);
+        return layer;
+    };
+
+    /**
+     * Creates a new buffer. Buffers are invisible, off-screen surfaces. They
+     * are implemented in the same manner as layers, but do not provide the
+     * same nesting semantics.
+     * 
+     * @return {Guacamole.Layer} The newly-created buffer.
+     */
+    this.createBuffer = function() {
+        var buffer = new Guacamole.Layer(0, 0);
+        buffer.autosize = 1;
+        return buffer;
+    };
+
+    /**
+     * Flush all pending draw tasks, if possible, as a new frame. If the entire
+     * frame is not ready, the flush will wait until all required tasks are
+     * unblocked.
+     * 
+     * @param {function} callback The function to call when this frame is
+     *                            flushed. This may happen immediately, or
+     *                            later when blocked tasks become unblocked.
+     */
+    this.flush = function(callback) {
+
+        // Add frame, reset tasks
+        frames.push(new Frame(callback, tasks));
+        tasks = [];
+
+        // Attempt flush
+        __flush_frames();
+
+    };
+
+    /**
+     * Sets the hotspot and image of the mouse cursor displayed within the
+     * Guacamole display.
+     * 
+     * @param {Number} hotspotX The X coordinate of the cursor hotspot.
+     * @param {Number} hotspotY The Y coordinate of the cursor hotspot.
+     * @param {Guacamole.Layer} layer The source layer containing the data which
+     *                                should be used as the mouse cursor image.
+     * @param {Number} srcx The X coordinate of the upper-left corner of the
+     *                      rectangle within the source layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcy The Y coordinate of the upper-left corner of the
+     *                      rectangle within the source layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcw The width of the rectangle within the source layer's
+     *                      coordinate space to copy data from.
+     * @param {Number} srch The height of the rectangle within the source
+     *                      layer's coordinate space to copy data from.
+
+     */
+    this.setCursor = function(hotspotX, hotspotY, layer, srcx, srcy, srcw, srch) {
+        scheduleTask(function __display_set_cursor() {
+
+            // Set hotspot
+            guac_display.cursorHotspotX = hotspotX;
+            guac_display.cursorHotspotY = hotspotY;
+
+            // Reset cursor size
+            cursor.resize(srcw, srch);
+
+            // Draw cursor to cursor layer
+            cursor.copy(layer, srcx, srcy, srcw, srch, 0, 0);
+            guac_display.moveCursor(guac_display.cursorX, guac_display.cursorY);
+
+        });
+    };
+
+    /**
+     * Sets the location of the local cursor to the given coordinates. For the
+     * sake of responsiveness, this function performs its action immediately.
+     * Cursor motion is not maintained within atomic frames.
+     * 
+     * @param {Number} x The X coordinate to move the cursor to.
+     * @param {Number} y The Y coordinate to move the cursor to.
+     */
+    this.moveCursor = function(x, y) {
+
+        // Move cursor layer
+        cursor.translate(x - guac_display.cursorHotspotX,
+                         y - guac_display.cursorHotspotY);
+
+        // Update stored position
+        guac_display.cursorX = x;
+        guac_display.cursorY = y;
+
+    };
+
+    /**
+     * Changes the size of the given Layer to the given width and height.
+     * Resizing is only attempted if the new size provided is actually different
+     * from the current size.
+     * 
+     * @param {Guacamole.Layer} layer The layer to resize.
+     * @param {Number} width The new width.
+     * @param {Number} height The new height.
+     */
+    this.resize = function(layer, width, height) {
+        scheduleTask(function __display_resize() {
+
+            layer.resize(width, height);
+
+            // Resize display if default layer is resized
+            if (layer === default_layer) {
+
+                // Update (set) display size
+                displayWidth = width;
+                displayHeight = height;
+                display.style.width = displayWidth + "px";
+                display.style.height = displayHeight + "px";
+
+                // Update bounds size
+                bounds.style.width = (displayWidth*displayScale) + "px";
+                bounds.style.height = (displayHeight*displayScale) + "px";
+
+                // Notify of resize
+                if (guac_display.onresize)
+                    guac_display.onresize(width, height);
+
+            }
+
+        });
+    };
+
+    /**
+     * Draws the specified image at the given coordinates. The image specified
+     * must already be loaded.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} x The destination X coordinate.
+     * @param {Number} y The destination Y coordinate.
+     * @param {Image} image The image to draw. Note that this is an Image
+     *                      object - not a URL.
+     */
+    this.drawImage = function(layer, x, y, image) {
+        scheduleTask(function __display_drawImage() {
+            layer.drawImage(x, y, image);
+        });
+    };
+
+    /**
+     * Draws the image at the specified URL at the given coordinates. The image
+     * will be loaded automatically, and this and any future operations will
+     * wait for the image to finish loading.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} x The destination X coordinate.
+     * @param {Number} y The destination Y coordinate.
+     * @param {String} url The URL of the image to draw.
+     */
+    this.draw = function(layer, x, y, url) {
+
+        var task = scheduleTask(function __display_draw() {
+            layer.drawImage(x, y, image);
+        }, true);
+
+        var image = new Image();
+        image.onload = task.unblock;
+        image.src = url;
+
+    };
+
+    /**
+     * Plays the video at the specified URL within this layer. The video
+     * will be loaded automatically, and this and any future operations will
+     * wait for the video to finish loading. Future operations will not be
+     * executed until the video finishes playing.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {String} mimetype The mimetype of the video to play.
+     * @param {Number} duration The duration of the video in milliseconds.
+     * @param {String} url The URL of the video to play.
+     */
+    this.play = function(layer, mimetype, duration, url) {
+
+        // Start loading the video
+        var video = document.createElement("video");
+        video.type = mimetype;
+        video.src = url;
+
+        // Start copying frames when playing
+        video.addEventListener("play", function() {
+            
+            function render_callback() {
+                layer.drawImage(0, 0, video);
+                if (!video.ended)
+                    window.setTimeout(render_callback, 20);
+            }
+            
+            render_callback();
+            
+        }, false);
+
+        scheduleTask(video.play);
+
+    };
+
+    /**
+     * Transfer a rectangle of image data from one Layer to this Layer using the
+     * specified transfer function.
+     * 
+     * @param {Guacamole.Layer} srcLayer The Layer to copy image data from.
+     * @param {Number} srcx The X coordinate of the upper-left corner of the
+     *                      rectangle within the source Layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcy The Y coordinate of the upper-left corner of the
+     *                      rectangle within the source Layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcw The width of the rectangle within the source Layer's
+     *                      coordinate space to copy data from.
+     * @param {Number} srch The height of the rectangle within the source
+     *                      Layer's coordinate space to copy data from.
+     * @param {Guacamole.Layer} dstLayer The layer to draw upon.
+     * @param {Number} x The destination X coordinate.
+     * @param {Number} y The destination Y coordinate.
+     * @param {Function} transferFunction The transfer function to use to
+     *                                    transfer data from source to
+     *                                    destination.
+     */
+    this.transfer = function(srcLayer, srcx, srcy, srcw, srch, dstLayer, x, y, transferFunction) {
+        scheduleTask(function __display_transfer() {
+            dstLayer.transfer(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction);
+        });
+    };
+
+    /**
+     * Put a rectangle of image data from one Layer to this Layer directly
+     * without performing any alpha blending. Simply copy the data.
+     * 
+     * @param {Guacamole.Layer} srcLayer The Layer to copy image data from.
+     * @param {Number} srcx The X coordinate of the upper-left corner of the
+     *                      rectangle within the source Layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcy The Y coordinate of the upper-left corner of the
+     *                      rectangle within the source Layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcw The width of the rectangle within the source Layer's
+     *                      coordinate space to copy data from.
+     * @param {Number} srch The height of the rectangle within the source
+     *                      Layer's coordinate space to copy data from.
+     * @param {Guacamole.Layer} dstLayer The layer to draw upon.
+     * @param {Number} x The destination X coordinate.
+     * @param {Number} y The destination Y coordinate.
+     */
+    this.put = function(srcLayer, srcx, srcy, srcw, srch, dstLayer, x, y) {
+        scheduleTask(function __display_put() {
+            dstLayer.put(srcLayer, srcx, srcy, srcw, srch, x, y);
+        });
+    };
+
+    /**
+     * Copy a rectangle of image data from one Layer to this Layer. This
+     * operation will copy exactly the image data that will be drawn once all
+     * operations of the source Layer that were pending at the time this
+     * function was called are complete. This operation will not alter the
+     * size of the source Layer even if its autosize property is set to true.
+     * 
+     * @param {Guacamole.Layer} srcLayer The Layer to copy image data from.
+     * @param {Number} srcx The X coordinate of the upper-left corner of the
+     *                      rectangle within the source Layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcy The Y coordinate of the upper-left corner of the
+     *                      rectangle within the source Layer's coordinate
+     *                      space to copy data from.
+     * @param {Number} srcw The width of the rectangle within the source Layer's
+     *                      coordinate space to copy data from.
+     * @param {Number} srch The height of the rectangle within the source
+     *                      Layer's coordinate space to copy data from.
+     * @param {Guacamole.Layer} dstLayer The layer to draw upon.
+     * @param {Number} x The destination X coordinate.
+     * @param {Number} y The destination Y coordinate.
+     */
+    this.copy = function(srcLayer, srcx, srcy, srcw, srch, dstLayer, x, y) {
+        scheduleTask(function __display_copy() {
+            dstLayer.copy(srcLayer, srcx, srcy, srcw, srch, x, y);
+        });
+    };
+
+    /**
+     * Starts a new path at the specified point.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} x The X coordinate of the point to draw.
+     * @param {Number} y The Y coordinate of the point to draw.
+     */
+    this.moveTo = function(layer, x, y) {
+        scheduleTask(function __display_moveTo() {
+            layer.moveTo(x, y);
+        });
+    };
+
+    /**
+     * Add the specified line to the current path.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} x The X coordinate of the endpoint of the line to draw.
+     * @param {Number} y The Y coordinate of the endpoint of the line to draw.
+     */
+    this.lineTo = function(layer, x, y) {
+        scheduleTask(function __display_lineTo() {
+            layer.lineTo(x, y);
+        });
+    };
+
+    /**
+     * Add the specified arc to the current path.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} x The X coordinate of the center of the circle which
+     *                   will contain the arc.
+     * @param {Number} y The Y coordinate of the center of the circle which
+     *                   will contain the arc.
+     * @param {Number} radius The radius of the circle.
+     * @param {Number} startAngle The starting angle of the arc, in radians.
+     * @param {Number} endAngle The ending angle of the arc, in radians.
+     * @param {Boolean} negative Whether the arc should be drawn in order of
+     *                           decreasing angle.
+     */
+    this.arc = function(layer, x, y, radius, startAngle, endAngle, negative) {
+        scheduleTask(function __display_arc() {
+            layer.arc(x, y, radius, startAngle, endAngle, negative);
+        });
+    };
+
+    /**
+     * Starts a new path at the specified point.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} cp1x The X coordinate of the first control point.
+     * @param {Number} cp1y The Y coordinate of the first control point.
+     * @param {Number} cp2x The X coordinate of the second control point.
+     * @param {Number} cp2y The Y coordinate of the second control point.
+     * @param {Number} x The X coordinate of the endpoint of the curve.
+     * @param {Number} y The Y coordinate of the endpoint of the curve.
+     */
+    this.curveTo = function(layer, cp1x, cp1y, cp2x, cp2y, x, y) {
+        scheduleTask(function __display_curveTo() {
+            layer.curveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+        });
+    };
+
+    /**
+     * Closes the current path by connecting the end point with the start
+     * point (if any) with a straight line.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     */
+    this.close = function(layer) {
+        scheduleTask(function __display_close() {
+            layer.close();
+        });
+    };
+
+    /**
+     * Add the specified rectangle to the current path.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} x The X coordinate of the upper-left corner of the
+     *                   rectangle to draw.
+     * @param {Number} y The Y coordinate of the upper-left corner of the
+     *                   rectangle to draw.
+     * @param {Number} w The width of the rectangle to draw.
+     * @param {Number} h The height of the rectangle to draw.
+     */
+    this.rect = function(layer, x, y, w, h) {
+        scheduleTask(function __display_rect() {
+            layer.rect(x, y, w, h);
+        });
+    };
+
+    /**
+     * Clip all future drawing operations by the current path. The current path
+     * is implicitly closed. The current path can continue to be reused
+     * for other operations (such as fillColor()) but a new path will be started
+     * once a path drawing operation (path() or rect()) is used.
+     * 
+     * @param {Guacamole.Layer} layer The layer to affect.
+     */
+    this.clip = function(layer) {
+        scheduleTask(function __display_clip() {
+            layer.clip();
+        });
+    };
+
+    /**
+     * Stroke the current path with the specified color. The current path
+     * is implicitly closed. The current path can continue to be reused
+     * for other operations (such as clip()) but a new path will be started
+     * once a path drawing operation (path() or rect()) is used.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {String} cap The line cap style. Can be "round", "square",
+     *                     or "butt".
+     * @param {String} join The line join style. Can be "round", "bevel",
+     *                      or "miter".
+     * @param {Number} thickness The line thickness in pixels.
+     * @param {Number} r The red component of the color to fill.
+     * @param {Number} g The green component of the color to fill.
+     * @param {Number} b The blue component of the color to fill.
+     * @param {Number} a The alpha component of the color to fill.
+     */
+    this.strokeColor = function(layer, cap, join, thickness, r, g, b, a) {
+        scheduleTask(function __display_strokeColor() {
+            layer.strokeColor(cap, join, thickness, r, g, b, a);
+        });
+    };
+
+    /**
+     * Fills the current path with the specified color. The current path
+     * is implicitly closed. The current path can continue to be reused
+     * for other operations (such as clip()) but a new path will be started
+     * once a path drawing operation (path() or rect()) is used.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Number} r The red component of the color to fill.
+     * @param {Number} g The green component of the color to fill.
+     * @param {Number} b The blue component of the color to fill.
+     * @param {Number} a The alpha component of the color to fill.
+     */
+    this.fillColor = function(layer, r, g, b, a) {
+        scheduleTask(function __display_fillColor() {
+            layer.fillColor(r, g, b, a);
+        });
+    };
+
+    /**
+     * Stroke the current path with the image within the specified layer. The
+     * image data will be tiled infinitely within the stroke. The current path
+     * is implicitly closed. The current path can continue to be reused
+     * for other operations (such as clip()) but a new path will be started
+     * once a path drawing operation (path() or rect()) is used.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {String} cap The line cap style. Can be "round", "square",
+     *                     or "butt".
+     * @param {String} join The line join style. Can be "round", "bevel",
+     *                      or "miter".
+     * @param {Number} thickness The line thickness in pixels.
+     * @param {Guacamole.Layer} srcLayer The layer to use as a repeating pattern
+     *                                   within the stroke.
+     */
+    this.strokeLayer = function(layer, cap, join, thickness, srcLayer) {
+        scheduleTask(function __display_strokeLayer() {
+            layer.strokeLayer(cap, join, thickness, srcLayer);
+        });
+    };
+
+    /**
+     * Fills the current path with the image within the specified layer. The
+     * image data will be tiled infinitely within the stroke. The current path
+     * is implicitly closed. The current path can continue to be reused
+     * for other operations (such as clip()) but a new path will be started
+     * once a path drawing operation (path() or rect()) is used.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     * @param {Guacamole.Layer} srcLayer The layer to use as a repeating pattern
+     *                                   within the fill.
+     */
+    this.fillLayer = function(layer, srcLayer) {
+        scheduleTask(function __display_fillLayer() {
+            layer.fillLayer(srcLayer);
+        });
+    };
+
+    /**
+     * Push current layer state onto stack.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     */
+    this.push = function(layer) {
+        scheduleTask(function __display_push() {
+            layer.push();
+        });
+    };
+
+    /**
+     * Pop layer state off stack.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     */
+    this.pop = function(layer) {
+        scheduleTask(function __display_pop() {
+            layer.pop();
+        });
+    };
+
+    /**
+     * Reset the layer, clearing the stack, the current path, and any transform
+     * matrix.
+     * 
+     * @param {Guacamole.Layer} layer The layer to draw upon.
+     */
+    this.reset = function(layer) {
+        scheduleTask(function __display_reset() {
+            layer.reset();
+        });
+    };
+
+    /**
+     * Sets the given affine transform (defined with six values from the
+     * transform's matrix).
+     * 
+     * @param {Guacamole.Layer} layer The layer to modify.
+     * @param {Number} a The first value in the affine transform's matrix.
+     * @param {Number} b The second value in the affine transform's matrix.
+     * @param {Number} c The third value in the affine transform's matrix.
+     * @param {Number} d The fourth value in the affine transform's matrix.
+     * @param {Number} e The fifth value in the affine transform's matrix.
+     * @param {Number} f The sixth value in the affine transform's matrix.
+     */
+    this.setTransform = function(layer, a, b, c, d, e, f) {
+        scheduleTask(function __display_setTransform() {
+            layer.setTransform(a, b, c, d, e, f);
+        });
+    };
+
+    /**
+     * Applies the given affine transform (defined with six values from the
+     * transform's matrix).
+     * 
+     * @param {Guacamole.Layer} layer The layer to modify.
+     * @param {Number} a The first value in the affine transform's matrix.
+     * @param {Number} b The second value in the affine transform's matrix.
+     * @param {Number} c The third value in the affine transform's matrix.
+     * @param {Number} d The fourth value in the affine transform's matrix.
+     * @param {Number} e The fifth value in the affine transform's matrix.
+     * @param {Number} f The sixth value in the affine transform's matrix.
+     */
+    this.transform = function(layer, a, b, c, d, e, f) {
+        scheduleTask(function __display_transform() {
+            layer.transform(a, b, c, d, e, f);
+        });
+    };
+
+    /**
+     * Sets the channel mask for future operations on this Layer.
+     * 
+     * The channel mask is a Guacamole-specific compositing operation identifier
+     * with a single bit representing each of four channels (in order): source
+     * image where destination transparent, source where destination opaque,
+     * destination where source transparent, and destination where source
+     * opaque.
+     * 
+     * @param {Guacamole.Layer} layer The layer to modify.
+     * @param {Number} mask The channel mask for future operations on this
+     *                      Layer.
+     */
+    this.setChannelMask = function(layer, mask) {
+        scheduleTask(function __display_setChannelMask() {
+            layer.setChannelMask(mask);
+        });
+    };
+
+    /**
+     * Sets the miter limit for stroke operations using the miter join. This
+     * limit is the maximum ratio of the size of the miter join to the stroke
+     * width. If this ratio is exceeded, the miter will not be drawn for that
+     * joint of the path.
+     * 
+     * @param {Guacamole.Layer} layer The layer to modify.
+     * @param {Number} limit The miter limit for stroke operations using the
+     *                       miter join.
+     */
+    this.setMiterLimit = function(layer, limit) {
+        scheduleTask(function __display_setMiterLimit() {
+            layer.setMiterLimit(limit);
+        });
+    };
+
+    /**
+     * Sets the scale of the client display element such that it renders at
+     * a relatively smaller or larger size, without affecting the true
+     * resolution of the display.
+     *
+     * @param {Number} scale The scale to resize to, where 1.0 is normal
+     *                       size (1:1 scale).
+     */
+    this.scale = function(scale) {
+
+        display.style.transform =
+        display.style.WebkitTransform =
+        display.style.MozTransform =
+        display.style.OTransform =
+        display.style.msTransform =
+
+            "scale(" + scale + "," + scale + ")";
+
+        displayScale = scale;
+
+        // Update bounds size
+        bounds.style.width = (displayWidth*displayScale) + "px";
+        bounds.style.height = (displayHeight*displayScale) + "px";
+
+    };
+
+    /**
+     * Returns the scale of the display.
+     *
+     * @return {Number} The scale of the display.
+     */
+    this.getScale = function() {
+        return displayScale;
+    };
+
+    /**
+     * Returns a canvas element containing the entire display, with all child
+     * layers composited within.
+     *
+     * @return {HTMLCanvasElement} A new canvas element containing a copy of
+     *                             the display.
+     */
+    this.flatten = function() {
+       
+        // Get destination canvas
+        var canvas = document.createElement("canvas");
+        canvas.width = default_layer.width;
+        canvas.height = default_layer.height;
+
+        var context = canvas.getContext("2d");
+
+        // Returns sorted array of children
+        function get_children(layer) {
+
+            // Build array of children
+            var children = [];
+            for (var index in layer.children)
+                children.push(layer.children[index]);
+
+            // Sort
+            children.sort(function children_comparator(a, b) {
+
+                // Compare based on Z order
+                var diff = a.z - b.z;
+                if (diff !== 0)
+                    return diff;
+
+                // If Z order identical, use document order
+                var a_element = a.getElement();
+                var b_element = b.getElement();
+                var position = b_element.compareDocumentPosition(a_element);
+
+                if (position & Node.DOCUMENT_POSITION_PRECEDING) return -1;
+                if (position & Node.DOCUMENT_POSITION_FOLLOWING) return  1;
+
+                // Otherwise, assume same
+                return 0;
+
+            });
+
+            // Done
+            return children;
+
+        }
+
+        // Draws the contents of the given layer at the given coordinates
+        function draw_layer(layer, x, y) {
+
+            // Draw layer
+            if (layer.width > 0 && layer.height > 0) {
+
+                // Save and update alpha
+                var initial_alpha = context.globalAlpha;
+                context.globalAlpha *= layer.alpha / 255.0;
+
+                // Copy data
+                context.drawImage(layer.getCanvas(), x, y);
+
+                // Draw all children
+                var children = get_children(layer);
+                for (var i=0; i<children.length; i++) {
+                    var child = children[i];
+                    draw_layer(child, x + child.x, y + child.y);
+                }
+
+                // Restore alpha
+                context.globalAlpha = initial_alpha;
+
+            }
+
+        }
+
+        // Draw default layer and all children
+        draw_layer(default_layer, 0, 0);
+
+        // Return new canvas copy
+        return canvas;
+        
+    };
+
+};
+
+/**
+ * Simple container for Guacamole.Layer, allowing layers to be easily
+ * repositioned and nested. This allows certain operations to be accelerated
+ * through DOM manipulation, rather than raster operations.
+ * 
+ * @constructor
+ * @augments Guacamole.Layer
+ * @param {Number} width The width of the Layer, in pixels. The canvas element
+ *                       backing this Layer will be given this width.
+ * @param {Number} height The height of the Layer, in pixels. The canvas element
+ *                        backing this Layer will be given this height.
+ */
+Guacamole.Display.VisibleLayer = function(width, height) {
+
+    Guacamole.Layer.apply(this, [width, height]);
+
+    /**
+     * Reference to this layer.
+     * @private
+     */
+    var layer = this;
+
+    /**
+     * Identifier which uniquely identifies this layer. This is COMPLETELY
+     * UNRELATED to the index of the underlying layer, which is specific
+     * to the Guacamole protocol, and not relevant at this level.
+     * 
+     * @private
+     * @type Number
+     */
+    this.__unique_id = Guacamole.Display.VisibleLayer.__next_id++;
+
+    /**
+     * The opacity of the layer container, where 255 is fully opaque and 0 is
+     * fully transparent.
+     */
+    this.alpha = 0xFF;
+
+    /**
+     * X coordinate of the upper-left corner of this layer container within
+     * its parent, in pixels.
+     * @type Number
+     */
+    this.x = 0;
+
+    /**
+     * Y coordinate of the upper-left corner of this layer container within
+     * its parent, in pixels.
+     * @type Number
+     */
+    this.y = 0;
+
+    /**
+     * Z stacking order of this layer relative to other sibling layers.
+     * @type Number
+     */
+    this.z = 0;
+
+    /**
+     * The affine transformation applied to this layer container. Each element
+     * corresponds to a value from the transformation matrix, with the first
+     * three values being the first row, and the last three values being the
+     * second row. There are six values total.
+     * 
+     * @type Number[]
+     */
+    this.matrix = [1, 0, 0, 1, 0, 0];
+
+    /**
+     * The parent layer container of this layer, if any.
+     * @type Guacamole.Display.LayerContainer
+     */
+    this.parent = null;
+
+    /**
+     * Set of all children of this layer, indexed by layer index. This object
+     * will have one property per child.
+     */
+    this.children = {};
+
+    // Set layer position
+    var canvas = layer.getCanvas();
+    canvas.style.position = "absolute";
+    canvas.style.left = "0px";
+    canvas.style.top = "0px";
+
+    // Create div with given size
+    var div = document.createElement("div");
+    div.appendChild(canvas);
+    div.style.width = width + "px";
+    div.style.height = height + "px";
+    div.style.position = "absolute";
+    div.style.left = "0px";
+    div.style.top = "0px";
+    div.style.overflow = "hidden";
+
+    /**
+     * Superclass resize() function.
+     * @private
+     */
+    var __super_resize = this.resize;
+
+    this.resize = function(width, height) {
+
+        // Resize containing div
+        div.style.width = width + "px";
+        div.style.height = height + "px";
+
+        __super_resize(width, height);
+
+    };
+  
+    /**
+     * Returns the element containing the canvas and any other elements
+     * associated with this layer.
+     * @returns {Element} The element containing this layer's canvas.
+     */
+    this.getElement = function() {
+        return div;
+    };
+
+    /**
+     * The translation component of this layer's transform.
+     * @private
+     */
+    var translate = "translate(0px, 0px)"; // (0, 0)
+
+    /**
+     * The arbitrary matrix component of this layer's transform.
+     * @private
+     */
+    var matrix = "matrix(1, 0, 0, 1, 0, 0)"; // Identity
+
+    /**
+     * Moves the upper-left corner of this layer to the given X and Y
+     * coordinate.
+     * 
+     * @param {Number} x The X coordinate to move to.
+     * @param {Number} y The Y coordinate to move to.
+     */
+    this.translate = function(x, y) {
+
+        layer.x = x;
+        layer.y = y;
+
+        // Generate translation
+        translate = "translate("
+                        + x + "px,"
+                        + y + "px)";
+
+        // Set layer transform 
+        div.style.transform =
+        div.style.WebkitTransform =
+        div.style.MozTransform =
+        div.style.OTransform =
+        div.style.msTransform =
+
+            translate + " " + matrix;
+
+    };
+
+    /**
+     * Moves the upper-left corner of this LayerContainer to the given X and Y
+     * coordinate, sets the Z stacking order, and reparents this LayerContainer
+     * to the given LayerContainer.
+     * 
+     * @param {Guacamole.Display.LayerContainer} parent The parent to set.
+     * @param {Number} x The X coordinate to move to.
+     * @param {Number} y The Y coordinate to move to.
+     * @param {Number} z The Z coordinate to move to.
+     */
+    this.move = function(parent, x, y, z) {
+
+        // Set parent if necessary
+        if (layer.parent !== parent) {
+
+            // Maintain relationship
+            if (layer.parent)
+                delete layer.parent.children[layer.__unique_id];
+            layer.parent = parent;
+            parent.children[layer.__unique_id] = layer;
+
+            // Reparent element
+            var parent_element = parent.getElement();
+            parent_element.appendChild(div);
+
+        }
+
+        // Set location
+        layer.translate(x, y);
+        layer.z = z;
+        div.style.zIndex = z;
+
+    };
+
+    /**
+     * Sets the opacity of this layer to the given value, where 255 is fully
+     * opaque and 0 is fully transparent.
+     * 
+     * @param {Number} a The opacity to set.
+     */
+    this.shade = function(a) {
+        layer.alpha = a;
+        div.style.opacity = a/255.0;
+    };
+
+    /**
+     * Removes this layer container entirely, such that it is no longer
+     * contained within its parent layer, if any.
+     */
+    this.dispose = function() {
+
+        // Remove from parent container
+        if (layer.parent) {
+            delete layer.parent.children[layer.__unique_id];
+            layer.parent = null;
+        }
+
+        // Remove from parent element
+        if (div.parentNode)
+            div.parentNode.removeChild(div);
+        
+    };
+
+    /**
+     * Applies the given affine transform (defined with six values from the
+     * transform's matrix).
+     * 
+     * @param {Number} a The first value in the affine transform's matrix.
+     * @param {Number} b The second value in the affine transform's matrix.
+     * @param {Number} c The third value in the affine transform's matrix.
+     * @param {Number} d The fourth value in the affine transform's matrix.
+     * @param {Number} e The fifth value in the affine transform's matrix.
+     * @param {Number} f The sixth value in the affine transform's matrix.
+     */
+    this.distort = function(a, b, c, d, e, f) {
+
+        // Store matrix
+        layer.matrix = [a, b, c, d, e, f];
+
+        // Generate matrix transformation
+        matrix =
+
+            /* a c e
+             * b d f
+             * 0 0 1
+             */
+    
+            "matrix(" + a + "," + b + "," + c + "," + d + "," + e + "," + f + ")";
+
+        // Set layer transform 
+        div.style.transform =
+        div.style.WebkitTransform =
+        div.style.MozTransform =
+        div.style.OTransform =
+        div.style.msTransform =
+
+            translate + " " + matrix;
+
+    };
+
+};
+
+//Guacamole.Display.VisibleLayer.prototype = new Guacamole.Layer(0, 0);
+
+/**
+ * The next identifier to be assigned to the layer container. This identifier
+ * uniquely identifies each LayerContainer, but is unrelated to the index of
+ * the layer, which exists at the protocol/client level only.
+ * 
+ * @private
+ * @type Number
+ */
+Guacamole.Display.VisibleLayer.__next_id = 0;
diff --git a/guacamole-common-js/src/main/webapp/modules/Layer.js b/guacamole-common-js/src/main/webapp/modules/Layer.js
index d01c453d8..549d3a8cc 100644
--- a/guacamole-common-js/src/main/webapp/modules/Layer.js
+++ b/guacamole-common-js/src/main/webapp/modules/Layer.js
@@ -49,22 +49,14 @@ Guacamole.Layer = function(width, height) {
      * The canvas element backing this Layer.
      * @private
      */
-    var display = document.createElement("canvas");
+    var canvas = document.createElement("canvas");
 
     /**
      * The 2D display context of the canvas element backing this Layer.
      * @private
      */
-    var displayContext = display.getContext("2d");
-    displayContext.save();
-
-    /**
-     * The queue of all pending Tasks. Tasks will be run in order, with new
-     * tasks added at the end of the queue and old tasks removed from the
-     * front of the queue (FIFO).
-     * @private
-     */
-    var tasks = new Array();
+    var context = canvas.getContext("2d");
+    context.save();
 
     /**
      * Whether a new path should be started with the next path drawing
@@ -120,7 +112,7 @@ Guacamole.Layer = function(width, height) {
 
         // Only preserve old data if width/height are both non-zero
         var oldData = null;
-        if (width != 0 && height != 0) {
+        if (width !== 0 && height !== 0) {
 
             // Create canvas and context for holding old data
             oldData = document.createElement("canvas");
@@ -130,34 +122,34 @@ Guacamole.Layer = function(width, height) {
             var oldDataContext = oldData.getContext("2d");
 
             // Copy image data from current
-            oldDataContext.drawImage(display,
+            oldDataContext.drawImage(canvas,
                     0, 0, width, height,
                     0, 0, width, height);
 
         }
 
         // Preserve composite operation
-        var oldCompositeOperation = displayContext.globalCompositeOperation;
+        var oldCompositeOperation = context.globalCompositeOperation;
 
         // Resize canvas
-        display.width = newWidth;
-        display.height = newHeight;
+        canvas.width = newWidth;
+        canvas.height = newHeight;
 
         // Redraw old data, if any
         if (oldData)
-                displayContext.drawImage(oldData, 
+                context.drawImage(oldData, 
                     0, 0, width, height,
                     0, 0, width, height);
 
         // Restore composite operation
-        displayContext.globalCompositeOperation = oldCompositeOperation;
+        context.globalCompositeOperation = oldCompositeOperation;
 
         width = newWidth;
         height = newHeight;
 
         // Acknowledge reset of stack (happens on resize of canvas)
         stackSize = 0;
-        displayContext.save();
+        context.save();
 
     }
 
@@ -198,192 +190,11 @@ Guacamole.Layer = function(width, height) {
             resizeHeight = height;
 
         // Resize if necessary
-        if (resizeWidth != width || resizeHeight != height)
+        if (resizeWidth !== width || resizeHeight !== height)
             resize(resizeWidth, resizeHeight);
 
     }
 
-    /**
-     * A container for an task handler. Each operation which must be ordered
-     * is associated with a Task that goes into a task queue. Tasks in this
-     * queue are executed in order once their handlers are set, while Tasks 
-     * without handlers block themselves and any following Tasks from running.
-     *
-     * @constructor
-     * @private
-     * @param {function} taskHandler The function to call when this task 
-     *                               runs, if any.
-     * @param {boolean} blocked Whether this task should start blocked.
-     */
-    function Task(taskHandler, blocked) {
-       
-        var task = this;
-       
-        /**
-         * Whether this Task is blocked.
-         * 
-         * @type boolean
-         */
-        this.blocked = blocked;
-
-        /**
-         * The handler this Task is associated with, if any.
-         * 
-         * @type function
-         */
-        this.handler = taskHandler;
-       
-        /**
-         * Unblocks this Task, allowing it to run.
-         */
-        this.unblock = function() {
-            if (task.blocked) {
-                task.blocked = false;
-
-                // Flush automatically if enabled
-                if (layer.autoflush || !flushComplete)
-                    layer.flush();
-
-            }
-        }
-
-    }
-
-    /**
-     * If no tasks are pending or running, run the provided handler immediately,
-     * if any. Otherwise, schedule a task to run immediately after all currently
-     * running or pending tasks are complete.
-     * 
-     * @private
-     * @param {function} handler The function to call when possible, if any.
-     * @param {boolean} blocked Whether the task should start blocked.
-     * @returns {Task} The Task created and added to the queue for future
-     *                 running, if any, or null if the handler was run
-     *                 immediately and no Task needed to be created.
-     */
-    function scheduleTask(handler, blocked) {
-        
-        // If no pending tasks, just call (if available) and exit
-        if (layer.autoflush && layer.isReady() && !blocked) {
-            if (handler) handler();
-            return null;
-        }
-
-        // If tasks are pending/executing, schedule a pending task
-        // and return a reference to it.
-        var task = new Task(handler, blocked);
-        tasks.push(task);
-        return task;
-        
-    }
-
-    /**
-     * Whether all previous calls to flush() have completed. If a task was
-     * waiting in the queue when flush() was called but still blocked, the
-     * queue will continue to flush outside the original flush() call until
-     * the queue is empty.
-     * 
-     * @private
-     */
-    var flushComplete = true;
-
-    /**
-     * Whether tasks are currently being actively flushed. As flush() is not
-     * reentrant, this flag prevents calls of flush() from overlapping.
-     * @private
-     */
-    var tasksInProgress = false;
-
-    /**
-     * Run any Tasks which were pending but are now ready to run and are not
-     * blocked by other Tasks.
-     */
-    this.flush = function() {
-
-        if (tasksInProgress)
-            return;
-
-        tasksInProgress = true;
-        flushComplete = false;
-
-        // Draw all pending tasks.
-        var task;
-        while ((task = tasks[0]) != null && !task.blocked) {
-            tasks.shift();
-            if (task.handler) task.handler();
-        }
-
-        // If all pending draws have been flushed
-        if (layer.isReady())
-            flushComplete = true;
-
-        tasksInProgress = false;
-
-    };
-
-    /**
-     * Schedules a task within the current layer just as scheduleTast() does,
-     * except that another specified layer will be blocked until this task
-     * completes, and this task will not start until the other layer is
-     * ready.
-     * 
-     * Essentially, a task is scheduled in both layers, and the specified task
-     * will only be performed once both layers are ready, and neither layer may
-     * proceed until this task completes.
-     * 
-     * Note that there is no way to specify whether the task starts blocked,
-     * as whether the task is blocked depends completely on whether the
-     * other layer is currently ready.
-     * 
-     * @private
-     * @param {Guacamole.Layer} otherLayer The other layer which must be blocked
-     *                          until this task completes.
-     * @param {function} handler The function to call when possible.
-     */
-    function scheduleTaskSynced(otherLayer, handler) {
-
-        // If we ARE the other layer, no need to sync.
-        // Syncing would result in deadlock.
-        if (layer === otherLayer)
-            scheduleTask(handler);
-
-        // Otherwise synchronize operation with other layer
-        else {
-
-            var drawComplete = false;
-            var layerLock = null;
-
-            function performTask() {
-
-                // Perform task
-                handler();
-
-                // Unblock the other layer now that draw is complete
-                if (layerLock != null) 
-                    layerLock.unblock();
-
-                // Flag operation as done
-                drawComplete = true;
-
-            }
-
-            // Currently blocked draw task
-            var task = scheduleTask(performTask, true);
-
-            // Unblock draw task once source layer is ready
-            otherLayer.sync(task.unblock);
-
-            // Block other layer until draw completes
-            // Note that the draw MAY have already been performed at this point,
-            // in which case creating a lock on the other layer will lead to
-            // deadlock (the draw task has already run and will thus never
-            // clear the lock)
-            if (!drawComplete)
-                layerLock = otherLayer.sync(null, true);
-
-        }
-    }
-
     /**
      * Set to true if this Layer should resize itself to accomodate the
      * dimensions of any drawing operation, and false (the default) otherwise.
@@ -405,32 +216,12 @@ Guacamole.Layer = function(width, height) {
      */
     this.autosize = false;
 
-    /**
-     * Set to true to allow operations to flush automatically, instantly
-     * affecting the layer. By default, operations are buffered and only
-     * drawn when flush() is called.
-     * 
-     * @type Boolean
-     * @default false
-     */
-    this.autoflush = false;
-
     /**
      * Returns the canvas element backing this Layer.
      * @returns {Element} The canvas element backing this Layer.
      */
     this.getCanvas = function() {
-        return display;
-    };
-
-    /**
-     * Returns whether this Layer is ready. A Layer is ready if it has no
-     * pending operations and no operations in-progress.
-     * 
-     * @returns {Boolean} true if this Layer is ready, false otherwise.
-     */
-    this.isReady = function() {
-        return tasks.length == 0;
+        return canvas;
     };
 
     /**
@@ -442,10 +233,8 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} newHeight The new height to assign to this Layer.
      */
     this.resize = function(newWidth, newHeight) {
-        scheduleTask(function() {
-            if (newWidth != width || newHeight != height)
-                resize(newWidth, newHeight);
-        });
+        if (newWidth !== width || newHeight !== height)
+            resize(newWidth, newHeight);
     };
 
     /**
@@ -458,94 +247,10 @@ Guacamole.Layer = function(width, height) {
      *                      object - not a URL.
      */
     this.drawImage = function(x, y, image) {
-        scheduleTask(function() {
-            if (layer.autosize != 0) fitRect(x, y, image.width, image.height);
-            displayContext.drawImage(image, x, y);
-        });
+        if (layer.autosize) fitRect(x, y, image.width, image.height);
+        context.drawImage(image, x, y);
     };
 
-    /**
-     * Draws the image at the specified URL at the given coordinates. The image
-     * will be loaded automatically, and this and any future operations will
-     * wait for the image to finish loading.
-     * 
-     * @param {Number} x The destination X coordinate.
-     * @param {Number} y The destination Y coordinate.
-     * @param {String} url The URL of the image to draw.
-     */
-    this.draw = function(x, y, url) {
-
-        var task = scheduleTask(function() {
-            if (layer.autosize != 0) fitRect(x, y, image.width, image.height);
-            displayContext.drawImage(image, x, y);
-        }, true);
-
-        var image = new Image();
-        image.onload = task.unblock;
-        image.src = url;
-
-    };
-
-    /**
-     * Plays the video at the specified URL within this layer. The video
-     * will be loaded automatically, and this and any future operations will
-     * wait for the video to finish loading. Future operations will not be
-     * executed until the video finishes playing.
-     * 
-     * @param {String} mimetype The mimetype of the video to play.
-     * @param {Number} duration The duration of the video in milliseconds.
-     * @param {String} url The URL of the video to play.
-     */
-    this.play = function(mimetype, duration, url) {
-
-        // Start loading the video
-        var video = document.createElement("video");
-        video.type = mimetype;
-        video.src = url;
-
-        // Main task - playing the video
-        var task = scheduleTask(function() {
-            video.play();
-        }, true);
-
-        // Lock which will be cleared after video ends
-        var lock = scheduleTask(null, true);
-
-        // Start copying frames when playing
-        video.addEventListener("play", function() {
-            
-            function render_callback() {
-                displayContext.drawImage(video, 0, 0, width, height);
-                if (!video.ended)
-                    window.setTimeout(render_callback, 20);
-                else
-                    lock.unblock();
-            }
-            
-            render_callback();
-            
-        }, false);
-
-        // Unblock future operations after an error
-        video.addEventListener("error", lock.unblock, false);
-
-        // Play video as soon as current tasks are complete, now that the
-        // lock has been set up.
-        task.unblock();
-
-    };
-
-    /**
-     * Run an arbitrary function as soon as currently pending operations
-     * are complete.
-     *
-     * @function 
-     * @param {function} handler The function to call once all currently
-     *                           pending operations are complete.
-     * @param {boolean} blocked Whether the task should start blocked.
-     */
-    this.sync = scheduleTask;
-
     /**
      * Transfer a rectangle of image data from one Layer to this Layer using the
      * specified transfer function.
@@ -568,63 +273,61 @@ Guacamole.Layer = function(width, height) {
      *                                    destination.
      */
     this.transfer = function(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction) {
-        scheduleTaskSynced(srcLayer, function() {
 
-            var srcCanvas = srcLayer.getCanvas();
+        var srcCanvas = srcLayer.getCanvas();
 
-            // If entire rectangle outside source canvas, stop
-            if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
+        // If entire rectangle outside source canvas, stop
+        if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
 
-            // Otherwise, clip rectangle to area
-            if (srcx + srcw > srcCanvas.width)
-                srcw = srcCanvas.width - srcx;
+        // Otherwise, clip rectangle to area
+        if (srcx + srcw > srcCanvas.width)
+            srcw = srcCanvas.width - srcx;
 
-            if (srcy + srch > srcCanvas.height)
-                srch = srcCanvas.height - srcy;
+        if (srcy + srch > srcCanvas.height)
+            srch = srcCanvas.height - srcy;
 
-            // Stop if nothing to draw.
-            if (srcw == 0 || srch == 0) return;
+        // Stop if nothing to draw.
+        if (srcw === 0 || srch === 0) return;
 
-            if (layer.autosize != 0) fitRect(x, y, srcw, srch);
+        if (layer.autosize) fitRect(x, y, srcw, srch);
 
-            // Get image data from src and dst
-            var src = srcLayer.getCanvas().getContext("2d").getImageData(srcx, srcy, srcw, srch);
-            var dst = displayContext.getImageData(x , y, srcw, srch);
+        // Get image data from src and dst
+        var src = srcLayer.getCanvas().getContext("2d").getImageData(srcx, srcy, srcw, srch);
+        var dst = context.getImageData(x , y, srcw, srch);
 
-            // Apply transfer for each pixel
-            for (var i=0; i<srcw*srch*4; i+=4) {
+        // Apply transfer for each pixel
+        for (var i=0; i<srcw*srch*4; i+=4) {
 
-                // Get source pixel environment
-                var src_pixel = new Guacamole.Layer.Pixel(
-                    src.data[i],
-                    src.data[i+1],
-                    src.data[i+2],
-                    src.data[i+3]
-                );
-                    
-                // Get destination pixel environment
-                var dst_pixel = new Guacamole.Layer.Pixel(
-                    dst.data[i],
-                    dst.data[i+1],
-                    dst.data[i+2],
-                    dst.data[i+3]
-                );
+            // Get source pixel environment
+            var src_pixel = new Guacamole.Layer.Pixel(
+                src.data[i],
+                src.data[i+1],
+                src.data[i+2],
+                src.data[i+3]
+            );
+                
+            // Get destination pixel environment
+            var dst_pixel = new Guacamole.Layer.Pixel(
+                dst.data[i],
+                dst.data[i+1],
+                dst.data[i+2],
+                dst.data[i+3]
+            );
 
-                // Apply transfer function
-                transferFunction(src_pixel, dst_pixel);
+            // Apply transfer function
+            transferFunction(src_pixel, dst_pixel);
 
-                // Save pixel data
-                dst.data[i  ] = dst_pixel.red;
-                dst.data[i+1] = dst_pixel.green;
-                dst.data[i+2] = dst_pixel.blue;
-                dst.data[i+3] = dst_pixel.alpha;
+            // Save pixel data
+            dst.data[i  ] = dst_pixel.red;
+            dst.data[i+1] = dst_pixel.green;
+            dst.data[i+2] = dst_pixel.blue;
+            dst.data[i+3] = dst_pixel.alpha;
 
-            }
+        }
 
-            // Draw image data
-            displayContext.putImageData(dst, x, y);
+        // Draw image data
+        context.putImageData(dst, x, y);
 
-        });
     };
 
     /**
@@ -646,30 +349,28 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} y The destination Y coordinate.
      */
     this.put = function(srcLayer, srcx, srcy, srcw, srch, x, y) {
-        scheduleTaskSynced(srcLayer, function() {
 
-            var srcCanvas = srcLayer.getCanvas();
+        var srcCanvas = srcLayer.getCanvas();
 
-            // If entire rectangle outside source canvas, stop
-            if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
+        // If entire rectangle outside source canvas, stop
+        if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
 
-            // Otherwise, clip rectangle to area
-            if (srcx + srcw > srcCanvas.width)
-                srcw = srcCanvas.width - srcx;
+        // Otherwise, clip rectangle to area
+        if (srcx + srcw > srcCanvas.width)
+            srcw = srcCanvas.width - srcx;
 
-            if (srcy + srch > srcCanvas.height)
-                srch = srcCanvas.height - srcy;
+        if (srcy + srch > srcCanvas.height)
+            srch = srcCanvas.height - srcy;
 
-            // Stop if nothing to draw.
-            if (srcw == 0 || srch == 0) return;
+        // Stop if nothing to draw.
+        if (srcw === 0 || srch === 0) return;
 
-            if (layer.autosize != 0) fitRect(x, y, srcw, srch);
+        if (layer.autosize) fitRect(x, y, srcw, srch);
 
-            // Get image data from src and dst
-            var src = srcLayer.getCanvas().getContext("2d").getImageData(srcx, srcy, srcw, srch);
-            displayContext.putImageData(src, x, y);
+        // Get image data from src and dst
+        var src = srcLayer.getCanvas().getContext("2d").getImageData(srcx, srcy, srcw, srch);
+        context.putImageData(src, x, y);
 
-        });
     };
 
     /**
@@ -694,27 +395,25 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} y The destination Y coordinate.
      */
     this.copy = function(srcLayer, srcx, srcy, srcw, srch, x, y) {
-        scheduleTaskSynced(srcLayer, function() {
 
-            var srcCanvas = srcLayer.getCanvas();
+        var srcCanvas = srcLayer.getCanvas();
 
-            // If entire rectangle outside source canvas, stop
-            if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
+        // If entire rectangle outside source canvas, stop
+        if (srcx >= srcCanvas.width || srcy >= srcCanvas.height) return;
 
-            // Otherwise, clip rectangle to area
-            if (srcx + srcw > srcCanvas.width)
-                srcw = srcCanvas.width - srcx;
+        // Otherwise, clip rectangle to area
+        if (srcx + srcw > srcCanvas.width)
+            srcw = srcCanvas.width - srcx;
 
-            if (srcy + srch > srcCanvas.height)
-                srch = srcCanvas.height - srcy;
+        if (srcy + srch > srcCanvas.height)
+            srch = srcCanvas.height - srcy;
 
-            // Stop if nothing to draw.
-            if (srcw == 0 || srch == 0) return;
+        // Stop if nothing to draw.
+        if (srcw === 0 || srch === 0) return;
 
-            if (layer.autosize != 0) fitRect(x, y, srcw, srch);
-            displayContext.drawImage(srcCanvas, srcx, srcy, srcw, srch, x, y, srcw, srch);
+        if (layer.autosize) fitRect(x, y, srcw, srch);
+        context.drawImage(srcCanvas, srcx, srcy, srcw, srch, x, y, srcw, srch);
 
-        });
     };
 
     /**
@@ -724,18 +423,16 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} y The Y coordinate of the point to draw.
      */
     this.moveTo = function(x, y) {
-        scheduleTask(function() {
-            
-            // Start a new path if current path is closed
-            if (pathClosed) {
-                displayContext.beginPath();
-                pathClosed = false;
-            }
-            
-            if (layer.autosize != 0) fitRect(x, y, 0, 0);
-            displayContext.moveTo(x, y);
-            
-        });
+        
+        // Start a new path if current path is closed
+        if (pathClosed) {
+            context.beginPath();
+            pathClosed = false;
+        }
+        
+        if (layer.autosize) fitRect(x, y, 0, 0);
+        context.moveTo(x, y);
+
     };
 
     /**
@@ -745,18 +442,16 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} y The Y coordinate of the endpoint of the line to draw.
      */
     this.lineTo = function(x, y) {
-        scheduleTask(function() {
-            
-            // Start a new path if current path is closed
-            if (pathClosed) {
-                displayContext.beginPath();
-                pathClosed = false;
-            }
-            
-            if (layer.autosize != 0) fitRect(x, y, 0, 0);
-            displayContext.lineTo(x, y);
-            
-        });
+        
+        // Start a new path if current path is closed
+        if (pathClosed) {
+            context.beginPath();
+            pathClosed = false;
+        }
+        
+        if (layer.autosize) fitRect(x, y, 0, 0);
+        context.lineTo(x, y);
+        
     };
 
     /**
@@ -773,18 +468,16 @@ Guacamole.Layer = function(width, height) {
      *                           decreasing angle.
      */
     this.arc = function(x, y, radius, startAngle, endAngle, negative) {
-        scheduleTask(function() {
-            
-            // Start a new path if current path is closed
-            if (pathClosed) {
-                displayContext.beginPath();
-                pathClosed = false;
-            }
-            
-            if (layer.autosize != 0) fitRect(x, y, 0, 0);
-            displayContext.arc(x, y, radius, startAngle, endAngle, negative);
-            
-        });
+        
+        // Start a new path if current path is closed
+        if (pathClosed) {
+            context.beginPath();
+            pathClosed = false;
+        }
+        
+        if (layer.autosize) fitRect(x, y, 0, 0);
+        context.arc(x, y, radius, startAngle, endAngle, negative);
+        
     };
 
     /**
@@ -798,18 +491,16 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} y The Y coordinate of the endpoint of the curve.
      */
     this.curveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {
-        scheduleTask(function() {
-            
-            // Start a new path if current path is closed
-            if (pathClosed) {
-                displayContext.beginPath();
-                pathClosed = false;
-            }
-            
-            if (layer.autosize != 0) fitRect(x, y, 0, 0);
-            displayContext.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-            
-        });
+        
+        // Start a new path if current path is closed
+        if (pathClosed) {
+            context.beginPath();
+            pathClosed = false;
+        }
+        
+        if (layer.autosize) fitRect(x, y, 0, 0);
+        context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+        
     };
 
     /**
@@ -817,13 +508,8 @@ Guacamole.Layer = function(width, height) {
      * point (if any) with a straight line.
      */
     this.close = function() {
-        scheduleTask(function() {
-            
-            // Close path
-            displayContext.closePath();
-            pathClosed = true;
-            
-        });
+        context.closePath();
+        pathClosed = true;
     };
 
     /**
@@ -837,18 +523,16 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} h The height of the rectangle to draw.
      */
     this.rect = function(x, y, w, h) {
-        scheduleTask(function() {
             
-            // Start a new path if current path is closed
-            if (pathClosed) {
-                displayContext.beginPath();
-                pathClosed = false;
-            }
-            
-            if (layer.autosize != 0) fitRect(x, y, w, h);
-            displayContext.rect(x, y, w, h);
-            
-        });
+        // Start a new path if current path is closed
+        if (pathClosed) {
+            context.beginPath();
+            pathClosed = false;
+        }
+        
+        if (layer.autosize) fitRect(x, y, w, h);
+        context.rect(x, y, w, h);
+        
     };
 
     /**
@@ -858,15 +542,13 @@ Guacamole.Layer = function(width, height) {
      * once a path drawing operation (path() or rect()) is used.
      */
     this.clip = function() {
-        scheduleTask(function() {
 
-            // Set new clipping region
-            displayContext.clip();
+        // Set new clipping region
+        context.clip();
 
-            // Path now implicitly closed
-            pathClosed = true;
+        // Path now implicitly closed
+        pathClosed = true;
 
-        });
     };
 
     /**
@@ -886,19 +568,17 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} a The alpha component of the color to fill.
      */
     this.strokeColor = function(cap, join, thickness, r, g, b, a) {
-        scheduleTask(function() {
 
-            // Stroke with color
-            displayContext.lineCap = cap;
-            displayContext.lineJoin = join;
-            displayContext.lineWidth = thickness;
-            displayContext.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + a/255.0 + ")";
-            displayContext.stroke();
+        // Stroke with color
+        context.lineCap = cap;
+        context.lineJoin = join;
+        context.lineWidth = thickness;
+        context.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + a/255.0 + ")";
+        context.stroke();
 
-            // Path now implicitly closed
-            pathClosed = true;
+        // Path now implicitly closed
+        pathClosed = true;
 
-        });
     };
 
     /**
@@ -913,16 +593,14 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} a The alpha component of the color to fill.
      */
     this.fillColor = function(r, g, b, a) {
-        scheduleTask(function() {
 
-            // Fill with color
-            displayContext.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a/255.0 + ")";
-            displayContext.fill();
+        // Fill with color
+        context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a/255.0 + ")";
+        context.fill();
 
-            // Path now implicitly closed
-            pathClosed = true;
+        // Path now implicitly closed
+        pathClosed = true;
 
-        });
     };
 
     /**
@@ -941,22 +619,20 @@ Guacamole.Layer = function(width, height) {
      *                                   within the stroke.
      */
     this.strokeLayer = function(cap, join, thickness, srcLayer) {
-        scheduleTaskSynced(srcLayer, function() {
 
-            // Stroke with image data
-            displayContext.lineCap = cap;
-            displayContext.lineJoin = join;
-            displayContext.lineWidth = thickness;
-            displayContext.strokeStyle = displayContext.createPattern(
-                srcLayer.getCanvas(),
-                "repeat"
-            );
-            displayContext.stroke();
+        // Stroke with image data
+        context.lineCap = cap;
+        context.lineJoin = join;
+        context.lineWidth = thickness;
+        context.strokeStyle = context.createPattern(
+            srcLayer.getCanvas(),
+            "repeat"
+        );
+        context.stroke();
 
-            // Path now implicitly closed
-            pathClosed = true;
+        // Path now implicitly closed
+        pathClosed = true;
 
-        });
     };
 
     /**
@@ -970,47 +646,41 @@ Guacamole.Layer = function(width, height) {
      *                                   within the fill.
      */
     this.fillLayer = function(srcLayer) {
-        scheduleTask(function() {
 
-            // Fill with image data 
-            displayContext.fillStyle = displayContext.createPattern(
-                srcLayer.getCanvas(),
-                "repeat"
-            );
-            displayContext.fill();
+        // Fill with image data 
+        context.fillStyle = context.createPattern(
+            srcLayer.getCanvas(),
+            "repeat"
+        );
+        context.fill();
 
-            // Path now implicitly closed
-            pathClosed = true;
+        // Path now implicitly closed
+        pathClosed = true;
 
-        });
     };
 
     /**
      * Push current layer state onto stack.
      */
     this.push = function() {
-        scheduleTask(function() {
 
-            // Save current state onto stack
-            displayContext.save();
-            stackSize++;
+        // Save current state onto stack
+        context.save();
+        stackSize++;
 
-        });
     };
 
     /**
      * Pop layer state off stack.
      */
     this.pop = function() {
-        scheduleTask(function() {
 
-            // Restore current state from stack
-            if (stackSize > 0) {
-                displayContext.restore();
-                stackSize--;
-            }
+        // Restore current state from stack
+        if (stackSize > 0) {
+            context.restore();
+            stackSize--;
+        }
 
-        });
     };
 
     /**
@@ -1018,23 +688,21 @@ Guacamole.Layer = function(width, height) {
      * matrix.
      */
     this.reset = function() {
-        scheduleTask(function() {
 
-            // Clear stack
-            while (stackSize > 0) {
-                displayContext.restore();
-                stackSize--;
-            }
+        // Clear stack
+        while (stackSize > 0) {
+            context.restore();
+            stackSize--;
+        }
 
-            // Restore to initial state
-            displayContext.restore();
-            displayContext.save();
+        // Restore to initial state
+        context.restore();
+        context.save();
 
-            // Clear path
-            displayContext.beginPath();
-            pathClosed = false;
+        // Clear path
+        context.beginPath();
+        pathClosed = false;
 
-        });
     };
 
     /**
@@ -1049,16 +717,11 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} f The sixth value in the affine transform's matrix.
      */
     this.setTransform = function(a, b, c, d, e, f) {
-        scheduleTask(function() {
-
-            // Set transform
-            displayContext.setTransform(
-                a, b, c,
-                d, e, f
-              /*0, 0, 1*/
-            );
-
-        });
+        context.setTransform(
+            a, b, c,
+            d, e, f
+          /*0, 0, 1*/
+        );
     };
 
     /**
@@ -1073,16 +736,11 @@ Guacamole.Layer = function(width, height) {
      * @param {Number} f The sixth value in the affine transform's matrix.
      */
     this.transform = function(a, b, c, d, e, f) {
-        scheduleTask(function() {
-
-            // Apply transform
-            displayContext.transform(
-                a, b, c,
-                d, e, f
-              /*0, 0, 1*/
-            );
-
-        });
+        context.transform(
+            a, b, c,
+            d, e, f
+          /*0, 0, 1*/
+        );
     };
 
     /**
@@ -1098,9 +756,7 @@ Guacamole.Layer = function(width, height) {
      *                      Layer.
      */
     this.setChannelMask = function(mask) {
-        scheduleTask(function() {
-            displayContext.globalCompositeOperation = compositeOperation[mask];
-        });
+        context.globalCompositeOperation = compositeOperation[mask];
     };
 
     /**
@@ -1113,19 +769,17 @@ Guacamole.Layer = function(width, height) {
      *                       miter join.
      */
     this.setMiterLimit = function(limit) {
-        scheduleTask(function() {
-            displayContext.miterLimit = limit;
-        });
+        context.miterLimit = limit;
     };
 
     // Initialize canvas dimensions
-    display.width = width;
-    display.height = height;
+    canvas.width = width;
+    canvas.height = height;
 
     // Explicitly render canvas below other elements in the layer (such as
     // child layers). Chrome and others may fail to render layers properly
     // without this.
-    display.style.zIndex = -1;
+    canvas.style.zIndex = -1;
 
 };
 
@@ -1237,3 +891,7 @@ Guacamole.Layer.Pixel = function(r, g, b, a) {
     this.alpha = a;
 
 };
+
+
+// FIXME: Declaration order hack
+Guacamole.Display.VisibleLayer.prototype = new Guacamole.Layer(0, 0);
diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js
index d1ee45215..9cd5ee66f 100644
--- a/guacamole/src/main/webapp/scripts/client-ui.js
+++ b/guacamole/src/main/webapp/scripts/client-ui.js
@@ -742,7 +742,7 @@ GuacUI.Client.Pinch = function(element) {
 GuacUI.Client.updateThumbnail = function() {
 
     // Get screenshot
-    var canvas = GuacUI.Client.attachedClient.flatten();
+    var canvas = GuacUI.Client.attachedClient.getDisplay().flatten();
 
     // Calculate scale of thumbnail (max 320x240, max zoom 100%)
     var scale = Math.min(
@@ -781,7 +781,7 @@ GuacUI.Client.setScale = function(new_scale) {
     new_scale = Math.min(new_scale, GuacUI.Client.max_zoom);
 
     if (GuacUI.Client.attachedClient)
-        GuacUI.Client.attachedClient.scale(new_scale);
+        GuacUI.Client.attachedClient.getDisplay().scale(new_scale);
 
     GuacUI.Client.zoom_state.textContent = Math.round(new_scale * 100) + "%";
 
@@ -809,22 +809,22 @@ GuacUI.Client.updateDisplayScale = function() {
 
     // Determine whether display is currently fit to the screen
     var guac = GuacUI.Client.attachedClient;
-    var auto_fit = (guac.getScale() === GuacUI.Client.min_zoom);
+    var auto_fit = (guac.getDisplay().getScale() === GuacUI.Client.min_zoom);
 
     // Calculate scale to fit screen
     GuacUI.Client.min_zoom = Math.min(
-        window.innerWidth  / Math.max(guac.getWidth(), 1),
-        window.innerHeight / Math.max(guac.getHeight(), 1)
+        window.innerWidth  / Math.max(guac.getDisplay().getWidth(), 1),
+        window.innerHeight / Math.max(guac.getDisplay().getHeight(), 1)
     );
 
     // Calculate appropriate maximum zoom level
     GuacUI.Client.max_zoom = Math.max(GuacUI.Client.min_zoom, 3);
 
     // Clamp zoom level, maintain auto-fit
-    if (guac.getScale() < GuacUI.Client.min_zoom || auto_fit)
+    if (guac.getDisplay().getScale() < GuacUI.Client.min_zoom || auto_fit)
         GuacUI.Client.setScale(GuacUI.Client.min_zoom);
 
-    else if (guac.getScale() > GuacUI.Client.max_zoom)
+    else if (guac.getDisplay().getScale() > GuacUI.Client.max_zoom)
         GuacUI.Client.setScale(GuacUI.Client.max_zoom);
 
 };
@@ -1055,7 +1055,7 @@ GuacUI.Client.setMouseEmulationAbsolute = function(absolute) {
         if (!guac) return;
    
         // Determine mouse position within view
-        var guac_display = guac.getDisplay();
+        var guac_display = guac.getDisplay().getElement();
         var mouse_view_x = mouseState.x + guac_display.offsetLeft - GuacUI.Client.main.scrollLeft;
         var mouse_view_y = mouseState.y + guac_display.offsetTop  - GuacUI.Client.main.scrollTop;
 
@@ -1087,8 +1087,8 @@ GuacUI.Client.setMouseEmulationAbsolute = function(absolute) {
 
         // Scale event by current scale
         var scaledState = new Guacamole.Mouse.State(
-                mouseState.x / guac.getScale(),
-                mouseState.y / guac.getScale(),
+                mouseState.x / guac.getDisplay().getScale(),
+                mouseState.y / guac.getDisplay().getScale(),
                 mouseState.left,
                 mouseState.middle,
                 mouseState.right,
@@ -1147,13 +1147,13 @@ GuacUI.Client.attach = function(guac) {
     GuacUI.Client.attachedClient = guac;
 
     // Get display element
-    var guac_display = guac.getDisplay();
+    var guac_display = guac.getDisplay().getElement();
 
     /*
      * Update the scale of the display when the client display size changes.
      */
 
-    guac.onresize = function(width, height) {
+    guac.getDisplay().onresize = function(width, height) {
         GuacUI.Client.updateDisplayScale();
     };
 
@@ -1332,8 +1332,8 @@ GuacUI.Client.attach = function(guac) {
 
         // Scale event by current scale
         var scaledState = new Guacamole.Mouse.State(
-                mouseState.x / guac.getScale(),
-                mouseState.y / guac.getScale(),
+                mouseState.x / guac.getDisplay().getScale(),
+                mouseState.y / guac.getDisplay().getScale(),
                 mouseState.left,
                 mouseState.middle,
                 mouseState.right,
@@ -1353,8 +1353,8 @@ GuacUI.Client.attach = function(guac) {
     GuacUI.Client.display.innerHTML = "";
 
     // Add client to UI
-    guac.getDisplay().className = "software-cursor";
-    GuacUI.Client.display.appendChild(guac.getDisplay());
+    guac.getDisplay().getElement().className = "software-cursor";
+    GuacUI.Client.display.appendChild(guac.getDisplay().getElement());
 
 };
 
@@ -1698,7 +1698,7 @@ GuacUI.Client.attach = function(guac) {
         if (!guac)
             return;
 
-        initial_scale = guac.getScale();
+        initial_scale = guac.getDisplay().getScale();
         initial_center_x = (x + GuacUI.Client.main.scrollLeft) / initial_scale;
         initial_center_y = (y + GuacUI.Client.main.scrollTop) / initial_scale;
     };
@@ -2031,7 +2031,7 @@ GuacUI.Client.attach = function(guac) {
         // Zoom in by 10%
         var guac = GuacUI.Client.attachedClient;
         if (guac)
-            GuacUI.Client.setScale(guac.getScale() + 0.1);
+            GuacUI.Client.setScale(guac.getDisplay().getScale() + 0.1);
 
     };
 
@@ -2040,7 +2040,7 @@ GuacUI.Client.attach = function(guac) {
         // Zoom out by 10%
         var guac = GuacUI.Client.attachedClient;
         if (guac)
-            GuacUI.Client.setScale(guac.getScale() - 0.1);
+            GuacUI.Client.setScale(guac.getDisplay().getScale() - 0.1);
 
     };