var margin = {top: 30, right: 20, bottom: 30, left: 22},
	width = 400 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

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

var color = d3.scale.ordinal()
	.range(["#00485d", "#648d9e", "#00a1ce"]);

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

var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickSize(-width - margin.left - margin.right)
	.tickFormat(d3.format("s"));

var svg = d3.select("#barchart").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 + ")");

d3.csv("data.csv", function(error, data) {
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "year"; }));

	data.forEach(function(d) {
		var y0 = 0;
		d.companies = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
		d.total = d.companies[d.companies.length - 1].y1;
	});

	x.domain(data.map(function(d) { return d.year; }));
	y.domain([0, d3.max(data, function(d) { return 1.05*d.total; })]);

	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("dx", "6.6em")
			.attr("dy", "-0.5em")
			.attr("class", "ylabel")
			.style("text-anchor", "end")
			.style("font-size", "20px")
			.text("Domestic Towers");

  var state = svg.selectAll(".state")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.year) + ",0)"; });

  state.selectAll("rect")
      .data(function(d) { return d.companies; })
    .enter().append("rect")
		.attr("width", x.rangeBand())
		.attr("y", function(d) { return y(d.y1); })
		.attr("height", function(d) { return y(d.y0) - y(d.y1); })
		.style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", 10)
      .attr("y", 5)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", 32)
      .attr("y", 15)
      .attr("dy", ".35em")
      .style("text-anchor", "start")
      .text(function(d) { return d; });

	svg.selectAll("g")
		.classed("g-baseline", function(d) { return d == 0 });

});

d3.select(self.frameElement).style("width", "1260px").style("height", "680px");