var data = tributary.subway_wait_mean;
var data2 = tributary.subway_wait;

var container_dimensions = {width: 900, height: 400}, 
    margins = {top: 10, right: 120, bottom: 30, left: 60}, 
    chart_dimensions = {
       width: container_dimensions.width - margins.left - margins.right,
       height: container_dimensions.height - margins.top - margins.bottom };

var svg = d3.select("svg");

var chart = svg.attr("width", container_dimensions.width)
.attr("height", container_dimensions.height) 
.append("g")
.attr("transform", "translate(" + margins.left + "," + margins.top + ")") 
.attr("id","chart");

var time_scale = d3.time.scale() 
.range([0,chart_dimensions.width])
.domain([new Date(2009, 0, 1), new Date(2011, 3, 1)]);

var percent_scale = d3.scale.linear() 
.range([chart_dimensions.height, 0]) 
.domain([65,90]);

var time_axis = d3.svg.axis() 
.scale(time_scale);

var count_axis = d3.svg.axis() 
.scale(percent_scale) 
.orient("left");

chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + chart_dimensions.height + ")") 
.call(time_axis);

chart.append("g") 
.attr("class", "y axis") 
.call(count_axis);

d3.select(".y.axis") 
.append("text")
.attr("text-anchor","middle") 
.text("percent on time") 
.attr("transform", "rotate (-270, 0, 0)") 
.attr("x", container_dimensions.height/2)
.attr("y", 50);


var key_items = svg.selectAll(".key_line")
.data(data)
.enter()
.append("g")
.attr("class","key_line") 
.attr("id",function(d){return d.line_id});

key_items.append("rect")
.attr("id", function(d){return "key_square_" + d.line_id}) 
.attr("x",810)
.attr("y",function(d,i){return i*20+5})
.attr("fill","none")
.attr("width",10)
.attr("height",10)
.attr("class", "key_square");

key_items.append("text") 
.attr("class","key_label") 
.attr("x",830)
.attr("y",function(d,i){return i*20+15})
.text(function(d){return d.line_name});

svg.selectAll(".key_line") 
.on("click", get_timeseries_data);

function get_timeseries_data(){ 

  var id = d3.select(this).attr("id"); 
  var ts = d3.select("#"+id+"_path");

  if (ts.empty()){ 
    var filtered_data = data2.filter(function(d){return d.line_id === id}); 
    draw_timeseries(filtered_data, id);
  } else {
    ts.remove();  
  }
}


function draw_timeseries(data, id){
  
  var line = d3.svg.line()
    .x(function(d){return time_scale(d.time)}) 
    .y(function(d){return percent_scale(d.late_percent)}) 
    .interpolate("linear");
  
  var g = chart.append("g")
    .attr("id", id + "_path") 
    .attr("class", id.split("_")[1]);
  
  g.append("path") 
    .attr("d", line(data));

  g.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr({
     cx:function(d){
       return time_scale(d.time)
     },
     cy:function(d){
       return percent_scale(d.late_percent)
     },
     r:5
   });
  
  g.selectAll("circle")
   .on({mouseover : function(d){
    d3.select(this)
      .transition()
      .attr({r:9});
   }})
   .on({mouseout : function(d){
    d3.select(this)
      .transition()
      .attr({r:5})
   }});
  
  g.selectAll("circle")
   .on({
     "mouseover.tooltip" : function(d){
       d3.select("text#"+d.line_id).remove();
       chart.append("text")
          .text(d.late_percent+"%")
          .attr({
            x:time_scale(d.time) + 10,
            y:percent_scale(d.late_percent) - 10,
            id : d.line_id
          });
     }
  
   });
  
}