//data comes in through data.js which has all the variables.

//color function determines the color
//you can add more colors based on your data
//alternatively you can have an interpolation or other means of choosing the color
function color(d,i) {
  	//create an array of colors depending on names
		var colors = [
      						{name: 'Male', 					fill: '#0079BB'  },
      						{name: 'Female', 				fill: '#9E519F'  },
                 	{name: '0 < 12 years', 	fill: '#c792c8'  },
      						{name: '13 years', 			fill: '#a47ebe'  },
									{name: '14 years', 			fill: '#827ebe'  },  
      						{name: '15 years', 			fill: '#7e95be'  },  
      						{name: '16 years', 			fill: '#7eb1be'  },
      						{name: '17 years', 			fill: '#70b785'  },  
      						{name: '18 years', 			fill: '#84b770'  },  
                 ];
  	
    var findcolor = colors.find((c) => c.name === d);
   console.log(findcolor);  
  	//set default
  	if (findcolor != undefined){
  	var fill = findcolor.fill;
    console.log(fill);  
    }else {

       //var colorExtra = d3.scale.category20(); 
       var colorExtra = d3.schemeCategory20; //add
       var fill = colorExtra[i]; //add
       console.log(fill);
    }
    return fill;
}

//some drawing variables which will be used repeatedly
var margin = {left:40, right:40, top:40, bottom:40};
var width = 400 - margin.top - margin.bottom,
    height = 400 - margin.left - margin.right;
var radius = Math.min(width, height) / 2;
var donutWidth = 65;
var legendRectSize = 18;                                  // NEW
var legendSpacing = 4;                                    // NEW  

// Define the div for the tooltip
var tooltipdiv = d3.select("body").append("div")	
  .attr("class", "tooltip")				
  .style("opacity", 0);


//init() adds event listeners to the button to pass the data
function init()
{
    d3.select("#gender")
        .on("click", function(d,i) {
            pieChart(gender, 'gender') //pass the data and the key
        })   
    d3.select("#age")
        .on("click", function(d,i) {
            pieChart(age, 'Age')
        })   
    d3.select("#race")
        .on("click", function(d,i) {
            //num = document.getElementById("num").value
            pieChart(race, 'race_code')
        }) 
	
 	pieChart(gender,'gender') //creates default pie-chart
}

init(); //calls init() on load




//creates the piechart with the data and the key
function pieChart(data, key) {  
  //empty the div - wipe the slate clean to create a new pie chart
  d3.select('#pie-chart-area').html('');
  
	// create the svg
	var svg = d3.select("#pie-chart-area")
              .append("svg")
  	          .attr("width", width + margin.left + margin.right)
    	        .attr("height", height + margin.top + margin.bottom)
	            .attr('perserveAspectRatio', 'xMinYMid') //new
              .append("g")
                 .attr("transform", "translate(" + width  / 2 + "," + height / 2 + ")");
	
	//define arc
	var arc = d3.arc()
         .innerRadius(radius - donutWidth)
         .outerRadius(radius - 20);
	// second arc for labels
    var arc2 = d3.arc()
       .outerRadius(radius)
       .innerRadius(radius + 20);
	
	// import pie chart and data
     var pie = d3.pie()
	      .sort(null)
	      .startAngle(1.1*Math.PI) //new
    	  .endAngle(3.1*Math.PI) //new
         .value(function(d) { return d.count; });

    //append the arcs based on the data
    var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc")
    .attr('d', arc)
		
    //draw the paths
    g.append("path")
      .style("fill", function(d,i) { return color(d.data[key],i); })
      .transition().delay(function(d, i) { return i * 300; }).duration(300)
      .attrTween('d', function(d) {
      var i = d3.interpolate(d.startAngle, d.endAngle);
      return function(t) {
        d.endAngle = i(t);
        return arc(d);
      };
    })
      .each(function(d) { this._current = d; }); // store the initial values
  
    //g.append("text")
      //.attr("transform", function(d) { return "translate(" + arc2.centroid(d) + ")"; })
      //.attr("dy", ".35em")
      //.attr("class", "d3-label")
      //.style("text-anchor", "middle")
      //.text(function(d) { return d.data[key]; });
	 
  //Append to the tooltip div on mouseover
		var sum = d3.sum(data, (d) => d.count);
    g.on("mouseover", function(d) {		
      tooltipdiv.transition()		
        .duration(200)		
        .style("opacity", .9);		
      tooltipdiv.html(d.data[key] +"<br>" + d.data.count + "<br>" + percentage(d.data.count, sum, 2)+"%")	
        .style("left", (d3.event.pageX) + "px")		
        .style("top", (d3.event.pageY - 28) + "px");	
    })					
      .on("mouseout", function(d) {		
      tooltipdiv.transition()		
        .duration(500)		
        .style("opacity", 0);	
          });	
  /*
    //add legend
     var legend = d3.select("#pie-chart-area")
          .attr("class", "legend")
          
          .selectAll("g")
          .data(data)
          .enter().append("g")
          .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

      legend.append("rect")
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", function(d, i) {
      return color(d.data[key]);
    });

      legend.append("text")
          .attr("x", 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .text(function(d) { return d.data[key]; });
 */ 
}

//takes number and sum and returns percentage rounded to digits d
function percentage(num, sum, d)
{
  var p = (num/sum)*100;
  var digits = Math.pow(10, d);
  return (Math.round (p * digits))/digits;
}