var browseBoxControl;
var browseMode = "auto";
var browseBounds;
var browseFeatureList;
var browseActiveFeature;
var browseDataLayer;
var browseSelectControl;
var browseObjectList;
var areasHidden = false;

OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;
OpenLayers.Feature.Vector.style['default'].cursor = "pointer";
    
function startBrowse() {
  map.dataLayer.active = true;

  $("#sidebar_title").html("<%=j t 'browse.start_rjs.data_frame_title' %>");
  $("#sidebar_content").html("<%=j render :partial => "sidebar" %>");

  openSidebar({ onclose: stopBrowse });

  var vectors = new OpenLayers.Layer.Vector();
    
  browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 
    handlerOptions: {
      sides: 4,
      snapAngle: 90,
      irregular: true,
      persist: true
    }
  });
  browseBoxControl.handler.callbacks.done = endDrag;
  map.addControl(browseBoxControl);

  map.events.register("moveend", map, updateData);
  map.events.triggerEvent("moveend");

  $("#browse_select_view").click(useMap);

  $("#browse_select_box").click(startDrag);

  $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");
  $("#browse_hide_areas_box").show();
  $("#browse_hide_areas_box").click(hideAreas);
}

function updateData() {
  if (browseMode == "auto") {
    if (map.getZoom() >= 15) {
        useMap(false);
    } else {
        setStatus("<%=j t 'browse.start_rjs.zoom_or_select' %>");
    }    
  }
}

function stopBrowse() {
  if (map.dataLayer.active) {
    map.dataLayer.active = false;

    if (browseSelectControl) {   
      browseSelectControl.destroy();  
      browseSelectControl = null;
    } 

    if (browseBoxControl) {
      browseBoxControl.destroy();
      browseBoxControl = null;
    }		

    if (browseActiveFeature) {
      browseActiveFeature.destroy(); 
      browseActiveFeature = null; 
    }

    if (browseDataLayer) {
      browseDataLayer.destroy();
      browseDataLayer = null; 
    } 

    map.dataLayer.setVisibility(false);
    map.events.unregister("moveend", map, updateData);
  }    
}

function startDrag() {
  $("#browse_select_box").html("<%=j t 'browse.start_rjs.drag_a_box' %>");

  browseBoxControl.activate();

  return false;
}

function useMap(reload) {
  var bounds = map.getExtent();
  var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);

  if (!browseBounds || !browseBounds.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));

    browseBounds = tileBounds;
    getData(tileBounds, reload);

    browseMode = "auto";

    $("#browse_select_view").hide();
  }

  return false;
}

function hideAreas() {
  $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.show_areas' %>");
  $("#browse_hide_areas_box").show();
  $("#browse_hide_areas_box").click(showAreas);

  areasHidden = true;

  useMap(true);
}

function showAreas() {
  $("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");
  $("#browse_hide_areas_box").show();
  $("#browse_hide_areas_box").click(hideAreas);

  areasHidden = false;

  useMap(true);
}

function endDrag(bbox) {
  var bounds = bbox.getBounds();
  var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);

  browseBoxControl.deactivate();
  browseBounds = projected;
  getData(bounds);

  browseMode = "manual";  

  $("#browse_select_box").html("<%=j t 'browse.start_rjs.manually_select' %>");
  $("#browse_select_view").show();
}

function displayFeatureWarning(count, limit, callback) {
  clearStatus();

  var div = document.createElement("div");

  var p = document.createElement("p");
  p.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.loaded_an_area_with_num_features' %>", { num_features: count, max_features: limit })));
  div.appendChild(p);

  var input = document.createElement("input");
  input.type = "submit";
  input.value = "<%=j t 'browse.start_rjs.load_data' %>";
  input.onclick = callback;
  div.appendChild(input); 

  $("#browse_content").html("");
  $("#browse_content").append(div);
}

function customDataLoader(resp, options) {
  if (map.dataLayer.active) {
    var request = resp.priv;
    var doc = request.responseXML;

    if (!doc || !doc.documentElement) {
      doc = request.responseText;
    }

    resp.features = this.format.read(doc);

    if (!this.maxFeatures || resp.features.length <= this.maxFeatures) {
      options.callback.call(options.scope, resp);
    } else {
      displayFeatureWarning(resp.features.length, this.maxFeatures, function () {
        options.callback.call(options.scope, resp);
      });
    }
  }
}

function getData(bounds, reload) {
  var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
  var size = projected.getWidth() * projected.getHeight();

  if (size > <%= MAX_REQUEST_AREA %>) {
    setStatus(i18n("<%=j t 'browse.start_rjs.unable_to_load_size', :max_bbox_size => MAX_REQUEST_AREA %>", { bbox_size: size }));
  } else {
    loadData("/api/<%= API_VERSION %>/map?bbox=" + projected.toBBOX(), reload);
  }
}

function loadData(url, reload) {
  setStatus("<%=j t 'browse.start_rjs.loading' %>");

  $("#browse_content").empty();

  var formatOptions = {
    checkTags: true,
    interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']
  };

  if (areasHidden) formatOptions.areaTags = [];

  if (!browseDataLayer || reload) {
    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' }
      }
    })]);

    if (browseDataLayer) browseDataLayer.destroyFeatures();

    browseDataLayer = new OpenLayers.Layer.Vector("Data", {
      strategies: [ 
        new OpenLayers.Strategy.Fixed()
      ],
      protocol: new OpenLayers.Protocol.HTTP({
        url: url,
        format: new OpenLayers.Format.OSM(formatOptions),
        maxFeatures: <%= @max_features %>,
        handleRead: customDataLoader
      }),
      projection: new OpenLayers.Projection("EPSG:4326"),
      displayInLayerSwitcher: false,
      styleMap: new OpenLayers.StyleMap({
        'default': style,
        'select': { strokeColor: '#0000ff', strokeWidth: 8 }
      })
    });
    browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded );
    map.addLayer(browseDataLayer);
            
    browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect });
    browseSelectControl.handlers.feature.stopDown = false;
    browseSelectControl.handlers.feature.stopUp = false;
    map.addControl(browseSelectControl);
    browseSelectControl.activate();
  } else {
    browseDataLayer.destroyFeatures();
    browseDataLayer.refresh({ url: url });
  }

  browseActiveFeature = null;
}

function dataLoaded() {
  if (this.map.dataLayer.active) {
    clearStatus();

    browseObjectList = document.createElement("div");

    var heading = document.createElement("p");
    heading.className = "browse_heading";
    heading.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.heading' %>"));
    browseObjectList.appendChild(heading);

    var list = document.createElement("ul");

    for (var i = 0; i < this.features.length; i++) {
      var feature = this.features[i]; 
            
      // Type, for linking
      var type = featureType(feature);
      var typeName = featureTypeName(feature);
      var li = document.createElement("li");
      li.appendChild(document.createTextNode(typeName + " "));
            
      // Link, for viewing in the tab
      var link = document.createElement("a");
      link.href =  "/browse/" + type + "/" + feature.osm_id; 
      var name = featureName(feature);
      link.appendChild(document.createTextNode(name));
      link.feature = feature;
      link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);   
      li.appendChild(link);

      list.appendChild(li);
    }

    browseObjectList.appendChild(list);

    var link = document.createElement("a");
    link.href = this.url;
    link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.api' %>"));
    browseObjectList.appendChild(link);

    $("#browse_content").html(browseObjectList); 
  }
}
    
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);

  if (browseMode != "auto") {
    map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); 
  }

  return false;
}
    
function loadObjectList() {
  $("#browse_content").empty();
  $("#browse_content").append(browseObjectList);

  return false;
}
      
function onFeatureSelect(feature) {
  // Unselect previously selected feature
  if (browseActiveFeature) {
    browseActiveFeature.layer.drawFeature(
      browseActiveFeature, 
      browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "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 clear it.
  if ($("#browse_content").firstChild == browseObjectList) { 
    $("#browse_content").removeChild(browseObjectList);
  } else { 
    $("#browse_content").empty();
  }   
        
  // Create a link back to the object list
  var div = document.createElement("div");
  div.style.textAlign = "center";
  div.style.marginBottom = "20px";
  $("#browse_content").append(div);
  var link = document.createElement("a");
  link.href = "#";
  link.onclick = loadObjectList;
  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.back' %>"));
  div.appendChild(link);

  var table = document.createElement("table");
  table.width = "100%";
  table.className = "browse_heading";
  $("#browse_content").append(table);

  var tr = document.createElement("tr");
  table.appendChild(tr);

  var heading = document.createElement("td");
  heading.appendChild(document.createTextNode(featureNameSelect(feature)));
  tr.appendChild(heading);

  var td = document.createElement("td");
  td.align = "right";
  tr.appendChild(td);

  var type = featureType(feature);
  var link = document.createElement("a");   
  link.href = "/browse/" + type + "/" + feature.osm_id;
  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.details' %>"));
  td.appendChild(link);

  var div = document.createElement("div");
  div.className = "browse_details";

  $("#browse_content").append(div);

  // Now the list of attributes
  var ul = document.createElement("ul");
  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);
  }
        
  div.appendChild(ul);
        
  var link = document.createElement("a");   
  link.href =  "/browse/" + type + "/" + feature.osm_id + "/history";
  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.show_history' %>"));
  link.onclick = OpenLayers.Function.bind(loadHistory, {
    type: type, feature: feature, link: link
  });
        
  div.appendChild(link);

  // Stash the currently drawn feature
  browseActiveFeature = feature; 
}   

function loadHistory() {
  this.link.href = "";
  this.link.innerHTML = "<%=j t 'browse.start_rjs.wait' %>";

  $.ajax("/api/<%= API_VERSION %>/" + this.type + "/" + this.feature.osm_id + "/history", {
    complete: OpenLayers.Function.bind(displayHistory, this)
  });

  return false;
}

function displayHistory(request) {
  if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList)  { 
      return false;
  } 

  this.link.parentNode.removeChild(this.link);

  var doc = request.responseXML;

  var table = document.createElement("table");
  table.width = "100%";
  table.className = "browse_heading";
  $("#browse_content").append(table);

  var tr = document.createElement("tr");
  table.appendChild(tr);

  var heading = document.createElement("td");
  heading.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.history_for_feature' %>", { feature: featureNameHistory(this.feature) })));
  tr.appendChild(heading);

  var td = document.createElement("td");
  td.align = "right";
  tr.appendChild(td);

  var link = document.createElement("a");   
  link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history";
  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.details' %>"));
  td.appendChild(link);

  var div = document.createElement("div");
  div.className = "browse_details";

  var nodes = doc.getElementsByTagName(this.type);
  var history = document.createElement("ul");  
  for (var i = nodes.length - 1; i >= 0; i--) {
    var user = nodes[i].getAttribute("user") || "<%=j t 'browse.start_rjs.private_user' %>";
    var timestamp = nodes[i].getAttribute("timestamp");
    var item = document.createElement("li");
    item.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.edited_by_user_at_timestamp' %>", { user: user, timestamp: timestamp })));
    history.appendChild(item);
  }
  div.appendChild(history);

  $("#browse_content").append(div); 
}

function featureType(feature) {
  if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
    return "node";
  } else {
    return "way";
  }
}

function featureTypeName(feature) {
  if (featureType(feature) == "node") {
    return "<%=j t 'browse.start_rjs.object_list.type.node' %>";
  } else if (featureType(feature) == "way") {
    return "<%=j t 'browse.start_rjs.object_list.type.way' %>";
  }
}

function featureName(feature) {
  if (feature.attributes['name:<%= I18n.locale %>']) {
    return feature.attributes['name:<%= I18n.locale %>'];
  } else if (feature.attributes.name) {
    return feature.attributes.name;
  } else {
    return feature.osm_id;
  }
}

function featureNameSelect(feature) {
  if (feature.attributes['name:<%= I18n.locale %>']) {
    return feature.attributes['name:<%= I18n.locale %>'];
  } else if (feature.attributes.name) {
    return feature.attributes.name;
  } else if (featureType(feature) == "node") {
    return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.node' %>", { id: feature.osm_id });
  } else if (featureType(feature) == "way") {
    return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.way' %>", { id: feature.osm_id });
  }
}

function featureNameHistory(feature) {
  if (feature.attributes['name:<%= I18n.locale %>']) {
    return feature.attributes['name:<%= I18n.locale %>'];
  } else if (feature.attributes.name) {
    return feature.attributes.name;
  } else if (featureType(feature) == "node") {
    return i18n("<%=j t 'browse.start_rjs.object_list.history.type.node' %>", { id: feature.osm_id });
  } else if (featureType(feature) == "way") {
    return i18n("<%=j t 'browse.start_rjs.object_list.history.type.way' %>", { id: feature.osm_id });
  }
}

function setStatus(status) {
  $("#browse_status").html(status);
  $("#browse_status").show();
}
  
function clearStatus() {
  $("#browse_status").html("");
  $("#browse_status").hide();
}

startBrowse();