var svg = d3.select("svg")
var format_day = d3.time.format("%d/%m/%Y");
  
d3.json("times.json", function(error, times) {
  if (error) throw error;
  times = json_preprocessor(times);
  draw_graph(times);
});


function times_preprocessor(t){
  var ts = t.split(',');
  var emb = [];
  for (var k of ts){
    var abl = k.split('->');
    emb.push(abl);
  }
  return emb;
}

function json_preprocessor(p){
  var new_object_array = [];
  for (var key in p) {
    if (p.hasOwnProperty(key)) {
      var day_datum = format_day.parse(key);
      var processed_times = times_preprocessor(p[key]);
      new_object_array.push({day: day_datum, times: processed_times});
    }
  }

  
  return new_object_array;
}

function draw_graph(times){
  
    console.log(times);
  
    var margin = {top: 20, right: 80, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
  
    // time during day
    var x = d3.time.scale()
        .range([0, width]);
    
    var y = d3.time.scale()
        .range([height, 0]);
 
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(d3.time.linear)
        .tickSize(4)
        .tickFormat(d3.time.format("%H:%M"))
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .ticks(d3.time.days)
        .orient("left");
  
    function adjust_date(date, add){
        return d3.time.day.offset(date, add)
    }
    var first_day = adjust_date(times[times.length - 1].day, -1);
    var last_day = adjust_date(times[0].day, 1);
  
    x.domain([0, 24]);
    y.domain([first_day, last_day]);

  
    svg
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
  
    var g3 = svg.append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    g3.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + height + ")")
        .call(xAxis);

    g3.append("g")
        .attr("class", "y axis")
        .call(yAxis)
  
    var rect1 = g3.selectAll('rect').data(times);
    var rectEnter = rect1.enter().append('rect');
    rectEnter
       .attr("width", function(d){return "02:00"})
       .attr("height", 4)
       .style({fill: "#48f5f8"})
       //.attr("transform", function(d){ 
       //      var kn = y(d3_time.timeDay.round(d.unix));
       //      return "translate(0, " + kn + ")"
       // })

  
}