function main()
{
  
  // Grab the window width and height
  w = window.innerWidth;
  h = window.innerHeight;
  
  // Block variables
  number_of_blocks = 40;
  block_size = 4;
  block_velocity = 6;
  
  // Add the canvas element to the dom and initiate
  var canvas_wrapper = document.getElementById('canvas-wrapper');
  canvas_wrapper.innerHTML = '';
  canvas_wrapper.innerHTML += '<canvas id="board" width="' + w + '" height="'+h+'"></canvas>';
  // For debugging, show window width and height
  //canvas_wrapper.innerHTML += '<div class="dimensions">' + w + 'px x ' + h + 'px</div>';
  var canvas = document.getElementById('board');
  c = canvas.getContext('2d');
  
  // Create the blocks!
  createBlocks();

  // Create the render loop
  renderer = setInterval(function()
  {
    render();
  }, 40);
}

function createBlocks()
{
  blocks = [];
  for(i = 0; i < number_of_blocks; i++)
  {
    // Decide on a starting point for each block
    x = Math.floor(Math.random() * ((w - (block_size * 2)) - block_size + 0)) + block_size;
    y = Math.floor(Math.random() * ((h - (block_size * 2)) - block_size + 0)) + block_size;
    
    // Give each block some directions and speed
    dx = Math.floor((Math.random() * block_velocity) + 1);
    dy = Math.floor((Math.random() * block_velocity) + 1);
    
    // Random chance of horizontal direction switch
    if(Math.floor((Math.random() * 2)) == 1 )
    {
      dx =- dx;
    }
    
    // Random chance of vertical direction switch
    if(Math.floor((Math.random() * 2)) == 1 )
    {
      dy =- dy;
    }
    
    // Add the blocks to array
    blocks[blocks.length] = {'x':x,'y':y,'dx':dx,'dy':dy};
  }
}

// Draw the blocks on the canvas
function drawBlocks()
{
  for(i = 0; i < blocks.length; i++)
  {
    c.fillStyle = 'rgba(255,255,255, 0.9)';
		c.fillRect(blocks[i].x,blocks[i].y,block_size,block_size);
  }
}

// Update the block positions on each loop
function moveBlocks()
{
  for	(i = 0; i < blocks.length; i++)
  {
    // Change direction flag
    changed_direction = false;

		// For a  50/50 chance of direction change
    // when block reaches canvas boundary
    r = Math.floor((Math.random() * 2) + 1);

    // Test if block is at a horizontal boundary
    // If true, reverse the horizontal direction
    if( blocks[i].x <= 0 || blocks[i].x >= ( w - block_size ) )
    {
      changed_direction = true;
      blocks[i].dx =- blocks[i].dx;
      // Test against 50/50 chance of vertical direction change
      if(r == 2)
      {
        blocks[i].dy =- blocks[i].dy;
      }
    }
    
    // Test if block is at a vertical boundary
    // If true, reverse the vertical direction
    if( blocks[i].y <= 0 || blocks[i].y >= ( h - block_size ) )
    {
      changed_direction = true;
      blocks[i].dy =- blocks[i].dy;
      // Test against 50/50 chance of horizontal direction change
      if(r == 2)
      {
        blocks[i].dx =- blocks[i].dx;
      }
    }
    
    // Change random number range to 1 - 100
    r = Math.floor((Math.random() * 100) + 1);
		
    // Test against previous direction change and
    // small odds to 'randomly' change the vertical
    // direction anywhere on the board.	
    if(r <= 3 && !changed_direction)
    {
      blocks[i].dy =- blocks[i].dy;
    }

    // Test against previous direction change and
    // small odds to 'randomly' change the horizontal
    // direction anywhere on the board.
    if(r >= 97 && !changed_direction)
    {
      blocks[i].dx =- blocks[i].dx;
    }

    // Update the block's coordinates
    blocks[i].x+=blocks[i].dx; 
    blocks[i].y+=blocks[i].dy;
  }
}

var render = function()
{
  // Clear the canvas / paint with solid color
  c.fillStyle = 'rgba(17, 17, 17, 0.6)';
	c.fillRect(0,0,w,h);
  
  // Run the movement function
  moveBlocks();

  // Paint the blocks to the canvas
  drawBlocks();
}

// Did the browser resize? If so, reset.
function resized()
{
  clearInterval(renderer);
  main();
}

// Event listening for window resizing
//window.addEventListener( 'resize', resized );

// Let's do this!
main();