$(function () {
    $("#data").css({
        position: "absolute",
        left: "-9999em",
        top: "-9999em"
    });
});

$(function () {
    $("#data_priced").css({
        position: "absolute",
        left: "-9999em",
        top: "-9999em"
    });
});

window.onload = function () {
    // Grab the data
    var labels = [],
        data = [];
    $("#data tfoot th").each(function () {
        labels.push($(this).html());
    });
    $("#data tbody td").each(function () {
        data.push($(this).html());
    });
    
    // Draw
    var width = 800,
        height = 250,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20,
        color = "#425466",
        r = Raphael("holder", width, height),
        txt = {"font": '12px "Arial"', stroke: "none", fill: "#fff"},
        txt1 = {"font": '9px "Arial"', stroke: "none", fill: "#fff"},
        txt2 = {"font": '12px "Arial"', stroke: "none", fill: "#000"},
        X = (width - leftgutter) / labels.length,
        max = Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / max;
    r.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, 10, 10, "#333");
    var path = r.path({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp = r.path({stroke: "none", opacity: .3, fill: color}).moveTo(leftgutter + X * .5, height - bottomgutter),
        frame = r.rect(10, 10, 100, 40, 5).attr({fill: "#000", stroke: "#425466", "stroke-width": 2}).hide(),
        label = [],
        is_label_visible = false,
        leave_timer,
        blanket = r.set();
    label[0] = r.text(60, 10, "24 tweets").attr(txt).hide();
    label[1] = r.text(60, 40, "22 September 2008").attr(txt1).attr({fill: color}).hide();

    for (var i = 0, ii = labels.length; i < ii; i++) {
        var y = Math.round(height - bottomgutter - Y * data[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r.text(x, height - 6, labels[i]).attr(txt).toBack();
        bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
        path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
        var dot = r.circle(x, y, 4).attr({fill: color, stroke: "#000"});
        blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0}));
        var rect = blanket[blanket.length - 1];
        (function (x, y, data, lbl, dot) {
            var timer, i = 0;
            $(rect.node).hover(function () {
                clearTimeout(leave_timer);
                var newcoord = {x: x * 1 + 7.5, y: y - 19};
                if (newcoord.x + 100 > width) {
                    newcoord.x -= 114;
                }
                frame.show().animate({x: newcoord.x, y: newcoord.y}, 200 * is_label_visible);
                label[0].attr({text: data + " tweet" + ((data % 10 == 1) ? "" : "s")}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 12}, 200 * is_label_visible);
                label[1].attr({text: lbl}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 27}, 200 * is_label_visible);
                dot.attr("r", 6);
                is_label_visible = true;
                r.safari();
            }, function () {
                dot.attr("r", 4);
                r.safari();
                leave_timer = setTimeout(function () {
                    frame.hide();
                    label[0].hide();
                    label[1].hide();
                    is_label_visible = false;
                    r.safari();
                }, 1);
            });
        })(x, y, data[i], labels[i], dot);
    }
    bgp.lineTo(x, height - bottomgutter).andClose();
    frame.toFront();
    label[0].toFront();
    label[1].toFront();
    blanket.toFront();
    
    /**
     * Segundo gráfico
     */
    
    // Grab the data
    var labels_price = [],
        data_price = [];
    $("#data_priced tfoot th").each(function () {
        labels_price.push($(this).html());
    });
    $("#data_priced tbody td").each(function () {
        data_price.push($(this).html());
    });
    
    // Draw
    var width = 800,
        height = 250,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20,
        color = "#425466";
        r_price = Raphael("holder_priced", width, height),
        txt = {"font": '12px "Arial"', stroke: "none", fill: "#fff"},
        txt1 = {"font": '9px "Arial"', stroke: "none", fill: "#fff"},
        txt2 = {"font": '12px "Arial"', stroke: "none", fill: "#000"},
        X = (width - leftgutter) / labels_price.length,
        max = Math.max.apply(Math, data_price),
        Y = (height - bottomgutter - topgutter) / max;
    r_price.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, 10, 10, "#333");
    var path_price = r_price.path({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp_price = r_price.path({stroke: "none", opacity: .3, fill: color}).moveTo(leftgutter + X * .5, height - bottomgutter),
        frame_price = r_price.rect(10, 10, 100, 40, 5).attr({fill: "#000", stroke: "#425466", "stroke-width": 2}).hide(),
        label_price = [],
        is_label_visible = false,
        leave_timer,
        blanket = r_price.set();
    label_price[0] = r_price.text(60, 10, "24 tweets").attr(txt).hide();
    label_price[1] = r_price.text(60, 40, "22 September 2008").attr(txt1).attr({fill: color}).hide();

    for (var i = 0, ii = labels_price.length; i < ii; i++) {
        var y = Math.round(height - bottomgutter - Y * data_price[i]),
            x = Math.round(leftgutter + X * (i + .5)),
            t = r_price.text(x, height - 6, labels_price[i]).attr(txt).toBack();
        bgp_price[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
        path_price[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
        var dot = r_price.circle(x, y, 4).attr({fill: color, stroke: "#000"});
        blanket.push(r_price.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0}));
        var rect = blanket[blanket.length - 1];
        (function (x, y, data_price, lbl, dot) {
            var timer, i = 0;
            $(rect.node).hover(function () {
                clearTimeout(leave_timer);
                var newcoord = {x: x * 1 + 7.5, y: y - 19};
                if (newcoord.x + 100 > width) {
                    newcoord.x -= 114;
                }
                frame_price.show().animate({x: newcoord.x, y: newcoord.y}, 200 * is_label_visible);
                label_price[0].attr({text: data_price + " tweet" + ((data_price % 10 == 1) ? "" : "s")}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 12}, 200 * is_label_visible);
                label_price[1].attr({text: lbl}).show().animate({x: newcoord.x * 1 + 50, y: newcoord.y * 1 + 27}, 200 * is_label_visible);
                dot.attr("r_price", 6);
                is_label_visible = true;
                r_price.safari();
            }, function () {
                dot.attr("r_price", 4);
                r_price.safari();
                leave_timer = setTimeout(function () {
                    frame_price.hide();
                    label_price[0].hide();
                    label_price[1].hide();
                    is_label_visible = false;
                    r_price.safari();
                }, 1);
            });
        })(x, y, data_price[i], labels_price[i], dot);
    }
    bgp_price.lineTo(x, height - bottomgutter).andClose();
    frame_price.toFront();
    label_price[0].toFront();
    label_price[1].toFront();
    blanket.toFront();
};