Index: src/django_gheat/website/static/heatmap_extensions_test.js
===================================================================
--- src/django_gheat/website/static/heatmap_extensions_test.js	(revision 9233)
+++ src/django_gheat/website/static/heatmap_extensions_test.js	(revision 9234)
@@ -33,23 +33,14 @@
 // Uses zoomlevel en mouseposition to call the nodelist.py view. View returns nodes in json format which is read and printed in document element.
 function getNodeList(zoomlevel, mousepos) {
-  var url = "/website/nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon;
-  var ajax = new AjaxRequest(url, setNodeList); 
-  ajax.doGet(); 
-}
-
-
-function setNodeList(responseText) {
-  json_nodelist=eval('(' + responseText + ')');
-  if (json_nodelist.length>0){
-    list = 'Wireless Leiden nodes on mouseposition:<br /><b>';
-    for (var i=0; i<json_nodelist.length; i++){
-      list += json_nodelist[i].fields.ssid + '<br />';
+  $.getJSON("/website/nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon, 
+    function(json) {
+      content = 'Wireless Leiden nodes on mouseposition:<br /><b>';
+      $.each(json, function(i,json){
+        content += json.fields.ssid;
+      });
+      content += '</br>';
+      $("#node_list").html(content);
     }
-    list += '</b>';
-  }
-  else{
-    list = 'No nodes to display.';
-  }
-  document.getElementById('node_list').innerHTML=list;
+  );
 }
 
Index: src/django_gheat/website/templates/home.html
===================================================================
--- src/django_gheat/website/templates/home.html	(revision 9233)
+++ src/django_gheat/website/templates/home.html	(revision 9234)
@@ -2,32 +2,22 @@
 <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>
   <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_test.js"></script>
-  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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';
-      }
-    }
+    $(function(){
+      $('#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(), get_filters()">
   <div id="heatmap"></div>
@@ -37,6 +27,6 @@
     </div>
     <div id="menu">
-      <a href="javascript:toggleDiv('info')">Info</a>
-      <a href="javascript:toggleDiv('filter')">Filters</a>
+      <a id="menu_info">Info</a>
+      <a id="menu_filter">Filters</a>
     </div>
     <div id="info">
@@ -50,5 +40,4 @@
       </div>
       <div id="filter_list">
-
       </div>
     </div>
