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);
  });