var width = 800;
var height = 500;

var projection = d3.geo.albersUsa()
	.translate([width/2, height/2]);

var path = d3.geo.path()
	.projection(projection);

var map = d3.select("#map").append("svg")
	.attr("width", width)
	.attr("height", height);

var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

d3.json("us-states.json", function(json){
	map.selectAll("path")
		.data(json.features)
		.enter()
		.append("path")
			.attr("d",path)
			.attr("class", "states")
});

d3.csv("towers.csv",function(csv) {
	initialData = csv;
	drawTowers();
});

function drawTowers() {
	map.selectAll("circle")
		.data(initialData)
		.enter()
		.append("circle")
			.attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];})
			.attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];})
			.attr("r", 1)
			.attr("class", function(d) { return d.name; });

	d3.selectAll(".americantower")
			.classed("selected",true);

	d3.select("#americantower")
			.classed("selected",true);

	d3.selectAll(".button").on("click", function(d){
		d3.selectAll(".button")
			.classed("selected",false);
		d3.select(this)
			.classed("selected",true);
		var company = this.id;
		d3.selectAll("circle")
			.classed("selected",false);
		d3.selectAll("." + company)
			.classed("selected",true);
	});

};