3 files changed, 59 insertions, 8 deletions
diff --git a/index.php b/index.php
index a89e8b6..1fa8e6a 100644
--- a/index.php
+++ b/index.php
@@ -11,7 +11,7 @@ else
 if(empty($lat)) $lat=47.07102; 
 if(empty($lng))	$lng=15.440;
 if(empty($res)) $res=15;
-if(!isset($marker)) $marker="online";
+if(empty($marker)) $marker="online";
 ?>
 
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
@@ -35,7 +35,23 @@ if(!isset($marker)) $marker="online";
     <div id="map" style="width:100%; height:100%;"></div>
     <div id="legendbox" class="box">
       <b>Legende:</b>
-      <!-- TODO: add Legend Info -->
+      <table class="legend">
+        <tr><td align="center"><img src="./img/marker_online.png" /></td><td>&nbsp;</td><td>Online</td></tr>
+        <tr><td align="center"><img src="./img/marker_offline.png" /></td><td>&nbsp;</td><td>Offline</td></tr>
+        <tr><td align="center"><img src="./img/marker_tunnel.png" /></td><td>&nbsp;</td><td>Tunnel</td></tr>
+        <tr><td align="center"><img src="./img/link_green.png" /></td><td>&nbsp;</td><td>Gut</td></tr>
+        <tr><td align="center"><img src="./img/link_yellow.png" /></td><td>&nbsp;</td><td>Mittel</td></tr>
+        <tr><td align="center"><img src="./img/link_red.png" /></td><td>&nbsp;</td><td>Schlecht</td></tr>
+        <tr><td align="center"><img src="./img/link_blue.png" /></td><td>&nbsp;</td><td>Tunnel</td></tr>
+      </table>
+    </div>
+    <div id="visibox" class="box">
+      <b>Elemente ausblenden</b>
+      <form name="visibleform">
+        <table class="legend">
+          <tr><td><input type="checkbox" name="offline" value="true" onclick="javascript:toggleVisible('offline')" <?php if($marker == "online") printf(' checked="checked"'); ?> ></td><td>&nbsp;</td><td>Offline</td></tr>
+        </table>
+      </from>
     </div>
     <div id="addressbox" class="box">
       <b>Adresse suchen:</b>
diff --git a/map.css b/map.css
index 2067598..a197481 100644
--- a/map.css
+++ b/map.css
@@ -10,7 +10,7 @@ body {
   padding: 0;
 }
 
-div {
+div,table {
   color: black;
 }
 
@@ -53,6 +53,12 @@ div.box {
   text-align: center;
 }
 
+#visibox {
+  position: absolute;
+  top: 20em;
+  right: 10px;
+}
+
 div.btn {
   color: #0000cc;
   background-color: white;
@@ -73,7 +79,11 @@ div.btn {
   width: 10em;
 }
 
-*.locinfo {
+*.locinfo,table {
   font-size: 8pt;
   color: black;	
 }
+
+table.legend {
+  margin-top: 3px;
+}
diff --git a/map.js b/map.js
index c43552e..553ba9e 100644
--- a/map.js
+++ b/map.js
@@ -118,6 +118,9 @@ function drawLocations(xmlData) {
     GEvent.addListener(marker, "click", onLocationClick);
     map.addOverlay(marker);
   }
+  if(document.visibleform.elements["offline"].checked) {
+    toggleVisible("offline");
+  }
 }
 
 function Location(element) {
@@ -153,10 +156,10 @@ function onLocationClick(latlng) {
 }
 
 function convertCoords(x) {
-        var deg = Math.floor(x);
-        var min = (x - deg) * 60;
-        var sec = (min - Math.floor(min)) * 60;
-        return deg + "° " + Math.floor(min) + "' " + sec.toFixed(0) + "\"";
+  var deg = Math.floor(x);
+  var min = (x - deg) * 60;
+  var sec = (min - Math.floor(min)) * 60;
+  return deg + "° " + Math.floor(min) + "' " + sec.toFixed(0) + "\"";
 }
 
 function addNewNodeText(point) {
@@ -180,6 +183,28 @@ function makeIcon(type) {
   return icon
 }
 
+function toggleVisible(element) {
+  var elements = Object();
+  switch(element) {
+    case 'offline': elements.overlays = overlays["locations"]; elements.select = new Function("id", "return (locations[overlays['locations'][id].locid].state == 'offline');"); break;
+  }
+
+  if(document.visibleform.elements[element].checked) {
+    hideElements(elements);
+  } else {
+    showElements(elements);
+  }
+}
+
+function hideElements(elements) {
+  for(var o in elements.overlays)
+    if(elements.select(o)) elements.overlays[o].hide();
+}
+
+function showElements(elements) {
+  for(var o in elements.overlays)
+    if(elements.select(o)) elements.overlays[o].show();
+}
 
 function setNewMarker(point) {
   var marker = new GMarker(point,{icon: makeIcon('newnode'), draggable: true});