var mapWidth = 756,
mapHeight = 496,
focused = false;

var projection = d3.geo.mercator()
.center([37.620825, 55.750480])
.scale(29000)
.translate([mapWidth / 1.75, mapHeight / 2]);

var path = d3.geo.path()
.projection(projection);

var svgMap = d3.select("div#map").append("svg")
.attr("overflow", "hidden")
.attr("width", mapWidth)
.attr("height", mapHeight);

var zone_tooltip = d3.select("div#map").append("div").attr("class", "zoneTooltip"),
point_label = d3.select("div#map").append("div").attr("class", "pointLabel"),
info_label = d3.select("div#map").append("div").attr("class", "infoLabel");

var g = svgMap.append("g");

queue()
.defer(d3.json, "mosZones.json")
.defer(d3.csv, "mosWater.csv")
.defer(d3.csv, "waterStations.csv")
.await(ready);


function ready(error, map, mdata, pdata) {
  var phById = {},
  colorationById = {},
  turbidityById = {},
  chlorumById = {},
  smell_20ById = {},
  smell_60ById = {},
  ferrumById = {};

  mdata.forEach(function(d) {
    phById[d.id] = d.pH,
    colorationById[d.id] = d.coloration,
    turbidityById[d.id] = d.turbidity,
    chlorumById[d.id] = d.chlorum,
    smell_20ById[d.id] = d.smell_20,
    smell_60ById[d.id] = d.smell_60,
    ferrumById[d.id] = d.ferrum;
  });

  // Drawing map
  g.selectAll("path.mapData")
  .data(topojson.feature(map, map.objects.mos).features)
  .enter().append("path")
  .attr("d", path)
  .attr("class", "mapData")

  .on("mouseover", function(d) {
   d3.select(this)
   var t = zone_tooltip.html("")
   .style("display", "block")
   .style("left", (d3.event.pageX + 10) + "px")
   .style("top", (d3.event.pageY - 15) + "px");
   t.append("span").attr("class", "zoneLabel").text("Район: " + d.properties.name);    
 })
  .on("mouseout", function(d) {
    zone_tooltip.style("display", "none");
  })
  .on("click", focus)
  .on("mousemove", function(d) {
    zone_tooltip.style("left", (d3.event.pageX + 10) + "px")
    .style("top", (d3.event.pageY - 15) + "px");
  });

  // Adding water stations
  var station = g.selectAll("g.station")
  .data(pdata)
  .enter()
  .append("g")
  .attr("class", "station")
  .attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; });

  station.append("image")
  .attr("xlink:href", "water_station-24.png")
  .attr("x", function(d) {return -24;})
  .attr("width", 48)
  .attr("height", 24)

  .on("mouseover", function(d) {
    point_label.text(d.stationName)
    .style("left", (d3.event.pageX + 5) + "px")
    .style("top", (d3.event.pageY + 15) + "px")
    .style("display", "inline");
  })
  .on("mouseout", function() {
    point_label.style("display", "none");
  });

  //Adding data to panel
  function focus(d) {
    if (focused === d) return reset();
    g.selectAll(".focused").classed("focused", false);
    d3.select(this).classed("focused", focused = d);

    var cells = d3.selectAll("td");
    cells[0][0].innerHTML = phById[d.id];
    cells[0][1].innerHTML = colorationById[d.id];
    cells[0][2].innerHTML = turbidityById[d.id];
    cells[0][3].innerHTML = chlorumById[d.id];
    cells[0][4].innerHTML = smell_20ById[d.id];
    cells[0][5].innerHTML = smell_60ById[d.id];
    cells[0][6].innerHTML = ferrumById[d.id];
    cells[0][7].innerHTML = "нет";
    cells[0][8].innerHTML = "нет";
    cells[0][9].innerHTML = "нет";

    var zone = info_label.html("").style("display", "inline")
    zone.append("span").text("Округ: " + d.properties.okrug);
    zone.append("span").text("Район: " + d.properties.name);
  }

  function reset() {
    g.selectAll(".focused").classed("focused", focused = false);
    info_label.style("display", "none");

    var cells = d3.selectAll("td");
    cells[0].forEach(function(cell) {
      cell.innerHTML = "-";
    });    
  }

};