Index: /src/django_gheat/website/static/heatmap.js
===================================================================
--- /src/django_gheat/website/static/heatmap.js	(revision 9209)
+++ /src/django_gheat/website/static/heatmap.js	(revision 9210)
@@ -7,6 +7,6 @@
 		controls: [
 				new OpenLayers.Control.Navigation(),
-				new OpenLayers.Control.PanZoomBar(),
-				new OpenLayers.Control.ScaleLine(),
+				//new OpenLayers.Control.PanZoomBar(),
+				//new OpenLayers.Control.ScaleLine(),
 				new OpenLayers.Control.LayerSwitcher(),
 				new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }),
Index: /src/django_gheat/website/static/style.css
===================================================================
--- /src/django_gheat/website/static/style.css	(revision 9209)
+++ /src/django_gheat/website/static/style.css	(revision 9210)
@@ -1,88 +1,91 @@
 body,html{
-	height:100%;
-	margin:0;
-	padding:0;
-	font-family:Arial,Helvetica,sans-serif;
-	font-size:12px;
-	background-color:#999;
-}
-
-#wrapper{
-	width:100%;
-	height:100%;
-	margin:0 auto -20px;
-	word-wrap: break-word;
-	border:1px;
-	border-color:black;
-}
-
-#contentcontainer{
-	float:left;
-	background-image:url('/static/img/bg.jpg');
-	background-repeat: no-repeat;
-	background-color:#000;
-	width:450px;
-	height:100%;
+  height:100%;
+  width:100%;
+  margin:0;
+  padding:0;
+  font-family:Arial,Helvetica,sans-serif;
+  font-size:12px;
+  background-color:#999;
 }
 
 #heatmap{
-	height:100%;
-}
-
-#heatmapwrapper{
-	height:100%;
-	margin-left:450px;
+  position:absolute;
+  height:100%;
+  width:100%;
+  top:0px;
+  bottom:0px;
+  left:0px;
+  right:0px;
 }
 
 #header{
-	width:400px;
-	height:100px;
-	background-image:url('/static/img/header.jpg');
-	padding-top:21px;
-	padding-left:50px;
+  position:absolute;
+  left:160px;
+  right:160px;
+  top:-2px;
+  min-width:600px;
+  background-color:#FFF;
+  border:2px solid #CC0000;
+  z-index:1;
 }
 
-#content{
-	//background-color:#666;
-	width:100%;
-	margin-top:20px;
-	margin:10px;
+#header_title{
+  width:100%;
+  height:26px;
+  top:0px;
+  background-color:#CC0000;
+  padding-left:5px;
+  padding-right:5px;
 }
 
-#footer{
-	background-color:#BABABA;
-	height:17px;
-	width:450px;
-	margin:0 auto;
-	clear:both;
-	font-size:12px;
-	color:#666;
-	text-align:center;
-	padding-top:3px;
-	position:absolute;
-	bottom:0;
+#header_content{
+  width:100%;
+  padding:5px;
+}
+
+#filters{
+  position:absolute;
+  left:-2px;
+  top:100px;
+  width:150px;
+  background-color:#FFF;
+  border:2px solid #CC0000;
+  z-index:1;
+}
+
+#filters_title{
+  width:140px;
+  height:26px;
+  top:0px;
+  background-color:#CC0000;
+  padding-left:5px;
+  padding-right:5px;
+}
+
+#filters_content{
+  width:140px;
+  padding:5px;
 }
 	
 h1{
-	color:#C20000;
-	margin-bottom:-5px;
-	//text-align:right;
-	margin-right:15px;
-	border-bottom:1px solid #C20000;
+  color:#C20000;
+  //text-align:right;
+  margin-right:15px;
+  border-bottom:1px solid #C20000;
 }
 
 A:link{
-	color:#666;
+  color:#000;
 }
 
 A:visited{
-	color:#666;
+  color:#E3E3E3;
 }
 
 A:active{
-	color:#666;
+  color:#E3E3E3;
 }
 
 A:hover{
-	color:#444;
+  color:#B8B8B8;
 }
Index: /src/django_gheat/website/templates/home.html
===================================================================
--- /src/django_gheat/website/templates/home.html	(revision 9209)
+++ /src/django_gheat/website/templates/home.html	(revision 9210)
@@ -6,34 +6,73 @@
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap.js"></script>
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions.js"></script>
+  <script language="javascript" type="text/javascript">
+    function toggleDiv(div){
+      if(document.getElementById(div + '_content').style.display != 'block'){
+        document.getElementById(div + '_content').style.display = 'block';
+      }
+      else{
+        document.getElementById(div + '_content').style.display = 'none';
+      }
+    }
+  </script>
 </head>
 <body onload="init()">
-  <div id="wrapper">
-    <div id="contentcontainer">
-      <div id="header">
-        <a href="index.html"><img src="/static/img/logo.jpg" border="0" style="float: left;"/></a>
-        &nbsp; <font style="font-size:24px; color:white;">Stichting Wireless Leiden</font><br />
-        &nbsp; <font style="font-size:46px; color:white;">Heatmap</font>
-      </div>
-      <div id="content">
-        <h1>Info</h1><br />
-        Info
-        <form method="get" action="">
-          Gebruiker: <input type="text" id="user" name="user" size="25"/> <br />
-          Meetrondje: <input type="text" id="dataset" name="dataset" size="25"/> <br />
-          WirelessLeiden Node: <input type="text" id="wlnode" name="wlnode" size="25"/> <br />
-          Encrypted: <input type="checkbox" id="enc" name="enc"/> <br />
-          Datum: <input type="text" id="date" name="date" size="25"/> <br />
-          Colour: <input type="text" id="colour" name="colour" size="25"/> <br />
-          Layernaam: <input type="text" id="lname" name="lname" size="25"/> <br />
-          <input type="button" value="Add filter" onClick="filters()"/>
-        </form>
-        <div id="nodelist"></div>
-      </div>
-      <div id="footer"> <a href="http://www.wirelessleiden.nl/">wirelessleiden.nl</a> </div>
+  <div id="heatmap"></div>
+  <div id="header">
+    <div id="header_title">
+      <font style="font-size:24px; color:white;" onclick="toggleDiv('header')">Stichting Wireless Leiden - Heatmap
+      <a href="http://www.wirelessleiden.nl/" style="float: right;">wirelessleiden.nl</a></font>
     </div>
-    <div id="heatmapwrapper">
-    <div id="heatmap"></div>
+    <div id="header_content">
+    test
+    </div>
+  </div>
+  <div id="filters">
+    <div id="filters_title">
+      <font style="font-size:24px; color:white;" onclick="toggleDiv('filters')">Filters</font>
+    </div>
+    <div id="filters_content">
+      <form method="get" action="">
+        User: <input type="text" id="user" name="user" size="14"/> <br />
+        Set: <input type="text" id="dataset" name="dataset" size="14"/> <br />
+        WirelessLeiden Node: <input type="text" id="wlnode" name="wlnode" size="14"/> <br />
+        Encrypted: <input type="checkbox" id="enc" name="enc"/> <br />
+        Date: <input type="text" id="date" name="date" size="14"/> <br />
+        Colour: <input type="text" id="colour" name="colour" size="14"/> <br />
+        Layername: <input type="text" id="lname" name="lname" size="14"/> <br />
+        <input type="button" value="Add filter" onClick="filters()"/>
+      </form>
     </div>
   </div>
 </body>
 </html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<body>
+<!-- Collapsible panel, with separate CSS and JavaScript -->
+<div style="width:170px;">
+  <div class="squarebox">
+    <div class="squareboxgradientcaption" style="height:20px; cursor: pointer;" onclick="togglePannelStatus(this.nextSibling)">
+      <div style="float: left"> 
+      </div>
+      <div style="float: right; vertical-align: middle">
+      </div> 
+    </div>
+    <div class="squareboxcontent">
+    </div>
+  </div>
+</div>
+</body>
+</html>
