       posY = y * SPACING + scrollY
       topX = posX + (MID[0] - posX) * Z_OFFSET
       topY = posY + (MID[1] - posY) * Z_OFFSET
+      
+      # grid
+      context.strokeStyle = GRID
+      for gx in [0...8]
+        for gy in [0...8]
+          gxc = posX + (gx * SIZE_HALF)
+          gyc = posY + (gy * SIZE_HALF)
+          context.beginPath()
+          context.moveTo(gxc + SIZE_HALF, gyc)
+          context.lineTo(gxc, gyc)
+          context.lineTo(gxc, gyc + SIZE_HALF)
+          context.stroke()
 
       # bottom
+      context.strokeStyle = FG
       context.strokeRect(posX - SIZE_HALF, posY - SIZE_HALF, SIZE, SIZE)
 
       # sides

      context.stroke()

      # top
      #context.fillRect(topX - SIZE_HALF, topY - SIZE_HALF, SIZE, SIZE)
      context.strokeRect(topX - SIZE_HALF, topY - SIZE_HALF, SIZE, SIZE)
    
animate = () ->
  requestAnimationFrame(animate)
  scrollX = (Date.now() / 50) % SPACING
  scrollY = (Date.now() / 50) % SPACING
  draw()
  
animate()

# http://jsbin.com/nuhozo/8/edit?js,output

WIDTH = 720
HEIGHT = 720
MID = [WIDTH/2, HEIGHT/2]
COUNT = 7
SPACING = WIDTH / (COUNT + 1)
SIZE = SPACING / 4
SIZE_HALF = SIZE / 2
Z_OFFSET = -1/8

BG = 'hsl(60, 10%, 95%)'
GRID = 'hsl(60, 10%, 70%)'
FG = 'hsl(60, 10%, 20%)'

scrollX = 0
scrollY = 0
