const divH = window.innerHeight;
const divW = window.innerWidth;

const margin = {top: 10, right: 10, bottom: 10, left: 10};
const width = divW - margin.left - margin.right;
const height = divH - margin.top - margin.bottom;
const smallestDim = height < width ? height : width;

const outerRadius = smallestDim / 3.5
const innerRadius = outerRadius / 1.5;

const data = [];
const strokeSmall = '.1px'
const strokeLarge = '5px'
const baseColour = "maroon"

for(var x = 0; x < 3000; x ++){
	Math.random()*4 > 1 ? data.push(Math.random()*250 + 50) : data.push(-1 * Math.random()*100)
}

var pie = d3.pie()
	.value((d) => 10)
  .padAngle(.010);

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

var svg = d3.select("#chartArea").append("svg")
    .attrs({width, height})
  .append("g")
    .attr("transform", `translate(${width/2},${height/2})`);

const coordinates = pie(data).map((d) => Object.create({
		alpha: (d.startAngle + d.endAngle)/2,
   	l: innerRadius + d.data
	})
)

svg.append('circle')
	.attr("r", innerRadius)
	.style("stroke", baseColour)
	.style("stroke-width", "2.5px")
	.style("fill", 'none')
	.on('mouseover', function() {
		styleChange(d3.select(this), "2.5px");
		styleChange(getRandomLines(), strokeSmall);
	})


drawVerticals(coordinates, baseColour, 'v-lines');

function drawVerticals(coordinates, stroke, group){
	coordinates = coordinates.sort((a, b) => a.alpha - b.alpha);

	svg.selectAll("line")
		.data(coordinates)
		.enter().append('line')
    .style("stroke-width", strokeSmall)
    .style("stroke", stroke)
    .classed("v-lines", true)
    .attrs({
			x1: (d, i) => i%2 ? d.l * Math.sin(d.alpha) : null,
			x2: (d, i) => (i+1)%2 ? innerRadius * Math.sin(d.alpha) : null,
			y1: (d, i) => (i+1)%2 ? -1 * d.l * Math.cos(d.alpha) : null,
			y2: (d, i) => i%2 ? -1 * innerRadius * Math.cos(d.alpha): null
    })
    .on('mouseover', function() {
    	styleChange(d3.select(this), strokeSmall)
    });
}

const getRandomLines = () => d3.selectAll(".v-lines")
	.filter((d, i) => i % parseInt(Math.random()*100 + 50) === 0);

const styleChange = (toChange, strokeOriginal) => {
	toChange
		.styles({"stroke-width": strokeLarge, stroke: 'lime'})
		.transition()
    	.duration(1000)
    	.ease(d3.easeLinear)
    	.styles({"stroke-width": strokeOriginal, stroke: baseColour});
}

// // Use some sort of timer to randomly select items to apply style changes
d3.interval(function() {
	styleChange(getRandomLines(), strokeSmall);
	styleChange(d3.select('circle'), "2.5px");
}, 1000);