Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke, colors) {
    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 = colors[j][0],
                ms = 500,
                delta = 50,
                bcolor = colors[j][1],
                p = sector(cx, cy, r, angle, angle + angleplus, {gradient: "270-" + bcolor + "-" + color, stroke: colors[j][0], "stroke-width": 1}),
                txt = paper.text(cx + (r + delta - 85) * Math.cos(-popangle * rad), cy + (r + delta - 85) * Math.sin(-popangle * rad), /* labels[j] + ' ' */ + values[j] + '%').attr({fill: '#E6EEFC', stroke: "none", opacity: 1, "font-family": 'Arial, Helvetica', "font-size": "13px", "font-weight": "bold"});
            p.mouseover(function () {
                p.animate({
                	scale: [1.02, 1.02, cx, cy],
                	'fill-opacity': 0.7,
                	'stroke-opacity': 0.7
                }, ms, "backOut");
                txt.animate({fill: colors[j][2]}, 100, "elastic");
            }).mouseout(function () {
                p.animate({
                	scale: [1, 1, cx, cy],
                	'fill-opacity': 1,
                	'stroke-opacity': 0.7
                }, ms, "backIn");
                txt.animate({fill: '#ffffff'}, 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;
};

(function (raphael) {
	$(document).bind('ready', function(){
		var colors = [
			['#0e3a80','#295aaa','#fff'],
			['#383838','#515151','#fff'],
			['#656565','#7e7e7e','#fff'],
			['#7e7e7e','#b1b1b1','#fff'],
			['#cdcdcd','#a8a7a7','#fff'],
			['#dedcdc','#cdcccc','#fff'],
			['#cdcccc','#dedcdc','#fff']
		];
		var drawChart = function(id, column) {
			var table = $('table.table04'),
			    title = table.find('tr').find('th:nth-child(' + column + ')').text(),
				values = [],
			    labels = [];
		    var rows = table.find('tr');
		    var percentage = true;
		    $.each(rows, function(index, row){
		    	if ($(row).find('td').length) {
		    		var label = $(row).find('th').text();
		    		var value = $(row).find('td:nth-child(' + column + ')').text();
		    		value = value.replace(',','.');
		    		if (value.indexOf('%') < 0) {
		    			percentage = false;
		    			value = parseInt(value);
		    		}
		    		else {
		    			value = parseFloat(value);
		    		}
		    		labels.push(label);
		    		values.push(value);
		    	}
		    });
		    
		    if (!percentage) {
		    	var sumArray = function(array) {
		    		var sum = 0;
		    		var length = array.length;
		    		for (var i = 0; i < length; i++) {
		    			sum += array[i];
		    		}
		    		return sum;
		    	}
		    	sumArray = sumArray(values);
		    	$.each(values, function(index, value){
		    		values[index] = parseFloat((value * 100 / sumArray).toFixed(2));
		    	});
		    }
		    
		    $(table).before('<div class="chart"><h3>' + title + '</h3><div id="' + id + '"></div><div class="chart-info"><ul></ul></div></div>');
		    var info = $('#' + id + ' + div').find('ul');
		    $.each(labels, function(index, label) {
		    	info.append('<li><span class="color" style="background-color:' + colors[index][1] + '"></span><span class="label">' + label + '</span></li>')
		    });
		    raphael(id, 600, 300).pieChart(300, 150, 120, values, labels, "#ffffff", colors);
		};
		if ($('table.table04').length) {
			drawChart('chartData3', 3);
			drawChart('chartData4', 4);
		}
	});
})(Raphael.ninja());