From 0d091e925f583e489e479eef11ed38c2cec64342 Mon Sep 17 00:00:00 2001
From: Michael Jumper <zhangmaike@users.sourceforge.net>
Date: Mon, 12 Nov 2012 02:02:05 -0800
Subject: [PATCH] Convert PanOverlay.

---
 guacamole/src/main/webapp/client.xhtml         |  2 --
 guacamole/src/main/webapp/scripts/client-ui.js | 16 +++++++++-------
 guacamole/src/main/webapp/styles/client.css    |  7 +++----
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index b113ffb74..f141685c4 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/guacamole/src/main/webapp/client.xhtml
@@ -40,8 +40,6 @@
             </div>
         </div>
 
-        <div id="pan-overlay"></div>
-        
         <!-- On-screen keyboard -->
         <div id="keyboardContainer"></div>
         
diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js
index 9702e8edd..989261ed5 100644
--- a/guacamole/src/main/webapp/scripts/client-ui.js
+++ b/guacamole/src/main/webapp/scripts/client-ui.js
@@ -59,7 +59,6 @@ GuacUI.Client = {
         "keyboard"  : document.getElementById("keyboardContainer")
     },
     
-    "pan_overlay"  : document.getElementById("pan-overlay"),
     "state"        : document.getElementById("statusText"),
     "client"       : null,
     "sessionState" : new GuacamoleSessionState(),
@@ -254,14 +253,19 @@ GuacUI.StateManager.registerComponent(
  * @constructor
  * @augments GuacUI.Component
  */
-GuacUI.Client.PanOverlay = function(pan_overlay) {
+GuacUI.Client.PanOverlay = function() {
+
+    /**
+     * Overlay which will provide the means of scrolling the screen.
+     */
+    var pan_overlay = GuacUI.createElement("div", "pan-overlay");
 
     this.show = function() {
-        pan_overlay.style.display = "block";
+        document.body.appendChild(pan_overlay);
     };
 
     this.hide = function() {
-        pan_overlay.style.display = "none";
+        document.body.removeChild(pan_overlay);
     };
 
     /*
@@ -281,9 +285,7 @@ GuacUI.Client.PanOverlay.prototype = new GuacUI.Component();
  */
 
 GuacUI.StateManager.registerComponent(
-    new GuacUI.Client.PanOverlay(
-        document.getElementById("pan-overlay")
-    ),
+    new GuacUI.Client.PanOverlay(),
     GuacUI.Client.states.PAN,
     GuacUI.Client.states.PAN_TYPING
 );
diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index d533f76f5..8fd835678 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/src/main/webapp/styles/client.css
@@ -191,13 +191,12 @@ div.magnifier {
 
 }
 
-div#pan-overlay {
-    display: none;
-    width: 100%;
-    height: 100%;
+.pan-overlay {
     position: absolute;
     left: 0;
     top: 0;
+    width: 100%;
+    height: 100%;
 }
 
 /* Viewport Clone */