var margin = {top: 15, right: 45, bottom: 40, left: 25},
    width = 565 - margin.left - margin.right,
    height = 460 - margin.top - margin.bottom;

var parseYear = d3.time.format("%Y").parse,
    parseDate = d3.time.format("%Y%m").parse,
    parseMonth = d3.time.format("%m-%Y").parse,
    numberFormat = d3.format(",.0f"),
    numberFormatDetailed = d3.format(",.1f");

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

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

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

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

var yAxisLeft = d3.svg.axis()
	.scale(y1)
	.orient("left")
	.tickFormat(numberFormatDetailed)
	.tickSize(-width);

var yAxisRight = d3.svg.axis()
	.scale(y0)
	.orient("right")
	.tickFormat(numberFormatDetailed);

var line = d3.svg.line()
	.x(function(d) { return x(d.lfpr); })
	.y(function(d) { return y1(d.fitted); });

var lfprLine = d3.svg.line()
    .x(function(d) { return x(d.dateid); })
    .y(function(d) { return y0(d.lfpr); });

var unempLine = d3.svg.line()
    .x(function(d) { return x(d.dateid); })
    .y(function(d) { return y1(d.unemprate); });

var regLine = d3.svg.line()
	.x(function(d) { return x(d.lfpr); })
	.y(function(d) { return y1(d.fitted); });

var regLine2000s = d3.svg.line()
	.x(function(d) { return x(d.fitted); })
	.y(function(d) { return y1(d.unemprate); });

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 group;
var selectedVariable;
var twodigits = d3.format("02d");
var year;
var month;
var dateid;
var duration;
var formatDate = d3.time.format("%B, %Y");
var slideout;
var slidein;
var delay;
var legendText = ["1970s", "1980s", "1990s", "2000s", "2009-present"];
var legendColors = ["#648d9e", "#00485d", "#772210", "#a5a6a7", "#00a1ce"];

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

	d3.select("#next").on("click", function(){
		slideValue = d3.select("#next").attr("value");

		if (slideValue=="start") {
			document.getElementById("next").setAttribute("value", "one");
			document.getElementById("again").setAttribute("value", "one");
			linechart();
			setTimeout(unemployment, 250);
			setTimeout(lfpr, 5000);
		} else if (slideValue=="one") {
			document.getElementById("next").setAttribute("value", "two");
			document.getElementById("again").setAttribute("value", "two");
			formatDate = d3.time.format("%B, %Y");
			duration = 240;
			year = 1976;
			month = 1;
			dateid = year + twodigits(month);
			scatter();
			setTimeout(changeView1970s, 250);
			setTimeout(showDots1970s, 250);
		} else if (slideValue=="two") {
			document.getElementById("next").setAttribute("value", "three");
			document.getElementById("again").setAttribute("value", "three");
			duration = 50;
			year = 1982;
			month = 12;
			dateid = year + twodigits(month);
			setTimeout(changeView1980s, 250);
			setTimeout(showDots1980s, 250);
		} else if (slideValue=="three") {
			document.getElementById("next").setAttribute("value", "four");
			document.getElementById("again").setAttribute("value", "four");
			year = 1992;
			month = 6;
			dateid = year + twodigits(month);
			setTimeout(changeView1990s, 250);
			setTimeout(showDots1990s, 250);
		} else if (slideValue=="four") {
			document.getElementById("next").setAttribute("value", "five");
			document.getElementById("again").setAttribute("value", "five");
			year = 2003;
			month = 7;
			dateid = year + twodigits(month);
			setTimeout(changeView2000s, 250);
			setTimeout(showDots2000s, 250);
		} else if (slideValue=="five") {
			document.getElementById("next").setAttribute("value", "six");
			document.getElementById("again").setAttribute("value", "six");
			year = 2009;
			month = 10;
			dateid = year + twodigits(month);
			setTimeout(changeViewCurrent, 250);
			setTimeout(showDotsCurrent, 250);
		} else if (slideValue=="six") {
			document.getElementById("next").setAttribute("value", "seven");
			document.getElementById("again").setAttribute("value", "seven");
			setTimeout(changeViewAll, 250);
			setTimeout(showDotsAll, 500);
		} else if (slideValue=="seven") {
			document.getElementById("next").setAttribute("value", "one");
			d3.select("#next").html("Next<span class='fa fa-caret-right'></span>");
			linechart();
			setTimeout(unemployment, 250);
			setTimeout(lfpr, 5000);
		}
	});


	d3.select("#again").on("click", function(){
		if (slideValue=="one") {

			formatDate = d3.time.format("%B, %Y");
			duration = 240;
			year = 1976;
			month = 1;
			dateid = year + twodigits(month);

			d3.select("#line1970s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.selectAll(".dot1970s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.select("#buttons")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			d3.select("#again")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			setTimeout(showDots1970s, 250);
		} else if (slideValue=="two") {

			duration = 50;
			year = 1982;
			month = 12;
			dateid = year + twodigits(month);

			d3.select("#line1980s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.selectAll(".dot1980s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.select("#buttons")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			d3.select("#again")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			setTimeout(showDots1980s, 250);

		} else if (slideValue=="three") {

			year = 1992;
			month = 6;
			dateid = year + twodigits(month);

			d3.select("#line1990s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.selectAll(".dot1990s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.select("#buttons")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			d3.select("#again")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			setTimeout(showDots1990s, 250);

		} else if (slideValue=="four") {

			year = 2003;
			month = 7;
			dateid = year + twodigits(month);

			d3.select("#line2000s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.selectAll(".dot2000s")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.select("#buttons")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			d3.select("#again")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			setTimeout(showDots2000s, 250);

		} else if (slideValue=="five") {

			year = 2009;
			month = 10;
			dateid = year + twodigits(month);

			d3.select("#lineCurrent")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.selectAll(".dotcurrent")
				.transition()
				.duration(250)
				.style("opacity", 0);

			d3.select("#buttons")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			d3.select("#again")
				.transition()
				.duration(250)
				.style("opacity", 0)
				.style("display", "none")
				.transition()
				.delay(delay)
				.duration(500)
				.style("opacity", 1)
				.style("display", "block");

			setTimeout(showDotsCurrent, 250);

		}
	});





	data.forEach(function(d) {
		d.year = +d.year;
		d.dateid = parseDate(d.dateid);
		d.idnumber = +d.idnumber;
		d.lfpr = +d.lfpr;
		d.unemprate = +d.unemprate;
		d.fitted = +d.fitted;
	});

	var startData = data.filter(function(d) { return d.year > 1999; });

	var data1970s = data.filter(function(d) { return d.expansion=="1970s"; });
	var data1980s = data.filter(function(d) { return d.idnumber > 198211 && d.idnumber < 199007; });
	var data1990s = data.filter(function(d) { return d.idnumber > 199205 && d.idnumber < 200103; });
	var data2000s = data.filter(function(d) { return d.idnumber > 200306 && d.idnumber < 200712; });
	var dataCurrent = data.filter(function(d) { return d.idnumber > 200909; });

	function animateLine() {
		var l = this.getTotalLength();
		i = d3.interpolateString("0," + l, l + "," + l);
		return function(t) { return i(t); };
	}

	function highlight() {
		d3.select(marker)
			.style("opacity", 1)
			.transition()
			.duration(250)
			.attr("r", 6)
			.style("stroke-width",3.75)
			.transition()
			.duration(250)
			.attr("r", 4)
			.style("stroke-width",2.5);
	}

	function fade() {
		d3.selectAll("#slides")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(500)
			.duration(500)
			.style("opacity", 1);

		d3.select("#buttons")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none")
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1)
			.style("display", "block");

		d3.selectAll(slideout)
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(slidein)
			.transition()
			.delay(500)
			.style("opacity", 1)
			.style("display", "block");

	}

	x.domain([d3.min(dataCurrent,function (d) { return 0.99*d.lfpr}),d3.max(dataCurrent,function (d) { return 1.01*d.lfpr})]);
	y1.domain([d3.min(dataCurrent,function (d) { return 0.90*d.unemprate}),d3.max(dataCurrent,function (d) { return 1.1*d.unemprate})]);

	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis)
			.append("text")
			.attr("dy", "2.8em")
			.attr("dx", width/1.5)
			.style("text-anchor","end")
			.attr("class", "xlabel")
			.text("Labour force participation rate, %");

	svg.append("g")
		.attr("class", "left axis")
		.call(yAxisLeft);

	svg.append("text")
		.attr("class", "left label")
		.text("Unemployment rate, %")
		.attr("x", -margin.left)
		.attr("y", 0);

	currentgroup = svg.selectAll(".group")
		.data(dataCurrent)
		.enter().append("g")
		.attr("class", "currentgroup")
		.attr("id", function(d) { return "currentgroup" + [d.idnumber]; });

	currentgroup.append("circle")
		.attr("class", function(d) { return "dot" + [d.expansion]; })
		.attr("id", function(d) { return "dot" + [d.idnumber]; })
		.attr("r", 3.5)
		.attr("cx", function(d) { return x(d.lfpr); })
		.attr("cy", function(d) { return y1(d.unemprate); })
		.style("opacity", 1);

	svg.append("path")
		.datum(dataCurrent)
		.attr("class", "regLine")
		.attr("id", "lineCurrent")
		.attr("d", line)
		.style("opacity", 1);

	d3.selectAll("#dot200910")
		.style("stroke", "#ff0000");

	d3.select("#dot201408")
		.style("stroke", "#ff0000");

	d3.select("#currentgroup200910").append("text")
		.attr("x", function(d) { return x(d.lfpr) + 3; })
		.attr("y", function(d) { return y1(d.unemprate) - 7; })
		.text("Start of recovery")
		.attr("class", "currentlabel")
		.style("opacity", 1);

	d3.select("#currentgroup201408").append("text")
		.attr("x", function(d) { return x(d.lfpr) + 8; })
		.attr("y", function(d) { return y1(d.unemprate) + 15; })
		.text("Today")
		.attr("class", "currentlabel")
		.style("opacity", 1);

	svg.append("text")
		.attr("id", "yearmonth")
		.attr("dy", height-20)
		.attr("dx", width/2-20);


	function linechart() {

		setTimeout(function(){
		d3.select("#next").html("Next<span class='fa fa-caret-right'></span>");
		}, 500);

		slideout = ".slideintro";
		slidein = ".slideone";
		delay = 9000;
		fade();

		d3.selectAll(".dot")
			.transition()
			.duration(250)
			.style("color", "#ccc");

		d3.select("#dotone")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.selectAll(".slideseven")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll("circle")
			.transition()
			.duration(250)
			.style("opacity", 0)
			.remove();

		d3.select("#legend")
			.transition()
			.duration(250)
			.style("opacity", 0)
			.remove();

		d3.selectAll(".currentlabel")
			.transition()
			.duration(250)
			.style("opacity", 0)
			.remove();

		d3.select("#lineCurrent")
			.transition()
			.duration(250)
			.style("opacity", 0)
			.remove();

		d3.select(".left.label")
			.transition()
			.duration(250)
			.attr("x", -margin.left + 10)
			.attr("y", 0);

		svg.append("text")
			.attr("class", "right label")
			.text("Labour force participation rate, %")
			.attr("x", width-160)
			.attr("y", 0)
			.style("opacity", 0);

		d3.select(".xlabel")
			.transition()
			.duration(250)
 			.style("opacity", 0);

		x = d3.time.scale()
			.range([0, width])
			.domain([parseDate("200001"),parseDate("201512")]);

		y0 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(startData,function (d) { return 0.9792*d.lfpr}),d3.max(startData,function (d) { return 1.0245*d.lfpr})]);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(startData,function (d) { return 0.90*d.unemprate}),d3.max(startData,function (d) { return 1.1*d.unemprate})]);

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

		yAxisLeft = d3.svg.axis()
			.scale(y1)
			.orient("left")
			.tickFormat(numberFormat)
			.tickSize(-width);

		yAxisRight = d3.svg.axis()
			.scale(y0)
			.orient("right")
			.tickFormat(numberFormat)
			.tickSize(width);

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

		d3.select(".left.axis")
			.transition()
			.duration(250)
			.call(yAxisLeft);

		svg.append("g")
			.attr("class", "right axis")
			.style("fill", "#772210")
			.call(yAxisRight)
			.style("opacity", 0);

		svg.append("rect")
			.attr("x", x(parseDate("200104")))
			.attr("y", 0)
			.attr("width", 19)
			.attr("height", height-1)
			.attr("fill", "#eee")
			.style("opacity", 0);

		svg.append("rect")
			.attr("x", x(parseDate("200801")))
			.attr("y", 0)
			.attr("width", 43)
			.attr("height", height-1)
			.attr("fill", "#eee")
			.style("opacity", 0);

		svg.append("path")
			.attr("class", "lfprLine");

		svg.append("path")
			.attr("class", "unempLine");

		group = svg.selectAll(".group")
			.data(startData)
			.enter().append("g")
			.attr("class", "group")
			.attr("id", function(d) { return "group" + [d.idnumber]; });

		group.append("circle")
			.attr("class", "unempCircle")
			.attr("transform", function(d) { return "translate(" + x(d.dateid) + "," + y1(d.unemprate) + ")"; } )
			.attr("r", 4)
			.attr("id", function(d) { return "unempCircle" + [d.idnumber]; });

		d3.select("#group201408").append("text")
			.attr("x", function(d) { return x(d.dateid) + 10; })
			.attr("y", function(d) { return y1(d.unemprate) + 5; })
			.attr("id", function(d) { return "unempSlide" + [d.idnumber]; })
			.text(function(d) { return numberFormatDetailed([d.unemprate]); })
			.style("fill", "#00a1ce");

		group.append("circle")
			.attr("class", "lfprCircle")
			.attr("transform", function(d) { return "translate(" + x(d.dateid) + "," + y0(d.lfpr) + ")"; } )
			.attr("r", 4)
			.attr("id", function(d) { return "lfprCircle" + [d.idnumber]; });

		d3.select("#group201408").append("text")
			.attr("x", function(d) { return x(d.dateid) + 10; })
			.attr("y", function(d) { return y0(d.lfpr) + 5; })
			.attr("id", function(d) { return "lfprSlide" + [d.idnumber]; })
			.text(function(d) { return numberFormatDetailed([d.lfpr]); })
			.style("fill", "#772210");

	}


	function unemployment() {
		d3.selectAll("rect")
			.transition()
			.duration(250)
			.style("opacity", 1);
		d3.select(".unempLine")
			.datum(startData)
			.attr("d", unempLine)
			.transition()
			.duration(2500)
			.ease("linear")
			.attrTween("stroke-dasharray", animateLine)
			.each("end", function() {
				marker = "#unempCircle201408";
				highlight(marker);
				d3.select("#unempSlide201408")
					.transition()
					.duration(500)
					.style("opacity", 1);
			});
		d3.timer.flush();
	}


	function lfpr() {

		d3.select(".right.axis")
			.transition()
			.duration(500)
			.style("opacity", 1);

		d3.select(".right.label")
			.transition()
			.duration(500)
			.style("opacity", 1);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(500)
			.style("fill", "#00a1ce");

		d3.select(".left.label")
			.transition()
			.duration(500)
			.style("fill", "#00a1ce");

		d3.select(".lfprLine")
			.datum(startData)
			.attr("d", lfprLine)
			.transition()
			.duration(2500)
			.ease("linear")
			.attrTween("stroke-dasharray", animateLine)
			.each("end", function() {
				marker = "#lfprCircle201408";
				highlight(marker);
				d3.select("#lfprSlide201408")
					.transition()
					.duration(500)
					.style("opacity", 1);
			});
		d3.timer.flush();
	}


	function scatter() {

		slideout = ".slideone";
		slidein = ".slidetwo";
		delay = 8000;
		fade();

		d3.select("#dottwo")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.select("#again")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1);

		d3.select(".lfprLine")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.remove();

		d3.select(".unempLine")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.remove();

		d3.selectAll("g.group")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.remove();

		d3.selectAll("g.currentgroup")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.remove();

		d3.selectAll(".group text")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.remove();

		d3.selectAll("rect")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.select(".right.axis")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.select(".right.label")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(500)
			.style("fill", "#4a4a4a");

		d3.select(".left.label")
			.transition()
			.duration(500)
			.attr("x", -margin.left + 5)
			.style("fill", "#4a4a4a");

		d3.select(".xlabel")
			.transition()
			.duration(250)
 			.style("opacity", 1);

		svg.append("path")
			.datum(data1970s)
			.attr("class", "regLine")
			.attr("id", "line1970s")
			.attr("d", regLine);

		svg.append("path")
			.datum(data1980s)
			.attr("class", "regLine")
			.attr("id", "line1980s")
			.attr("d", regLine);

		svg.append("path")
			.datum(data1990s)
			.attr("class", "regLine")
			.attr("id", "line1990s")
			.attr("d", regLine);

		svg.append("path")
			.datum(data2000s)
			.attr("class", "regLine")
			.attr("id", "line2000s")
			.attr("d", regLine2000s);

		svg.append("path")
			.datum(dataCurrent)
			.attr("class", "regLine")
			.attr("id", "lineCurrent")
			.attr("d", regLine);

	}


	function changeView1970s() {

		x = d3.scale.linear()
			.range([0, width])
			.domain([d3.min(data1970s,function (d) { return 0.99*d.lfpr}),d3.max(data1970s,function (d) { return 1.01*d.lfpr})]);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(data1970s,function (d) { return 0.9*d.unemprate}),d3.max(data1970s,function (d) { return 1.05*d.unemprate})]);

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

		yAxisLeft = d3.svg.axis()
			.scale(y1)
			.orient("left")
			.tickFormat(numberFormatDetailed)
			.tickSize(-width);

		regLine = d3.svg.line()
			.x(function(d) { return x(d.lfpr); })
			.y(function(d) { return y1(d.fitted); });

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

		d3.select(".left.axis")
			.transition()
			.duration(250)
			.call(yAxisLeft);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(250)
			.style("fill", "#4a4a4a");

		svg.selectAll(".dot1970s")
			.data(data1970s)
			.enter().append("circle")
			.attr("class", function(d) { return "dot" + [d.expansion]; })
			.attr("id", function(d) { return "dot" + [d.idnumber]; })
			.attr("r", 3.5)
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll(".regLine")
			.transition()
			.duration(250)
			.attr("d", regLine);

	}


	function showDots1970s() {
		d3.select("#dot" + dateid)
			.transition()
			.duration(250)
			.style("opacity", 1);

		d3.select("#yearmonth")
			.text(formatDate(parseDate(dateid)))
			.attr("value", dateid)
			.style("opacity", 1);

		month = month + 1;
		if (month==13) {
			year = year + 1;
			month = 1;
		};
		dateid = year + twodigits(month);
		duration = duration - 5;

		if (dateid==197701) {
			formatDate = d3.time.format("%Y");
		};

		if (dateid==198001) {
			d3.select("#line1970s")
				.transition()
				.delay(500)
				.duration(500)
				.style("opacity", 1);

			d3.select("#yearmonth")
				.transition()
				.delay(750)
				.duration(500)
				.style("opacity", 0)
				.transition()
				.duration(0)
				.text("1976-1979")
				.transition()
				.duration(500)
				.style("opacity", 1);

		} else {
		setTimeout(showDots1970s, duration);
		};
	}


	function changeView1980s() {

		slideout = ".slidetwo";
		slidein = ".slidethree";
		delay = 6500;
		fade();

		d3.select("#dotthree")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.select("#again")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1);

		d3.select(".left.label")
			.transition()
			.duration(250)
			.attr("x", -margin.left + 10)
			.attr("y", 0);

		d3.select("#line1970s")
			.transition()
			.duration(250)
			.style("opacity", 0);

		d3.selectAll(".dot1970s")
			.transition()
			.duration(250)
			.style("opacity", 0);


		x = d3.scale.linear()
			.range([0, width])
			.domain([d3.min(data1980s,function (d) { return 0.99*d.lfpr}),d3.max(data1980s,function (d) { return 1.01*d.lfpr})]);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(data1980s,function (d) { return 0.7*d.unemprate}),d3.max(data1980s,function (d) { return 1.05*d.unemprate})]);

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

		yAxisLeft = d3.svg.axis()
			.scale(y1)
			.orient("left")
			.tickFormat(numberFormat)
			.tickSize(-width);

		regLine = d3.svg.line()
			.x(function(d) { return x(d.lfpr); })
			.y(function(d) { return y1(d.fitted); });

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

		d3.select(".left.axis")
			.transition()
			.duration(250)
			.call(yAxisLeft);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(250)
			.style("fill", "#4a4a4a");

		svg.selectAll(".dot1980s")
			.data(data1980s)
			.enter().append("circle")
			.attr("class", function(d) { return "dot" + [d.expansion]; })
			.attr("id", function(d) { return "dot" + [d.idnumber]; })
			.attr("r", 3.5)
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll("#line1980s")
			.transition()
			.duration(250)
			.attr("d", regLine);

	}


	function showDots1980s() {
		d3.select("#dot" + dateid)
			.transition()
			.duration(250)
			.style("opacity", 1);

		d3.select("#yearmonth")
			.text(formatDate(parseDate(dateid)))
			.attr("value", dateid);

		month = month + 1;
		if (month==13) {
			year = year + 1;
			month = 1;
		}
		dateid = year + twodigits(month);

		if (dateid==199007) {
			d3.select("#line1980s")
				.transition()
				.delay(500)
				.duration(500)
				.style("opacity", 1);

			d3.select("#yearmonth")
				.transition()
				.delay(750)
				.duration(500)
				.style("opacity", 0)
				.transition()
				.duration(0)
				.text("1982-1990")
				.transition()
				.duration(500)
				.style("opacity", 1);

		} else {
		setTimeout(showDots1980s, duration);
		}
	}


	function changeView1990s() {

		slideout = ".slidethree";
		slidein = ".slidefour";
		delay = 6500;
		fade();

		d3.select("#dotfour")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.select("#again")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1);

		d3.select(".left.label")
			.transition()
			.duration(250)
			.attr("x", -margin.left + 5)
			.attr("y", 0);

		d3.select("#line1980s")
			.transition()
			.duration(250)
			.style("opacity", 0);

		d3.selectAll(".dot1980s")
			.transition()
			.duration(250)
			.style("opacity", 0);

		x = d3.scale.linear()
			.range([0, width])
			.domain([d3.min(data1990s,function (d) { return 0.995*d.lfpr}),d3.max(data1990s,function (d) { return 1.005*d.lfpr})]);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(data1990s,function (d) { return 0.8*d.unemprate}),d3.max(data1990s,function (d) { return 1.05*d.unemprate})]);

		xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom")
			.ticks(5)
			.tickFormat(numberFormatDetailed);

		yAxisLeft = d3.svg.axis()
			.scale(y1)
			.orient("left")
			.tickFormat(numberFormatDetailed)
			.tickSize(-width);

		regLine = d3.svg.line()
			.x(function(d) { return x(d.lfpr); })
			.y(function(d) { return y1(d.fitted); });

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

		d3.select(".left.axis")
			.transition()
			.duration(250)
			.call(yAxisLeft);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(250)
			.style("fill", "#4a4a4a");

		svg.selectAll(".dot1990s")
			.data(data1990s)
			.enter().append("circle")
			.attr("class", function(d) { return "dot" + [d.expansion]; })
			.attr("id", function(d) { return "dot" + [d.idnumber]; })
			.attr("r", 3.5)
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll("#line1990s")
			.transition()
			.duration(250)
			.attr("d", regLine);


	}


	function showDots1990s() {
		d3.select("#dot" + dateid)
			.transition()
			.duration(250)
			.style("opacity", 1);

		d3.select("#yearmonth")
			.text(formatDate(parseDate(dateid)))
			.attr("value", dateid);

		month = month + 1;
		if (month==13) {
			year = year + 1;
			month = 1;
		}
		dateid = year + twodigits(month);

		if (dateid==200103) {
			d3.select("#line1990s")
				.transition()
				.delay(500)
				.duration(500)
				.style("opacity", 1);

			d3.select("#yearmonth")
				.transition()
				.delay(750)
				.duration(500)
				.style("opacity", 0)
				.transition()
				.duration(0)
				.text("1992-2001")
				.transition()
				.duration(500)
				.style("opacity", 1);

		} else {
		setTimeout(showDots1990s, duration);
		}
	}


	function changeView2000s() {

		slideout = ".slidefour";
		slidein = ".slidefive";
		delay = 4500;
		fade();

		d3.select("#dotfive")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.select("#again")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1);

		d3.select(".left.label")
			.transition()
			.duration(250)
			.attr("x", -margin.left + 5)
			.attr("y", 0);

		d3.select("#line1990s")
			.transition()
			.duration(250)
			.style("opacity", 0);

		d3.selectAll(".dot1990s")
			.transition()
			.duration(250)
			.style("opacity", 0);

		x = d3.scale.linear()
			.range([0, width])
			.domain([d3.min(data2000s,function (d) { return 0.99*d.lfpr}),d3.max(data2000s,function (d) { return 1.01*d.lfpr})]);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(data2000s,function (d) { return 0.9*d.unemprate}),d3.max(data2000s,function (d) { return 1.05*d.unemprate})]);

		xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom")
			.ticks(5)
			.tickFormat(numberFormatDetailed);

		yAxisLeft = d3.svg.axis()
			.scale(y1)
			.orient("left")
			.tickFormat(numberFormatDetailed)
			.tickSize(-width);

		regLine2000s = d3.svg.line()
			.x(function(d) { return x(d.fitted); })
			.y(function(d) { return y1(d.unemprate); });

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

		d3.select(".left.axis")
			.transition()
			.duration(250)
			.call(yAxisLeft);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(250)
			.style("fill", "#4a4a4a");

		svg.selectAll(".dot2000s")
			.data(data2000s)
			.enter().append("circle")
			.attr("class", function(d) { return "dot" + [d.expansion]; })
			.attr("id", function(d) { return "dot" + [d.idnumber]; })
			.attr("r", 3.5)
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll("#line2000s")
			.transition()
			.duration(250)
			.attr("d", regLine2000s);

	}


	function showDots2000s() {
		d3.select("#dot" + dateid)
			.transition()
			.duration(250)
			.style("opacity", 1);

		d3.select("#yearmonth")
			.text(formatDate(parseDate(dateid)))
			.attr("value", dateid);

		month = month + 1;
		if (month==13) {
			year = year + 1;
			month = 1;
		}
		dateid = year + twodigits(month);

		if (dateid==200712) {
			d3.select("#line2000s")
				.transition()
				.delay(500)
				.duration(500)
				.style("opacity", 1);

			d3.select("#yearmonth")
				.transition()
				.delay(750)
				.duration(500)
				.style("opacity", 0)
				.transition()
				.duration(0)
				.text("2003-2007")
				.transition()
				.duration(500)
				.style("opacity", 1);

		} else {
		setTimeout(showDots2000s, duration);
		}
	}


	function changeViewCurrent() {

		slideout = ".slidefive";
		slidein = ".slidesix";
		delay = 5000;
		fade();

		d3.select("#dotsix")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.select("#again")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1);

		d3.select(".left.label")
			.transition()
			.duration(250)
			.attr("x", -margin.left)
			.attr("y", 0);

		d3.select("#line2000s")
			.transition()
			.duration(250)
			.style("opacity", 0);

		d3.selectAll(".dot2000s")
			.transition()
			.duration(250)
			.style("opacity", 0);

		x = d3.scale.linear()
			.range([0, width])
			.domain([d3.min(dataCurrent,function (d) { return 0.99*d.lfpr}),d3.max(dataCurrent,function (d) { return 1.01*d.lfpr})]);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(dataCurrent,function (d) { return 0.9*d.unemprate}),d3.max(dataCurrent,function (d) { return 1.1*d.unemprate})]);

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

		yAxisLeft = d3.svg.axis()
			.scale(y1)
			.orient("left")
			.tickFormat(numberFormatDetailed)
			.tickSize(-width);

		regLine = d3.svg.line()
			.x(function(d) { return x(d.lfpr); })
			.y(function(d) { return y1(d.fitted); });

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

		d3.select(".left.axis")
			.transition()
			.duration(250)
			.call(yAxisLeft);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(250)
			.style("fill", "#4a4a4a");

		svg.selectAll(".dotcurrent")
			.data(dataCurrent)
			.enter().append("circle")
			.attr("class", function(d) { return "dot" + [d.expansion]; })
			.attr("id", function(d) { return "dot" + [d.idnumber]; })
			.attr("r", 3.5)
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll("#lineCurrent")
			.transition()
			.duration(250)
			.attr("d", regLine);


	}


	function showDotsCurrent() {
		d3.select("#dot" + dateid)
			.transition()
			.duration(250)
			.style("opacity", 1);

		d3.select("#yearmonth")
			.text(formatDate(parseDate(dateid)))
			.attr("value", dateid);

		month = month + 1;
		if (month==13) {
			year = year + 1;
			month = 1;
		}
		dateid = year + twodigits(month);

		if (dateid==201409) {
			d3.select("#lineCurrent")
				.transition()
				.delay(500)
				.duration(500)
				.style("opacity", 1);

			d3.select("#yearmonth")
				.transition()
				.delay(750)
				.duration(500)
				.style("opacity", 0)
				.transition()
				.duration(0)
				.text("2009-present")
				.transition()
				.duration(500)
				.style("opacity", 1);

		} else {
		setTimeout(showDotsCurrent, duration);
		}
	}


	function changeViewAll() {

		slideout = ".slidesix";
		slidein = ".slideseven";
		delay = 2000;
		fade();

		d3.select("#dotseven")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.select(".left.label")
			.transition()
			.duration(250)
			.attr("x", -margin.left + 10)
			.attr("y", 0);

		d3.select("#again")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.select("#lineCurrent")
			.transition()
			.duration(250)
			.style("opacity", 0);

		d3.selectAll(".dotcurrent")
			.transition()
			.duration(250)
			.style("opacity", 0);

		d3.select("#yearmonth")
			.transition()
			.duration(250)
			.style("opacity", 0);

		x = d3.scale.linear()
			.range([0, width])
			.domain([d3.min(data,function (d) { return 0.99*d.lfpr}),d3.max(data,function (d) { return 1.01*d.lfpr})]);

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

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

		yAxisLeft = d3.svg.axis()
			.scale(y1)
			.orient("left")
			.tickFormat(numberFormat)
			.tickSize(-width);

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

		d3.select(".left.axis")
			.transition()
			.duration(250)
			.call(yAxisLeft);

		d3.selectAll(".left.axis text")
			.transition()
			.duration(250)
			.style("fill", "#4a4a4a");

		setTimeout(function(){
			d3.select("#next").html("Again<span class='fa fa-repeat'></span>");
		}, 2000);

	}


	function showDotsAll() {
		d3.selectAll(".dot1970s")
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll(".dot1980s")
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll(".dot1990s")
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll(".dot2000s")
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		d3.selectAll(".dotcurrent")
			.attr("cx", function(d) { return x(d.lfpr); })
			.attr("cy", function(d) { return y1(d.unemprate); });

		var legend = svg.append("g")
			.attr("id", "legend")
			.attr("transform", "translate(212,0)");

		var legenditem = legend.selectAll(".legenditem")
			.data(d3.range(5))
			.enter()
			.append("g")
				.attr("class", "legenditem")
				.attr("transform", function(d, i) { return "translate(" + i * 50 + ",0)"; });

		legenditem.append("circle")
			.attr("cx", 5)
			.attr("cy", 0)
			.attr("r", 4)
			.attr("class", "legendbullet")
			.style("stroke", function(d, i) { return legendColors[i]; });

		legenditem.append("text")
			.attr("x", 12)
			.attr("y", 5)
			.text(function(d, i) { return legendText[i]; });

		d3.selectAll("circle")
			.transition()
			.duration(500)
			.style("opacity", 1);

		d3.select("#legend")
			.transition()
			.duration(500)
			.style("opacity", 1);


	}


});

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