var margin = {top: 15, right: 38, bottom: 20, left: 12},
    width = 575 - margin.left - margin.right,
    height = 460 - margin.top - margin.bottom;

var parseYear = d3.time.format("%Y").parse,
    parseMonth = d3.time.format("%m-%Y").parse,
    formatPercent = d3.format("%"),
    formatPercentDetailed = d3.format(".1%");

var x = d3.time.scale()
    .range([0, width]);

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

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickFormat(formatPercent)
    .tickSize(width);

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.lfpr_rate); });

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("text")
	.attr("class", "right label")
	.text("Percent")
	.attr("x", width-16)
	.attr("y", 0);

var group;
var selectedVariable;


d3.csv("data.csv", function(error, data) {

	data.forEach(function(d) {
		d.date = parseYear(d.date);
		d.lfpr_rate = +d.lfpr_rate;
		d.unemp_rate = +d.unemp_rate;
		d.emp_pop_ratio = +d.emp_pop_ratio;
	});

	x.domain([parseYear("1994"),parseYear("2014")]);
	y.domain([d3.min(data,function (d) { return 0.95*d.lfpr_rate}),d3.max(data,function (d) { return 1.05*d.lfpr_rate})]);

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

	svg.append("rect")
		.attr("x", x(parseMonth("04-2001")))
		.attr("y", 0)
		.attr("width", 19)
		.attr("height", height-1)
		.attr("fill", "#eee");

	svg.append("rect")
		.attr("x", x(parseMonth("01-2008")))
		.attr("y", 0)
		.attr("width", 43)
		.attr("height", height-1)
		.attr("fill", "#eee");

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

	svg.append("path")
		.datum(data)
		.attr("class", "line")
		.attr("d", line);

	group = svg.selectAll(".group")
		.data(data)
		.enter().append("g")
		.attr("class", "group");

	group.append("circle")
		.attr("class", "circle")
		.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.lfpr_rate) + ")"; } )
		.attr("r", 4);

	d3.selectAll(".circle")
		.on("mouseover", function(d) {
			d3.select(".tooltip")
				.style("display", "block")
				.style("opacity", 1)
				.html(formatPercentDetailed(d.lfpr_rate))
				.style("left", x(d.date)+18 + "px")
				.style("top", y(d.lfpr_rate)-686 + "px");
		})
		.on("mouseout", function(d) {
			d3.select(".tooltip")
				.style("opacity", 0)
				.style("display", "none");
		});





	d3.selectAll(".button").on("click", function(){

		selectedVariable = d3.select(this).attr("id");

		if (d3.select(this).classed("selected")) {
		} else {

			d3.selectAll(".button").classed("selected", false);
			d3.select(this).classed("selected", true);

			y = d3.scale.linear()
				.range([height, 0])
				.domain([d3.min(data,function (d) { return 0.95*d[selectedVariable]}),d3.max(data,function (d) { return 1.05*d[selectedVariable]})]);

			yAxis = d3.svg.axis()
				.scale(y)
				.orient("right")
				.tickFormat(formatPercent)
				.tickSize(width);

			line = d3.svg.line()
				.x(function(d) { return x(d.date); })
				.y(function(d) { return y(d[selectedVariable]); });

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

			d3.select(".line")
				.datum(data)
				.transition()
				.duration(250)
				.attr("d", line);

			d3.selectAll(".group")
				.data(data);

			d3.selectAll(".circle")
				.transition()
				.duration(250)
				.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d[selectedVariable]) + ")"; } );


			d3.selectAll(".circle")
				.on("mouseover", function(d) {
					d3.select(".tooltip")
						.style("display", "block")
						.style("opacity", 1)
						.html(formatPercentDetailed(d[selectedVariable]))
						.style("left", x(d.date)+18 + "px")
						.style("top", y(d[selectedVariable])-686 + "px");
				})
				.on("mouseout", function(d) {
					d3.select(".tooltip")
						.style("opacity", 0)
						.style("display", "none");
				});



		}

	});

});

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