<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

    <title>Open Glider Network Range Tool</title>

    <!-- Bootstrap core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="{{ url_for('static', filename='files/bootstrap/bootstrap.colorpickersliders.css') }}" rel="stylesheet">

    <!-- Open Layers and OpenStreetMaps CSS -->
    <link href="{{ url_for('static', filename='files/ol/ol.css') }}" rel="stylesheet" type="text/css" /> 

    <!-- On Glide Range overriding CSS -->
    <link href="{{ url_for('static', filename='files/style.css') }}" rel="stylesheet">
	
    <script src="{{ url_for('static', filename='files/url.js') }}"></script>
    <script type="text/javascript">
      var OgR = url;
      var dLat = 52.1290225;
      var dLon = 6.8567554;   
      var dZoom = 4;   
    </script>

    <script src="{{ url_for('static', filename='files/mgrs.min.js') }}"></script>
    <script src="{{ url_for('static', filename='files/maptiles2.js') }}"></script>
    <script src="{{ url_for('static', filename='files/heatmap2.js') }}"></script>
  </head>

  <body onload="initialize()">

								   
      <div style="position: absolute; top: 0px; left: 0px; width: 100%; height:100%">
        <div id="top_row" style="position: relative; top: 0px;">

          <div class="navbar navbar-default" style="margin-bottom: 0px;">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Open Glider Network Range</a>
            </div>
  
            <div class="navbar-collapse collapse" id="topNavbar">
              <ul class="nav navbar-nav navbar-right" style="margin-bottom: 0px; margin-top: 0px;">
  
                <form class="navbar-form navbar-right" role="search" style="margin-right: 0px;">
                  <div class="xform-groupx stationlist" style="display: inline-block; vertical-align: middle;">
                    <input type="text" id="typeahead" class="form-control" placeholder="Showing All, Choose" />
                  </div>
                  <button type="submit" class="btn" onclick="getStationData($('#typeahead').val())">Goto</button>
                  <button type="submit" class="btn btn-default" onclick="getStationData('');">Show All</button>
  
                  <div class="btn-group nav ">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                      When <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#" onclick="return setWhen('today')" id="today"><span class=""></span> Today</a></li>
                      <li><a href="#" onclick="return setWhen('yesterday')" id="yesterday"><span class=""></span> Yesterday</a></li>
                      <li><a href="#" onclick="return setWhen('lastweek')" id="lastweek"><span class=""></span> Last 7 Days</a></li>
                      <li><a href="#" onclick="return setWhen('d30')" id="d30"><span class=""></span> Last 30 Days</a></li>
                      <li><a href="#" onclick="return setWhen('d60')" id="d60"><span class=""></span> Last 60 Days</a></li>
                      <li><a href="#" onclick="return setWhen('recent')" id="recent"><span class=""></span></span> Since 01/01/ThisYear</a></li>
                      <li><a href="#" onclick="return setWhen('all')" id="all"><span class=""></span> Since 31/03/2015 (V6 Air Protocol)</a></li>
                    </ul>
                  </div>
  
                  <div class="btn-group nav ">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                      What <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#" onclick="return setWhat('max')" id="max"><span class=""></span> Maximum Signal Strength</a></li>
                      <li><a href="#" onclick="return setWhat('average')" id="average"><span class=""></span> Average Signal Strength</a></li>
                      <li><a href="#" onclick="return setWhat('receivers')" id="receivers"><span class=""></span> Number of Receivers</a></li>
                      <li><a href="#" onclick="return setWhat('coverage')" id="coverage"><span class=""></span> Likely Coverage (Based on Up Receivers)</a></li>
                      <li><a href="#" onclick="return setWhat('lowres-coverage')" id="lowres-coverage"><span class=""></span> Likely Coverage (All Receivers - LowRes)</a></li>
                      <li><a href="#" onclick="return setWhat('samples')" id="samples"><span class=""></span> Number of Samples</a></li>
                      <li><a href="#" onclick="return setWhat('lowest')" id="lowest"><span class=""></span> Lowest Height</a></li>
                    </ul>
                  </div>
                  <div class="btn-group nav ">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                      Options <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#" onclick="return toggleOptions('circles')" id="circles"><span class=""></span> Show 10km circles</a></li>
                      <li><a href="#" onclick="return toggleOptions('ambiguity')" id="ambiguity"><span class=""></span> Show ambiguity squares</a></li>
                      <li><a href="#" onclick="return toggleOptions('airspace')" id="airspace"><span class=""></span> Show airspace</a></li>
                      <li><a href="#" onclick="return toggleOptions('airports')" id="airports"><span class=""></span> Show airports</a></li>
                      <li class="divider"></li>
                      <li class="dropdown-submenu pull-left">
                        <a href="#">Minimum Value Colour</a>
                        <ul class="dropdown-menu pull-left">
                          <li class="dropdown-submenu"><div id="minc"></div></li>
                        </ul>
                      </li>
                      <li class="dropdown-submenu pull-left">
                        <a href="#">Maximum Value Colour</a>
                        <ul class="dropdown-menu">
                          <li class="dropdown-submenu"><div id="maxc"></div></li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </form> 
              </ul>
            </div><!--/.nav-collapse -->
          </div>
 
          <div id="description" style="text-align: center;"></div>
        </div>
        <div id="middle-row" style="position: relative; top: 0px;">
																 
													  
										  
                <div id="map_canvas" style="position: relative; width: 100%"></div>
					
				  
				
        </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Tools Used</h4>
          </div>
          <div class="modal-body">
            <ul>
              <li>Perl - data collection</li>
              <li><a href="http://search.cpan.org/dist/Ham-APRS-FAP/">Ham-APRS-FAP</a> - APRS server connection and packet parsing</li>
              <li>BootStrap - lazy headers</li>
              <li>OGN - a bunch of gliding enthusiastas</li>
              <li>jQuery - lots of clever stuff</li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

        <div id="bottom_row" style="position: relative; bottom: 0px; overflow: hidden">
          <div style="float:left; padding-left: 5px; padding-right: 5px; overflow:hidden;">
            <a href="http://wiki.glidernet.org">Data from the Open Glider Network</a><br/>
            Copyright (c) 2014, <a href="http://www.temeletry.co.uk">Temeletry Ltd</a>,<a data-toggle="modal" href="#myModal">Credits</a>
            <div class="sponsor">


            </div>
            <span id="zoomIn_msg" style="display:none"> <b><font color="red">Zoom in to see coverage information</font></b></span>
            <span id="zoomOut_msg" style="display:none"> <b><font color="red">Zoom out to see coverage information</font></b></span>
          </div>
          <div style="float:right; padding-left: 5px; padding-right: 5px;  height: 100px; overflow-y:auto;">
            <div id="details" style="display:none;"></div>
          </div>
        </div>
      </div>			
		  

	<!-- Marker tooltip -->
    <div id="tooltip" class="tooltip"></div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="{{ url_for('static', filename='files/bootstrap/typeahead.bundle.js') }}"></script>
    <script src="{{ url_for('static', filename='files/tinycolor.js') }}"></script>
    <script src="{{ url_for('static', filename='files/bootstrap/bootstrap.colorpickersliders.nocielch.js') }}"></script>
    <script src="{{ url_for('static', filename='files/ol/ol.js') }}"></script>
  </body>
</html>
