From 2215a98a08ffb408b2778cd2c8b7ee7d3c1acbec Mon Sep 17 00:00:00 2001
From: Carlos Salaverria <carlos.salaverria@flightaware.com>
Date: Fri, 19 Aug 2016 17:57:20 -0500
Subject: [PATCH] Use icon for show map button

---
 public_html/index.html |  4 ++--
 public_html/script.js  | 10 +++++-----
 public_html/style.css  | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index 384e145..b72ac14 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -53,12 +53,12 @@
 			<div id="sidebar_container">
 				<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
 					<div id="sidebar_canvas">
+					<a id="show_map_button" href="#"></a>
 					<div id="sudo_buttons">
 						<table style="width: 100%">
 							<tr>
 								<td style="width: 150px; text-align: center;">
-									<span id="reset_map_button" class="pointer" onclick="resetMap();">[ Reset Map ]</span>
-									<span id="show_map_button" class="pointer" onclick="showMap();">[ Show Map ]</span>
+								[ <span class="pointer" onclick="resetMap();">Reset Map</span> ]
 								</td>
 								<td style="width: 150px; text-align: center;" class="pointer">
 								[ <span onclick="selectAllPlanes();">Select All</span> ]
diff --git a/public_html/script.js b/public_html/script.js
index ccba0df..1e58bb1 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -202,12 +202,12 @@ function initialize() {
         // Set up map/sidebar splitter
         $("#sidebar_container").resizable({handles: {w: '#splitter'}});
 
-        // Set up event handler for show/hide sidebar button
+        // Set up event handlers for buttons
         $("#toggle_sidebar_button").click(toggleSidebarVisibility);
-
-        // Set up event handler for expand sidebar button
         $("#expand_sidebar_button").click(expandSidebar);
+        $("#show_map_button").click(showMap);
 
+        // Set initial element visibility
         $("#show_map_button").hide();
         setColumnVisibility();
 
@@ -1049,7 +1049,7 @@ function expandSidebar(e) {
     $("#map_container").hide()
     $("#toggle_sidebar_button").hide();
     $("#splitter").hide();
-    $("#reset_map_button").hide();
+    $("#sudo_buttons").hide();
     $("#show_map_button").show();
     $("#sidebar_container").width("100%");
     setColumnVisibility();
@@ -1060,7 +1060,7 @@ function showMap() {
     $("#map_container").show()
     $("#toggle_sidebar_button").show();
     $("#splitter").show();
-    $("#reset_map_button").show();
+    $("#sudo_buttons").show();
     $("#show_map_button").hide();
     $("#sidebar_container").width("410px");
     setColumnVisibility();
diff --git a/public_html/style.css b/public_html/style.css
index 3d0286a..6f5b942 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -21,6 +21,7 @@ html, body {
 }
 
 #toggle_sidebar_button {  
+    display: block;
     width: 48px;
     height: 40px;
     position: absolute;
@@ -45,6 +46,7 @@ html, body {
 }
 
 #expand_sidebar_button {  
+    display: block;
     width: 48px;
     height: 40px;
     position: absolute;
@@ -60,6 +62,20 @@ html, body {
     background-image: url("images/show_sidebar_active_48x40.png");
 }
 
+#show_map_button {
+    display: block;
+    width: 48px;
+    height: 40px;
+}
+
+#show_map_button {
+    background-image: url("images/hide_sidebar_inactive_48x40.png");
+}
+
+#show_map_button:hover {
+    background-image: url("images/hide_sidebar_active_48x40.png");
+}
+
 #sidebar_container {
     display: flex;
     width: 410px;