add support for displaying history

app/views/browse/_start.rhtml

@@ -1,18 +1,11 @@
-<div style="padding:10px;">
+<div style="padding:0px 10px;">
-  <div class="export_bounds">
+    <div style="text-align: center">
-    <span class="bounds_span" id="maxlat"></span> 
+    <p>
-    <br/>
+      <a id="use_map" display="hidden" href="#">View Data For Current Map View</a>
-    <span class="bounds_span" style="padding:10px" id="minlon"></span> 
-    <span class="bounds_span" style="padding:10px" id="maxlon"></span> 
-    <br/>
-    <span class="bounds_span" id="minlat"></span> 
-    <p class="export_hint">
-      <a id="use_map" href="#">View Data For Current Map View</a>
       <br />
       <a id='drag_box' href="#">Manually select a different area</a>  
     </p>
-  </div>
+</div>
-
 <div id="status"></div>
 <div id="object">
 </div>

app/views/browse/start.rjs

@@ -1,8 +1,8 @@
-page.replace_html :sidebar_title, 'Browse'
+page.replace_html :sidebar_title, 'Data'
 page.replace_html :sidebar_content, :partial => 'start'
 page << <<EOJ
     
-    var gml, sf, objList, currentFeature, featureList;
+    var gml, sf, objList, currentFeature, featureList, mode = "auto", currentBounds;
     OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
     OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
     
@@ -20,9 +20,13 @@ page << <<EOJ
           }
         });
         map.addControl(box);
-        map.events.register("moveend", map, validateLinks);
+        map.events.register("moveend", map, showData);
         map.events.triggerEvent("moveend");
-        if (map.getZoom() >= 16) {
+    }
+
+    function showData() {
+        if (mode == "manual") { return; }
+        if (map.getZoom() >= 15) {
             useMap();
         } else {
             $("status").innerHTML = "Zoom in or Select an area of the map to view.";
@@ -42,7 +46,7 @@ page << <<EOJ
             currentFeature.destroy(); 
             currentFeature = null; 
         } 
-        map.events.unregister("moveend", map, validateLinks);
+        map.events.unregister("moveend", map, showData);
     }
     
     function startDrag() {
@@ -54,7 +58,23 @@ page << <<EOJ
     
     function useMap() {
         var bounds = map.getExtent();
-        getData(bounds);
+        var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);
+        if (!currentBounds || !currentBounds.containsBounds(projected)) {
+            var center = bounds.getCenterLonLat();
+            var tileWidth = bounds.getWidth() * 1.2;
+            var tileHeight = bounds.getHeight() * 1.2;
+            var tileBounds =
+                new OpenLayers.Bounds(center.lon - (tileWidth / 2),
+                                      center.lat - (tileHeight / 2),
+                                      center.lon + (tileWidth / 2),
+                                      center.lat + (tileHeight / 2));
+
+            currentBounds = tileBounds;
+            getData(tileBounds);
+            mode = "auto";
+            $("drag_box").style.display="inline";
+            $("use_map").style.display="none";
+        }
         return false;
     }
     $("use_map").onclick = useMap;
@@ -64,6 +84,9 @@ page << <<EOJ
         box.deactivate();
         getData(bounds);
         $("drag_box").innerHTML = "Manually select a different area";
+        mode = "manual";  
+        $("use_map").style.display="inline";
+        $("drag_box").style.display="none";
     }
     
     function displayFeatureWarning() {
@@ -129,6 +152,7 @@ page << <<EOJ
     }
     function loadGML(url) {
         $("status").innerHTML = "Loading...";
+        $("object").innerHTML = "";
         if (!gml) {
             var style = new OpenLayers.Style();
             style.addRules([new OpenLayers.Rule( 
@@ -197,7 +221,9 @@ page << <<EOJ
             layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
         }
         onFeatureSelect(this.feature);
-        map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
+        if (mode != "auto") {
+            map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
+        }
         return false;
     }
     
@@ -256,21 +282,48 @@ page << <<EOJ
             li.appendChild(document.createTextNode(": " + feature.attributes[key]));
             ul.appendChild(li);
         }
+        
+        var li = document.createElement("li");
+        var link = document.createElement("a");   
+        link.href =  "/browse/"+type+"/"+feature.osm_id+"/history";
+        link.appendChild(document.createTextNode("History"));
+        li.appendChild(link);
+        ul.appendChild(li);
+        link.onclick = OpenLayers.Function.bind(loadHistory, {type: type, feature: feature, link: link});
         $("object").appendChild(ul);
         
+        
         // Stash the currently drawn feature
         currentFeature = feature; 
     }   
-    
+    function loadHistory() {
-    function validateLinks() {
+        this.link.href = "";
-        var bounds = this.getExtent();
+        this.link.innerHTML = "Wait...";
-        bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
+        new Ajax.Request("/api/0.5/"+this.type+"/"+this.feature.osm_id+"/history", {onComplete: OpenLayers.Function.bind(displayHistory, this)});
-
+        return false;
-        if (bounds.getWidth() * bounds.getHeight() > 0.25) {
-          $("use_map").style.display = "none";
-        } else {
-          $("use_map").style.display = "inline";
-        }  
     }
+    function displayHistory(request) {
+        if (currentFeature.osm_id != this.feature.osm_id || $("object").firstChild == objList)  { 
+            return false;
+        } 
+        this.link.parentNode.parentNode.removeChild(this.link.parentNode);
+        var doc = request.responseXML;
+        var div = document.createElement("div");
+        var h3 = document.createElement("h3"); 
+        h3.appendChild(document.createTextNode("History"));
+        div.appendChild(h3);
+        var nodes = doc.getElementsByTagName(this.type);
+        var history = document.createElement("ul");  
+        for (var i = 0; i < nodes.length; i++) {
+            var user = nodes[i].getAttribute("user") || "private user";
+            var timestamp = nodes[i].getAttribute("timestamp");
+            var item = document.createElement("li");
+            item.appendChild(document.createTextNode("Edited by " + user + " at " + timestamp));
+            history.appendChild(item);
+        }
+        div.appendChild(history);
+        $("object").appendChild(div); 
+    }
+    
     start();
 EOJ