$(document).ready(function(){
	var charts = document.getElementsByClassName('chart'), namespace = 'http://www.w3.org/2000/svg';

	for (var i = 0; i < charts.length; i++){
		var chart_ = charts[i];
		var svg_ = document.createElementNS(namespace, 'svg');
		svg_.setAttribute('viewBox', '-1 -1 2 2');
		svg_.setAttribute('style', 'transform:rotate(-90deg)');
		
		var c1	= document.createElementNS(namespace, 'circle'),
			c2	= document.createElementNS(namespace, 'circle'),
			p	= document.createElementNS(namespace, 'path');
		c1.setAttribute('cx', 0);
		c1.setAttribute('cy', 0);
		c1.setAttribute('r', 1);
		c1.setAttribute('fill', chart_.dataset.color);
		
		c2.setAttribute('cx', 0);
		c2.setAttribute('cy', 0);
		c2.setAttribute('r', .9);
		c2.setAttribute('fill', chart_.dataset.colorBg);
		
		p.setAttribute('fill', chart_.dataset.colorActive);
		
		svg_.appendChild(c1);
		svg_.appendChild(p);
		svg_.appendChild(c2);
		
		setPieChart(p, chart_.dataset.value/chart_.dataset.max*100);
		chart_.prepend(svg_);
	}

	function setPieChart(element, percent){
		var phi = percent/50*Math.PI;
		var x = Math.cos(phi);
		var y = Math.sin(phi);
		var arc = percent > 50 ? 1 : 0;
		element.setAttribute("d", "M 1 0 A 1 1 0 "+arc+" 1 "+x+" "+y+" L 0 0");
	}

	$(window).scroll(function () {
	  $('.chart').each(function () {
		var $this = $(this);
		var $text = $this.find('.value span');
		var p_ = $this.find('path')[0];
		
		if (!$this.data('counting') && $this.visible(true)) {
		  $this.data('counting', 1);
		  $text.text('0');
		  $({
			counter: 0
		  }).animate({
			counter: $this.data('value')
		  }, {
			duration: 3000,
			easing: 'linear',
			step: function () {
			  var cur_ = Math.ceil(this.counter);
			  var per_ = cur_/$this.data('max')*100;
			  $text.text(cur_);
			  setPieChart(p_, per_);
			},
			complete: function () {
			  var cur_ = $this.data('value');
			  var per_ = cur_/$this.data('max')*100;
			  $text.text(cur_)
			  setPieChart(p_, per_);
			}
		  });
		}
	  });
	});
});