From 0dfc083aa539aa9a0d2a32eba20703335e9b1713 Mon Sep 17 00:00:00 2001
From: terribl <terri@rannalla.net>
Date: Tue, 21 May 2013 15:19:36 +0300
Subject: [PATCH] New settings area New settings area can be opened by clicking
 Settings-link and closed by same link or OK-button. No settings to change
 yet.

	modified:   public_html/gmap.html
	modified:   public_html/script.js
	modified:   public_html/style.css
---
 public_html/gmap.html |  7 ++++-
 public_html/script.js | 18 +++++++++--
 public_html/style.css | 72 ++++++++++++++++++++++++++++---------------
 3 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/public_html/gmap.html b/public_html/gmap.html
index 6bdd622..e6462bf 100644
--- a/public_html/gmap.html
+++ b/public_html/gmap.html
@@ -18,7 +18,12 @@
         <p id="selinfo">Click on a plane for info.</p>
         <div id="tabinfo"></div>
       </div>
-      <div id="info_settings">[<a href="#" onClick="#resetMap();">Settings</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>
diff --git a/public_html/script.js b/public_html/script.js
index ba89a47..96b3926 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -364,10 +364,24 @@ function printTime() {
 }
 
 function placeSettings() {
-    $('#info_settings').css('top', parseInt($('#utcTime').offset().top));
-    
+    // Settings link
     var marginLeft = $('#header').width() - $('#info_settings').width();
     $('#info_settings').css('left', marginLeft);
+    $('#info_settings').css('top', parseInt($('#utcTime').offset().top));
+    
+    // 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() {
diff --git a/public_html/style.css b/public_html/style.css
index dd6835f..db2e481 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -1,46 +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 div h2 {
+    margin-top: 10px;
+    font-size: 14px;
+}
+
 #info_settings {
-position:   absolute;
-display:    none;
+    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;
 }