var numberOfBars = 80;
generateDonut(generateData());

function generateData(){
	var data = [];
	for(var x = 0; x < numberOfBars; x ++){
		data.push(Math.random()*400 - 120)
	}
	return data;
}

function generateDonut(data){
	var divH = parseInt( d3.select("#chartArea").style("height") );
	var divW = parseInt( d3.select("#chartArea").style("width") );

	var margin = {top: 10, right: 10, bottom: 10, left: 10};
	var w = divW - margin.left - margin.right;
	h = divH - margin.top - margin.bottom;
	smallestDim = h < w ? h : w;

	var outerRadius = smallestDim / 4.5,
	    innerRadius = outerRadius / 1.3;

	var pie = d3.layout.pie()
		.value(function(d){ return 10; })
	  .padAngle(.010);

	var arc = d3.svg.arc()
    .padRadius(outerRadius)
    .innerRadius(innerRadius);

	var lines = [];
	var valueline = d3.svg.line()
		.interpolate("step-after")  //step-after looks cool
	  .x(function(d) { return d[0]; })
	  .y(function(d) { return d[1]; });

	var svg = d3.select("#chartArea").append("svg")
	    .attr("width", w)
	    .attr("height", h)
	  .append("g")
	    .attr("transform", "translate(" + w / 2 + "," + (h) / 2 + ")");

	svg.selectAll("path")
	    .data(pie(data))
	  .enter().append("path")
	    .each(function(d) { 
	    	d.outerRadius = innerRadius + d.data
	    	//for the lines
	    	var alpha = (d.startAngle + d.endAngle)/2;
	    	var l = d.outerRadius > outerRadius ? d.outerRadius + 20 : d.outerRadius - 20
	    	lines.push([alpha, l])
	    })
	    .attr("d", arc)
	    .style('fill', 'none') 
	    //.style('stroke', 'orange')
	    //.style('stroke-width', '1px');


	drawTrace(lines);
	function refactor(lines){
		lines = lines.slice().sort(function(a, b){
			return a[0] - b[0];
		})
		
		for(i in lines){
			var alpha = lines[i][0];
			var l = lines[i][1];
			var x = l * Math.sin(alpha)
			var y = l * Math.cos(alpha)
			lines[i] = [x,-y]
		}
		return lines
	}
	function drawTrace(lines){
		lines =  refactor(lines);
		svg.append("path")
	    .attr("class", "line")
	    .style("fill", "none")
	    .style("stroke-width", "2.5px")
	    .style("stroke", "black")
	    .attr("d", valueline(lines));
	}


	setInterval(function(){
		var EASE = 'linear';
		var DURATION = 1000;
		lines = []; //empty the array of lines

		svg.selectAll('path')
			.data(pie(generateData()))
			.transition()
			.duration(DURATION)
			.ease(EASE) 
			.each(function (d) {
				d.outerRadius = innerRadius + d.data;
				var alpha = (d.startAngle + d.endAngle)/2;
	    	var l = d.outerRadius > outerRadius ? d.outerRadius + 20 : d.outerRadius - 20
	    	lines.push([alpha, l])
			})
			.attr('d', arc)


		lines = refactor(lines);
		svg.selectAll(".line")
	    .transition()
	    .duration(DURATION)
	    .ease(EASE)
	    .attr("d", valueline(lines));
	}, 1200)
}