<html>
<head>
  <link href="{{ STATIC_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenLayers.js"></script>
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenStreetMap.js"></script>
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap.js"></script>
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions.js"></script>
  <script language="javascript" type="text/javascript">
    function toggleDiv(div){
      var show = div;
      var hide;
      if(show == 'info'){
        hide = 'filter';
      }
      else{
        hide = 'info';
      }      
      if(document.getElementById(show).style.display != 'block'){
        document.getElementById(show).style.display = 'block';
        document.getElementById(hide).style.display = 'none';
      }
      else{
        document.getElementById(show).style.display = 'none';
        document.getElementById(hide).style.display = 'none';
      }
    }
  </script>
</head>


<body onload="init()">
  <div id="heatmap"></div>
  <div id="container">
    <div id="header">
      Stichting Wireless Leiden - Heatmap
    </div>
    <div id="menu">
      <a href="javascript:toggleDiv('info')">Info</a>
      <a href="javascript:toggleDiv('filter')">Filters</a>
    </div>
    <div id="info">
       This might need some work done.
    </div>
    <div id="filter">
      <div id="filter_text">
      <h1>Filters</h1>
      <p>Create your custom layer by choosing the desired filter options on the right and adding it the layer to the list.</p>
      <p>For instance, you can choose to create a layer with data measured only by yourself, or with a certain node from Wireless Leiden only.</p>
      </div>
      <div id="filter_list">

      </div>
    </div>
  </div>
  <div id='node_list'>
  Click on map to display Wireless Leiden nodes.
  </div>
</body>
</html>
