page.replace_html :sidebar_title, 'Browse'
page.replace_html :sidebar_content, :partial => 'start'
page << <<EOJ
 var gml, sf, obj_list, currentFeature;
 OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
 OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
 function start() {
   openSidebar({ onclose: stopBrowse });
   vectors = new OpenLayers.Layer.Vector("Vector Layer", {
     displayInLayerSwitcher: false
   });
 
   box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
     handlerOptions: {
       sides: 4,
       snapAngle: 90,
       irregular: true,
       persist: true,
       callbacks: { done: endDrag }
     }
   });
   map.addControl(box);
 }
 function stopBrowse() {
     if (gml) {
       gml.destroy();
       gml = null; 
     } 
     if (sf) {   
         sf.destroy();  
         sf = null;
     }  
 }
 function startDrag() {
   $("drag_box").innerHTML='Drag a box on the map to select an area';
    box.activate(); 
    return false;
 };

 $("drag_box").onclick = startDrag;
  
  function useMap() {
      var bounds = map.getExtent();
      setBounds(bounds);
      getData(bounds); 
  }
  $("use_map").onclick = useMap;
  function dataLoaded() { 
      $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
      
      obj_list = document.createElement("ul");
      for (var i = 0; i < this.features.length; i++) {
          var feature = this.features[i]; 
          var type ="way";
          if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
              type = "node";
          }   
          var nice_name = type.substr(0,1).toUpperCase() + type.substr(1,type.length); 
          var li = document.createElement("li");
          li.appendChild(document.createTextNode(nice_name + " "));
          var link = document.createElement("a");
          link.href =  "/browse/"+type+"/"+feature.osm_id;
          var name = feature.attributes.name || feature.osm_id;
          link.appendChild(document.createTextNode(name));
          li.appendChild(link);
          li.appendChild(document.createTextNode(" "));
          var link = document.createElement("a");
          link.href =  "#";
          link.appendChild(document.createTextNode("+"));
          link.feature = feature;
          link.onclick = OpenLayers.Function.bind(function() { 
            var layer = this.feature.layer;
            for (var i = 0; i < layer.selectedFeatures.length; i++) {
                var f = layer.selectedFeatures[i]; 
                layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));
            }
            on_feature_hover(this.feature);
            map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());  
          }, link);   
          li.appendChild(link);
          obj_list.appendChild(li);
      }
      $("object").innerHTML = "";
      $("object").appendChild(obj_list); 
  }
  function getData(bounds) {
    $("status").innerHTML = "Loading...";
    bounds.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
    var url = "/api/0.5/map?bbox="+bounds.toBBOX();
    if (!gml) {
        var def = OpenLayers.Feature.Vector.style['default'];
        var style = new OpenLayers.Style();
        style.addRules([new OpenLayers.Rule( 
          {'symbolizer': 
            {"Polygon": {'fillColor': '#ff0000', 'strokeColor': '#ff0000'},
             "Line": {'fillColor': '#ffff00', 'strokeColor': '#000000', strokeOpacity: '0.4'},
             "Point": {'fillColor': '#00ff00', 'strokeColor': '#00ff00'}}
          }
        )]);
        gml = new OpenLayers.Layer.GML("Data",url, 
                {format: OpenLayers.Format.OSM, formatOptions: {checkTags: true},
                 styleMap: new OpenLayers.StyleMap({'default': style, 'select': {'strokeColor': '#0000ff'}})
                }
        );
        gml.events.register("loadend", gml, dataLoaded );
        map.addLayer(gml);
        sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
        map.addControl(sf);
        sf.activate();

    } else {
        gml.setUrl(url);
    }
  }
  function endDrag(bbox) {
    var bounds = bbox.getBounds();
    setBounds(bounds);
    box.deactivate();
    getData(bounds);
    $("drag_box").innerHTML = "Select an area to see features";

  }
  function loadObjList() {
      $("object").innerHTML="";
      $("object").appendChild(obj_list);
  }
    
  function on_feature_hover(feature) {
      if (currentFeature) {
        currentFeature.layer.drawFeature(
          currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
        );
      }
      feature.layer.drawFeature(
        feature, feature.layer.styleMap.createSymbolizer(feature, "select")
      );
      if ($("object").firstChild == $("object").obj_list) { 
        $("object").removeChild(obj_list);
      } else { 
        $("object").innerHTML = "";
      }   
      var div = document.createElement("div");
      var link = document.createElement("a");
      link.href="#";
      link.onclick = loadObjList;
      link.appendChild(document.createTextNode("Back to Object List"));
      div.appendChild(link)
      $("object").appendChild(div);    
      var ul = document.createElement("ul");
      var type ="way";
      if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
          type = "node";
      }    
      var li = document.createElement("li");
      var link = document.createElement("a");   
      link.href =  "/browse/"+type+"/"+feature.osm_id;
      link.appendChild(document.createTextNode(feature.osm_id));
      li.appendChild(link);
      ul.appendChild(li);
      for (var key in feature.attributes) {
          var li = document.createElement("li"); 
          li.appendChild(document.createTextNode(key + ": " + feature.attributes[key]));
          ul.appendChild(li);
      }
      $("object").appendChild(ul);
      currentFeature = feature; 
  }   
  function setBounds(bounds) {
    var epsg4326 = new OpenLayers.Projection("EPSG:4326");
    var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));

    bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);

    $("minlon").innerHTML = Math.round(bounds.left * decimals) / decimals;
    $("minlat").innerHTML = Math.round(bounds.bottom * decimals) / decimals;
    $("maxlon").innerHTML = Math.round(bounds.right * decimals) / decimals;
    $("maxlat").innerHTML = Math.round(bounds.top * decimals) / decimals;
  }

start();
EOJ