<div id="changeset_list_map">
</div>

<script type="text/javascript">
  var highlight;

  function highlightChangeset(id) {
    var feature = vectors.getFeatureByFid(id);
    var bounds = feature.geometry.getBounds();

    if (bounds.containsBounds(map.getExtent())) {
      bounds = map.getExtent().scale(1.1);
    }

    if (highlight) vectors.removeFeatures(highlight);

    highlight = new OpenLayers.Feature.Vector(bounds.toGeometry(), {}, {
      strokeWidth: 2,
      strokeColor: "#ee9900",
      fillColor: "#ffff55",
      fillOpacity: 0.5
    });

    vectors.addFeatures(highlight);

    $("#tr-changeset-" + id).addClass("selected");
  }

  function unHighlightChangeset(id) {
    vectors.removeFeatures(highlight);

    $("#tr-changeset-" + id).removeClass("selected");
  }

  $(document).ready(function () {
    var map = createMap("changeset_list_map", {
      controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.Zoom(),
        new OpenLayers.Control.SimplePanZoom()
      ]
    });

    var bounds = new OpenLayers.Bounds();

    <% @edits.each do |edit| %>
    <% if edit.has_valid_bbox? %>
    <% bbox = edit.bbox.to_unscaled %>
    var minlon = <%= bbox.min_lon %>;
    var minlat = <%= bbox.min_lat %>;
    var maxlon = <%= bbox.max_lon %>;
    var maxlat = <%= bbox.max_lat %>;
    var bbox = new OpenLayers.Bounds(minlon, minlat, maxlon, maxlat);

    bounds.extend(bbox);

    addBoxToMap(bbox, "<%= edit.id %>", true);
    <% end %>
    <% end %>

    vectors.events.on({
      "featureselected": function(feature) {
        highlightChangeset(feature.feature.fid);
      },
      "featureunselected": function(feature) {
        unHighlightChangeset(feature.feature.fid);
      }
    });

    var selectControl = new OpenLayers.Control.SelectFeature(vectors, {
      multiple: false,
      hover: true
    });
    map.addControl(selectControl);
    selectControl.activate();

    <% if ! @bbox.nil? %>
      map.zoomToExtent(proj(new OpenLayers.Bounds(<%= @bbox %>)));
    <% else %>
      map.zoomToExtent(proj(bounds));
    <% end %>
  });
</script>
