<html>
<head>
  <link href="{{ STATIC_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}jquery-1.6.1.min.js"></script>

  <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.js"></script>
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions.js"></script>
  <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}colorpicker.js"></script>

  <!-- jquery UI datapicker -->
  <link type="text/css" href="{{ STATIC_URL }}jquery-ui-1.8.13.custom.css" rel="Stylesheet" />	
  <script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.13.custom.min.js"></script>


  <script language="javascript" type="text/javascript">
    $(function(){
      $('#colour').colorPicker();
      $('#start_date, #end_date').datepicker({
        dateFormat: 'dd/mm/yy',
        beforeShow: setEnd,
      });

      function setEnd(element){
        if (element.id=='end_date'){
          var start_date = new Date($('#start_date').val());
          start_date.setDate(start_date.getDate())
          return {
            minDate: start_date
          };
        }
      return {}
      }

      $('#start_date').change(function(){
        $('#end_date').val('').text('');
      });

      $('#menu_filter').click(function(){
        $('#filter').slideToggle('fast');
        $('#info').slideUp('fast'); 
      });
      $('#menu_info').click(function(){
        $('#filter').slideUp('fast');
        $('#info').slideToggle('fast'); 
      });
    });
  </script>
</head>
<body onload="init()">
  <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>
      </div>
      <div id="filter_list">
        <form method="get" action="">
          <input type="text" id="start_date" name="start_date" size="10"/> Start date<br />
          <input type="text" id="end_date" name="end_date" size="10"/> End date<br />
          <select id="select_user" style="width:104px"></select> User<br />
          <select id="select_dataset" style="width:104px"></select> Dataset<br />
          <select id="select_node" style="width:104px"></select> Node<br />
          <input type="text" id="lname" name="lname" size="10"/> Layername<br /><br />
          <input type="text" id="colour" name="colour"/> Colour<br /><br />
          <input type="button" id="add_filter" value="Add filter"/>
        </form>
      </div>
    </div>
  </div>
  <div id='node_list'>
  Click on map to display Wireless Leiden nodes.
  </div>
</body>
</html>
