var margin = {top: 20, right: 75, bottom: 30, left: 30},
	width = 700 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom,
	xScale = d3.time.scale().range([0, width]),
	yScale = d3.scale.linear().range([height, 0]),
	parseDate = d3.time.format("%Y").parse,
	formatPercent = d3.format(".0%");

var birthData,
	filtered,
	transpose;

var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return xScale(d.year); })
	.y(function(d) { return yScale(d.stat); });

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 + ")");

var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	svg.append("g")
		.attr("class", "x axis");

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(8)
	.tickFormat(formatPercent)
	.tickSize(-width - margin.left - margin.right)

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

var menu = d3.select("#menu")
	.on("change", change);

d3.csv("data.csv", function(csv) {
	birthData = csv;
	update();
});

function change() {
	d3.transition()
		.duration(500)
		.each(update);
}

function update() {

	var nested = d3.nest()
		.key(function(d) { return d.variablecode; })
		.map(birthData)

    var series = menu.property("value");

    var data = nested[series];

    var variables = d3.keys(data[0]).filter(function(key) {
		return (key !== "variable" && key !== "variablecode" && key !== "year");
	});

    var transpose = variables.map(function(name) {
		return {
			name: name,
			values: data.map(function(d) {
			return {year: parseDate(d.year), stat: +d[name]};
			})
		};
	});

    var ymin = d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.stat; }); });
    var ymax = d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.stat; }); });

	xScale.domain([
		d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.year; }); }),
		d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.year; }); })
	]);

    yScale.domain([0.95*ymin,1.1*ymax]);

	var months = svg.selectAll(".month")
		.data(transpose);

	var monthsEnter = months.enter().append("g")
		.attr("class", "month")
		.attr("id", function(d) { return d.name; });

	monthsEnter.append("path")
		.attr("class", "line")
		.style("stroke", "#aaa")
		.attr("d", function(d) { return line(d.values); });

	monthsEnter.append("text")
		.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
		.attr("x", 4)
		.attr("dy", ".35em")
		.text(function(d) { return d.name; });

    var monthsUpdate = d3.transition(months);

	monthsUpdate.select("path")
		.attr("d", function(d) { return line(d.values); });

    monthsUpdate.select("text")
		.attr("transform", function(d) { return "translate(" + xScale(d.values[d.values.length - 1].year) + "," + yScale(d.values[d.values.length - 1].stat) + ")"; });

	d3.transition(svg).select(".y.axis")
		.call(yAxis);

	d3.transition(svg).select(".x.axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);

	svg.selectAll("g")
		.classed("g-baseline", function(d) { return d == 0 });

	d3.select("#Annualavg .line")
		.style("stroke", "#2980B9")
		.style("opacity", "1")
		.style("stroke-width", "2px");

	d3.select("#Annualavg text")
		.text("Annual avg")
		.style("display", "block");

	d3.select("#January text")
		.style("display", "block");

	d3.select("#May text")
		.style("display", "block");

	d3.select("#January .line")
		.style("opacity", "1")
		.style("stroke", "#3498DB");

	d3.select("#May .line")
		.style("opacity", "1")
		.style("stroke", "#3498DB");
}

d3.select(self.frameElement).style("height", "625px");