var timeline = function (target, shownow) {

var width = 1000;
var height = 500;

var list = target.getElementsByTagName('dl')[0];
var canv = document.createElement('canvas');

list.style.display = 'none';
canv.width = width.toString();
canv.height = height.toString();
target.appendChild(canv);

var yearNodes = list.getElementsByTagName('time');
var labelNodes = list.getElementsByTagName('dt');
var years = [], labels = [];
for ( var i = 0; i < yearNodes.length; i += 1) {
    years[i] = parseInt(yearNodes[i].firstChild.nodeValue);
    labels[i] = labelNodes[i].firstChild.nodeValue.toString();
}
var min = years[0] - 3;
var max = years[years.length-1];
max = max + 6;

function getX (year, max, min, length) {
    return length/(max-min)*(year-min);
}

if (canv.getContext) {
    var ctx = canv.getContext('2d');

    ctx.strokeStyle = "rgba(255,255,255,1)";
    ctx.fillStyle = "rgba(255,255,255,1)";
    
    var x = 0;
    var y = parseInt(height*3/4);

    ctx.fillRect(10, y, width, 6);

    ctx.mozTextStyle = "16pt Arial";
    var year = min + ((min%5)?5-(min%5):0);
    for ( var i = year; i < max; i += 5) {
        x = getX(i, max, min, width);
        ctx.fillRect(x, y, 2, 35);
        if (ctx.fillText) ctx.fillText(i.toString(), x+8, y+30);
    }
    ctx.mozTextStyle = "bold 18pt Arial";
    for ( var i = 0; i < years.length; i += 1) {
        x = getX(years[i], max, min, width);
        y = getX(i, years.length, 0, parseInt(height*3/4-30)) + 30;
        if (years.length-i == 1) ctx.mozTextStyle = "bold 24pt Arial";
        ctx.fillRect(x, y-20, 1, height*3/4-y+20);
        if (ctx.fillText) ctx.fillText(labels[i].toString(), x+5, y);
    }
    //ctx.fillRect(x, y-20, 1, height*3/4-y+20);

}

if (shownow) {
    var flag = false;
    function here(e, year) {
        x = getX(year, max, min, 1000);
        y = height * 0.4;
        var h = height*0.75-y+20;
        ctx.fillStyle = "rgba(255,30,30,1)";
        for ( var i = 1; i <= 100; i += 1) {
            setTimeout((function (i) {
                return function () {
                    ctx.fillRect(x, y-22-(i/100-1)*h, 2, h/100+2);
                }
            })(i), i*10);
        }
        setTimeout(function () {
            ctx.mozTextStyle = "bold 30pt Arial";
            x = getX(2008, max, min, 1000);
            if (ctx.fillText) ctx.fillText('Mom! I\'m here!!!', x+5, y);
            flag = true;
        }, 1200);
    }
    $(canv).click(function () {
        var now = new Date();
        here(canv, parseInt(now.getFullYear()));
        return flag;
    });
}

};