// Feel free to change or delete any of the code you see in this editor!


function showInventoryStatus(containerId, allItems, type) {
  var w = 200;
  var h = 300;
  var r = 50;
  var root = d3.select("#" + containerId)
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g");

  var items = allItems.filter(function(i) { return i.type === type })
  	.sort(function(l, r) {
      if(l.status==="available"
        && r.status ==="taken")
        return -1;
      else if(r.status==="available"
        && l.status ==="taken")
        return 1;
      else
        return 0;
    });
  var color = d3.scale.ordinal()
  .domain([0, items.length])
.range(['#a50026','#d73027','#f46d43','#fdae61','#fee08b','#ffffbf','#d9ef8b','#a6d96a','#66bd63','#1a9850','#006837'])
//   .interpolate(t => t);
  var arc = d3.svg.arc()
  	.innerRadius(r/2)
  	.outerRadius(r)
  	.cornerRadius(r/10);
  var pie = d3.layout.pie()
  	.sort(null)
  	.value(function() { return 1; });
  
  var itemsAvailable = items.filter(function (item) {
    return item.status === "available";
  }).length
  
  root.append("text")
  	.text(type + " (" + itemsAvailable + "/" + items.length + ")")
  	.attr("font-family", "sans-serif")
  	.attr("x", 0)
	  .attr("y", (h/2) - (r+10));
  
  var g = root.selectAll("g.arcs")
  	.data(pie(items))
  	.enter()
  	.append("g")
  	.attr("class", "arcs")
  	.attr("transform", "translate("+(w/4)+", "+(h/2)+")");
  
  g.append("path")
  	.attr("d", arc)
  	.style("fill", function(d, i) {
    	if(d.data.status==="taken")
        return "gray";
    	else
        return color(i);
    });
}

d3.json("items.json", function(error, d) {
  showInventoryStatus("divNotebooks", d.items, "notebook");
  showInventoryStatus("divIphones", d.items, "iphone");
  showInventoryStatus("divMacbooks", d.items, "macbook");
  showInventoryStatus("divAndroids", d.items, "android")
});