if (window.addEventListener)
{
  window.addEventListener('load', drawTimeLine(document.getElementById("timeline")), false);
} 

function getCurrentYear() {
	var today = new Date();
	return today.getFullYear() + today.getMonth() / 12 + today.getDay() / 30 + 0.05;
}

function drawArrow(context, fromx, fromy, tox, toy){
    var headlen = 15; // length of head in pixels
		var narrow = Math.PI / 8;
    var angle = Math.atan2(toy-fromy,tox-fromx);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle-narrow),toy-headlen*Math.sin(angle-narrow));
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle+narrow),toy-headlen*Math.sin(angle+narrow));
}

function drawTimeLine(canvas) {
	var canvas;
	var ctx=canvas.getContext("2d");

	var baseYear = 2057;
	var offsetX = 128;
	var offsetY = 8;
	var stepY = 9;

	// Create gradient
	var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
	gradient.addColorStop("0",  "#000000");
	gradient.addColorStop("0.8","#7F7F7F");
	gradient.addColorStop("1.0","#AFAFAF");
	// Fill with gradient
	ctx.fillStyle=gradient;
	ctx.font="20px Georgia";
	ctx.textBaseline="middle";

	for (var i = 0; true; i++) {
		//  ctx.fillRect(0,0,150,75);
		var y = i * stepY + offsetY;
		var year = baseYear - i;
		var special = (year % 5) === 0;
		var offsetXLine = offsetX + (special ? 60 : 75);

		ctx.beginPath();
		ctx.moveTo(offsetXLine, y);
		var x = offsetXLine + (special ? 50 : 35);
		ctx.lineTo(x, y);
		ctx.lineWidth = 1;
		ctx.stroke();
		if (special) {
			ctx.fillText(year,offsetX, y);
		}
		if (y >= (canvas.height - 2 * offsetY)) break;
	}
	var y = (baseYear - getCurrentYear()) * stepY + offsetY;
	var offsetXLine = offsetX + 115;

	ctx.beginPath();
	ctx.lineWidth = 2;
	var x = offsetXLine + 55;
	drawArrow(ctx, x, y, offsetXLine, y);
	ctx.stroke();
}