page.replace_html :sidebar_title, 'Browse'
page.replace_html :sidebar_content, :partial => 'start'
page << <<EOJ
    
    var gml, sf, objList, currentFeature;
    OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
    OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
    
    function start() {
      openSidebar({ onclose: stopBrowse });
      var vectors = new OpenLayers.Layer.Vector();
    
      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;
        } 
        if (currentFeature) {
            currentFeature.destroy(); 
            currentFeature = 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);
        return false;
    }
    $("use_map").onclick = useMap;
    
    function endDrag(bbox) {
        var bounds = bbox.getBounds();
        setBounds(bounds);
        box.deactivate();
        getData(bounds);
        $("drag_box").innerHTML = "Manually select a different area";
    }
    
    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': onFeatureSelect});
            map.addControl(sf);
            sf.activate();
        } else {
            gml.setUrl(url);
        }
    }
    
    function dataLoaded() { 
        $("status").innerHTML = "Loaded " + this.features.length + " features. (<a href='"+ this.url+"'>API</a>)";
        
        objList = document.createElement("ul");
        for (var i = 0; i < this.features.length; i++) {
            var feature = this.features[i]; 
            
            // Type, for linking
            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 + " "));
            
            // Link, for viewing in the tab
            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));
            link.feature = feature;
            link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);   
            li.appendChild(link);

            objList.appendChild(li);
        }
        $("object").innerHTML = "";
        $("object").appendChild(objList); 
    }
    
    function viewFeatureLink() {
        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"));
        }
        onFeatureSelect(this.feature);
        map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
        return false;
    }
    
    function loadObjList() {
        $("object").innerHTML="";
        $("object").appendChild(objList);
        return false;
    }
      
    function onFeatureSelect(feature) {
        // Unselect previously selected feature
        if (currentFeature) {
          currentFeature.layer.drawFeature(
            currentFeature, currentFeature.layer.styleMap.createSymbolizer(currentFeature, "default")
          );
        }

        // Redraw in selected style
        feature.layer.drawFeature(
          feature, feature.layer.styleMap.createSymbolizer(feature, "select")
        );

        // If the current object is the list, don't innerHTML="", since that could clar it.   
        if ($("object").firstChild == objList) { 
            $("object").removeChild(objList);
        } else { 
            $("object").innerHTML = "";
        }   
        
        // Create a link back to the object list
        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);    
        
        // Now the list of attributes
        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");
            var b = document.createElement("b");
            b.appendChild(document.createTextNode(key));
            li.appendChild(b);
            li.appendChild(document.createTextNode(": " + feature.attributes[key]));
            ul.appendChild(li);
        }
        $("object").appendChild(ul);
        
        // Stash the currently drawn feature
        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