var barW = 500,
    barH = 300,
    barMargin = {top: 20, bottom: 120, left: 100, right: 20},
    barX = d3.scaleBand().padding(0.1),
    barY = d3.scaleLinear(),
    barXAxis = null,
	occCodes = "15-0000";

function extractJobsPct(jobData, year, occCode, number) {
    var res = jobData.filter(
	function(d) { return ((year == null || d.year == year) &&
			      (occCode == null || d.occ_code == occCode)); });
    res = res.sort(function(a,b) {
	return d3.descending(+a.jobs_1000,+b.jobs_1000);
    });
    if (number) {
	return res.slice(0,number);
    } else {
	return res;
    }
}

function createBars(divId, jobData, year, occCode) {
    var svg = d3.select(divId).append("svg")
	.attr("width", barW+barMargin.left+barMargin.right)
	.attr("height", barH+barMargin.top+barMargin.bottom)
	.append("g")
	.attr("class", "main")
	.attr("transform",
	      "translate(" + barMargin.left + "," + barMargin.top + ")")

    var csData = extractJobsPct(jobData, year, occCode, 18);

    barX.range([0,barW])
	.domain(csData.map(function(d) { return d.area_title; }));
    barY.range([barH,0])
	.domain([0,d3.max(extractJobsPct(jobData, null, occCode),
			  function(d) { return +d.jobs_1000; })]);


    svg.selectAll("rect")
	.data(csData)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return barX(d.area_title); })
	.attr("y", function(d) { return barY(+d.jobs_1000); })
	.attr("width", barX.bandwidth())
	.attr("height", function(d) { return barH - barY(+d.jobs_1000); })
	.style("fill", "blue")

    barXAxis = d3.axisBottom(barX);

    svg.append("g")
	.attr("transform", "translate(0," + barH +")")
	.attr("class", "x axis")
	.call(barXAxis)

    var barYAxis = d3.axisLeft(barY);

    svg.append("g")
	.attr("class", "y axis")
	.call(barYAxis)

    svg.append("g")
	.attr("transform", "translate(-30," + (barH/2) + ") rotate(-90)")
	.append("text")
	.style("text-anchor", "middle")
	.text("Jobs Per 1000")

    svg.append("text")
	.attr("x", barW/2)
	.attr("y", barH + 115)
	.text("State")
}

function updateBars(divId, jobData, year, occCode)
{
    // write code to update the bar chart created to the specified year
    // you should use two transitions, one to update the bar values
    // and the other to reorder the bars
    // Make sure to transition the axes, too!

    var svg = d3.select(divId).append("svg")
        .attr("width", barW+barMargin.left+barMargin.right)
        .attr("height", barH+barMargin.top+barMargin.bottom)
        .append("g")
        .attr("class", "main")
        .attr("transform",
              "translate(" + barMargin.left + "," + barMargin.top + ")")

        var csData = extractJobsPct(jobData, year, occCode, 18);

        barX.range([0,barW])
        .domain(csData.map(function(d) { return d.area_title; }));
        barY.range([barH,0])
        .domain([0,d3.max(extractJobsPct(jobData, null, occCode),
                  function(d) { return +d.jobs_1000; })]);

        console.log(csData);

        svg.selectAll("rect.bar")
            .data(csData)
            .enter().append("rect")
        .transition()
            .duration(1000)
            .style("fill", "blue")
            .attr("class", "bars")
            .attr("x", function(d) { return barX(d.area_title); })
            .attr("y", function(d) { return barY(+d.jobs_1000); })
            .attr("width", barX.bandwidth())
            .attr("height", function(d) { return barH - barY(+d.jobs_1000); })

        barXAxis = d3.axisBottom(barX);

        svg.append("g")
        .attr("transform", "translate(0," + barH +")")
        .attr("class", "x axis")
        .call(barXAxis)

        var barYAxis = d3.axisLeft(barY);

        svg.append("g")
        .attr("class", "y axis")
        .call(barYAxis)

        svg.append("g")
        .attr("transform", "translate(-30," + (barH/2) + ") rotate(-90)")
        .append("text")
        .style("text-anchor", "middle")
        .text("Jobs Per 1000")

        svg.append("text")
        .attr("x", barW/2)
        .attr("y", barH + 115)
        .text("State")


}


function getStateRankings(jobData, occCode) {
    // TODO: compute the state rankings for the given occCode

var sortingData = jobData.sort(function (d, i){
    return d3.descending(+d["tot_emp"],+i["tot_emp"]);
	});

   var StateRankings = d3.nest()
	.key (function (state) {return state.area_title})
		.rollup(function (d){
            return d.findIndex(function(state){
				return state.occ_code === occCode;
			});
        })
		.object(sortingData);
  return StateRankings;
  }

function createBrushedVis(divId, usMap, jobData, year) {


    var jobData = jobData.filter(
	function(d) { return (+d.year == year); });

    var width = 600,
	height = 400;

    var svg = d3.select(divId).append("svg")
	.attr("width", width)
	.attr("height", height);

    var projection = d3.geoAlbersUsa()
	.fitExtent([[0,0],[width,height]], usMap);

    var path = d3.geoPath()
	.projection(projection);

    var rankings = getStateRankings(jobData, occCodes);

    var color = d3.scaleSequential(d3.interpolateViridis).domain([22,0]);

	var colored = function(d) { return color(rankings[d.properties.name]); }

    svg.append("g")
		.selectAll("path")
		.data(usMap.features)
		.enter().append("path")
		.attr("d", path)
		.attr("fill", colored)
		.attr("class", "state-boundary")
		.classed("highlight", false)

    var bWidth = 400,
	bHeight = 400,
	midX = 200;

    var allJobs = d3.nest()
	.key(function(d) { return d["occ_code"]; })
	.key(function(d) { return d["occ_title"]; })
	.rollup(function(v) {
	    return v.reduce(function(s,d) {
		if (!+d.tot_emp) { return s; } return s + +d.tot_emp; },0); })
	.entries(jobData)
	.sort(function(a,b) { return d3.descending(+a.values[0].value, +b.values[0].value); });

    var barSvg = d3.select(divId).append("svg")
	.attr("width", bWidth)
	.attr("height", bHeight)
	.style("vertical-align", "bottom")

    var y = d3.scaleBand().padding(0.1).range([0,bHeight]).domain(allJobs.map(function(d) { return d.values[0].key; }));
    var x = d3.scaleLinear().range([0,bWidth-midX]).domain([0,d3.max(allJobs, function(d) { return d.values[0].value; })]);

    var bars = barSvg.selectAll(".bar").data(allJobs)
	.enter().append("g")
	.attr("transform",
	      function(d) { return "translate(0," + y(d.values[0].key) + ")";})
	.attr("class", "bar")


	function jobMouseEnter(d) {
		d3.selectAll("rect").classed("highlight", false);
		d3.select(this).classed("highlight", true);
		occCodes = d3.select(this).datum().key;
		console.log(occCodes);
		rankings = getStateRankings(jobData, occCodes);
		colored = function(d) { return color(rankings[d.properties.name]); };
		svg.append("g")
			.selectAll("path")
			.data(usMap.features)
			.enter().append("path")
			.attr("d", path)
			.attr("fill", colored)
			.attr("class", "state-boundary")
			.classed("highlight", false)
    }


    bars.append("rect")
	.attr("x", midX)
	.attr("y", 0)
	.attr("width", function(d) { return x(d.values[0].value); })
	.attr("height", y.bandwidth())
	.classed("highlight", function(d) { return d.key == '15-0000'; })
	.on("mouseover", jobMouseEnter)

    bars.append("text")
    	.attr("x", midX - 4)
    	.attr("y", 12)
    	.style("text-anchor", "end")
    	.text(function(d) { var label = d.values[0].key.slice(0,-12);
			    if (label.length > 33) {
				label = label.slice(0,30) + "...";
			    }
			    return label; });
}

function processData(errors, usMap, jobsData) {
    console.log("Errors", errors)
    createBars("#bars", jobsData, 2012, "15-0000");
    updateBars("#bars", jobsData, 2016, "15-0000");

    createBrushedVis("#brushed", usMap, jobsData, 2016);
}

d3.queue()
    // use these two files
    .defer(d3.json, "http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a4/us-states.json")
    .defer(d3.csv, "http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a4/occupations.csv")
    .await(processData);