var width = 960,
height = 600;
var color = d3.scale.category10();
color.range(color.range().slice(0,8));

//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);


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);

//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);

    svg.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";
      /* This part just cycled through the colors array and make the colors so they mostly wont share borders with
      return color(d.color=d3.max(neighbors[i],function(n){
      return districts[n].color;
    }) + 1 | 0

  );
  */
      });

    if(house ==="upper"){

      svg.append("path")
      .datum(topojson.mesh(cali,cali.objects.caSenDist, function(a,b){
        return a;
      }))
      .attr("d",path)
      .attr("class", "bords")
    }
    else{
      svg.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;
  })

/*
  distos
  .on('mouseover', function(d){
    console.log(this);
    var blah = d3.select(this);
    blah
    //.style('fill', 'green')
    .attr('stroke', 'purple')
    .attr('class', 'hoved')


    console.log(d);
    d3.select('.distinfo')
      .html('beep boop ' + d.properties.name )
  });

  */


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

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


  }

  console.log(distos[0])


  var zoom = d3.geo.zoom()
  .projection(projection)
  //I don't really understand what the scale extent does so
  .scaleExtent([projection.scale() *.7, projection.scale() *10])
  .on("zoom.redraw", function(){
    d3.event.sourceEvent.preventDefault();
    svg.selectAll("path").attr("d",path);
  })
  d3.selectAll('path')
  .call(zoom);



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

    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')
    /*

    d3.select(this).style('fill', function(d){
      if(d.properties.party == "Democrat"){
        return 'blue';
      }
      else if(d.properties.party == "Republican"){
        return 'red'
      }
    })
    .attr('stroke', 'null')
    */

  //  d3.select('.distinfo').html(' ');
  });



})

});

}

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);
}