Index: src/django_gheat/website/static/heatmap_extensions_test.js
===================================================================
--- src/django_gheat/website/static/heatmap_extensions_test.js	(revision 9236)
+++ src/django_gheat/website/static/heatmap_extensions_test.js	(revision 9237)
@@ -15,16 +15,22 @@
 // set filter values
 $(document).ready(function() {
-  $.getJSON("/website/foofilter", 
+
+  // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
+  $.getJSON("/website/foofilter/",
     function(json) {
       $.each(json, function(i,json){
-        $("<option>" + json.gebruiker + "</option>").appendTo("#select_user");
+        gebruiker_class = json.gebruiker;
+        $("<option value='"  + json.gebruiker + "'>" + json.gebruiker + "</option>").appendTo("#mark");
         $.each(json.meetrondje, function(m, meetrondje){
-          $("<option>" + meetrondje.naam + "</option>").appendTo("#select_dataset");
+          $("<option class='" + gebruiker_class + "' value='" + meetrondje.naam + "'>"+ meetrondje.naam + "</option>").appendTo("#series");
           $.each(meetrondje.nodes, function(n, nodes){
-            $("<option>" + nodes + "</option>").appendTo("#select_node");
+            $("<option>" + nodes + "</option>").appendTo("#model");
           });
-          $("<option>" + meetrondje.datum + "</option>").appendTo("#select_date");
+//          $("<option>" + meetrondje.datum + "</option>").appendTo("#select_date");
         });
       });
+// Initiate the chain
+    $("#series").chained("#mark");
+    $("#model").chained("#series");
     }
   );
Index: src/django_gheat/website/static/jquery.chained.mini.js
===================================================================
--- src/django_gheat/website/static/jquery.chained.mini.js	(revision 9237)
+++ src/django_gheat/website/static/jquery.chained.mini.js	(revision 9237)
@@ -0,0 +1,2 @@
+
+(function($){$.fn.chained=function(parent_selector,options){return this.each(function(){var self=this;var backup=$(self).clone();$(parent_selector).each(function(){$(this).bind("change",function(){$(self).html($(backup).html());var selected="";$(parent_selector).each(function(){selected+="\\"+$(":selected",this).val();});selected=selected.substr(1);var first=$(parent_selector).first();var selected_first=$(":selected",first).val();$("option",self).each(function(){if(!$(this).hasClass(selected)&&!$(this).hasClass(selected_first)&&$(this).val()!==""){$(this).remove();}});if(1==$("option",self).size()&&$(self).val()==""){$(self).attr("disabled","disabled");}else{$(self).removeAttr("disabled");}});$(this).trigger("change");});});};$.fn.chainedTo=$.fn.chained;})(jQuery);
Index: src/django_gheat/website/static/style.css
===================================================================
--- src/django_gheat/website/static/style.css	(revision 9236)
+++ src/django_gheat/website/static/style.css	(revision 9237)
@@ -60,5 +60,5 @@
 #filter{
   width:100%-10px;
-  display:none;
+/* display:none; */
   padding:5px;
 }
Index: src/django_gheat/website/templates/home.html
===================================================================
--- src/django_gheat/website/templates/home.html	(revision 9236)
+++ src/django_gheat/website/templates/home.html	(revision 9237)
@@ -3,7 +3,11 @@
   <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 }}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">
@@ -20,5 +24,5 @@
   </script>
 </head>
-<body onload="init(), get_filters()">
+<body>
   <div id="heatmap"></div>
   <div id="container">
@@ -38,7 +42,31 @@
       <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>
+<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>