// ********************************
// Canvas Noise
// © 2014, Ian D. McCunn

(function() {
  'use strict';

  // Handling canvas
  var c = document.getElementById('c'),
      ctx = document.getElementById('c').getContext('2d');
  
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  
  // Variables used for random sized 'brushes'
  var height, width, x, y;
  
  // 'Brush' color variables
  var rr = getRandom(0, 256), 
      gg = getRandom(0, 256), 
      bb = getRandom(0, 256),
      rRange = randColorRange(),
      gRange = randColorRange(),
      bRange = randColorRange(),
      lowerRange, 
      upperRange;

  function randColorRange() {
    var range = [getRandom(0, 256), getRandom(0, 256)];
    //console.log(range);
    return range.sort();
  }

  function setColorRanges(){
    var rgbRange = randColorRange();
    rRange = randColorRange();
    gRange = randColorRange();
    bRange = randColorRange();
  }

  var frameCount = 0,
      HZ30 = 1000 / 30;

  var counter = 0;
  var sendToInterval = 500;
  
  function drawIt() {
    
    if (frameCount <= 500){
      frameCount++;
    } else {
      frameCount = 0;
    }
  
    var loopAmount = getRandom(1, 200);
    for (var i = 0; i < loopAmount; i++){          
            
      ctx.fillStyle = "rgb(" + getRandom(rRange[0], rRange[1]) + "," + getRandom(gRange[0], gRange[1]) + "," + getRandom(bRange[0], bRange[1]) +")";
      for (var j = 0; j < 60; j++) {

        //pos
        x = getRandom(0, c.width);
        y = getRandom(0, c.height);

        //size
        height = getRandom(2, 3);
        width = getRandom(2, 3);

        //draw
        ctx.fillRect (x, y, width, height);       
      }

      for ( j = 0; j < 20; j++) {

        //pos
        x = getRandom(0, c.width);
        y = getRandom(0, c.height);

        //size
        height = getRandom(5, 9);
        width = getRandom(5, 9);

        //draw
        ctx.fillRect (x, y, width, height); 
      }

      for (j = 0; j < 5; j++) {

        //pos
        x = getRandom(0, c.width);
        y = getRandom(0, c.height);

        //size
        height = getRandom(1, 120);
        width = getRandom(2, 4);

        //draw
        ctx.fillRect (x, y, width, height); 
      }

      for (j = 0; j < 30; j++) {

        //pos
        x = getRandom(0, c.width);
        y = getRandom(0, c.height);

        //size
        height = getRandom(1, 2);
        width = getRandom(2, 1);

        //draw
        ctx.fillRect (x, y, width, height);   
      }
    }

  }
  
  function clear() {
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    ctx.rect(0, 0, c.width, c.height);
    ctx.closePath();
    ctx.fill();
  }
  
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  // ********************
  // init()
  // 
  // Bind event handlers
  
  function init() {
    //Timed Draw if checked
    var timedDraw;
    document.getElementById('timedDraw').addEventListener('click', function() {
      var pleaseClear = document.getElementById('clearCanvas');
      if (this.checked) {
        timedDraw = window.setInterval(
                      function(){

                        if(pleaseClear.checked){
                          clear();
                        }

                        drawIt();
                      }, HZ30);
      } else {
        clearInterval(timedDraw);
      }
    });

    document.getElementById('makeArt').addEventListener('click', function() {
      clear();
      drawIt();
    });
    
    document.getElementById('rgbRanges').addEventListener('click', function(e) {
      e.preventDefault();
      clear();
      setColorRanges();
      drawIt();
    });
    
   drawIt();
  }
 
  init();
  
})();