diff --git a/js/GUI.Utils.js b/js/GUI.Utils.js
new file mode 100644
index 0000000..5f826fd
--- /dev/null
+++ b/js/GUI.Utils.js
@@ -0,0 +1,8 @@
+function openTab(tabName) {
+    var i;
+    var x = document.getElementsByClassName("tab");
+    for (i = 0; i < x.length; i++) {
+        x[i].style.display = "none"; 
+    }
+    document.getElementById(tabName).style.display = "block"; 
+}
diff --git a/webviewgl.htm b/webviewgl.htm
index 5afbce6..4ef8b1b 100644
--- a/webviewgl.htm
+++ b/webviewgl.htm
@@ -4,18 +4,19 @@
       <script src="js/three.js"></script>
       <script src="js/OrbitControls.js"></script>
       <script src="js/three-text2d.js"></script>
-      <script src="js/Detector.js"></script>  <!-- Not sure if this is even needed anymore. -->
+      <script src="js/Detector.js"></script> 
       <script src="js/mapviewgl.js"></script>
       <style type="text/css">
           body { margin: 0; }
-          canvas { width: 100%; height: 100% }
-	  #reset-button { position: absolute; top:0; left:90%; background-color:#AAA; width: 50px; height:25px; color:#FFF; font-weight: bold; text-align:center;}
-	  
+          canvas { width: 75%; height: 100% ; }
+	  #reset-button { position: absolute; top: 0; left: 90%; background-color: #AAA; width: 50px; height: 25px; color: #FFF; font-weight: bold; text-align: center;}
+	  #controls { position: fixed; left: 85%; height: 100%; width: 15%; background-color: #FFF; } 
       </style>
   </head>
   <body>
       <div id="container"></div>
       <div id="reset-button" onClick="reset_view();"> Reset </div>
+      <div id="controls"> </div>
   </body>
   
 </html>
