//Add items to select
var chems = JSONSelect.match(".chem",rawdata).sort();

//All as first option
chems.splice(chems.indexOf("All"),1)
var opt = document.createElement('option');
	opt.value='All';
	opt.innerHTML='All';
	document.getElementById("drug_drop").options.add(opt)



chems.forEach(function(d){
	var opt = document.createElement('option');
	opt.value=d;
	opt.innerHTML=d;
	document.getElementById("drug_drop").options.add(opt)
	});




var margin = {top: 20, right: 20, bottom: 50, left: 75},
    width = 500 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .4,.6);

var y = d3.scale.linear()
    .range([height, 0]);

//Scale Sidebar
//Get ALL values and pop em out
var all_max = new Array();

for (var i=0; i<rawdata.length; i++){
	if(rawdata[i].chem == "All"){
		for (var u=0; u<rawdata[i].data.grouped.length; u++){
			all_max.push(rawdata[i].data.grouped[u].value)
		};
		for (var u=0; u<rawdata[i].data.ungrouped.length; u++){
			all_max.push(rawdata[i].data.ungrouped[u].value)
		};
	};
};


maxs = JSONSelect.match(".value",rawdata)

for(var pop in all_max){
	maxs.splice(maxs.indexOf(all_max[pop]),1);
};

sidebar_max = d3.max(maxs);


var sidebar = d3.scale.linear()
		.domain([0, sidebar_max])
		.range([height,2]);



var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



svg.append('rect')
				.attr("class", "graph_back cot_back")
				.attr("x",width/3+5)
				.attr("y",-5)
				.attr("width",width/3-10)
				.attr("height",height+5)
				.attr("opacity",0);


svg.append('rect')
				.attr("class", "graph_back dep_back")
				.attr("x",width/4+8)
				.attr("y",-5)
				.attr("width",width/4-8)
				.attr("height",height+5);

svg.append('rect')
				.attr("class", "graph_back dep_back")
				.attr("x",(width/4)*3-8)
				.attr("y",-5)
				.attr("width",width/4-8)
				.attr("height",height+5);



svg.append('text')
	.attr("class","cot_back")
	.attr("x",width/4*1)
	.attr("y",height+45)
	.attr("font-size",15)
	.style("font-family","serif")
	.attr("fill","#444444")
	.attr("transform","rotate(45,"+width/4+" "+155+")")
	.text("Most");
svg.append('text')
	.attr("class","cot_back")
	.attr("x",width/4*1.35)
	.attr("y",height+45)
	.attr("font-size",15)
	.style("font-family","serif")
	.attr("fill","#444444")
	.attr("transform","rotate(45,"+width/4*1.35+" "+155+")")
	.text("More");
svg.append('text')
	.attr("class","cot_back")
	.attr("x",width/4*1.67)
	.attr("y",height+45)
	.attr("font-size",15)
	.style("font-family","serif")
	.attr("fill","#444444")
	.attr("transform","rotate(45,"+width/4*1.67+" "+155+")")
	.text("Less");
svg.append('text')
	.attr("class","cot_back")
	.attr("x",width/4*1.98)
	.attr("y",height+45)
	.attr("font-size",15)
	.style("font-family","serif")
	.attr("fill","#444444")
	.attr("transform","rotate(45,"+width/4*1.98+" "+155+")")
	.text("Least");
svg.append('text')
	.attr("class","cot_back")
	.attr("x",width-10)
	.attr("y",height+22)
	.attr("font-size",24)
	.style("font-family","serif")
	.style("font-style","italic")
	.attr("fill","#800000")
	.style("text-anchor", "end")
	.text("GP Local Deprivation");



svg.append('text')
	.attr("class","dep_back")
	.attr("x",width/4*1)
	.attr("y",height+62)
	.attr("font-size",100)
	.style("font-family","serif")
	.attr("fill","#555555")
	.attr("transform","rotate(90,"+width/4+" "+225+")")
	.text("}");
svg.append('text')
	.attr("class","dep_back")
	.attr("x",width/4*2)
	.attr("y",height+70)
	.attr("font-size",100)
	.style("font-family","serif")
	.attr("fill","#555555")
	.attr("transform","rotate(90,"+width/4*2+" "+225+")")
	.text("}");
svg.append('text')
	.attr("class","dep_back")
	.attr("x",width/4*3)
	.attr("y",height+78)
	.attr("font-size",100)
	.style("font-family","serif")
	.attr("fill","#555555")
	.attr("transform","rotate(90,"+width/4*3+" "+225+")")
	.text("}");
svg.append('text')
	.attr("class","dep_back")
	.attr("x",width/4*4)
	.attr("y",height+86)
	.attr("font-size",100)
	.style("font-family","serif")
	.attr("fill","#555555")
	.attr("transform","rotate(90,"+width/4*4+" "+225+")")
	.text("}");
svg.append('text')
	.attr("class","dep_back")
	.attr("x",(width/4*1)/1.7)
	.attr("y",height+45)
	.attr("font-size",14)
	.style("font-family","serif")
	.attr("fill","#555555")
	.style("text-anchor", "middle")
	.text("Most Deprived");
svg.append('text')
	.attr("class","dep_back")
	.attr("x",(width/4*2)/1.3)
	.attr("y",height+45)
	.attr("font-size",14)
	.style("font-family","serif")
	.attr("fill","#555555")
	.style("text-anchor", "middle")
	.text("More Deprived");
svg.append('text')
	.attr("class","dep_back")
	.attr("x",(width/4*3)/1.22)
	.attr("y",height+45)
	.attr("font-size",14)
	.style("font-family","serif")
	.attr("fill","#555555")
	.style("text-anchor", "middle")
	.text("Less Deprived");
svg.append('text')
	.attr("class","dep_back")
	.attr("x",(width/4*4)/1.17)
	.attr("y",height+45)
	.attr("font-size",14)
	.style("font-family","serif")
	.attr("fill","#555555")
	.style("text-anchor", "middle")
	.text("Least Deprived");


//Grouped Labels
svg.append('text')
	.attr("class","grp_back")
	.attr("x",(width/3)-40)
	.attr("y",height+20)
	.attr("font-size",20)
	.style("font-family","serif")
	.attr("fill","#555555")
	.style("text-anchor", "middle")
	.text("NIR");
svg.append('text')
	.attr("class","grp_back")
	.attr("x",(width/2))
	.attr("y",height+20)
	.attr("font-size",20)
	.style("font-family","serif")
	.attr("fill","#555555")
	.style("text-anchor", "middle")
	.text("ENG");
svg.append('text')
	.attr("class","grp_back")
	.attr("x",(width-105))
	.attr("y",height+20)
	.attr("font-size",20)
	.style("font-family","serif")
	.attr("fill","#555555")
	.style("text-anchor", "middle")
	.text("WAL");


//RANGER
svg.append("polygon")
	.attr("class","range_guide_back ranger")
	.attr("points","-40,"+height+" -40,2 -65,2 -65,"+height)
	.style("opacity",0);
svg.append("polygon")
	.attr("class","range_guide ranger")
	.attr("points","-40,"+height+" -40,2 -65,2 -65,"+height)
	.style("opacity",0);
svg.append('text')
	.attr("class","ranger")
	.attr("x",-64)
	.attr("y",-9)
	.attr("font-size",11)
	.style("font-family","sans-serif")
	.attr("fill","#555555")
	.text("Top")
	.style("opacity",0);
svg.append('text')
	.attr("class","ranger")
	.attr("x",-64)
	.attr("y",0)
	.attr("font-size",11)
	.style("font-family","sans-serif")
	.attr("fill","#555555")
	.text("Drug")
	.style("opacity",0);


function update(rawdata, chem, grouper) {
	





	var sorter = 1;	



	//GET DATA with jsonSelect
	if(grouper==0){
		var selector = '.chem:val("'+chem+'") ~ .data .grouped'
	}else{
		var selector = '.chem:val("'+chem+'") ~ .data .ungrouped'
	};
	var data = JSONSelect.match(selector,rawdata)[0];


	//Add IDs to data
	data.forEach(function(d) {
		d.id = d.country + d.deprive;
		d.value = +d.value});

	var data_max = JSONSelect.match('.chem:val("'+chem+'") ~ .data .ungrouped',rawdata)[0];
  	data_max.forEach(function(d) {d.value = +d.value});
  	var sub_max = d3.max(data_max, function(d) { return d.value; });



	svg.selectAll(".range_guide")
	.transition().duration(1000)
	.attr("points","-40,"+height+" -40,"+sidebar(sub_max)+" -65,"+sidebar(sub_max)+" -65,"+height);




	d3.selectAll(".cot_back").transition().duration(1000)
		.attr("opacity",function(){if(grouper==0){return 0;}else{return 1;} });

	d3.select("#sort_button").transition().duration(1000)
		.style("opacity",function(){if(grouper==0){return .25;}else{return 1;} })
		.style("pointer-events",function(){if(grouper==0){return "none";}else{return "auto";} } );

	keycall();
	
	d3.selectAll(".grp_back").transition().duration(700)
		.attr("opacity",function(){if(grouper==1){return 0;}else{return 1;} });

	d3.selectAll(".dep_back").attr("opacity",0);

  	//DRAW STUFF
  	x.domain(data.sort(

    	function(a,b){    		
    			return d3.ascending( (a.country + a.deprive), (b.country + b.deprive));
    		})
  		.map(function(d) { return d.id; }))


  	y.domain([0, d3.max(data, function(d) { return d.value; })]);

  	








  	var bars = svg.selectAll(".bar")
      .data(data);
  
  	bars.enter().append("rect")
      .attr("y",height)
      .attr("height",0)
      .on("mouseover",function(d){
      		var selected_bar = this;
      		svg.select(".pointer."+d.id)
            .style("opacity",1);
      	})
      .on("mouseout",function(d){
      		svg.selectAll(".pointer")
      		.style("opacity",0);
      });

    bars
     .transition().duration(1000)
     .attr("y",height)
      .attr("height",0)

     .attr("width", x.rangeBand())
     .attr("x", function(d) { return x(d.id); })
     .transition().duration(1000)
     .attr("class", function(d){return "bar "+d.country+" "+d.id;})
     
     .attr("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height - y(d.value); });

  	bars
  	.exit().transition().duration(1000)
  	.attr("y",height)
      .attr("height",0).remove();


  	var pointers = svg.selectAll(".pointer")
      .data(data);

    pointers.enter().append("polygon")
      .attr("class",function(d){return "pointer "+d.id;})
      .style("opacity",0);

    pointers
      .attr("class",function(d){return "pointer "+d.id;})
      .transition()
      .attr("points",function(d){ return "-15,"+(y(d.value)+5)+" 0,"+(y(d.value))+" -15,"+(y(d.value)-5);});

    
    pointers.exit().remove();





  
  	svg.select(".x.axis")
        .transition()
        .duration(1000)
        .call(xAxis);
    svg.select(".y.axis")
        .transition()
        .duration(1000)
        .call(yAxis);



	d3.select("#sort_button")
		.on("click", function(){
			change(data=data)
			if(sorter==1){
				sorter=0
			}else{
				sorter=1
			}
		});
  	
  



  function change(data) {




  	d3.selectAll(".cot_back").transition().duration(1500)
		.attr("opacity",function(){
			if(grouper==0){ return 0;}else{
				if(sorter==1){return 0;}else{return 1;} 
			}
		});

	d3.selectAll(".dep_back").transition().duration(1500)
		.attr("opacity",function(){
			if(grouper==0){ return 0;}else{
				if(sorter==0){return 0;}else{return 1;} 
			}
		});




    // Copy-on-write since tweens are evaluated after a delay.
    var x0x = x.domain(data.sort(

    	function(a,b){
    		if(sorter==0){
    			return d3.ascending( (a.country + a.deprive), (b.country + b.deprive));
    		}else{
    			return d3.ascending( (a.deprive + a.country), (b.deprive + b.country));
    		}

    	}



        )
        .map(function(d) { return d.id; }))
        .copy();

    var transition = svg.transition().duration(1000),
        delay = function(d, i) { return i * 50; };

    transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0x(d.id); });

    transition.select(".x.axis")
        .call(xAxis)
      .selectAll("g")
        .delay(delay);
  };
	

function keycall(){

	if(grouper==0){
		d3.selectAll(".key")
		.transition().duration(700)
		.attr("transform","translate(0,0)")
	}else{
		d3.selectAll(".key")
		.transition().duration(700)
		.attr("transform","translate(-200,0)")
	}
};





};


//Add axes outside function
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Daily Doses per 1,000 Patients");




update(rawdata, chem, grouper)





d3.select("#group_button")
	.on("click", function(){
		update(rawdata, chem, grouper)
		if(grouper==1){grouper=0}else{grouper=1}
	});




	

var grouper = 1;



d3.select("#drug_drop").on("change",
	function(){
		
		

		update(rawdata,chem=this.value,grouper=0)

		if(this.value=='All'){
			d3.selectAll(".ranger")
			.style("opacity",0);
		}else{
			
			d3.selectAll(".ranger")
			.style("opacity",1);
		}

		grouper=1
	});




//KEY
var key_bar_x = width+50
	key_bar_y = -30
		  dur = 700;


	svg.append("polygon")
	  .attr("class","key A_NIR")
	  .transition().duration(dur)
	  .attr("points",(key_bar_x+0)+","+(key_bar_y+12)+" "+(key_bar_x+15)+","+(key_bar_y+12)+" "+(key_bar_x+15)+","+(key_bar_y+25)+" "+(key_bar_x+0)+","+(key_bar_y+25));
	svg.append("text")
	  .attr("class","key")
	  .transition().duration(dur)
	  .attr("x",key_bar_x+17)
	  .attr("y",key_bar_y+22)
	  .style("fill", "black")
	  .text("NIR");

	svg.append("polygon")
	  .attr("class","key B_ENG")
	  .transition().duration(dur)
	  .attr("points",(key_bar_x+45)+","+(key_bar_y+12)+" "+(key_bar_x+60)+","+(key_bar_y+12)+" "+(key_bar_x+60)+","+(key_bar_y+25)+" "+(key_bar_x+45)+","+(key_bar_y+25)); 
	svg.append("text")
	  .attr("class","key")
	  .transition().duration(dur)
	  .attr("x",key_bar_x+62)
	  .attr("y",key_bar_y+22)
	  .style("fill", "black")
	  .text("ENG");

	svg.append("polygon")
	  .attr("class","key C_WAL")
	  .transition().duration(dur)
	  .attr("points",(key_bar_x+90)+","+(key_bar_y+12)+" "+(key_bar_x+105)+","+(key_bar_y+12)+" "+(key_bar_x+105)+","+(key_bar_y+25)+" "+(key_bar_x+90)+","+(key_bar_y+25)); 
	svg.append("text")
	  .attr("class","key")
	  .transition().duration(dur)
	  .attr("x",key_bar_x+107)
	  .attr("y",key_bar_y+22)
	  .style("fill", "black")
	  .text("WAL");