Index: src/django_gheat/website/static/heatmap_extensions_test.js
===================================================================
--- src/django_gheat/website/static/heatmap_extensions_test.js	(revision 9229)
+++ src/django_gheat/website/static/heatmap_extensions_test.js	(revision 9231)
@@ -56,5 +56,4 @@
 
 function get_filters() {
-
   // Create form
   var formstart = '<form method="get" action="">';
@@ -62,9 +61,9 @@
   var layername = '<input type="text" id="lname" name="lname" size="10"/> Layername<br />';
   var colour = '<input type="text" id="colour" name="colour" size="10"/> Colour<br />';
-  var user = '<select id="user" style="width:104px" onchange=update_filters(this.id)><option></option></select> User<br />';
-  var dataset = '<select id="dataset" style="width:104px" onchange=update_filters(this.id)><option></option></select> Dataset<br />';
-  var node = '<select id="node" style="width:104px" onchange=update_filters(this.id)><option></option></select> Node<br />';
-  var enc = '<select id="enc" style="width:104px"><option></option></select> Encryption<br />';
-  var date = '<select id="date" style="width:104px" onchange=update_filters(this.id)><option></option></select> Date<br />';
+  var user = '<select id="user" style="width:104px" onchange=filter_user()></select> User<br />';
+  var dataset = '<select id="dataset" style="width:104px" onchange=filter_node()></select> Dataset<br />';
+  var node = '<select id="node" style="width:104px" onchange=update_filters(this.id)></select> Node<br />';
+  var enc = '<select id="enc" style="width:104px"></select> Encryption<br />';
+  var date = '<select id="date" style="width:104px" onchange=filter_date()></select> Date<br />';
 
   // Write form to document
@@ -77,36 +76,80 @@
 }
 
+
+
 function set_filters(responseText) {
+  // set global var json with responText
   json=eval('(' + responseText + ')');
-  var user = '<option value="empty"></option>';
-  var dataset = '<option value="empty"></option>';
-  var date = '<option value="empty"></option>';
+
+  // set initial options
+  var date = '<option>Select date</option><option>All</option>';
+
+  // set initial options
   for (var i=0; i<json.length; i++){
-    user += '<option value="user">' + json[i].gebruiker + '</option>';
     for (m in json[i].meetrondje){
-      dataset += '<option value="dataset">' + json[i].meetrondje[m].naam + '</option>';
       date += '<option value="date">' + json[i].meetrondje[m].datum + '</option>';
     }
   }
+
+  // write options
+  document.getElementById('date').innerHTML=date;
+  document.getElementById('user').disabled=true;
+  document.getElementById('dataset').disabled=true;
+  document.getElementById('node').disabled=true;
+
+  // call filter_date once to set users
+  filter_date();
+}
+
+// get date value and set options for next filter (user)
+function filter_date(){
+  var user = '<option>Select user</option><option>All</option>';
+  var date = $('#date option:selected').text();
+
+  // date is none
+  if(date=='Select date'){
+    document.getElementById('user').innerHTML='';
+    document.getElementById('user').disabled=true;
+  }
+  // date is all
+  else if(date=='All'){
+    for (var i=0; i<json.length; i++){
+      user += '<option>' + json[i].gebruiker + '</option>';
+    }
   document.getElementById('user').innerHTML=user;
-  document.getElementById('dataset').innerHTML=dataset;
-  document.getElementById('date').innerHTML=date;
-}
-
-
-
-
-function update_filters(filter_id){
-  var user_text = $('#user option:selected').text();
-  var user_val = $('#user option:selected').val();
-  var dataset_text = $('#dataset option:selected').text();
-  var user = '<option value="empty"></option>';
-  var dataset = '<option value="empty"></option>';
-
-  if (filter_id=='user'){
-    if (!user_text){
+  document.getElementById('user').disabled=false;
+  }
+  // date not all
+  else{
+    for (var i=0; i<json.length; i++){
+      for (m in json[i].meetrondje){
+        if (json[i].meetrondje[m].datum == date){
+          user += '<option>' + json[i].gebruiker + '</option>';
+        }
+      }
+    }
+  document.getElementById('user').innerHTML=user;
+  document.getElementById('user').disabled=false;
+  }
+}
+
+
+// get user value and set options for next filter (dataset)
+function filter_user(){
+  var dataset = '<option>Select dataset</option><option>All</option>';
+  var date = $('#date option:selected').text();
+  var user = $('#user option:selected').text();
+
+  // user is none
+  if(user=='Select user'){
+    document.getElementById('dateset').innerHTML='';
+    document.getElementById('dataset').disabled=true;
+  }
+  // user is all
+  else if(user=='All'){
+    if(date=='All'){
       for (var i=0; i<json.length; i++){
         for (m in json[i].meetrondje){
-          dataset += '<option value="dataset">' + json[i].meetrondje[m].naam + '</option>';
+          dataset += '<option>' + json[i].meetrondje[m].naam + '</option>';
         }
       }
@@ -115,16 +158,24 @@
       for (var i=0; i<json.length; i++){
         for (m in json[i].meetrondje){
-          if (json[i].gebruiker == user_text){
-            dataset += '<option value="dataset">' + json[i].meetrondje[m].naam + '</option>';
-          }
+          dataset += '<option>' + json[i].meetrondje[m].naam + '</option>';
         }
       }
     }
   document.getElementById('dataset').innerHTML=dataset;
-  }
-}
-
-
-
+  document.getElementById('dataset').disabled=false;
+  }
+  // user not all
+  else{
+    for (var i=0; i<json.length; i++){
+      if (json[i].gebruiker == user){
+        for (m in json[i].meetrondje){
+          dataset += '<option>' + json[i].meetrondje[m].naam + '</option>';
+        }
+      }
+    }
+  document.getElementById('dataset').innerHTML=dataset;
+  document.getElementById('dataset').disabled=false;
+  }
+}
 
 
@@ -139,9 +190,13 @@
   var lname = encodeURIComponent(document.getElementById("lname").value);
 
-  if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
-  if (dataset != ''){dataset='&meetrondje__naam='+dataset;} 
-  if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;} 
+  if ((user != 'Select user') && (user != 'All')){user='&meetrondje__gebruiker__naam='+user;}
+  else{user='';}
+  if ((dataset != 'Select dataset') && (dataset != 'All')){dataset='&meetrondje__naam='+dataset;} 
+  else{dataset='';}
+  if ((wlnode != 'Select node') && (dataset != 'All')){wlnode='&accespoint__ssid='+wlnode;} 
+  else{wlnode='';}
   if (enc != ''){enc='&accespoint__encryptie='+enc;} 
-  if (date != ''){date='&meetrondje__datum='+date;} 
+  if ((date != 'Select date') && (date != 'All')){date='&meetrondje__datum='+date;} 
+  else{date='';}
   if (colour != ''){colour='colour='+colour;} 
   else {colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
@@ -156,4 +211,5 @@
         baseurl + colour + user + dataset + wlnode + enc + date
       ];
+      document.getElementById('filter_text').innerHTML+="<br />Added: " + url;
       options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
       var newArguments = [name, url, options];