// data from https://docs.google.com/spreadsheets/d/1SDp7p1y6m7N5xD5_fpOkYOrJvd68V7iy6etXy2cetb8/edit#gid=0



var margins = {top:30, right:60, bottom:45, left:50};

var height = 400;

var width = 600;


var x = d3.scale.ordinal()
  .rangeRoundBands([0, width - margins.right - margins.left], .3);

var xaxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  //.tics(10)
//  .attr("stoke", "grey");

var y = d3.scale.linear()
  .range([height - margins.top - margins.bottom , 0]);

var ydeaths = d3.scale.linear()
.range([height - margins.top - margins.bottom , 0]);


var othyaxis = d3.svg.axis()
.scale(ydeaths)
.orient("right")
.ticks(12);

var yaxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);


    var fatalCol = "#a50f15"  //"#993404";
    var crashCol = "#fb6a4a"


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("stroke", "black")
    .attr("class","charSVG")
    .append("g")
    .attr("transform", "translate("+ margins.left + "," + margins.left + ")")
  //  .attr("stroke-width",2);





d3.csv("Accidents.csv", function(err, data){
  console.log(data);


  var datlen = data.length;

  var last10 = data.slice(datlen -11, datlen)



  x.domain(last10.map(function(d){
  //  console.log(d);
    return d.Year;
  }))

  y.domain([0, d3.max(last10, function(d){
    return d.Accidents;
  })])





var xaxisP = height  - margins.bottom - margins.top ;

svg.append("g")
  .attr("class", "xaxis")
  .attr("stroke", "grey")
  .attr("fill", "none")
  .attr("transform", "translate("+0+"," + xaxisP+ ")" )
  .call(xaxis);




svg.append("g")
  .attr("class", "yaxis")
  .attr("fill", "none")

//  .attr("transform", "translate(" + margins.left +"," +
  // margins.top +
  // margins.bottom+ ")")


  .attr("stroke", crashCol)

  .call(yaxis)
  .append("text")
    .attr("transform", "rotate(-90) translate(-250,-30)")
    .attr("class", "yaxLab")

    .text("Number of multi-engine plane crashes")
    .attr('fill', "black")
  ;



  svg.selectAll(".crashBars")
    .data(last10)
    .enter()
    .append("rect")
    .attr("height", function(d){
      console.log(y(d.Accidents))
      return height- margins.top- margins.bottom  - y(d.Accidents);
    })
    .attr("width", x.rangeBand()/2)
    .attr("x", function(d){
      return x(d.Year);
      //// - (1/2) * x.rangeBand()
    })
    .attr("y", function(d){
      return  y(d.Accidents) ;
    })
    .attr("class", "crashBars")
    .attr("fill", crashCol);


    ydeaths.domain([0, 1074
      //d3.max(last10, function(d){return d.Fatalities  })
      ])





      // not understanding why this is returning not the max Fatalities on the last10
    console.log( d3.max(last10, function (d){
      return d.Fatalities
    }))// ydeaths.domain())

    var movrightY = width - margins.left- margins.right;

    svg.append("g")
      .attr("class", "othY")
      .call(othyaxis)
      .attr("transform", "translate("+ movrightY  +"," +"0)")
      .attr("fill",  "none"//fatalCol
    )
    .attr("stroke", fatalCol)
    .attr("opacity", 1)
    .append("text")
    .attr("transform", "rotate(-90) translate(-70,60)")
    .attr("class", "yweilab")

    .text("Deaths")
    .attr('fill', "black")

    /*
    svg.append("g")
    .attr("class", "bleep")
    .call(othyaxis)
    .attr("transform", "translate("+ movrightY  +"," +"0)")
    .attr("fill",  "none"//fatalCol
  )
  .attr("opacity", )
*/

    svg.selectAll(".deathBars")
      .data(last10)
      .enter()
      .append("rect")
      .attr("fill", fatalCol)
      .attr("height", function(d){
        return height - ydeaths(d.Fatalities) - margins.bottom - margins.top ;
      })
      .attr("x", function(d){
        return x(d.Year)  + (1/2) * x.rangeBand();
      })
      .attr("y", function(d){
        return ydeaths(d.Fatalities)
      })
      .attr("width", x.rangeBand()/2)
      .attr("class", "deathBars")
  //    .attr("transform", "translate("+ width - margins.left +"," +"0)")


  var movrightY = width - margins.left- margins.right - 40;


  svg.append("text")
  .text("Air plane crashes and fatalities of the last decade")
  .attr("x", width/7)
  .attr("y", -20)



})




console.log("hellow world");