Fix tab breakage and make key update as zoom level changes.

app/views/site/_key.rhtml

@@ -5,12 +5,21 @@
 <script type="text/javascript">
 <!--
   function showKey() {
-	var zoomlevel=map.getZoom();
-	if      (zoomlevel<7 ) { var imgname='keymapnik6.png'; }
-	else if (zoomlevel<12) { var imgname='keymapnik'+zoomlevel+'.png'; }
-	else                   { var imgname='keymapnik12.png'; }
+    var zoomlevel = map.getZoom();
+
+    if (zoomlevel<7 )      { var imgname = 'keymapnik6.png'; }
+    else if (zoomlevel<12) { var imgname = 'keymapnik'+zoomlevel+'.png'; }
+    else                   { var imgname = 'keymapnik12.png'; }
+
     updateSidebar("Map key", "<p><img src='images/"+imgname+"' /></p>");
     openSidebar("210px");
   }
+
+  function updateKey() {
+    if (sidebarOpen("Map key")) 
+    {
+      showKey();
+    }
+  }
 // -->
 </script>

app/views/site/_sidebar.rhtml

@@ -12,14 +12,17 @@
 <script type="text/javascript">
 <!--
   function openSidebar() {
-	if (arguments.length) { $("sidebar").style.width = arguments[0]; }
-	                 else { $("sidebar").style.width = "30%"; }
+    if (arguments.length) { $("sidebar").style.width = arguments[0]; }
+    else { $("sidebar").style.width = "30%"; }
+
     $("sidebar").style.display = "block";
+
     <%= onopen %>
   }
 
   function closeSidebar() {
     $("sidebar").style.display = "none";
+
     <%= onclose %>
   }
 
@@ -27,5 +30,10 @@
     $("sidebar_title").innerHTML = title;
     $("sidebar_content").innerHTML = content;
   }
+
+  function sidebarOpen(title) {
+    return $("sidebar").style.display == "block" &&
+           $("sidebar_title").innerHTML == title;
+  }
 // -->
 </script>

app/views/site/index.rhtml

@@ -96,6 +96,8 @@
     marker = addMarkerToMap(lonLatToMercator(new OpenLayers.LonLat(<%= mlon %>, <%= mlat %>)));
     <% end %>
 
+    map.events.register("zoomend", map, updateKey);
+
     map.events.register("moveend", map, updateLocation);
     updateLocation();