var c = document.getElementById("c");
var g = c.getContext("2d");
c.width = innerWidth;
c.height = innerHeight;


function drawIsoCube(x,y,z,w,h,d) {
  //draw the top
  g.fillStyle = "#b0b0c8";
  var p1 = toIso(x,y,z);
  var p2 = toIso(x+w, y,z);
  var p3 = toIso(x,y+h, z);
  var p4 = toIso(x+w,y+h, z);


  var p5 = toIso(x,y,z+d);
  var p6 = toIso(x+w, y,z+d);
  var p7 = toIso(x,y+h, z+d);
  var p8 = toIso(x+w,y+h, z+d);

  
  g.beginPath();
  g.moveTo(p1.x,p1.y);
  g.lineTo(p2.x,p2.y);
  g.lineTo(p4.x,p4.y);
  g.lineTo(p3.x,p3.y);
  g.fill();
  
  g.fillStyle = "#a0a0a0";
  
  g.beginPath();
  g.moveTo(p1.x,p1.y);
  g.lineTo(p2.x,p2.y);
  g.lineTo(p6.x,p6.y);
  g.lineTo(p5.x,p5.y);
  g.fill();

    g.fillStyle = "#9090a0";
  
  g.beginPath();
  g.moveTo(p4.x,p4.y);
  g.lineTo(p8.x,p8.y);
  g.lineTo(p6.x,p6.y);
  g.lineTo(p2.x,p2.y);
  g.fill();
  
  var grad1 = g.createLinearGradient(p2.x,p2.y,p1.x,p1.y);
  grad1.addColorStop(0,"white");
  grad1.addColorStop(1,"rgba(255,255,255,0)");
  g.strokeStyle = grad1;
  g.beginPath();
  g.moveTo(p1.x,p1.y);
  g.lineTo(p2.x,p2.y);
  g.stroke();

  
  var grad1 = g.createLinearGradient(p2.x,p2.y,p4.x,p4.y);
  grad1.addColorStop(0,"white");
  grad1.addColorStop(1,"rgba(255,255,255,0)");
  g.strokeStyle = grad1;
  g.beginPath();
  g.moveTo(p4.x,p4.y);
  g.lineTo(p2.x,p2.y+0);
  g.stroke();

  var grad1 = g.createLinearGradient(p2.x,p2.y,p6.x,p6.y);
  grad1.addColorStop(0,"white");
  grad1.addColorStop(1,"rgba(255,255,255,0)");
  g.strokeStyle = grad1;
  g.beginPath();
  g.moveTo(p2.x,p2.y);
  g.lineTo(p6.x,p6.y+0);
  g.stroke();

  
  g.strokeStyle = "rgba(0,0,0,0.2)";
  g.beginPath();
  g.moveTo(p1.x,p1.y);
  g.lineTo(p3.x,p3.y);
  g.lineTo(p4.x,p4.y);
  g.lineTo(p8.x,p8.y);
  g.lineTo(p6.x,p6.y);
  g.lineTo(p5.x,p5.y);
  g.lineTo(p1.x,p1.y);
  g.stroke();
  /*
  
  g.fillStyle = "rgba(0,0,0,0.01)";
  g.fillText("1", p1.x-10,p1.y);
  g.fillText("2", p2.x,p2.y-10);
  g.fillText("3", p3.x-10,p3.y);
  g.fillText("4", p4.x+10,p4.y);
  g.fillText("5", p5.x-10,p5.y);
  g.fillText("6", p2.x,p6.y+10);
  g.fillText("7", p7.x-10,p7.y);
  g.fillText("8", p8.x+10,p8.y);
  */
  //we should work out the number of storeys that it should have:
  
  var storeyHeight = 9;
  var storeyRatio  = 0.57;
  
  var cutIn = 0.05;
  var windowCutIn = 0.2;
  
  var numStoreys = Math.floor(d/storeyHeight);
  
  for(var i = 1;i<numStoreys;i++) {
    
    var windows = 1+(Math.floor(8*(0.55+0.5*Math.sin(x*650.162+y*744.1063))));
    //I need to change this to make multiple windows instead of one centrally-aligned one.


      for(var k =0;k<windows;k++) {
  
      var increment = 1/windows;      
      var p = k/windows+increment*windowCutIn;
      var q = (k+1)/windows-increment*windowCutIn;
      var p1Cut = lerp(p1, p2, p);
      var p2Cut = lerp(p1, p2, q);

      var p5Cut = lerp(p5, p6,p);
      var p6Cut = lerp(p5, p6, q);
        
      var pS = lerp(p1Cut, p5Cut, i/numStoreys);

      var pS2 = lerp(p2Cut, p6Cut, i/numStoreys);

      var pS3 = lerp(p1Cut, p5Cut, (i+storeyRatio)/numStoreys);

      var pS4 = lerp(p2Cut, p6Cut, (i+storeyRatio)/numStoreys);


      g.fillStyle = "rgba(0,0,0,0.63)";
        if(Math.random()>0.15) {
      g.beginPath();
      g.moveTo(pS.x,pS.y);
      g.lineTo(pS2.x, pS2.y);

      g.lineTo(pS4.x,pS4.y);
      g.lineTo(pS3.x, pS3.y);

      g.fill();
        }
        
        
         var p1Cut = lerp(p2, p4, p);
      var p2Cut = lerp(p2, p4, q);

      var p5Cut = lerp(p6, p8,p);
      var p6Cut = lerp(p6, p8, q);
        
      var pS = lerp(p1Cut, p5Cut, i/numStoreys);

      var pS2 = lerp(p2Cut, p6Cut, i/numStoreys);

      var pS3 = lerp(p1Cut, p5Cut, (i+storeyRatio)/numStoreys);

      var pS4 = lerp(p2Cut, p6Cut, (i+storeyRatio)/numStoreys);


      g.fillStyle = "rgba(0,0,0,0.13)";
        if(Math.random()>0.15) {
      g.fillStyle = "rgba(0,0,0,0.63)";
        }
      g.beginPath();
      g.moveTo(pS.x,pS.y);
      g.lineTo(pS2.x, pS2.y);

      g.lineTo(pS4.x,pS4.y);
      g.lineTo(pS3.x, pS3.y);

      g.fill();
        
        
        
        
        
        
      } //end per-window
    }
  
  
}

function lerp(a,b,f) {
  return {x:b.x*f+(1-f)*a.x,
          y:b.y*f+(1-f)*a.y};
  
}

function toIso(x,y,z) {
  
  return {x: 2*x+2*y, y: 1*x-1*y+z};
}


window.startTime = new Date().getTime();
function update() {
c.width = c.width;

  var time = new Date().getTime()-startTime;
  
  
  var timeSecs = 0;
/*  g.translate(-time/30,-(time)/13);
*/
  for(var x = 1;x<9; x++) {
    for(var y = 0;y<3;y++) {
    var h =(0.6+0.4*Math.sin(
      new Date().getTime()*0.0013+(x%10)+(y%10)*2))*240;
      drawIsoCube(x*45,80-y*30, 200-h,30, 30,h);
    }
  }  
  requestAnimationFrame(update)
}
update();