From 0de49aaf903185b18ee7b43322ff565f85f12c80 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Sun, 16 Jan 2022 21:05:07 -0600
Subject: [PATCH] UI2.0 Radar Page Complete

---
 css/ui2-light.css   |  11 +-
 data/aircraft1.json | 397 +----------------------
 gmap.html           | 744 ++++++++++++++++++++------------------------
 js/script.js        |   2 +-
 4 files changed, 357 insertions(+), 797 deletions(-)

diff --git a/css/ui2-light.css b/css/ui2-light.css
index 34e0ea7..7ea0202 100644
--- a/css/ui2-light.css
+++ b/css/ui2-light.css
@@ -26,11 +26,18 @@ body {
 #lock_button {
     position: absolute;
     z-index: 2;
-    left: 43%;
-    bottom: 33%;
+    right: 2%;
+    top: 44%;
     z-index: 1;
     line-height: 0%;
     margin-bottom: -80px;
+    background-color: rgba(255,255,255,.3);
+}
+
+#selected_position {
+    position: absolute;
+    top: 228px;
+    left: 138px;
 }
 
 #atc_title, #atc_location {
diff --git a/data/aircraft1.json b/data/aircraft1.json
index 2ede537..17b7b85 100644
--- a/data/aircraft1.json
+++ b/data/aircraft1.json
@@ -1,396 +1 @@
-{
-    "now": 1642357743860.139,
-    "messages": 0,
-    "aircraft": [{
-        "hex": "a4e27f",
-        "flight": "N4136R",
-        "lat": 43.5586,
-        "lon": -70.4737,
-        "altitude": 5800,
-        "track": 229,
-        "speed": 100,
-        "squawk": "5321",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "PWM",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "a899a2",
-        "flight": "UAL17",
-        "lat": 45.2403,
-        "lon": -70.3843,
-        "altitude": 37975,
-        "track": 223,
-        "speed": 407,
-        "squawk": "2544",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "LHR",
-        "arr": "EWR",
-        "airline": "UAL"
-    }, {
-        "hex": "a8f3c5",
-        "flight": "UAL919",
-        "lat": 43.9932,
-        "lon": -70.1521,
-        "altitude": 38050,
-        "track": 226,
-        "speed": 389,
-        "squawk": "2530",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "LHR",
-        "arr": "IAD",
-        "airline": "UAL"
-    }, {
-        "hex": "a8634c",
-        "flight": "N64EF",
-        "lat": 43.7074,
-        "lon": -70.1468,
-        "altitude": 4100,
-        "track": 214,
-        "speed": 91,
-        "squawk": "5366",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "aaad2c",
-        "flight": "N7872G",
-        "lat": 43.9803,
-        "lon": -70.119,
-        "altitude": 2150,
-        "track": 309,
-        "speed": 83,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "800582",
-        "flight": "AIC102",
-        "lat": 43.5827,
-        "lon": -69.9687,
-        "altitude": 31000,
-        "track": 41,
-        "speed": 519,
-        "squawk": "2752",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "JFK",
-        "arr": "DEL",
-        "airline": "AIC"
-    }, {
-        "hex": "a2a2e6",
-        "flight": "UAL107",
-        "lat": 43.882,
-        "lon": -69.9547,
-        "altitude": 39975,
-        "track": 226,
-        "speed": 427,
-        "squawk": "2527",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "MUC",
-        "arr": "IAD",
-        "airline": "UAL"
-    }, {
-        "hex": "a81dae",
-        "flight": "N622AC",
-        "lat": 43.9129,
-        "lon": -69.938,
-        "altitude": 0,
-        "track": 250,
-        "speed": 78,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "ad9b0c",
-        "flight": "N976MK",
-        "lat": 43.8669,
-        "lon": -69.9119,
-        "altitude": 1000,
-        "track": 6,
-        "speed": 139,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "484fff",
-        "flight": "KLM259",
-        "lat": 45.4716,
-        "lon": -69.8061,
-        "altitude": 40000,
-        "track": 228,
-        "speed": 425,
-        "squawk": "0734",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "AMS",
-        "arr": "IAD",
-        "airline": "KLM"
-    }, {
-        "hex": "89655e",
-        "flight": "UAE201",
-        "lat": 43.8267,
-        "lon": -69.7753,
-        "altitude": 38000,
-        "track": 219,
-        "speed": 413,
-        "squawk": "2537",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "DXB",
-        "arr": "JFK",
-        "airline": "UAE"
-    }, {
-        "hex": "",
-        "flight": "LJ60",
-        "lat": 44.3681,
-        "lon": -69.585,
-        "altitude": 27850,
-        "track": 219,
-        "speed": 379,
-        "squawk": "1314",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "a8647d",
-        "flight": "N64SL",
-        "lat": 44.0566,
-        "lon": -69.5397,
-        "altitude": 725,
-        "track": 177,
-        "speed": 84,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "RKD",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "a84ad5",
-        "flight": "N633W",
-        "lat": 44.0511,
-        "lon": -69.5234,
-        "altitude": 600,
-        "track": 177,
-        "speed": 76,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "a124b5",
-        "flight": "DAL9962",
-        "lat": 44.0461,
-        "lon": -69.4343,
-        "altitude": 36000,
-        "track": 234,
-        "speed": 386,
-        "squawk": "0723",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "MAD",
-        "arr": "JFK",
-        "airline": "DAL"
-    }, {
-        "hex": "ad5501",
-        "flight": "N9582D",
-        "lat": 44.3333,
-        "lon": -69.4169,
-        "altitude": 4600,
-        "track": 305,
-        "speed": 96,
-        "squawk": "0000",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "ISS",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "a35563",
-        "flight": "N31377",
-        "lat": 44.0435,
-        "lon": -69.245,
-        "altitude": 1950,
-        "track": 239,
-        "speed": 116,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "RKD",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "aa3d97",
-        "flight": "N759XT",
-        "lat": 44.0163,
-        "lon": -69.0772,
-        "altitude": 750,
-        "track": 51,
-        "speed": 125,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "ab9a92",
-        "flight": "N847HJ",
-        "lat": 44.3349,
-        "lon": -69.0485,
-        "altitude": 3000,
-        "track": 128,
-        "speed": 150,
-        "squawk": "0267",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "a9bb94",
-        "flight": "N726TW",
-        "lat": 45.5377,
-        "lon": -68.837,
-        "altitude": 3375,
-        "track": 45,
-        "speed": 178,
-        "squawk": "1200",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "",
-        "arr": "",
-        "airline": ""
-    }, {
-        "hex": "a86558",
-        "flight": "N640BD",
-        "lat": 44.7959,
-        "lon": -68.8114,
-        "altitude": 0,
-        "track": 313,
-        "speed": 81,
-        "squawk": "5345",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "BED",
-        "arr": "BGR",
-        "airline": ""
-    }, {
-        "hex": "4006c1",
-        "flight": "BAW25C",
-        "lat": 44.4605,
-        "lon": -68.7541,
-        "altitude": 40000,
-        "track": 219,
-        "speed": 440,
-        "squawk": "2545",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "LHR",
-        "arr": "MCO",
-        "airline": "BAW"
-    }, {
-        "hex": "a16273",
-        "flight": "DAL169",
-        "lat": 45.1108,
-        "lon": -68.3148,
-        "altitude": 36025,
-        "track": 219,
-        "speed": 414,
-        "squawk": "2536",
-        "seen": 4,
-        "seen_pos": 4,
-        "rssi": 0,
-        "messages": 1,
-        "internet": true,
-        "dep": "BCN",
-        "arr": "JFK",
-        "airline": "DAL"
-    }]
-}
\ No newline at end of file
+{"now":1642388697411.588,"messages":0,"aircraft":[{"hex":"ab649a","flight":"DAL1","lat":43.781,"lon":-64.843,"altitude":35000,"track":68,"speed":597,"squawk":"2762","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"LHR","airline":"DAL"},{"hex":"c02254","flight":"CFMZZ","lat":45.936,"lon":-64.36,"altitude":3600,"track":296,"speed":90,"squawk":"4344","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"c01a51","flight":"CFJZC","lat":46.155,"lon":-64.055,"altitude":2500,"track":89,"speed":120,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"a899a2","flight":"UAL14","lat":44.012,"lon":-64.003,"altitude":35000,"track":69,"speed":593,"squawk":"3311","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"LHR","airline":"UAL"},{"hex":"a2a2e6","flight":"UAL106","lat":46.709,"lon":-63.816,"altitude":35000,"track":53,"speed":559,"squawk":"2167","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"IAD","arr":"MUC","airline":"UAL"},{"hex":"c064df","flight":"CGMFE","lat":46.443,"lon":-63.741,"altitude":7600,"track":115,"speed":140,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"76cdc2","flight":"SIA25","lat":44.957,"lon":-63.558,"altitude":35000,"track":61,"speed":576,"squawk":"1632","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"FRA","airline":"SIA"},{"hex":"c022a5","flight":"CFNDC","lat":44.844,"lon":-63.5,"altitude":1500,"track":180,"speed":60,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"YQM","arr":"","airline":"MFC"},{"hex":"abd018","flight":"DAL172","lat":45.913,"lon":-63.396,"altitude":35000,"track":60,"speed":552,"squawk":"2603","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"MXP","airline":"DAL"},{"hex":"a8e4e9","flight":"UAL918","lat":46.192,"lon":-62.721,"altitude":36075,"track":61,"speed":547,"squawk":"3676","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"IAD","arr":"LHR","airline":"UAL"},{"hex":"a7a08a","flight":"UAL70","lat":47.12,"lon":-62.136,"altitude":35000,"track":59,"speed":535,"squawk":"2707","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"AMS","airline":"UAL"},{"hex":"4005b9","flight":"BAW176A","lat":45.592,"lon":-61.836,"altitude":37000,"track":63,"speed":550,"squawk":"7132","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"LHR","airline":"BAW"},{"hex":"a8c88f","flight":"UAL134","lat":44.287,"lon":-61.476,"altitude":35000,"track":81,"speed":590,"squawk":"1607","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"ZRH","airline":"UAL"},{"hex":"406f72","flight":"BAW66V","lat":43.918,"lon":-60.231,"altitude":41000,"track":78,"speed":551,"squawk":"7116","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"PHL","arr":"LHR","airline":"BAW"},{"hex":"a05629","flight":"UAL57","lat":44.233,"lon":-58.717,"altitude":35000,"track":60,"speed":585,"squawk":"3065","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"EWR","arr":"CDG","airline":"UAL"},{"hex":"4067f8","flight":"TOM023","lat":47.159,"lon":-57.027,"altitude":37000,"track":66,"speed":533,"squawk":"6140","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"CUN","arr":"LGW","airline":"TUI"},{"hex":"151d48","flight":"AZV556","lat":44.144,"lon":-57.01,"altitude":33000,"track":42,"speed":500,"squawk":"0000","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"VRA","arr":"VKO","airline":"AZV"},{"hex":"4075b4","flight":"VIR138M","lat":47.21,"lon":-56.855,"altitude":38000,"track":66,"speed":528,"squawk":"7137","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"LHR","airline":"VIR"},{"hex":"394a14","flight":"AFR007","lat":44.493,"lon":-55.885,"altitude":35000,"track":83,"speed":560,"squawk":"7103","seen":9,"seen_pos":9,"rssi":0,"messages":1,"internet":true,"dep":"JFK","arr":"CDG","airline":"AFR"}]}
\ No newline at end of file
diff --git a/gmap.html b/gmap.html
index a3ef2b8..ad5e6d6 100644
--- a/gmap.html
+++ b/gmap.html
@@ -187,6 +187,11 @@
         </div>
     </div>
     <div id="radar_page">
+        <div id="sidebar_open_button" onclick="expandSidebar()">
+            <span id="expand_icon" class="material-icons">
+                arrow_back_ios
+            </span>
+        </div>
         <div id="nav_bar">
             <!-- Raised button with ripple -->
             <button id="home_button" class="mdl-button mdl-js-button mdl-button--icon"
@@ -286,6 +291,8 @@
                         <!-- dump1090_infoblock -->
 
                         <div id="selected_infoblock">
+                            <button id="lock_button" onclick="lockPlane()"
+                                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Lock</button>
                             <img src="" id="aircraft_tab_background">
 
                             <span id="aircraft_info_overlay">
@@ -309,18 +316,119 @@
                             <table style="width: 100%">
                                 <tr>
                                     <td style="text-align: left">
-                                        <b><span id="flight_airport_short_origin" style="font-size: 18px;">N/A</span></b><br>
+                                        <b><span id="flight_airport_short_origin"
+                                                style="font-size: 18px;">N/A</span></b><br>
                                         <span id="flight_airport_long_origin" style="font-size: 12px;">N/A</span><br>
                                         <span id="flight_airport_loc_origin" style="font-size: 10px;">N/A</span>
                                     </td>
                                     <td style="text-align: right">
                                         <b><span id="flight_airport_short_destination"
-                                            style="font-size: 18px;">N/A</span></b><br>
+                                                style="font-size: 18px;">N/A</span></b><br>
                                         <span id="flight_airport_long_destination"
                                             style="font-size: 12px;">N/A</span><br>
                                         <span id="flight_airport_loc_destination" style="font-size: 10px;">N/A</span>
                                     </td>
                                 </tr>
+                            </table>
+                            
+                            <b><span id="selected_position">n/a</span></b>
+                            <table style="width: 100%">
+                                <tr>
+                                    <td style="text-align: left">Altitude: <span id="selected_altitude"></span></td>
+                                    <td></td>
+                                    <td style="text-align: right">RSSI: <span id="selected_rssi">n/a</span></td>
+                                </tr>
+                                <tr>
+                                    <td style="text-align: left">Speed: <span id="selected_speed">n/a</span></td>
+                                    <td></td>
+                                    <td style="text-align: right">Squawk: <span id="selected_squawk"></span></td>
+                                </tr>
+                                <tr>
+                                    <td style="text-align: left">Track: <span id="selected_track">n/a</span></td>
+                                    <td></td>
+                                    <td style="text-align: right">Last seen: <span id="selected_seen">n/a</span></td>
+                                </tr>
+                            </table>
+                            <!-- Start rest of information-->
+                            <div style="display: none;">
+                                <span id="selected_registration"></span>
+                                <span id="selected_follow" onclick="toggleFollowSelected();"
+                                    class="pointer">&#x21D2;</span>
+
+                                <span id="selected_icaotype"></span>
+                                <span id="selected_emergency"></span>
+                                <a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post'));
+                                    return false;">
+                                    <span id="selected_icao"></span>
+                                </a>
+                            </div>
+                            </table>
+
+                        </div>
+                        <!-- selected_infoblock -->
+                        <table id="tableinfo" style="width: 100%">
+                            <thead id="planes_table">
+                                <tr>
+                                    <td id="icao" onclick="sortByICAO();">ICAO</td>
+                                    <td id="flag" onclick="sortByCountry()">
+                                        <!-- column for flag image -->
+                                    </td>
+                                    <td id="flight" onclick="sortByFlight();">Flight</td>
+                                    <td id="squawk" onclick="sortBySquawk();" style="text-align: center">Squawk</td>
+                                    <td id="altitude" onclick="sortByAltitude();" style="text-align: center">
+                                        Altitude
+                                    </td>
+                                    <td id="speed" onclick="sortBySpeed();" style="text-align: center">Speed</td>
+                                    <td id="distance" onclick="sortByDistance();" style="text-align: center">
+                                        Distance
+                                    </td>
+                                    <td id="track" onclick="sortByTrack();" style="text-align: center">Track</td>
+                                    <td id="msgs" onclick="sortByMsgs();" style="text-align: center">Msgs</td>
+                                    <td id="seen" onclick="sortBySeen();" style="text-align: center">Age</td>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr id="plane_row_template" class="plane_table_row hidden">
+                                    <td>ICAO</td>
+                                    <td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
+                                    <td>FLIGHT</td>
+                                    <td style="text-align: center">SQUAWK</td>
+                                    <td style="text-align: center">ALTITUDE</td>
+                                    <td style="text-align: center">SPEED</td>
+                                    <td style="text-align: center">DISTANCE</td>
+                                    <td style="text-align: center">TRACK</td>
+                                    <td style="text-align: center">MSGS</td>
+                                    <td style="text-align: center">SEEN</td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+
+                        <!-- planes_table -->
+
+                    </div>
+                    <div id="radar_flight_tab" style="display: none;">
+                        <div id="radar_flight_info" style="display: none;"><br>
+                            <span id="flight_airline" style="font-size: 28px;">Example Airline</span><span
+                                id="flight_flightnum" style="font-size: 28px;">Number</span><span
+                                style="font-size: 28px;">&nbsp;(<span id="flight_flighticaonum"></span>)</span>
+                            <br><br>
+                            <i><span id="flight_status" style="font-size: 20px;">En Route</span></i><br><br>
+                            <table style="width: 100%">
+                                <tr>
+                                    <td style="text-align: left">
+                                        <span id="flight_airport_short_origin" style="font-size: 30px;">N/A</span><br>
+                                        <span id="flight_airport_long_origin" style="font-size: 16px;">N/A</span><br>
+                                        <span id="flight_airport_loc_origin" style="font-size: 14px;">N/A</span>
+                                    </td>
+                                    <td style="text-align: right">
+                                        <span id="flight_airport_short_destination"
+                                            style="font-size: 30px;">N/A</span><br>
+                                        <span id="flight_airport_long_destination"
+                                            style="font-size: 16px;">N/A</span><br>
+                                        <span id="flight_airport_loc_destination" style="font-size: 14px;">N/A</span>
+                                    </td>
+                                </tr>
                             </table><br>
                             <div id="flight_progress_div">
                                 <div id="flight_progress" class="mdl-progress mdl-js-progress"></div><br>
@@ -347,426 +455,266 @@
                                         </td>
                                     </tr>
                                 </table>
-                                <div style="display: none">
-                                    <table style="width: 100%">
-                                        <tr class="infoblock_heading">
-                                            <td colspan="2">
-                                                <span id="selected_registration"></span>
-                                                <span id="selected_follow" onclick="toggleFollowSelected();"
-                                                    class="pointer">&#x21D2;</span>
-
-                                                <span id="selected_flag">
-                                                    <img style="width: 20px; height=12px" src="about:blank" alt="Flag">
-                                                </span>
-
-                                                <a href="http://www.airframes.org/"
-                                                    onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
-                                                    <span id="selected_icao"></span>
-                                                </a>
-
-                                                <span id="selected_icaotype"></span>
-                                                <span id="selected_emergency"></span>
-                                            </td>
-                                        </tr>
-
-                                        <tr id="infoblock_country" class="infoblock_body">
-                                            <td colspan="2">Country of registration: <span
-                                                    id="selected_country">n/a</span>
-                                            </td>
-                                        </tr>
-
-                                        <tr class="infoblock_body">
-                                            <td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
-                                            <td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
-                                        </tr>
-
-                                        <tr class="infoblock_body">
-                                            <td>Speed: <span id="selected_speed">n/a</span></td>
-                                            <td>RSSI: <span id="selected_rssi">n/a</span></td>
-                                        </tr>
-
-                                        <tr class="infoblock_body">
-                                            <td>Track: <span id="selected_track">n/a</span></td>
-                                            <td>Last seen: <span id="selected_seen">n/a</span></td>
-                                        </tr>
-
-                                        <tr class="infoblock_body">
-                                            <td colspan="2">Position: <span id="selected_position">n/a</span></td>
-                                        </tr>
-
-                                        <tr class="infoblock_body">
-                                            <td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span>
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </div>
-                                <button id="lock_button" onclick="lockPlane()"
-                                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Lock</button>
                             </div>
-                            <!-- selected_infoblock -->
-
-
-                            <table id="tableinfo" style="width: 100%">
-                                <thead id="planes_table">
-                                    <tr>
-                                        <td id="icao" onclick="sortByICAO();">ICAO</td>
-                                        <td id="flag" onclick="sortByCountry()">
-                                            <!-- column for flag image -->
-                                        </td>
-                                        <td id="flight" onclick="sortByFlight();">Flight</td>
-                                        <td id="squawk" onclick="sortBySquawk();" style="text-align: center">Squawk</td>
-                                        <td id="altitude" onclick="sortByAltitude();" style="text-align: center">
-                                            Altitude
-                                        </td>
-                                        <td id="speed" onclick="sortBySpeed();" style="text-align: center">Speed</td>
-                                        <td id="distance" onclick="sortByDistance();" style="text-align: center">
-                                            Distance
-                                        </td>
-                                        <td id="track" onclick="sortByTrack();" style="text-align: center">Track</td>
-                                        <td id="msgs" onclick="sortByMsgs();" style="text-align: center">Msgs</td>
-                                        <td id="seen" onclick="sortBySeen();" style="text-align: center">Age</td>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr id="plane_row_template" class="plane_table_row hidden">
-                                        <td>ICAO</td>
-                                        <td><img style="width: 20px; height=12px" src="about:blank" alt="Flag"></td>
-                                        <td>FLIGHT</td>
-                                        <td style="text-align: center">SQUAWK</td>
-                                        <td style="text-align: center">ALTITUDE</td>
-                                        <td style="text-align: center">SPEED</td>
-                                        <td style="text-align: center">DISTANCE</td>
-                                        <td style="text-align: center">TRACK</td>
-                                        <td style="text-align: center">MSGS</td>
-                                        <td style="text-align: center">SEEN</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-
-
-                            <!-- planes_table -->
-
+                            <button class="mdl-button mdl-js-button mdl-button--raised" id="img_button">
+                                More Flight Information
+                            </button>
                         </div>
-                        <div id="radar_flight_tab" style="display: none;">
-                            <div id="radar_flight_info" style="display: none;"><br>
-                                <span id="flight_airline" style="font-size: 28px;">Example Airline</span><span
-                                    id="flight_flightnum" style="font-size: 28px;">Number</span><span
-                                    style="font-size: 28px;">&nbsp;(<span id="flight_flighticaonum"></span>)</span>
-                                <br><br>
-                                <i><span id="flight_status" style="font-size: 20px;">En Route</span></i><br><br>
-                                <table style="width: 100%">
-                                    <tr>
-                                        <td style="text-align: left">
-                                            <span id="flight_airport_short_origin"
-                                                style="font-size: 30px;">N/A</span><br>
-                                            <span id="flight_airport_long_origin"
-                                                style="font-size: 16px;">N/A</span><br>
-                                            <span id="flight_airport_loc_origin" style="font-size: 14px;">N/A</span>
-                                        </td>
-                                        <td style="text-align: right">
-                                            <span id="flight_airport_short_destination"
-                                                style="font-size: 30px;">N/A</span><br>
-                                            <span id="flight_airport_long_destination"
-                                                style="font-size: 16px;">N/A</span><br>
-                                            <span id="flight_airport_loc_destination"
-                                                style="font-size: 14px;">N/A</span>
-                                        </td>
-                                    </tr>
-                                </table><br>
-                                <div id="flight_progress_div">
-                                    <div id="flight_progress" class="mdl-progress mdl-js-progress"></div><br>
-                                    <table style="width: 100%">
-                                        <tr>
-                                            <td style="text-align: left;" id="flight_depart_time"
-                                                style="font-size: 10px;width: 50%;">
-                                                Depart Time
-                                            </td>
-                                            <td style="text-align: right;" id="flight_arrival_time"
-                                                style="font-size: 10px;width: 50%;">
-                                                Arrival Time
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td style="text-align: left;" style="font-size: 10px;">
-                                                Terminal / Gate:<br><span id="flight_depart_terminal"></span><span
-                                                    id="flight_depart_gate"></span>
-                                            </td>
+                        <div id="radar_flight_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
+                        </div>
+                        <div id="image_modal" class="modal">
 
-                                            <td style="text-align: right;" style="font-size: 10px;">
-                                                Terminal / Gate:<br><span id="flight_arrival_terminal"></span><span
-                                                    id="flight_arrival_gate"></span>
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </div>
-                                <button class="mdl-button mdl-js-button mdl-button--raised" id="img_button">
-                                    More Flight Information
-                                </button>
-                            </div>
-                            <div id="radar_flight_loading"
-                                class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
-                            </div>
-                            <div id="image_modal" class="modal">
-
-                                <!-- Modal content -->
-                                <div class="modal-content">
-                                    <span class="close" id="close_modal2">&times;</span>
-                                    <span id="modal2_title">Additional Flight Information</span><br>
-                                    <img id="progress_image" src="">
-                                    <div id="additional_info_hidden">
-                                        <div class="progress-circle" id="flight_progress_circle">
-                                            <span id="flight_percentage_spinner"></span>
-                                            <div class="left-half-clipper">
-                                                <div class="first50-bar"></div>
-                                                <div class="value-bar"></div>
-                                            </div>
+                            <!-- Modal content -->
+                            <div class="modal-content">
+                                <span class="close" id="close_modal2">&times;</span>
+                                <span id="modal2_title">Additional Flight Information</span><br>
+                                <img id="progress_image" src="">
+                                <div id="additional_info_hidden">
+                                    <div class="progress-circle" id="flight_progress_circle">
+                                        <span id="flight_percentage_spinner"></span>
+                                        <div class="left-half-clipper">
+                                            <div class="first50-bar"></div>
+                                            <div class="value-bar"></div>
                                         </div>
-                                        <span id="flight_progress_title">Total Flight Progress</span>
-                                        <span id="flight_progress_remaining_title">Hours Remaining</span>
-                                        <span id="flight_progress_remaining_amount"></span>
-                                        <span id="flight_progress_elapsed_title">Time Elapsed</span>
-                                        <span id="flight_progress_elapsed_amount"></span>
-                                        <span id="flight_progress_time_title">Total Flight Time</span>
-                                        <span id="flight_progress_time_amount"></span>
                                     </div>
+                                    <span id="flight_progress_title">Total Flight Progress</span>
+                                    <span id="flight_progress_remaining_title">Hours Remaining</span>
+                                    <span id="flight_progress_remaining_amount"></span>
+                                    <span id="flight_progress_elapsed_title">Time Elapsed</span>
+                                    <span id="flight_progress_elapsed_amount"></span>
+                                    <span id="flight_progress_time_title">Total Flight Time</span>
+                                    <span id="flight_progress_time_amount"></span>
                                 </div>
-
                             </div>
+
                         </div>
-                        <div id="radar_aircraft_tab" style="display: none;">
-                            <div id="radar_aircraft_info" style="display: none;">
-                                <img src="" id="aircraft_image1"><br><br>
-                                <span id="aircraft_name_css"><span id="aircraft_name"></span> </span><br><br>
-                                <table style="width: 100%">
-                                    <tr>
-                                        <th style="text-align: center">Engine Type</th>
-                                        <th style="text-align: center">Engine Count</th>
-                                        <th style="text-align: center">Plane Age</th>
-                                        <th style="text-align: center">Plane Status</th>
-                                    </tr>
-                                    <tr>
-                                        <td style="text-align: center" id="aircraft_engine"></td>
-                                        <td style="text-align: center" id="aircraft_engine_count"></td>
-                                        <td style="text-align: center" id="aircraft_age"></td>
-                                        <td style="text-align: center" id="aircraft_status"></td>
-                                    </tr>
-                                    <tr>
-                                        <th style="text-align: center">Rollout Date</th>
-                                        <td></td>
-                                        <td></td>
-                                        <th style="text-align: center">First Flight</th>
-                                    </tr>
-                                    <tr>
-                                        <td style="text-align: center" id="aircraft_first_flight"></td>
-                                        <td></td>
-                                        <td></td>
-                                        <td style="text-align: center" id="aircraft_rollout_date"></td>
-                                    </tr>
+                    </div>
+                    <div id="radar_aircraft_tab" style="display: none;">
+                        <div id="radar_aircraft_info" style="display: none;">
+                            <img src="" id="aircraft_image1"><br><br>
+                            <span id="aircraft_name_css"><span id="aircraft_name"></span> </span><br><br>
+                            <table style="width: 100%">
+                                <tr>
+                                    <th style="text-align: center">Engine Type</th>
+                                    <th style="text-align: center">Engine Count</th>
+                                    <th style="text-align: center">Plane Age</th>
+                                    <th style="text-align: center">Plane Status</th>
+                                </tr>
+                                <tr>
+                                    <td style="text-align: center" id="aircraft_engine"></td>
+                                    <td style="text-align: center" id="aircraft_engine_count"></td>
+                                    <td style="text-align: center" id="aircraft_age"></td>
+                                    <td style="text-align: center" id="aircraft_status"></td>
+                                </tr>
+                                <tr>
+                                    <th style="text-align: center">Rollout Date</th>
+                                    <td></td>
+                                    <td></td>
+                                    <th style="text-align: center">First Flight</th>
+                                </tr>
+                                <tr>
+                                    <td style="text-align: center" id="aircraft_first_flight"></td>
+                                    <td></td>
+                                    <td></td>
+                                    <td style="text-align: center" id="aircraft_rollout_date"></td>
+                                </tr>
 
-                                </table>
-                                <button class="mdl-button mdl-js-button mdl-button--raised" id="aircraft_button">
-                                    More Information
-                                </button>
-                            </div>
-                            <div id="radar_aircraft_loading"
-                                class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
-                            <div id="aircraft_modal" class="modal">
-
-                                <!-- Modal content -->
-                                <div class="modal-content">
-                                    <span class="close" id="close_modal3">&times;</span>
-                                    <span id="modal3_title">Additional Aircraft Information</span><br>
-                                    <img src="" id="aircraft_image1-1">
-                                    <a onmousedown="setBigImage('aircraft_image2')"><img src=""
-                                            id="aircraft_image2"></a>
-                                    <a onmousedown="setBigImage('aircraft_image3')"><img src=""
-                                            id="aircraft_image3"></a>
-                                    <a onmousedown="setBigImage('aircraft_image4')"><img src=""
-                                            id="aircraft_image4"></a>
-                                    <span id="aircraft_name_title">Aircraft Name:</span>
-                                    <span id="aircraft_name_addl"></span>
-                                    <span id="aircraft_model_title">Aircraft Model:</span>
-                                    <span id="aircraft_model"></span>
-                                    <span id="aircraft_registration_title">Aircraft Registration:</span>
-                                    <span id="aircraft_registration"></span>
-
-                                </div>
-
-                            </div>
+                            </table>
+                            <button class="mdl-button mdl-js-button mdl-button--raised" id="aircraft_button">
+                                More Information
+                            </button>
                         </div>
+                        <div id="radar_aircraft_loading"
+                            class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
+                        <div id="aircraft_modal" class="modal">
 
+                            <!-- Modal content -->
+                            <div class="modal-content">
+                                <span class="close" id="close_modal3">&times;</span>
+                                <span id="modal3_title">Additional Aircraft Information</span><br>
+                                <img src="" id="aircraft_image1-1">
+                                <a onmousedown="setBigImage('aircraft_image2')"><img src="" id="aircraft_image2"></a>
+                                <a onmousedown="setBigImage('aircraft_image3')"><img src="" id="aircraft_image3"></a>
+                                <a onmousedown="setBigImage('aircraft_image4')"><img src="" id="aircraft_image4"></a>
+                                <span id="aircraft_name_title">Aircraft Name:</span>
+                                <span id="aircraft_name_addl"></span>
+                                <span id="aircraft_model_title">Aircraft Model:</span>
+                                <span id="aircraft_model"></span>
+                                <span id="aircraft_registration_title">Aircraft Registration:</span>
+                                <span id="aircraft_registration"></span>
+
+                            </div>
+
+                        </div>
                     </div>
 
                 </div>
-                <div id="metar_container" style="display: none">
-                    <div id="metar_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
-                    <div id="metar_data" style="display: none">
-                        <h5>Local METAR Reporting Station:</h5>
-                        <h3 id="station_id"></h3>
-                        <h5 id="station_name"></h5>
-                        <h6 id="full_metar"><br><br><span id="updated_time"></span></h6>
-                        <table style="width: 100%">
-                            <tbody>
-                                <tr>
-                                    <td style="text-align: center">
-                                        <h4><span id="temperature"></span> &#8457</h4>
-                                        Temperature
-                                    </td>
-                                    <td style="text-align: center">
-                                        <h4 id="altimeter"></h4>
-                                        Altimeter
-                                    </td>
-                                    <td style="text-align: center">
-                                        <h4 id="visibility"></h4>
-                                        Visibility
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td style="text-align: center">
-                                        <h4 id="wind_speed"></h4>
-                                        Wind Speed
-                                    </td>
-                                    <td style="text-align: center">
-                                        <h4 id="wind_direction"></h4>
-                                        Wind Direction
-                                    </td>
-                                    <td style="text-align: center">
-                                        <h4 id="wind_gusts"></h4>
-                                        Wind Gusts
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td style="text-align: center">
-                                        <h4><span id="dew_point"></span> &#8457</h4>
-                                        Dew Point
-                                    </td>
-                                    <td style="text-align: center">
-                                        <h4 id="rules"></h4>
-                                        Flight Rules
-                                    </td>
-                                    <td style="text-align: center">
-                                        <h4 id="size"></h4>
-                                        Airport Size
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-                <div id="atc_container" style="display: none">
-                    <div id="atc_radio">
-                        <h4 id="atc_title">No feed selected</h4>
-                        <span id="atc_location" style="display: none;"></span><br id="atc_spacer"
-                            style="display: none;"><br id="atc_spacer" style="display: none;">
-                        <audio id="player">
-                            <source type="audio/mpeg">
-                        </audio>
-                        <button id="audioControl" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
-                            onclick="playPause()" style="display: none;">
-                            <i class="material-icons" id="audioControl_icon">pause</i>
-                        </button>
-                        <hr>
-                    </div>
-
-                    <div id="atc_selector">
-
-                    </div>
-                </div>
 
             </div>
-            <div id="sidebar_open_button" onclick="expandSidebar()">
-                <span id="expand_icon" class="material-icons">
-                    arrow_back_ios
-                </span>
-            </div>
-            <!-- sidebar_container -->
-
-            <div id="SpecialSquawkWarning" class="hidden">
-                <b>Squawk 7x00 is reported and shown.</b><br> This is most likely an error in receiving or decoding.<br>
-                Please do not call the local authorities, they already know about it if it is a valid squawk.
-            </div>
-
-            <div id="update_error" class="hidden">
-                <b>Problem fetching data from dump1090.</b><br>
-                <span id="update_error_detail"></span><br> The displayed map data will be out of date.
-            </div>
-
-            <div id="container_splitter"></div>
-            <div id="power_modal" class="modal">
-
-                <!-- Modal content -->
-                <div class="modal-content">
-                    Power Options
-                    <table id="power_table">
-                        <tr>
-                            <td>
-                                <button onclick="sendCMD('shutdown')"
-                                    class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
-                                    <i class="material-icons">power_settings_new</i>
-                                </button>
-                            </td>
-                            <td>
-                                <button onclick="sendCMD('restart')"
-                                    class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
-                                    <i class="material-icons">refresh</i>
-                                </button>
-                            </td>
-                            <td>
-                                <button id="close_modal4"
-                                    class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
-                                    <i class="material-icons">close</i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>Shutdown</td>
-                            <td>Restart</td>
-                            <td>Exit</td>
-                        </tr>
+            <div id="metar_container" style="display: none">
+                <div id="metar_loading" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
+                <div id="metar_data" style="display: none">
+                    <h5>Local METAR Reporting Station:</h5>
+                    <h3 id="station_id"></h3>
+                    <h5 id="station_name"></h5>
+                    <h6 id="full_metar"><br><br><span id="updated_time"></span></h6>
+                    <table style="width: 100%">
+                        <tbody>
+                            <tr>
+                                <td style="text-align: center">
+                                    <h4><span id="temperature"></span> &#8457</h4>
+                                    Temperature
+                                </td>
+                                <td style="text-align: center">
+                                    <h4 id="altimeter"></h4>
+                                    Altimeter
+                                </td>
+                                <td style="text-align: center">
+                                    <h4 id="visibility"></h4>
+                                    Visibility
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="text-align: center">
+                                    <h4 id="wind_speed"></h4>
+                                    Wind Speed
+                                </td>
+                                <td style="text-align: center">
+                                    <h4 id="wind_direction"></h4>
+                                    Wind Direction
+                                </td>
+                                <td style="text-align: center">
+                                    <h4 id="wind_gusts"></h4>
+                                    Wind Gusts
+                                </td>
+                            </tr>
+                            <tr>
+                                <td style="text-align: center">
+                                    <h4><span id="dew_point"></span> &#8457</h4>
+                                    Dew Point
+                                </td>
+                                <td style="text-align: center">
+                                    <h4 id="rules"></h4>
+                                    Flight Rules
+                                </td>
+                                <td style="text-align: center">
+                                    <h4 id="size"></h4>
+                                    Airport Size
+                                </td>
+                            </tr>
+                        </tbody>
                     </table>
                 </div>
-
             </div>
-        </div>
-        <div id="graphs_page" style="display: none;height: 100%;">
-            <div id="nav_bar">
-                <!-- Raised button with ripple -->
-                <button id="home_button" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
-                    style="width: 40px; height: 40px; min-width: initial;" onclick="goHome()">
-                    <i class="material-icons">home</i>
-                </button>
-                <select id="graphs_time" name="Times" onchange="changeGraphsTime()">
-                    <option value="2h">2 Hours</option>
-                    <option value="8h">8 Hours</option>
-                    <option value="24h">1 Day</option>
-                    <option value="7d">1 Week</option>
-                    <option value="14d">2 Weeks</option>
-                    <option value="30d">1 Month</option>
-                    <option value="90d">3 Months</option>
-                    <option value="180d">6 Months</option>
-                    <option value="365d">1 Year</option>
-                    <option value="730d">2 Years</option>
-                    <option value="1095d">3 Years</option>
+            <div id="atc_container" style="display: none">
+                <div id="atc_radio">
+                    <h4 id="atc_title">No feed selected</h4>
+                    <span id="atc_location" style="display: none;"></span><br id="atc_spacer" style="display: none;"><br
+                        id="atc_spacer" style="display: none;">
+                    <audio id="player">
+                        <source type="audio/mpeg">
+                    </audio>
+                    <button id="audioControl" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
+                        onclick="playPause()" style="display: none;">
+                        <i class="material-icons" id="audioControl_icon">pause</i>
+                    </button>
+                    <hr>
+                </div>
 
-                </select>
-            </div>
-            <div id="graphs_body">
-                <img src="" id="graphs_holder" class="graphs"><br>
-                <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_back_graphs"
-                    onclick="changeGraph(0)" disabled>
-                    <i class="material-icons">arrow_back_ios</i>
-                </button>
-                <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_forward_graphs"
-                    onclick="changeGraph(1)">
-                    <i class="material-icons">arrow_forward_ios</i>
-                </button>
+                <div id="atc_selector">
 
+                </div>
             </div>
+
         </div>
-        <div id="no-updates-snackbar" class="mdl-js-snackbar mdl-snackbar">
-            <div class="mdl-snackbar__text"></div>
-            <button class="mdl-snackbar__action" type="button"></button>
+        <!-- sidebar_container -->
+
+        <div id="SpecialSquawkWarning" class="hidden">
+            <b>Squawk 7x00 is reported and shown.</b><br> This is most likely an error in receiving or decoding.<br>
+            Please do not call the local authorities, they already know about it if it is a valid squawk.
         </div>
+
+        <div id="update_error" class="hidden">
+            <b>Problem fetching data from dump1090.</b><br>
+            <span id="update_error_detail"></span><br> The displayed map data will be out of date.
+        </div>
+
+        <div id="container_splitter"></div>
+        <div id="power_modal" class="modal">
+
+            <!-- Modal content -->
+            <div class="modal-content">
+                Power Options
+                <table id="power_table">
+                    <tr>
+                        <td>
+                            <button onclick="sendCMD('shutdown')"
+                                class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
+                                <i class="material-icons">power_settings_new</i>
+                            </button>
+                        </td>
+                        <td>
+                            <button onclick="sendCMD('restart')"
+                                class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
+                                <i class="material-icons">refresh</i>
+                            </button>
+                        </td>
+                        <td>
+                            <button id="close_modal4"
+                                class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
+                                <i class="material-icons">close</i>
+                            </button>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Shutdown</td>
+                        <td>Restart</td>
+                        <td>Exit</td>
+                    </tr>
+                </table>
+            </div>
+
+        </div>
+    </div>
+    <div id="graphs_page" style="display: none;height: 100%;">
+        <div id="nav_bar">
+            <!-- Raised button with ripple -->
+            <button id="home_button" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"
+                style="width: 40px; height: 40px; min-width: initial;" onclick="goHome()">
+                <i class="material-icons">home</i>
+            </button>
+            <select id="graphs_time" name="Times" onchange="changeGraphsTime()">
+                <option value="2h">2 Hours</option>
+                <option value="8h">8 Hours</option>
+                <option value="24h">1 Day</option>
+                <option value="7d">1 Week</option>
+                <option value="14d">2 Weeks</option>
+                <option value="30d">1 Month</option>
+                <option value="90d">3 Months</option>
+                <option value="180d">6 Months</option>
+                <option value="365d">1 Year</option>
+                <option value="730d">2 Years</option>
+                <option value="1095d">3 Years</option>
+
+            </select>
+        </div>
+        <div id="graphs_body">
+            <img src="" id="graphs_holder" class="graphs"><br>
+            <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_back_graphs"
+                onclick="changeGraph(0)" disabled>
+                <i class="material-icons">arrow_back_ios</i>
+            </button>
+            <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="arrow_forward_graphs"
+                onclick="changeGraph(1)">
+                <i class="material-icons">arrow_forward_ios</i>
+            </button>
+
+        </div>
+    </div>
+    <div id="no-updates-snackbar" class="mdl-js-snackbar mdl-snackbar">
+        <div class="mdl-snackbar__text"></div>
+        <button class="mdl-snackbar__action" type="button"></button>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 8efc8e0..b430fa4 100644
--- a/js/script.js
+++ b/js/script.js
@@ -823,7 +823,7 @@ function refreshSelected() {
     } else {
         var mlat_bit = (selected.position_from_mlat ? "MLAT: " : "");
         if (selected.seen_pos > 1) {
-            $('#selected_position').text(mlat_bit + format_latlng(selected.position) + " (" + selected.seen_pos.toFixed(1) + "s)");
+            $('#selected_position').text("("+mlat_bit + format_latlng(selected.position)+")");
         } else {
             $('#selected_position').text(mlat_bit + format_latlng(selected.position));
         }