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

var svg, tip;

setup(width, height);

function setup(width, height) {
	svg = d3.select("#yearchart").append("svg")
		.attr("width", width)
		.attr("height", height + 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>";
		});
	svg.call(tip);
	draw(width, height)
}

function draw(width, height) {
	d3.json("/donate/data/year", function(err, data) {
		var xscale = d3.scale.ordinal().rangeRoundBands([0, width], .1);
		xscale.domain(data.map(function(d) { return d.key; }));
                var yscale = d3.scale.linear().range([height, 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");

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

		svg.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 height - yscale(d.value);
			})
			.attr("fill", function(d) {
				return "#00ae18";
			})
			.on("mouseover", tip.show)
			.on("mouseout", tip.hide)
			
	});	
};

function redraw() {
	width = document.getElementById('yearchart').offsetWidth - 40 -30;
	height = (width / 2) - 20 - 30;
	d3.select('#yearchart').select('svg').remove();
	setup(width, height);
}

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