<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry"></script>
		<script type="text/javascript" src="config.js"></script>
		<script type="text/javascript" src="planeObject.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="coolclock/excanvas.js"></script>
		<script type="text/javascript" src="coolclock/coolclock.js"></script>
		<script type="text/javascript" src="coolclock/moreskins.js"></script>
        <title>DUMP1090</title>
	</head>
	<body onload="initialize()">
		<div id="dialog-modal" title="Basic modal dialog" style="display:none;">
			<p>The settings feature is coming soon. Keep checking GitHub.</p>
		</div>
		<div id="map_container">
			<div id="map_canvas"></div>
		</div>
		<div id="sidebar_container">
			<div id="sidebar_canvas">
				<div id="timestamps" style="align: center">
					<table width="100%">
                                          <tr>
					    <td align="center"> <canvas id="utcclock"></canvas> </td>
					    <td align="center"> <canvas id="receiverclock"></canvas> </td>
					  </tr>

                                          <tr>
					    <td align="center">UTC</td>
					    <td align="center">Last Update</td>
					  </tr>
                                        </table>
				</div>
				<div id="sudo_buttons">
					<table width="100%">
                                          <tr>
					    <td width="150" style="text-align: center;" class="pointer">
					      [ <span onclick="resetMap();">Reset Map</span> ]
					    </td>
					  </tr>
                                        </table>
				</div>

				<div id="dump1090_infoblock">
                                  <table width="100%">
                                    <tr class="infoblock_heading">
                                      <td>
                                        <b>DUMP1090</b>
                                      </td>
                                      <td align="right">
                                        <span id="dump1090_version"></span>
                                      </td>
                                    </tr>

                                    <tr class="infoblock_body">
                                      <td width="50%">&nbsp;</td>                                      
                                      <td width="50%" align="right"><a href="https://github.com/mutability/dump1090" target="_blank">[GitHub]</a></td>
                                    </tr>

                                    <tr class="infoblock_body dim">
                                      <td>(no aircraft selected)</td>
                                      <td>&nbsp;</td>
                                    </tr>

                                    <tr class="infoblock_body">
                                      <td>&nbsp;</td>
	                              <td>&nbsp;</td>
                                    </tr>

                                    <tr class="infoblock_body">
                                      <td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td>
	                              <td>&nbsp;</td>
                                    </tr>

                                    <tr class="infoblock_body">
                                      <td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td>
                                      <td>History: <span id="dump1090_total_history">n/a</span> positions</td>
                                    </tr>
                                  </table>
                                </div>

				<div id="selected_infoblock" class="hidden">
                                  <table width="100%">
                                    <tr class="infoblock_heading">
                                      <td colspan="2">
                                        <b> <span id="selected_callsign">n/a</span></b>
                                        <span id="selected_emergency"></span>
                                        <span id="selected_links">
                                          <a id="selected_fr24_link" href="" target="_blank">[FR24]</a>
                                          <a id="selected_flightstats_link" href="" target="_blank">[FlightStats]</a>
                                          <a id="selected_flightaware_link" href="" target="_blank">[FlightAware]</a>
                                        </span>
                                      </td>
                                    </tr>

                                    <tr class="infoblock_body">
                                      <td width="50%">Altitude: <span id="selected_altitude"></span></td>
                                      <td width="50%">Squawk: <span id="selected_squawk"></span></td>
                                    </tr>

                                    <tr class="infoblock_body">
                                      <td>Speed: <span id="selected_speed">n/a</span></td>
                                      <td>ICAO: <span id="selected_icao">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>
				<div id="planes_table">
	                          <table id="tableinfo" width="100%">
	                            <thead style="background-color: #BBBBBB; cursor: pointer;">
	                              <td id="icao" onclick="sortByICAO();">ICAO</td>
	                              <td id="flight" onclick="sortByFlight();">Flight</td>
	                              <td id="squawk" onclick="sortBySquawk();" align="right">Squawk</td>
                                      <td id="altitude" onclick="sortByAltitude();" align="right">Altitude</td>
	                              <td id="speed" onclick="sortBySpeed();" align="right">Speed</td>
                                      <td id="distance" onclick="sortByDistance();" align="right">Distance</td>
                                      <td id="track" onclick="sortByTrack();" align="right">Track</td>
	                              <td id="msgs" onclick="sortByMsgs();" align="right">Msgs</td>
	                              <td id="seen" onclick="sortBySeen();" align="right">Age</td>
                                    </thead>
                                    <tbody>
                                      <tr id="plane_row_template" class="plane_table_row hidden">
                                        <td>ICAO</td>
                                        <td>FLIGHT</td>
                                        <td align="right">SQUAWK</td>
                                        <td align="right">ALTITUDE</td>
                                        <td align="right">SPEED</td>
                                        <td align="right">DISTANCE</td>
                                        <td align="right">TRACK</td>
                                        <td align="right">MSGS</td>
                                        <td align="right">SEEN</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
			</div>
		</div>
		<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="container_splitter"></div>
	</body>
</html>