2 files changed, 45 insertions, 19 deletions

diff --git a/static/main_map.js b/static/main_map.js
index 0bcf972..7de9904 100644
--- a/static/main_map.js
+++ b/static/main_map.js
@@ -1,5 +1,15 @@
 /* main map */
 
+/* show a block panel */
+function show(id){
+    document.getElementById(id).style.display = 'block';
+}
+
+/* hide a panel */
+function hide(id){
+    document.getElementById(id).style.display = 'None';
+}
+
 /* availaible map layers */
 var layerMapnik = new OpenLayers.Layer.OSM.Mapnik('Classic');
 var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle map", {
@@ -59,7 +69,7 @@ function setMarkers(response){
         /* clean the marker layer */
         if (currentPopup) {
             currentPopup.hide();
-            hideDetail();
+            hide('detail');
         }
         layerMarkers = new OpenLayers.Layer.Markers('POIs');
         map.addLayer(layerMarkers);
@@ -99,10 +109,7 @@ function putMarker(mark) {
     feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud);
     feature.data.popupContentHTML = "<div class='cloud'>";
     feature.data.popupContentHTML += mark.properties.name;
-    feature.data.popupContentHTML += "<br/><div id='popup_link'>\
-<a href='javascript:showDetail()'>";
-    feature.data.popupContentHTML += gettext("Show details");
-    feature.data.popupContentHTML += "</a></div></div>";
+    feature.data.popupContentHTML += "<br/>&nbsp;</div>";
     feature.data.overflow = 'hidden';
     var marker = feature.createMarker();
     /* manage markers events */
@@ -112,7 +119,7 @@ function putMarker(mark) {
             if (currentPopup == this.popup) {
                 this.popup.hide();
                 clicked = false;
-                hideDetail();
+                hide('detail');
             } else {
                 currentPopup.hide();
                 showPop(this);
@@ -150,19 +157,11 @@ function updateDetail(pk){
 function setDetail(response){
     if (response.responseText.indexOf('no results') == -1) {
         document.getElementById('detail').innerHTML = response.responseText;
+        show('detail');
     }
 }
 
 
-/* show the detail windows */
-function showDetail(){
-    document.getElementById('detail').style.display = 'block';
-}
-
-/* hide content of detail panel */
-function hideDetail(){
-    document.getElementById('detail').style.display = 'None';
-}
 
 /* main initialisation function */
 function init(){
diff --git a/static/styles.css b/static/styles.css
index 353fcbe..0942301 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -77,6 +77,10 @@ color:black;
 }
 
 #footer{
+text-align:center;
+}
+
+#map-footer{
 position:absolute;
 z-index:5;
 background-color:white;
@@ -95,7 +99,7 @@ z-index:5;
 top:50px;
 bottom:20px;
 right:18px;
-width:250px;
+width:300px;
 background-color:#FFF;
 opacity:0.8;
 -moz-border-radius:10px;
@@ -107,8 +111,7 @@ border-radius:10px;
 text-align:center;
 }
 
-#detail{
-display:None;
+#welcome{
 padding:6px 10px;
 border: 1px solid black;
 position:absolute;
@@ -116,7 +119,7 @@ z-index:5;
 top:50px;
 bottom:58px;
 left:80px;
-right:310px;
+right:360px;
 background-color:#FFF;
 opacity:0.9;
 -moz-border-radius:10px;
@@ -124,6 +127,23 @@ opacity:0.9;
 border-radius:10px;
 }
 
+#detail{
+display:None;
+padding:6px 10px;
+border: 1px solid black;
+position:absolute;
+z-index:5;
+top:274px;
+bottom:38px;
+right:18px;
+width:300px;
+background-color:#FFF;
+opacity:0.8;
+-moz-border-radius:10px;
+-webkit-border-radius:10px;
+border-radius:10px;
+}
+
 #detail_content{
 overflow:auto;
 height:90%;
@@ -133,6 +153,13 @@ height:90%;
 text-align:center;
 }
 
+#detail_footer a{
+color:white;
+background-color:purple;
+display:block;
+text-decoration:None;
+}
+
 #map{
 border: 1px solid black;
 position:absolute;