var width = 960,
height = 600;

var lat;
var lon;

//Choosing mercator because that's what I made the data in and also scale and center setting
var projection = d3.geo.mercator()
  .scale(2000)
  .translate([width / 2, height / 2])
  .center([-120,36]);

// So now when I call path on jam it will use this projection and stuff
var path = d3.geo.path()
  .projection(projection);

  var zoom = d3.behavior.zoom()
  .translate([0, 0])
  .scale(1)
  .scaleExtent([1, 18])
  .on("zoom", zoomed);


d3.select("body").append("h4")
  .html('Total number of Democrats: <span class="numDems">52</span> </br> Total number of Republicans: <span class="numRepu">28</span>')
  .style('color', 'white')
  .attr('class', 'bigtitle');

// Appending the actual SVG to the body of the page w/ height width
var holder = d3.select("body").append("div")
.attr("class", "maphold").style("width", width + "px").style("height", height+"px")

holder.append('div')
.attr('class','distinfo')
.style('background-color', "white")
.style('width', "200px")
.html('Click on a district to see details')



var svg = holder.append("svg")
.attr("width", width)
.attr("height", height);




svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.call(zoom);

var features = svg.append('g')//.call(zoom)

// things seem to work best if I just call zoom on svg though calling it on the
// .overlay above as well doesn't break stuff like calling zoom on the features.
svg.call(zoom)
//d3.select('.maphold')

function makemap(house){

  d3.selectAll('path')
    .remove();

  //Make the house the in title the right one
  d3.select('.chatit')
    .text(function(){
      if(house =='lower'){
        return 'Assembly'
      }
      return 'Senate'
    })

  d3.json("http://secure-sands-4200.herokuapp.com/ca" + house +".json" // "/calAss1.json"
  , function(cali) {
    console.log(cali.objects);

    // if statement to deal with different object names in topojson
  if(house ==="upper"){
    var neighbors = topojson.neighbors(cali.objects.caSenDist.geometries);
    var districts = topojson.feature(cali, cali.objects.caSenDist).features;
  }
  else{
    var neighbors = topojson.neighbors(cali.objects.assemD2011.geometries);
    var districts = topojson.feature(cali, cali.objects.assemD2011).features;
  }
    console.log(neighbors);

    features.selectAll(".casubun")
    .data(districts)
    .enter().append("path")
    .attr("class", function(d) { return "casubun"; })
    .attr("d", path)
    .style("fill",function(d,i){
      //console.log(d)
      return "green";
      });

    if(house ==="upper"){

      features.append("path")
      .datum(topojson.mesh(cali,cali.objects.caSenDist, function(a,b){
        return a;
      }))
      .attr("d",path)
      .attr("class", "bords")
    }
    else{
      features.append("path")
      .datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){
        return a;
      }))
      .attr("d",path)
      .attr("class", "bords")
    }

//.attr();

d3.json('http://secure-sands-4200.herokuapp.com/db/?state=ca&house='+house, function(datur){
  //console.log(d)
  var dable = datur;
  var numRepubs = 0;
  var numDems = 0;


  var distos = d3.selectAll('.casubun')
  .style('fill', function(d, i){
    var tofi = 'yellow';
    var dnum = +d.properties.DISTRICT;
  //  console.log(d)
    datur.forEach(function(w, e){
      //  Matching the distcts with the console.log(w)
      if(w.district == dnum ){
        console.log('a match!');
        if(w.party === "Republican"){
          d.properties.party = "Republican";
          d.properties.name = w.full_name;
          numRepubs++;

          return  tofi = 'red'
        }
        d.properties.party = "Democrat";
        d.properties.name = w.full_name
        numDems++;

        tofi = 'blue';
      }
    })
  //  console.log(d);
    putTots();

    return tofi;
  })


  function putTots(){
    d3.select('.numDems')
    .text(numDems);

    d3.select('.numRepu')
    .text(numRepubs);


  }

  navigator.geolocation.getCurrentPosition(function(pos){
    console.log('geoloc', pos);
    lat = pos.coords.latitude;
    lon = pos.coords.longitude;
    var projcoor = projection([lon,lat]);

  features.append('circle')
    .attr('cx',function(){

      console.log(projection([lon,lat]));
      return projcoor[0]
    })
    .attr('cy',function(){
      return projcoor[1]
    })
    .attr('r','10')
    .attr('fill','green')
    .attr('class', 'myloc')

  })
  console.log(distos[0])



  d3.selectAll(".casubun").on('click', function(d){
    console.log(this);
    d3.selectAll('.casubun')
    .style('fill', makePcol)
    .attr('class', 'casubun')
    .attr('stroke','null')

    var blah = d3.select(this);
    blah
    .style('fill', 'fuchsia')
    .attr('stroke', 'orange')
    .attr('class', 'casubun hoved')


    console.log(d);
    d3.select('.distinfo')
    .html(function(){
      console.log((d.properties.name))

      if(d.properties.name != undefined ){
      return 'District ' +  d.properties.DISTRICT +' '+ d.properties.name}
      else{
        return 'No one'
      }
      })
  })
  .on('mouseout', function(d){
    console.log('outter there')

  });


})

});

}

function makePcol(d){
  //  console.log('making colors', d)
  if(d.properties.party == 'Democrat'){
    return 'blue'
  }
  else if(d.properties.party == 'Republican'){
    return 'red';
  }
  else{
    return 'yellow'
  }

}

makemap('upper');

d3.select("body")
.transition()
.style("background-color", "black");

function housech(value){
  console.log('house changed', value)
  makemap(value);
}