/**
 * @author Alison Benjamin
 
inspiration from here: http://n79.org/infographics/asg1/
*/


 	
var viewportWidth = $(window).width();
var viewportHeight = $(window).height()/2;
var w = viewportWidth *.97;
var h = w/2.5;
var padding = w/1;


$(function() {
	d3.csv("FFR_skill.csv", function(data){
		
		var svg = d3.select("article")
			.append("svg")
			.attr({
				"width":w,
				"height":h
			})	
		
		$("#legend").css("right",padding);
		
		
		var counts = _.pluck(data, 'Count')
		counts = $.map(counts,Number);
		var skills = _.pluck(data,'Skill')
			
		var outerRadius = w / 5;
	
		//draw wedges
		var arc = d3.svg.arc()
			.innerRadius(w/15) 
			.outerRadius(outerRadius);
		
		// define default pie layout
		var pie = d3.layout.pie();
	
		var 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)
			
		//label the slices (arcs) of the piechart
		arcs.append("text")
			.attr("transform", function(d,i) {
				return "translate(" + arc.centroid(d) + ")"; 	
			})
			.attr({
				"text-anchor":"middle",
				"fill":"white"
			})
			.text(function(d) {
				return d.value;
			})
	
		
		d3.select("#legend").selectAll("legends")
			.data(skills)
			.enter()
			.append("li")
			.classed("legend",false)
			.text(function(d) {
				return d;
			})
			.on("mouseover",function(d,i){	
				d3.select(this).classed("legend",true);
				var listItemText = d3.select(this).text();
				for(var i = 0; i < data.length; i++){
						if(data[i].Skill == listItemText){					
							$(' g text').each(function(index){	
								if($(this).text() == data[i].Count){				
									$(this).prev().attr("class","highlight");
								}
							})
						}
					}
			})
			.on("mouseout", function(d,i){
				d3.select(this).classed("legend",false)
			//	d3.select("path").attr("class","highlight").removeClass("highlight")
				$("g").find("path").attr("class","highlight").attr("class","")
			})
		
		d3.selectAll("path")
			.on("mouseover",function(d,i){				
				d3.select(this).classed("highlight",true)
				//loop through the list items in the legend and check for skill 
					for(var i = 0; i < data.length; i++){
							data[i].Count = parseInt(data[i].Count);
							if(data[i].Count == d.value){
								$('#legend li').each(
									function(index) {
										if (data[i].Skill == $(this).text()){
											$(this).attr("class","legend");
									}
								})
							}	
						}	
			})
			.on("mouseout", function(d,i){
				d3.select(this).classed("highlight",false);
				$('#legend').find("li").attr("class","legend").removeClass("legend");
			})
		})
	  });