/**
 * A chart showing the distribution of the number of WiFis per MAC and highlights the active clients bucket
 * Code based on http://bl.ocks.org/Caged/6476579
 */

function updateNumSsidsChart(data, chartObj) {
	var chartObj = chartObj || {};
	var update = chartObj.svg ? true : false;
	var margin = {top: 20, right: 40, bottom: 40, left: 40},
			width = 760 - margin.left - margin.right,
			height = 450 - margin.top - margin.bottom;

	// Set up scales and axis
	var x = d3.scale.ordinal()
			.rangeRoundBands([0, width], .1);
	var y = d3.scale.linear()
			.range([height, 0]);

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

	// Add the svg to the DOM
	var svg = chartObj.svg = (chartObj.svg || d3.select(".numSsidChart").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 + ")"));

	// Now apply the data
	data = d3.nest().key(function(d) { // Group by number of SSIDs
		return d.numSSIDs;
	}).rollup(function(v) { // Calculate sums per group
		return {
			count: v.length,
		};
	}).entries(data);
	var prevKey = -1;
	data.forEach(function(d) { d.id = d.key; }); // IDs are needed for updating the chart smoothly
	data = data.filter(function(d) { return d.key != 0 && d.key != 1 }); // Ignore clients without any WiFis and with only one (Apple devices randomize the MAC for probing)
	x.domain(data.map(function(d) { return d.key; }));
	y.domain([0, d3.max(data, function(d) { return d.values.count; })]);

	chartObj.xAxis = (chartObj.xAxis || svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")"))
			.call(xAxis);

	chartObj.yAxis = (chartObj.yAxis || svg.append("g")
			.attr("class", "y axis"))
			.call(yAxis);
// 	if(!update)
// 		chartObj.yAxis.append("text") // The axis text is covered by the first bar sometimes
// 			.attr("transform", "rotate(-90)")
// 			.attr("y", 6)
// 			.attr("dy", ".71em")
// 			.style("text-anchor", "end")
// 			.text("Clients");
	var highlightBar;
	svg.selectAll(".bar")
			.data(data)
			.attr("x", function(d, arg2, arg3) {
				if(d.key == 3)
					highlightBar = this;
				return x(d.key);
			})
			.attr("width", x.rangeBand())
			.attr("y", function(d) { return y(d.values.count); })
			.attr("height", function(d) { return height - y(d.values.count); })
			.enter().append("rect")
				.attr("class", function(f) {
					var classes = "bar";
					if(closestActiveClient && Number(f.key) === closestActiveClient.numSSIDs)
						classes += " active";
					return classes;
				})
				.attr("x", function(d) {
					if(d.key == 3)
						highlightBar = this;
					return x(d.key);
				})
				.attr("width", x.rangeBand())
				.attr("y", function(d) { return y(d.values.count); })
				.attr("height", function(d) { return height - y(d.values.count); });

	function type(d) {
		d.count = +d.count;
		return d;
	}
	return chartObj;
}