/**
 * @author Alison Benjamin
 */
 	
var w = $(window).width();
var h = w/2.5;
var counts; 
var arcs;
var arc; 
var pie;
var datePicker;
var drawChart; 
var labels = ["have used","haven't used"];

//testing fastclick
$(function() {
    FastClick.attach(document.body);
});


	d3.csv("internetUse.csv", function(data){
		
		var svg = d3.select("article")
			.attr("width",w)
			.append("svg")
			.attr({
				"width":w/2,
				"height":h
			})	
		
		//pick the year data for the chart to display 
		datePicker = function (selectedYear) {
			var yr = selectedYear; 
  			counts = _.pluck(data,yr); 
  			return counts;
		};

		datePicker(2011);

		//draw the chart 
		drawChart = function(chartData){
			
			var outerRadius = w / 5;
		
			//draw wedges
			 arc = d3.svg.arc()
				.innerRadius(w/15) 
				.outerRadius(outerRadius);
			
			// define default pie layout
			 pie = d3.layout.pie();
		
			
			arcs = svg.selectAll("g.arc") 
				.data(pie(counts)) 
				.enter()
				.append("g")
				.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")"); 	
		
			//Draw arc paths	
			arcs.append("path")
				.attr({
					"d": arc,
					"class": function(d,i){
					return "color-"+i;
				}})
				
			//labels
			arcs.append("text")
				.attr({
					"transform": function(d,i){
						return "translate(" + arc.centroid(d) + ")"; 
					}
				})
				.text(function(d,i) {
					return d.value + "% " + labels[i];
				})
		}		
		drawChart(counts);
		$(".btn").click(function(e){
			  e.preventDefault();
			  $("#yearSelect").find(".highlight").removeClass("highlight");
			 
			   //update the year viewed 
			  datePicker($(this).attr('data-value')); 
			  $(this).addClass("highlight");
		
			  //redraw
			  drawChart(counts);
		});
})