d3.select(window).on("resize", throttle);
var ywidth = document.getElementById('yearchart').offsetWidth - 40 -30;
var yheight = (ywidth / 2) - 20 - 30;

var mwidth = document.getElementById('monthchart').offsetWidth - 40 -30;
var mheight = (mwidth / 2) - 20 - 30;

var yearchart, monthchart, tip;

setup(ywidth, yheight, mwidth, mheight);

function setup(ywidth, yheight, mwidth, mheight) {
	yearchart = d3.select("#yearchart").append("svg")
		.attr("width", ywidth)
		.attr("height", yheight + 20 + 30)
		.append("g")
		.attr("transform", "translate(" + 40 + "," + 20 + ")");

	monthchart = d3.select("#monthchart").append("svg")
		.attr("width", mwidth)
		.attr("height", mheight + 20 + 30)
		.append("g")
		.attr("transform", "translate(" + 40 + "," + 20 + ")");

	tip = d3.tip()
		.attr('class', 'd3-tip')
		.offset([-10, 0])
		.html(function(d) {
			return "<strong>" + d.key + ":</strong> <span style='color:#00ae18'>" + d.value + "</span>";
		});
	yearchart.call(tip);
	monthchart.call(tip);
	draw(ywidth, yheight, mwidth, mheight)
}

function draw(ywidth, yheight, mwidth, mheight) {
	d3.json("/data/year", function(err, data) {
		var xscale = d3.scale.ordinal().rangeRoundBands([0, ywidth], .1);
		xscale.domain(data.map(function(d) { return d.key; }));
                var yscale = d3.scale.linear().range([yheight, 0]);
		yscale.domain([0, d3.max(data, function(d) { return d.value; })]);
		var key = function(d) { return d.key; };

		var xaxis = d3.svg.axis()
			.scale(xscale)
			.orient("bottom");
		var yaxis = d3.svg.axis()
			.scale(yscale)
			.orient("left");

		yearchart.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0, " + yheight + ")")
			.call(xaxis);
		yearchart.append("g")
			.attr("class", "y axis")
			.call(yaxis)
			.append("text")
			.attr("transform", "rotate(-90)")
			.attr("y", 6)
			.attr("dy", ".71em")
			.style("text-anchor", "end");

		yearchart.selectAll("rect")
			.data(data, key)
			.enter()
			.append("rect")
			.attr("class", "bar")
			.attr("x", function(d) {
				return xscale(d.key);
			})
			.attr("width", xscale.rangeBand())
			.attr("y", function(d) {
				return yscale(d.value);
			})
			.attr("height", function(d) {
				return yheight - yscale(d.value);
			})
			.attr("fill", function(d) {
				return "#00ae18";
			})
			.on("mouseover", tip.show)
			.on("mouseout", tip.hide)
			
	});
	d3.json("/data/month", function(err, data) {
		var firstdate = d3.select("#monthfirstdate").node().value;
		var lastdate = d3.select("#monthlastdate").node().value;
		var newdata = [];
		for (var key in data) {
			if (data[key]["key"] >= firstdate && data[key]["key"] <= lastdate) {
				console.log(key)
				newdata.push(data[key])
			}
		}

		var xscale = d3.scale.ordinal().rangeRoundBands([0, mwidth - (newdata.length - 3) * 5], .1);
		xscale.domain(newdata.map(function(d) { return d.key }));
		var yscale = d3.scale.linear().range([mheight, 0]);
		yscale.domain([0, d3.max(newdata, function(d) { return d.value; })]);

		var key = function(d) { return d.key; };
		var xaxis = d3.svg.axis()
			.scale(xscale)
			.orient("bottom");
		var yaxis = d3.svg.axis()
			.scale(yscale)
			.orient("left");

		monthchart.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0, " + mheight + ")")
			.call(xaxis)
		monthchart.append("g")
			.attr("class", "y axis")
			.call(yaxis)
			.append("text")
			.attr("transform", "rotate(-90)")
			.attr("y", 6)
			.attr("dy", ".71em")
			.style("text-anchor", "end");

		monthchart.selectAll("rect")
			.data(newdata, key)
			.enter()
			.append("rect")
			.attr("class", "bar")
			.attr("x", function(d) {
				return xscale(d.key);
			})
			.attr("width", xscale.rangeBand())
			.attr("y", function(d) {
				return yscale(d.value);
			})
			.attr("height", function(d) {
				return mheight - yscale(d.value);
			})
			.attr("fill", function(d) {
				return "#00ae18";
			})
			.on("mouseover", tip.show)
			.on("mouseout", tip.hide)
			
	});	
};

function redraw() {
	ywidth = document.getElementById('yearchart').offsetWidth - 40 -30;
	yheight = (ywidth / 2) - 20 - 30;
	mwidth = document.getElementById('monthchart').offsetWidth - 40 -30;
	mheight = (mwidth / 2) - 20 - 30;
	d3.select('svg').remove();
	setup(ywidth, yheight, mwidth, mheight);
}

var throttleTimer;
function throttle() {
	  window.clearTimeout(throttleTimer);
	      throttleTimer = window.setTimeout(function() {
		            redraw();
			        }, 200);
}