$(window).load(function () {
    var paper = Raphael("holder", 700, 700),
        rad = Math.PI / 180;
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(params).moveTo(cx, cy).lineTo(x1, y1).arcTo(r, r, (endAngle - startAngle > 180 ? 1 : 0), 0, x2, y2).andClose();
    }
    function pie(values) {
        var angle = 0,
            total = 0,
            cx = 350,
            cy = 350;
            process = function (j) {
                var value = values[j],
                    angleplus = 360 * value / total,
                    popangle = angle + (angleplus / 2),
                    color = Raphael.getColor(),
                    ms = 200,
                    delta = 30,
                    p = sector(cx, cy, 200, angle, angle + angleplus, {fill: color, stroke: "#000"}),
                    bcolor = Raphael.rgb2hsb(color);
                bcolor = Raphael.hsb2rgb(bcolor.h, bcolor.s, 1).hex;
                var txt = paper.text(cx + (200 + delta + 55) * Math.cos(-popangle * rad), cy + (200 + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({fill: color, stroke: "none", opacity: 0, "font-family": '"Georgia"', "font-size": "20px"});
                $(p[0]).mouseover(function () {
                    var dt = (new Date()).getTime(),
                        x = 0,
                        y = 0;
                    p.attr({fill: bcolor});
                    (function () {
                        var ndt = (new Date()).getTime();
                        if (ndt - dt < ms) {
                            var d = delta * (ndt - dt) / ms,
                                x1 = d * Math.cos(-popangle * rad),
                                y1 = d * Math.sin(-popangle * rad);
                            p.translate(x1 - x, y1 - y);
                            x  = x1;
                            y = y1;
                            txt.attr({opacity: (ndt - dt) / ms});
                            setTimeout(arguments.callee, 0);
                        } else {
                            txt.attr({opacity: 1});
                        }
                    })();
                }).mouseout(function () {
                    var dt = (new Date()).getTime(),
                        x = 0,
                        y = 0;
                    (function () {
                        var ndt = (new Date()).getTime();
                        if (ndt - dt < ms) {
                            var d = delta * (ndt - dt) / ms,
                                x1 = d * Math.cos(-popangle * rad),
                                y1 = d * Math.sin(-popangle * rad);
                            p.translate(x - x1, y - y1);
                            x  = x1;
                            y = y1;
                            txt.attr({opacity: 1 - ((ndt - dt) / ms)});
                            setTimeout(arguments.callee, 0);
                        } else {
                            var offset = p.translate();
                            p.translate(-offset.x, -offset.y).attr({fill: color});
                            txt.attr({opacity: 0});
                        }
                    })();
                });
                angle += angleplus;
            };
        for (var i = 0, ii = values.length; i < ii; i++) {
            total += values[i];
        }
        for (var i = 0, ii = values.length; i < ii; i++) {
            process(i);
        }
    }
    var values = [],
        labels = [];
    $("tr").each(function () {
        values.push(parseInt($("td", this).text(), 10));
        labels.push($("th", this).text());
    });
    $("table").hide();
    pie(values);
});