Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
    color = color || "#000";
    var path = ["M", Math.round(x) + .5, Math.round(y) + .5, "L", Math.round(x + w) + .5, Math.round(y) + .5, Math.round(x + w) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y + h) + .5, Math.round(x) + .5, Math.round(y) + .5],
        rowHeight = h / hv,
        columnWidth = w / wv;
    for (var i = 1; i < hv; i++) {
        path = path.concat(["M", Math.round(x) + .5, Math.round(y + i * rowHeight) + .5, "H", Math.round(x + w) + .5]);
    }
    for (i = 1; i < wv; i++) {
        path = path.concat(["M", Math.round(x + i * columnWidth) + .5, Math.round(y) + .5, "V", Math.round(y + h) + .5]);
    }
    return this.path(path.join(",")).attr({stroke: color});
};

Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    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(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = "hsb(" + start + ", 1, .5)",
                ms = 500,
                delta = 30,
                bcolor = "hsb(" + start + ", 1, 1)",
                p = sector(cx, cy, r, angle, angle + angleplus, {gradient: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 3}),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({fill: bcolor, stroke: "none", opacity: 0, "font-family": 'Fontin-Sans, Arial', "font-size": "20px"});
            p.mouseover(function () {
                p.animate({scale: [1.1, 1.1, cx, cy]}, ms, "elastic");
                txt.animate({opacity: 1}, ms, "elastic");
            }).mouseout(function () {
                p.animate({scale: [1, 1, cx, cy]}, ms, "elastic");
                txt.animate({opacity: 0}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (var i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};


var Gfx = {
	pie:function(args){
		Warn(args.id);
		(function (raphael) {
			Success(args.id);
		    raphael(args.id, args.width, args.height).pieChart(args.width/2, args.width/2, 200, args.values, args.labels, "#fff");
		})(Raphael.ninja());
	},
	grid:function(holder,src_id,args,callback,colorhue){
		var labels = [],
        data = [],
				human_labels = [];
    $$("#"+src_id+" tfoot th").each(function(t) {
        labels.push($(t).innerHTML);
    });
    $$("#"+src_id+" .the-data-ponts td").each(function(t){
        data.push($(t).innerHTML);
    });
		$$("#"+src_id+" .the-labels td").each(function(t){
        human_labels.push($(t).innerHTML);
    });
    // Draw
    var width = args.width,
        height = args.height,
        leftgutter = 30,
        bottomgutter = 20,
        topgutter = 20;
        if(colorhue==null || colorhue==undefined){
					var colorhue = .6 || Math.random();
				}
        var color = "hsb(" + [colorhue, .5, 1] + ")",
        r = Raphael(holder, width, height),
        txt = {font: '12px Helvetica, Arial', fill: "#fff"},
        txt1 = {font: '10px Helvetica, Arial', fill: "#fff"},
        txt2 = {font: '12px Helvetica, Arial', fill: "#000"},
        X = (width - leftgutter) / labels.length,
        max = Math.max.apply(Math, data),
        Y = (height - bottomgutter - topgutter) / max;
    r.drawGrid(leftgutter + X * .5 + .5, topgutter + .5, width - leftgutter - X, height - topgutter - bottomgutter, 10, 10, "rgba(0,0,0,0.2)");
    var path = r.path().attr({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp = r.path().attr({stroke: "none", opacity: .3, fill: color}),
        label = r.set(),
        is_label_visible = false,
        leave_timer,
        blanket = r.set();
    //var frame = r.popup(100, 100, label, "right").attr({fill: "#000", stroke: "#666", "stroke-width": 2, "fill-opacity": .7}).hide();
		
    var p, bgpp;
    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();
        if (!i) {
            p = ["M", x, y, "C", x, y];
            bgpp = ["M", leftgutter + X * .5, height - bottomgutter, "L", x, y, "C", x, y];
        }
        if (i && i < ii - 1) {
            var Y0 = Math.round(height - bottomgutter - Y * data[i - 1]),
                X0 = Math.round(leftgutter + X * (i - .5)),
                Y2 = Math.round(height - bottomgutter - Y * data[i + 1]),
                X2 = Math.round(leftgutter + X * (i + 1.5));
            var a = this.getAnchors(X0, Y0, x, y, X2, Y2);
            p = p.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
            bgpp = bgpp.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
        }
        var dot = r.circle(x, y, 4).attr({fill: "#000", stroke: color, "stroke-width": 2});
        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, hmnlb) {
            var timer, i = 0;
            rect.hover(function() {
                clearTimeout(leave_timer);
                // var side = "right";
                //                 if (x + frame.getBBox().width > width) {
                //                     side = "left";
                //                 }
                //var ppp = r.popup(x, y, label, side, 1);
                // frame.show().stop().animate({path: ppp.path}, 200 * is_label_visible);
                label[0] = data + " hit" + (data == 1 ? "" : "s");
                label[1] = lbl;
                dot.attr("r", 6);
                is_label_visible = true;
								Tooltip.show(label[0],label[1]);
            }, function () {
                dot.attr("r", 4);
                leave_timer = setTimeout(function () {
                    Tooltip.hide();
                    // label[0].hide();
                    //                     label[1].hide();
                    is_label_visible = false;
                }, 1);
            });
        })(x, y, data[i], human_labels[i], dot);
    }
    p = p.concat([x, y, x, y]);
    bgpp = bgpp.concat([x, y, x, y, "L", x, height - bottomgutter, "z"]);
    path.attr({path: p});
    bgp.attr({path: bgpp});
    // frame.toFront();
    // label[0].toFront();
    //     label[1].toFront();
    blanket.toFront();
		callback();
	},
	
	
	
	getAnchors:function(p1x, p1y, p2x, p2y, p3x, p3y) {
      var l1 = (p2x - p1x) / 2,
          l2 = (p3x - p2x) / 2,
          a = Math.atan((p2x - p1x) / Math.abs(p2y - p1y)),
          b = Math.atan((p3x - p2x) / Math.abs(p2y - p3y));
      a = p1y < p2y ? Math.PI - a : a;
      b = p3y < p2y ? Math.PI - b : b;
      var alpha = Math.PI / 2 - ((a + b) % (Math.PI * 2)) / 2,
          dx1 = l1 * Math.sin(alpha + a),
          dy1 = l1 * Math.cos(alpha + a),
          dx2 = l2 * Math.sin(alpha + b),
          dy2 = l2 * Math.cos(alpha + b);
      return {
          x1: p2x - dx1,
          y1: p2y + dy1,
          x2: p2x + dx2,
          y2: p2y + dy2
      };
  }
}