Merge pull request #3 from terribl/master

New settings div

public_html/gmap.html

@@ -13,12 +13,17 @@
     <div id="map_canvas" style="height:100%"></div>
     <div id="info">
       <div>
-        <h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
+        <h1 id="header">Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1> 
         <p id="geninfo"></p>
         <p id="selinfo">Click on a plane for info.</p>
         <div id="tabinfo"></div>
       </div>
-      <div id="info_footer"><a href="#" onClick="resetMap();">Reset Map</a></div>
+      <div id="info_settings">[<a href="#" onClick="toggleSettings();">Settings</a>]</div>
+      <div id="info_settings_area">
+        <h2>Settings</h2>
+        <input type="button" value="Reset Map" onClick="resetMap();toggleSettings();">
+        <input type="button" value="OK" style="position:absolute;bottom:0;right:2px;" onClick="toggleSettings();">
+      </div>
     </div>
   </body>
 </html>

public_html/script.js

@@ -363,17 +363,25 @@ function printTime() {
     }
 }
 
-function placeFooter() {
-    var windHeight = $(window).height();
-    var footerHeight = $('#info_footer').height();
-    var offset = parseInt(windHeight) - parseInt(footerHeight);
+function placeSettings() {
+    // Settings link
+    var marginLeft = $('#header').width() - $('#info_settings').width();
+    $('#info_settings').css('left', marginLeft);
+    $('#info_settings').css('top', parseInt($('#utcTime').offset().top));
     
-    var footerWidth = parseInt($('#info_footer').width());
-    var infoWidth = parseInt($('#info').width());
-    var marginLeft = parseInt((infoWidth / 2) - (footerWidth / 2));
-    
-    $('#info_footer').css('top', offset);
-    $('#info_footer').css('margin-left', marginLeft);
+    // Settings area
+    $('#info_settings_area').css('top', parseInt($('#geninfo').offset().top));
+    $('#info_settings_area').css('left', 5);
+    $('#info_settings_area').css('width', parseInt($('#info').width() - 40));
+}
+
+function toggleSettings() {
+    if ($('#info_settings_area').css('display') != 'none') {
+        $('#info_settings_area').hide(350);
+    } else {
+        // Open settings
+        $('#info_settings_area').show(350);
+    }
 }
 
 function resetMap() {
@@ -381,7 +389,8 @@ function resetMap() {
     localStorage['CenterLon'] = 9.0;
     localStorage['ZoomLvl']   = 5;
     Map.setZoom(parseInt(localStorage['ZoomLvl']));
-    Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']), parseInt(localStorage['CenterLon'])));
+    Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']),
+            parseInt(localStorage['CenterLon'])));
     Selected = null;
     refreshSelectedInfo();
 }
@@ -413,14 +422,14 @@ function initialize() {
         maxZoom: 18
     }));
     
-    // show footer at info-area
+    // show settings at info-area
     $(function(){
         $(window).resize(function(e){
-            placeFooter();
+            placeSettings();
         });
-        placeFooter();
+        placeSettings();
         // hide it before it's positioned
-        $('#info_footer').css('display','inline');
+        $('#info_settings').css('display','inline');
     });
     
     // Listener for newly created Map

public_html/style.css

@@ -1,49 +1,68 @@
 html { height: 100%; }
 body { height: 100%; margin: 0; padding: 0; font-size: small;}
 a { color: blue; }
+
 #map_canvas { 
-height: 100%;
-margin-right:390px;
+    height: 100%;
+    margin-right: 390px;
 }
+
 #info {
-position: absolute;
-width:390px;
-height:100%;
-bottom:0px;
-right:0px;
-top:0px;
-background-color: white;
-border-left:1px #666 solid;
-font-family:Helvetica;
+    position: absolute;
+    width: 390px;
+    height: 100%;
+    bottom: 0px;
+    right: 0px;
+    top: 0px;
+    background-color: white;
+    border-left: 1px #666 solid;
+    font-family: Helvetica, Sans-serif, Arial;
 }
+
 #info div {
-padding:0px;
-padding-left:10px;
-padding-right:10px;
-margin:0px;
+    padding: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0px;
 }
+
 #info div h1 {
-margin-top:10px;
-font-size:16px;
+    margin-top: 10px;
+    font-size: 16px;
 }
-#info_footer {
-position: absolute;
-display: none;
-text-align: center;
-padding:0px;
-margin:0px;
+
+#info div h2 {
+    margin-top: 10px;
+    font-size: 14px;
 }
+
+#info_settings {
+    position:   absolute;
+    display:    none;
+}
+
+#info_settings_area {
+    position: absolute;
+    display: none;
+    background-color: white;
+    border: 1px solid gray;
+}
+
 #tabinfo{
-height: 400px;
-overflow-y: auto;
+    height: 400px;
+    overflow-y: auto;
 }
+
 #tableinfo {
-font-size: x-small;
-font-family: monospace;
+    font-size: x-small;
+    font-family: monospace;
 }
+
 #tableinforow {
-cursor: pointer;
+    cursor: pointer;
+
 }
+
 #tableinforow .bold {
-font-weight:bold;
+    font-weight:bold;
 }