function runbarclock() {
    // get current time
    var d = new Date();
    var hour = d.getHours();
    var min = d.getMinutes();

    // get the canvas and its attributes
    canvas = document.getElementById("barclock");
    if (!canvas) {
        return;
    }
    width = canvas.width;
    height = canvas.height;
    cxt = canvas.getContext("2d");

    // erase by filling with an opaque white rectangle
    cxt.fillStyle = "rgb(255, 255, 255)";
    cxt.fillRect(0, 0, width, height);

    // draw lines for the hours
    cxt.strokeStyle = "rgba(0, 0, 0, 0.2)";
    hourdelta = width / 24;
    for (var i = 1; i < 24; ++i) {
       x = i * hourdelta;
       cxt.beginPath();
       cxt.moveTo(x, 0);
       cxt.lineTo(x, height);
       cxt.stroke();
       cxt.closePath();
    }
    cxt.beginPath();
    cxt.moveTo(0, 0);
    cxt.lineTo(width, 0);
    cxt.lineTo(width, height);
    cxt.lineTo(0, height);
    cxt.lineTo(0, 0);
    cxt.stroke();

    // draw the bar for the hours up to now
    var hx = hour * hourdelta;
    cxt.fillStyle = "rgba(255, 165, 0, 0.5)";
    cxt.fillRect(0, 0, hx, height);

    // draw the bar for the minutes since the last hour
    mindelta = width / (24 * 60);
    cxt.fillStyle = "rgba(0, 0, 255, 0.5)";
    cxt.fillRect(hx, 0, min * mindelta, height);

    // write the current hour for up to :30, then write the next hour
    if (hour < 23) {
        if (hour > 12) {
            hour -= 12;
        }
        cxt.fillStyle = "rgba(0, 0, 0, 0.5)";
        cxt.font = "12px sans-serif";
        var x = hx + hourdelta + 1;
        var str = "" + (hour + 1);
        var y = height / 2 + 4;
        if (cxt.fillText) {
            cxt.fillText(str, x, y);
        } else if (cxt.mozDrawText) {
            cxt.save();
            cxt.mozTextStyle = cxt.font;
            cxt.translate(x, y);
            cxt.mozDrawText(str);
            cxt.restore();
        }
    }

    setTimeout("runbarclock();", 30000);
}