//
//
function Timeline(id){
  this.canvas_node = $('#canvas-' + id);
  this.canvas = document.getElementById('canvas-' + id);

  this.slider = document.getElementById('slider-' + id);
	this.context = this.canvas.getContext("2d");
  this.width = this.canvas_node.attr('width');
  this.height = this.canvas_node.attr('height');
}

//
//
Timeline.prototype.drawConnection = function(attr) {
  var connection = document.createElement('div');
  connection.setAttribute('class', 'connection');
  connection.style.left = attr['left'] + 'px';
  connection.style.top = attr['top'] + 'px';
  connection.style.height = attr['bottom'] - attr['top'] + 'px';
  this.slider.insertBefore(connection, this.canvas);
}

//
//
Timeline.prototype.drawMilestone = function(attr) {
  this.context.strokeStyle = attr['color'];  
  this.context.lineWidth = 2;
  this.context.beginPath();  
  this.context.moveTo(attr['left'], 0);
  this.context.lineTo(attr['left'], attr['timelineHeight']);
  this.context.stroke();   
  
  // text
  var txtAttr = new Object;
  txtAttr.id = attr['id'];
  txtAttr.color = attr['color'];
  txtAttr.top = attr['top'] + 4;
  txtAttr.left = attr['left'] + 4;
  txtAttr.name = attr['name'];
  txtAttr.padding = '0px';
  txtAttr.width = attr['name'].length * 7;
  txtAttr.backgroundColor = '#ffffff';
  this.addTextNode(txtAttr);
}

//
//
Timeline.prototype.drawEvent = function(attr) {
  this.context.fillStyle = attr['color'];
  this.context.fillRect(attr['left'] + 1, attr['top'], attr['width'], attr['height']);
  this.context.font = "bold 9pt Arial";
  if (attr['overflow']) {
    this.context.fillStyle = attr['color'];;  
  } else {
    this.context.fillStyle = '#ffffff';  
  }
  
  // text
  var txtAttr = new Object;
  txtAttr.id = attr['id'];
  txtAttr.top = attr['top']
  txtAttr.left = attr['left']
  txtAttr.name = attr['name']
  txtAttr.padding = '4px';
  
  if (attr['overflow']) {
    txtAttr.paddingLeft = attr['width'] + 5
    txtAttr.color = attr['color'];
    txtAttr.width = attr['name'].length * 7;
  } else {
    txtAttr.paddingLeft = 4;
    txtAttr.color = '#ffffff';
    txtAttr.width = attr['width'] - 8;    
  }
  this.addTextNode(txtAttr);}

//
//
Timeline.prototype.drawInstant = function(attr) {
  this.context.fillStyle = attr['color'];  
  this.context.beginPath();  
  this.context.arc(attr['left'], attr['top'] + 10, 4, 0, Math.PI*2, true);
  this.context.fill();
  
  // text
  var txtAttr = new Object;
  txtAttr.id = attr['id'];
  txtAttr.color = attr['color'];
  txtAttr.top = attr['top'] + 4;
  txtAttr.left = attr['left'] + 8;
  txtAttr.width = attr['name'].length * 7;
  txtAttr.name = attr['name'];
  txtAttr.padding = '0px';
  txtAttr.backgroundColor = '#ffffff';
  this.addTextNode(txtAttr);
}

//
//
Timeline.prototype.addTextNode = function(attr) {
  var newdiv = document.createElement('div');
  newdiv.setAttribute('id', 'event' + attr['id']);
  newdiv.setAttribute('class', 'event');
  newdiv.style.position = 'absolute';
  newdiv.style.fontWeight = 'bold';
  newdiv.style.padding = attr['padding'];
  if (attr['paddingLeft'])
    newdiv.style.paddingLeft = attr['paddingLeft'] + 'px';
    
  if (attr['backgroundColor'])
    newdiv.style.background = attr['backgroundColor'];

  newdiv.style.left = attr['left'] + 'px';
  newdiv.style.top = attr['top'] + 'px';
  newdiv.style.width = attr['width'] + 'px';
  newdiv.style.color = attr['color'];

  newdiv.innerHTML = attr['name'];
  this.slider.appendChild(newdiv);  
}

//
//
Timeline.prototype.drawSeparator = function(attr) {
  var separator = document.createElement('div');
  separator.setAttribute('class', 'separator');
  separator.setAttribute('style', 'top: ' + attr['top'] + 'px');
  this.slider.insertBefore(separator, this.canvas);  
}

//
Timeline.prototype.drawChart = function(points, color) {
  // lines
  var line_ctx = this.canvas.getContext('2d');
  line_ctx.lineWidth = 2;
  line_ctx.strokeStyle = color;
  for (i = 0; i < points.length; i++) {
    if (i == 0) {
      line_ctx.beginPath();
      line_ctx.moveTo(points[i][0], points[i][1]);
    } else {
      line_ctx.lineTo(points[i][0], points[i][1]);
    } 
  }
  line_ctx.stroke();

  // points
  var dots_ctx = this.canvas.getContext('2d');
  dots_ctx.fillStyle = color;
  for (i = 0; i < points.length; i++) {
    dots_ctx.beginPath();
    dots_ctx.arc(points[i][0], points[i][1], 4, 0, Math.PI * 2, true);
    dots_ctx.fill();
  }
}