var data = [];
for (var i = 0; i < 24 * 7; i++) {
    data[i] = Math.max(Math.round(Math.random() * 50 - 20), 0);
}
data[123] = 12345;
$(window).load(function () {
    $("body").attr("id", document.location.hash.substring(1));
    var width = 800,
        height = 300,
        leftgutter = 30,
        bottomgutter = 20,
        r = Raphael("chart", width, height),
        axisx = ["12am", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, "12pm", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        txt = {"font": '9px "Arial"', "stroke-width": 0, fill: $("body").css("color")},
        X = (width - leftgutter) / axisx.length,
        Y = (height - bottomgutter) / axisy.length,
        color = $("#chart").css("color");
        max = Math.round(X / 2) - 1;
    for (var i = 0, ii = axisx.length; i < ii; i++) {
        r.text(leftgutter + X * (i + .5), 294, axisx[i]).attr(txt);
    }
    for (var i = 0, ii = axisy.length; i < ii; i++) {
        r.text(10, Y * (i + .5), axisy[i]).attr(txt);
    }
    var o = 0;
    for (var i = 0, ii = axisy.length; i < ii; i++) {
        for (var j = 0, jj = axisx.length; j < jj; j++) {
            var R = data[o] && Math.min(Math.sqrt(data[o] / Math.PI) * 4, max);
            var dot = r.circle(leftgutter + X * (j + .5), Y * (i + .5), R).attr({stroke: "none", fill: color});
            (function (dx, dy, R, value) {
                dot[0].onmouseover = function () {
                    label.pth.translate(dx, dy);
                    label.txt.translate(dx, dy);
                    label.txt.attr("text", value);
                    label.show();
                };
                dot[0].onmouseout = function () {
                    label.hide();
                    label.pth.translate(-dx, -dy);
                    label.txt.translate(-dx, -dy);
                };
            })(leftgutter + X * (j + .5) - 60 - R, Y * (i + .5) - 10, R, data[o++]);
        }
    }
    var label = r.group();
    label.pth = label.path({fill: $("label").css("background-color")}).moveTo(5, 0).lineTo(50, 0).addRoundedCorner(5, "rd").lineTo(55, 7).lineTo(63, 10).lineTo(55, 13).lineTo(55, 15).addRoundedCorner(5, "dl").lineTo(5, 20).addRoundedCorner(5, "lu").lineTo(0, 5).addRoundedCorner(5, "ur").andClose();
    label.txt = label.text(27, 15, "123").attr({"font": '10px "Arial"', "stroke-width": 0, fill: $("label").css("color")});
    label.hide();
});