<html>
<head>
  <link href="{{ STATIC_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <!-- Disable during debugging, if you do not need the map to be displayed -->
  <!-- 
  <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 }}jquery.chained.mini.js"></script>
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions_test.js"></script>
  <script language="javascript" type="text/javascript">
    $(function(){
      $('#menu_filter').click(function(){
        $('#filter').slideToggle('fast');
        $('#info').slideUp('fast'); 
      });
      $('#menu_info').click(function(){
        $('#filter').slideUp('fast');
        $('#info').slideToggle('fast'); 
      });
    });
  </script>
</head>
<body>
  <div id="heatmap"></div>
  <div id="container">
    <div id="header">
      Stichting Wireless Leiden - Heatmap
    </div>
    <div id="menu">
      <a id="menu_info">Info</a>
      <a id="menu_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>
<select id="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>
<select id="model">
  <option value="">--</option>
  <option value="coupe" class="series-3 series-6 a5">Coupe</option>
  <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
  <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
  <option value="sportback" class="a3 a5">Sportback</option>
</select>


</div>
      <div id="filter_list">
      </div>

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