Add buttons to expand/collapse/resize data table

public_html/index.html

@@ -44,11 +44,13 @@
 			<input type="hidden" name="submit" value="submit">
 		</form>
 
+		<div id="layout_container">
 			<div id="map_container">
 				<div id="map_canvas"></div>
+				<a id="toggle_sidebar_button" class="hide_sidebar" href="#"></a>
 			</div>
-
 			<div id="sidebar_container">
+				<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
 					<div id="sidebar_canvas">
 					<div id="sudo_buttons">
 						<table style="width: 100%">
@@ -185,6 +187,7 @@
 
 				</div> <!-- sidebar_canvas -->
 			</div> <!-- sidebar_container -->
+		</div> <!-- layout_container -->
 
 		<div id="SpecialSquawkWarning" class="hidden">
 			<b>Squawk 7x00 is reported and shown.</b><br>

public_html/script.js

@@ -197,6 +197,19 @@ function initialize() {
 
         $("#loader").removeClass("hidden");
         
+        // Set up map/sidebar splitter
+        $("#sidebar_container").resizable({handles: {w: '#splitter'}});
+
+        // Set up event handler for expand/collapse sidebar button
+        $("#toggle_sidebar_button").click(toggleSidebarVisibility);
+
+        // Force map to redraw if sidebar container is resized - use a timer to debounce
+        var mapResizeTimeout;
+        $("#sidebar_container").on("resize", function() {
+            clearTimeout(mapResizeTimeout);
+            mapResizeTimeout = setTimeout(updateMapSize, 50);
+        });
+
         // Get receiver metadata, reconfigure using it, then continue
         // with initialization
         $.ajax({ url: 'data/receiver.json',
@@ -929,3 +942,15 @@ function resetMap() {
 	
 	selectPlaneByHex(null,false);
 }
+
+function updateMapSize() {
+    OLMap.updateSize();
+}
+
+function toggleSidebarVisibility(e) {
+    e.preventDefault();
+    $("#sidebar_container").toggle();
+    $("#toggle_sidebar_button").toggleClass("show_sidebar");
+    $("#toggle_sidebar_button").toggleClass("hide_sidebar");
+    updateMapSize();
+}

public_html/style.css

@@ -2,10 +2,65 @@ html, body {
     margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
     font-size: 10pt; overflow: auto; height: 100%;
 }
-div#map_container     { float: left; width: 100%; height: 100%; }
-div#map_canvas        { height: 100%; margin-right: 420px; }
 
-div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }
+#layout_container { 
+    display: flex;
+    height: 100%;
+}
+
+#map_container {
+    flex: 1 1 auto;
+    position: relative;
+    height: 100%;
+}
+
+#map_canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+#toggle_sidebar_button {  
+    width: 48px;
+    height: 40px;
+    position: absolute;
+    top: 6px;
+    right: 6px;
+}
+
+#toggle_sidebar_button.show_sidebar {
+    background-image: url("images/show_sidebar_inactive_48x40.png")
+}
+
+#toggle_sidebar_button.show_sidebar:hover {
+    background-image: url("images/show_sidebar_active_48x40.png")
+}
+
+#toggle_sidebar_button.hide_sidebar {
+    background-image: url("images/hide_sidebar_inactive_48x40.png")
+}
+
+#toggle_sidebar_button.hide_sidebar:hover {
+    background-image: url("images/hide_sidebar_active_48x40.png")
+}
+
+#sidebar_container {
+    display: flex;
+    width: 410px;
+    padding-left: 10px;
+    left: 0 !important;
+}
+
+#splitter {
+    flex: 0 0 6px;
+    cursor: col-resize;
+    background-color: #bbbbbb;
+    left: 0 !important;
+}
+
+#sidebar_canvas { 
+    flex: 1 1 auto; 
+}
 
 div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
     background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;