var c = document.getElementById('c');
var ctx = c.getContext('2d');

ctx.lineWidth = 0.5;
ctx.strokeStyle = '#000';
ctx.globalAlpha = 0.01;

var voxcache = document.createElement('canvas');
voxcache.width = 30;
voxcache.height = 30;

function fillcache() {
    var ctx = voxcache.getContext('2d');

    var w = 30;

    ctx.globalAlpha = 0.8;
    var x0 = 0,
        y0 = 0,
        z0 = 0;

    var x = 0, y = 0;

    var yh = 10;
    ctx.fillStyle = '#333';
    ctx.beginPath();
    ctx.moveTo(x + 0,  y + yh);
    ctx.lineTo(x + w/2, y + (yh * 2));
    ctx.lineTo(x + w/2, y + (yh * 3));
    ctx.lineTo(x + 0, y +  (yh * 2));
    ctx.lineTo(x + 0, y +  yh);
    ctx.fill();
    ctx.stroke();

    ctx.fillStyle = '#777';
    ctx.beginPath();
    ctx.moveTo(x + w,  y + yh);
    ctx.lineTo(x + w/2, y + yh * 2);
    ctx.lineTo(x + w/2, y + yh * 3);
    ctx.lineTo(x + w, y + yh * 2);
    ctx.lineTo(x + w, y + yh);
    ctx.fill();
    ctx.stroke();

    ctx.fillStyle = '#ccc';
    ctx.beginPath();
    ctx.moveTo(x + 0,  y + yh);
    ctx.lineTo(x + w/2,  y + yh * 2);
    ctx.lineTo(x + w,  y + yh);
    ctx.lineTo(x + w/2,  y + 0);
    ctx.lineTo(x + 0,  y + yh);
    ctx.fill();
    ctx.stroke();
}

fillcache();


function drawvox(xyz) {
    var x0 = xyz[0],
        y0 = xyz[1],
        z0 = xyz[2];

    var w = 15, h = 10;

    var x = (w * x0) + (y0 * w),
        y = (y0 - x0 - z0) * h;

    ctx.drawImage(voxcache, x, y);
}

var date = document.getElementById('date');

  c.width = window.innerWidth;
  c.height = window.innerHeight;

d3.csv('crime_incidents_2011_CSV.csv', function(csv) {
  var bydate = csv.map(function(c) {
    c.date = new Date(c.REPORTDATETIME);
    c.tile = [
      Math.round((+c.LONGITUDE + 76.8) * 100),
      Math.round((+c.LATITUDE - 38.5) * 100),
      0
    ];
    return c;
  });
  bydate.sort(function(b, a) {
    return (+a.date) - (+b.date);
  });

  var floor = [], newtile, elevation = {};


  function draw() {
    c.width = window.innerWidth;
    var hasnew = true;
    if (floor.length) {
      floor.sort(function(b, a) {
          if (a[2] !== b[2]) return (b[2] - a[2]);
          return (a[0] - b[0]) - (a[1] - b[1]);
      })
      .map(drawvox);
    }

    if (!newtile || newtile[2] === ((elevation[newtile[0] + ',' + newtile[1]] || 1) - 1)) {
      if (newtile) {
        floor.push(newtile.slice());
        if (typeof elevation[newtile[0] + ',' + newtile[1]] == 'undefined')  elevation[newtile[0] + ',' + newtile[1]] = 1;
        elevation[newtile[0] + ',' + newtile[1]]++;
      }
      var n = bydate.pop();
      if (!n) hasnew = false;
      newtile = n.tile;
      date.innerHTML = n.REPORTDATETIME;
      newtile[2] = (elevation[newtile[0] + ',' + newtile[1]] || 0) - 1;
    } else {
      drawvox(newtile);
      newtile[2] += 1;
    }
    if (hasnew) window.setTimeout(draw, 1);
  }

  window.setTimeout(draw, 1);
});