$(function(){
  resume_timeline($('#timeline'), resume);
});
  
var resume_timeline = function(canvas, json){
  canvas = canvas[0];
  // Check the element is in the DOM and the browser supports canvas
  if (canvas.getContext) {
    //drawing vars
    var ctx = canvas.getContext('2d'),
        canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        monthWidth = 20,
        colors = [[66, 95, 160], [66, 160, 137], [221, 189, 38], [240, 136, 91]]
  
    //date vars
    var now = new Date(),
        curYear = now.getFullYear(),
        curMonth = now.getMonth(),
        endDate = new Date(curYear, curMonth, 1),
        startDate = new Date(curYear - 3, curMonth, 1);
    
    //utitlity to get a date from either a string ("present") or a date [yr, mo]
    var date_from_json = function(date){
      var date;
      
      if (date === "present"){
        date = new Date();
        date.setDate(1);
      } else {
        date = new Date(date[0], date[1], 1);
      }
      return date;
    }
    
    //utility to get an x position on the timeline from a date
    var xpos_from_date = function(date){
      date = date_from_json(date);
      
      var yr = date.getFullYear();
      var mo = date.getMonth();
      var curMon = curMonth;

      if(yr < curYear){
        curMon += (curYear - yr) * 11;
      }
      
      var difMonths = curMon - mo;
      var xpos = canvasWidth - (monthWidth * difMonths)
      return xpos;
    }
    
    var draw_timeline = function(){
      //draw month lines
      for (var i = 0; i < 36; i++){
        var x = (canvasWidth-(i * monthWidth))-2;
        ctx.fillStyle = "rgba(0,0,0, .23)";
        ctx.fillRect(x, 38, 2, 20); 
      }
      
      //draw year lines and text
      var yrOffset = monthWidth * curMonth;
      for (var i = 0; i < 3; i++){
        var x = (canvasWidth - (i * (monthWidth *12)))-2-yrOffset;
        ctx.fillStyle = "rgb(150,150,150)";
        ctx.fillRect(x, 30, 2, 30); 
        
        ctx.fillStyle = "rgb(150, 150, 150)";
        ctx.font = "14px helvetica, sans-serif";
        ctx.textAlign = "center";
        ctx.fillText(curYear - i, x, 20);
      }
    }
    
    var draw_marker = function(xpos, color){
      var mkrTop = 50,
          mkrHeight = 15,
          mkrWidth = 6;
      
      ctx.fillStyle = "rgb("+color[0]+","+color[1]+","+color[2]+")";
      
      //start at top
      ctx.beginPath();
      ctx.moveTo(xpos, mkrTop);
      
      //move clockwise
      ctx.lineTo(xpos + mkrWidth, mkrTop + mkrWidth);
      ctx.lineTo(xpos + mkrWidth, mkrTop + mkrWidth + mkrHeight);
      ctx.lineTo(xpos - mkrWidth, mkrTop + mkrWidth + mkrHeight);
      ctx.lineTo(xpos - mkrWidth, mkrTop + mkrWidth);
      ctx.fill();
    }
    
    //draw the transparent period in between the start and end date
    var draw_span = function(left, right, color) {
      var width = right - left;
      ctx.fillStyle = "rgba("+color[0]+","+color[1]+","+color[2]+", .4)";    
      ctx.fillRect(left, 48, width, 10);
    }
    
    //draw the markers and a span for a period
    var draw_period = function(start, end, color){
      var start_xpos = xpos_from_date(start),
          end_xpos   = xpos_from_date(end);
          
      draw_span(start_xpos, end_xpos, color);
      
      draw_marker(start_xpos - 1, color);
      //don't draw the marker if we're still at this place
      if (end != "present"){
        draw_marker(end_xpos - 1, color);
      }
    }
    
    var draw_education = function() {
      var schools = json.education,
          educationLis = $('ul#education').children();
      
      for (var i = 0; i < schools.length; i++){
        var school = schools[i],
            color = colors.shift();
                
        period = school.period;
        draw_period(period.start, period.end, color);
        educationLis.eq(i).css('border-left-color', "rgba("+color[0]+","+color[1]+","+color[2]+", .4)");
      }
    }
    
    var draw_employment = function(){
      var jobs = json.employment,
          employmentLis = $('ul#employment').children();
          
      for (var i = 0; i < jobs.length; i++){
        var job = jobs[i],
            color = colors.shift();

        period = job.period;
        draw_period(period.start, period.end, color);
        employmentLis.eq(i).css('border-left-color', "rgba("+color[0]+","+color[1]+","+color[2]+", .4)");          
      }
    }
    
    //init
    draw_timeline();

    draw_employment();
    draw_education();
    
  } else {
    alert("Your browser may be worth a fortune on Antique Roadshow.  Upgrade to get the most out of the web.");
  }
}