Index: src/django_gheat/website/static/heatmap.js
===================================================================
--- src/django_gheat/website/static/heatmap.js	(revision 9174)
+++ src/django_gheat/website/static/heatmap.js	(revision 9175)
@@ -18,5 +18,15 @@
 		displayProjection: new OpenLayers.Projection("EPSG:4326")
 	});
-	
+
+	map.events.register('click', map, GetMousePos);
+	function GetMousePos(pos) {
+		var pixel = new OpenLayers.Pixel(pos.xy.x,pos.xy.y);
+		var lonlat = map.getLonLatFromPixel(pixel);
+		var mousepos = OpenLayers.Layer.SphericalMercator.inverseMercator(lonlat.lon, lonlat.lat);
+		loadXMLDoc(mousepos);
+		//var url = "/website/wlnode/" + mousepos.lat + "," + mousepos.lon;
+		//window.location = url;
+	}
+
 	layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
 	map.addLayer(layerMapnik);
@@ -37,2 +47,35 @@
 	map.setCenter (lonLat, zoom);
 }
+
+function loadXMLDoc(mousepos)
+{
+var xmlhttp;
+var txt,xx,x,i;
+if (window.XMLHttpRequest)
+  {// code for IE7+, Firefox, Chrome, Opera, Safari
+  xmlhttp=new XMLHttpRequest();
+  }
+else
+  {// code for IE6, IE5
+  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+  }
+
+
+xmlhttp.onreadystatechange=function()
+  {
+  if (xmlhttp.readyState==4 && xmlhttp.status==200)
+    {
+    txt="";
+    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
+    for (i=0;i<x.length;i++)
+      {
+      xx=x[i].getElementsByTagName("ARTIST");
+      txt=txt + xx[0].firstChild.nodeValue + "<br>";
+      }
+    document.getElementById('nodelist').innerHTML=txt;
+    }
+  }
+xmlhttp.open("POST","/static/test.xml",true);
+//xmlhttp.open("POST","/website/lat=" + mousepos.lat + "&lon=" + mousepos.lon,true);
+xmlhttp.send();
+}
Index: src/django_gheat/website/static/style.css
===================================================================
--- src/django_gheat/website/static/style.css	(revision 9175)
+++ src/django_gheat/website/static/style.css	(revision 9175)
@@ -0,0 +1,88 @@
+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%;
+}
+
+#heatmap{
+	height:100%;
+}
+
+#heatmapwrapper{
+	height:100%;
+	margin-left:450px;
+}
+
+#header{
+	width:400px;
+	height:100px;
+	background-image:url('/static/img/header.jpg');
+	padding-top:21px;
+	padding-left:50px;
+}
+
+#content{
+	//background-color:#666;
+	width:100%;
+	margin-top:20px;
+	margin:10px;
+}
+
+#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;
+}
+	
+h1{
+	color:#C20000;
+	margin-bottom:-5px;
+	//text-align:right;
+	margin-right:15px;
+	border-bottom:1px solid #C20000;
+}
+
+A:link{
+	color:#666;
+}
+
+A:visited{
+	color:#666;
+}
+
+A:active{
+	color:#666;
+}
+
+A:hover{
+	color:#444;
+}
Index: src/django_gheat/website/static/test.xml
===================================================================
--- src/django_gheat/website/static/test.xml	(revision 9175)
+++ src/django_gheat/website/static/test.xml	(revision 9175)
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<!-- Edited by XMLSpyÂ® -->
+<CATALOG>
+	<CD>
+		<TITLE>Empire Burlesque</TITLE>
+		<ARTIST>Bob Dylan</ARTIST>
+		<COUNTRY>USA</COUNTRY>
+		<COMPANY>Columbia</COMPANY>
+
+		<PRICE>10.90</PRICE>
+		<YEAR>1985</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Hide your heart</TITLE>
+		<ARTIST>Bonnie Tyler</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+
+		<COMPANY>CBS Records</COMPANY>
+		<PRICE>9.90</PRICE>
+		<YEAR>1988</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Greatest Hits</TITLE>
+		<ARTIST>Dolly Parton</ARTIST>
+
+		<COUNTRY>USA</COUNTRY>
+		<COMPANY>RCA</COMPANY>
+		<PRICE>9.90</PRICE>
+		<YEAR>1982</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Still got the blues</TITLE>
+
+		<ARTIST>Gary Moore</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>Virgin records</COMPANY>
+		<PRICE>10.20</PRICE>
+		<YEAR>1990</YEAR>
+	</CD>
+
+	<CD>
+		<TITLE>Eros</TITLE>
+		<ARTIST>Eros Ramazzotti</ARTIST>
+		<COUNTRY>EU</COUNTRY>
+		<COMPANY>BMG</COMPANY>
+		<PRICE>9.90</PRICE>
+
+		<YEAR>1997</YEAR>
+	</CD>
+	<CD>
+		<TITLE>One night only</TITLE>
+		<ARTIST>Bee Gees</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>Polydor</COMPANY>
+
+		<PRICE>10.90</PRICE>
+		<YEAR>1998</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Sylvias Mother</TITLE>
+		<ARTIST>Dr.Hook</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+
+		<COMPANY>CBS</COMPANY>
+		<PRICE>8.10</PRICE>
+		<YEAR>1973</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Maggie May</TITLE>
+		<ARTIST>Rod Stewart</ARTIST>
+
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>Pickwick</COMPANY>
+		<PRICE>8.50</PRICE>
+		<YEAR>1990</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Romanza</TITLE>
+
+		<ARTIST>Andrea Bocelli</ARTIST>
+		<COUNTRY>EU</COUNTRY>
+		<COMPANY>Polydor</COMPANY>
+		<PRICE>10.80</PRICE>
+		<YEAR>1996</YEAR>
+	</CD>
+
+	<CD>
+		<TITLE>When a man loves a woman</TITLE>
+		<ARTIST>Percy Sledge</ARTIST>
+		<COUNTRY>USA</COUNTRY>
+		<COMPANY>Atlantic</COMPANY>
+		<PRICE>8.70</PRICE>
+
+		<YEAR>1987</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Black angel</TITLE>
+		<ARTIST>Savage Rose</ARTIST>
+		<COUNTRY>EU</COUNTRY>
+		<COMPANY>Mega</COMPANY>
+
+		<PRICE>10.90</PRICE>
+		<YEAR>1995</YEAR>
+	</CD>
+	<CD>
+		<TITLE>1999 Grammy Nominees</TITLE>
+		<ARTIST>Many</ARTIST>
+		<COUNTRY>USA</COUNTRY>
+
+		<COMPANY>Grammy</COMPANY>
+		<PRICE>10.20</PRICE>
+		<YEAR>1999</YEAR>
+	</CD>
+	<CD>
+		<TITLE>For the good times</TITLE>
+		<ARTIST>Kenny Rogers</ARTIST>
+
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>Mucik Master</COMPANY>
+		<PRICE>8.70</PRICE>
+		<YEAR>1995</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Big Willie style</TITLE>
+
+		<ARTIST>Will Smith</ARTIST>
+		<COUNTRY>USA</COUNTRY>
+		<COMPANY>Columbia</COMPANY>
+		<PRICE>9.90</PRICE>
+		<YEAR>1997</YEAR>
+	</CD>
+
+	<CD>
+		<TITLE>Tupelo Honey</TITLE>
+		<ARTIST>Van Morrison</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>Polydor</COMPANY>
+		<PRICE>8.20</PRICE>
+
+		<YEAR>1971</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Soulsville</TITLE>
+		<ARTIST>Jorn Hoel</ARTIST>
+		<COUNTRY>Norway</COUNTRY>
+		<COMPANY>WEA</COMPANY>
+
+		<PRICE>7.90</PRICE>
+		<YEAR>1996</YEAR>
+	</CD>
+	<CD>
+		<TITLE>The very best of</TITLE>
+		<ARTIST>Cat Stevens</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+
+		<COMPANY>Island</COMPANY>
+		<PRICE>8.90</PRICE>
+		<YEAR>1990</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Stop</TITLE>
+		<ARTIST>Sam Brown</ARTIST>
+
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>A and M</COMPANY>
+		<PRICE>8.90</PRICE>
+		<YEAR>1988</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Bridge of Spies</TITLE>
+
+		<ARTIST>T'Pau</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>Siren</COMPANY>
+		<PRICE>7.90</PRICE>
+		<YEAR>1987</YEAR>
+	</CD>
+
+	<CD>
+		<TITLE>Private Dancer</TITLE>
+		<ARTIST>Tina Turner</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>Capitol</COMPANY>
+		<PRICE>8.90</PRICE>
+
+		<YEAR>1983</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Midt om natten</TITLE>
+		<ARTIST>Kim Larsen</ARTIST>
+		<COUNTRY>EU</COUNTRY>
+		<COMPANY>Medley</COMPANY>
+
+		<PRICE>7.80</PRICE>
+		<YEAR>1983</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Pavarotti Gala Concert</TITLE>
+		<ARTIST>Luciano Pavarotti</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+
+		<COMPANY>DECCA</COMPANY>
+		<PRICE>9.90</PRICE>
+		<YEAR>1991</YEAR>
+	</CD>
+	<CD>
+		<TITLE>The dock of the bay</TITLE>
+		<ARTIST>Otis Redding</ARTIST>
+
+		<COUNTRY>USA</COUNTRY>
+		<COMPANY>Atlantic</COMPANY>
+		<PRICE>7.90</PRICE>
+		<YEAR>1987</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Picture book</TITLE>
+
+		<ARTIST>Simply Red</ARTIST>
+		<COUNTRY>EU</COUNTRY>
+		<COMPANY>Elektra</COMPANY>
+		<PRICE>7.20</PRICE>
+		<YEAR>1985</YEAR>
+	</CD>
+
+	<CD>
+		<TITLE>Red</TITLE>
+		<ARTIST>The Communards</ARTIST>
+		<COUNTRY>UK</COUNTRY>
+		<COMPANY>London</COMPANY>
+		<PRICE>7.80</PRICE>
+
+		<YEAR>1987</YEAR>
+	</CD>
+	<CD>
+		<TITLE>Unchain my heart</TITLE>
+		<ARTIST>Joe Cocker</ARTIST>
+		<COUNTRY>USA</COUNTRY>
+		<COMPANY>EMI</COMPANY>
+
+		<PRICE>8.20</PRICE>
+		<YEAR>1987</YEAR>
+	</CD>
+</CATALOG>
+
Index: src/django_gheat/website/templates/home.html
===================================================================
--- src/django_gheat/website/templates/home.html	(revision 9174)
+++ src/django_gheat/website/templates/home.html	(revision 9175)
@@ -1,17 +1,29 @@
 <html>
 <head>
+  <link href="{{ STATIC_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenLayers.js"></script>
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap.js"></script>
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenStreetMap.js"></script>
-    <style>
-      #heatmap{
-        width:100%;
-        height:100%;
-      }
-    </style>
 </head>
 <body onload="init()">
-  <div id="heatmap"></div>
+  <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
+        <div id="nodelist"><h2>Let AJAX change this text</h2></div>
+        <button type="button" onclick="loadXMLDoc()">Change Content</button>
+      </div>
+      <div id="footer"> <a href="http://www.wirelessleiden.nl/">wirelessleiden.nl</a> </div>
+    </div>
+    <div id="heatmapwrapper">
+    <div id="heatmap"></div>
+    </div>
+  </div>
 </body>
 </html>
-
