var stations = ["Civic Center", "Embarcadero", "Montgomery", "Powell"];
var station = "Civic Center";
var cc = d3.select("#cc").on("click", function() {
	station = stations[0];
	d3.selectAll(".btn").selectAll(".fa").classed('hidden', true);
	d3.select(this).selectAll(".fa").classed('hidden', false);
	redraw();
});
d3.select("#emb").on("click", function() {
	station = stations[1];
	d3.selectAll(".btn").selectAll(".fa").classed('hidden', true);
	d3.select(this).selectAll(".fa").classed('hidden', false);
	redraw();
});
d3.select("#mont").on("click", function() {
	station = stations[2];
	d3.selectAll(".btn").selectAll(".fa").classed('hidden', true);
	d3.select(this).selectAll(".fa").classed('hidden', false);
	redraw();
});
d3.select("#pow").on("click", function() {
	station = stations[3];
	d3.selectAll(".btn").selectAll(".fa").classed('hidden', true);
	d3.select(this).selectAll(".fa").classed('hidden', false);
	redraw();
});

d3.csv('urban.csv', function(data) {
	// convert time
	data.map(function(d) {
		d.timestamp = (new Date(d.timestamp));
		d.index = "i-" + d.timestamp.getMonth() + "-" + d.timestamp.getDate();
		d.count = +d.count;
		return d;
	})

	console.log(data);


	var timeExtent = d3.extent(data, function(d) { return d.timestamp; });

	// nest data
	var nested = d3.nest()
					.key(function(d) { return d.index; })
					.key(function(d) { return d.station; })
					.key(function(d) { return d.object; })
					.entries(data).map(function(d) {
		d.values = d.values.map(function(d) {
			d.values = d.values.map(function(d) {
				d.extent = d3.extent(d.values, function(d) { return d.count; });
				d.quartile1 = d3.quantile(d.values.map(function(d) { return d.count; }), .25);
				d.median = d3.median(d.values, function(d) { return d.count; });
				d.quartile2 = d3.quantile(d.values.map(function(d) { return d.count; }), .75);
				d.thresholds = [d.quartile1, d.median, d.quartile2, d.extent[1]];
				d.values = d.values.map(function(d) {
					d.minute = d.timestamp.getMinutes();
					d.hour = d.timestamp.getHours();
					return d;
				});
				return d;
			});
			return d;
		});
		return d;
	});

	var dataBase = {};

	nested.forEach(function(d) {
		dataBase[d.key] = {};
		d.values.forEach(function(e) {
			dataBase[d.key][e.key] = e;
		});
	});


	var index = "i-0-20";


	// hackety hack
	var stations = ["Civic Center", "Embarcadero", "Montgomery", "Powell"],
		indices = ["i-0-20", "i-0-21", "i-0-22", "i-0-23", "i-0-24", "i-0-25", "i-0-26", "i-0-27", "i-0-28", "i-0-29", "i-0-30", "i-0-31", "i-1-1", "i-1-2",];
	var i = 0;
	var j = 0;
	redraw();
	setInterval(function(d) {
		i++;
		if (i === indices.length) i = 0;
		redraw();
	}, 5000);


	function redraw() {
		var index = indices[i];
		var stationDiv = d3.select('#charts').selectAll('.station').data([dataBase[index][station]]);
		console.log(indices[i], dataBase[indices[i]][stations[j]]);

		stationDiv.enter().append('div').classed('station', true)
		stationDiv.each(function(stationObj) {
			var staKey = stationObj.key;
			var keys = [stationObj.key];
			var h1 = d3.select(this).selectAll('h1').data(keys);
			h1.enter().append('h1');
			h1.text(function(d) { return d; });
			var type = d3.select(this).selectAll('.type').data(stationObj.values);
			type.enter().append('div').classed('type', true)
			type.each(function(typeObj) {
				var h2 = d3.select(this).selectAll('h2').data([typeObj.key])
				h2.enter().append('h2')
				h2.text(function(d) { return d; })
				var chartValues = [typeObj.values];
				var chart = d3.select(this).selectAll('.chart').data(chartValues); //hack
				chart.enter().append('div').classed('chart', true)
				var colors = ['#33332d', '#5e3a28', '#864021', '#b04217', '#db4105'];
				// colors.reverse();
				if (d3.extent[1] > 1) {
					chart.call(d3.custom.heatmap().box(this.clientWidth)
										.zScale(
											d3.scale.threshold()
												.domain(typeObj.thresholds)
												.range(colors)
										)
							);
				} else {
					chart.call(d3.custom.heatmap().box(this.clientWidth)
										.zScale(
											d3.scale.linear()
												.domain(typeObj.extent)
												.range([colors[0], colors[colors.length - 1]])
										)
							);
				}

			});
		})
	}
});