(function() {
  
  'use strict';
  var rate = 1.0

  var isDrawing, lastPoint;
  var container    = document.getElementById('js-container'),
      canvas       = document.getElementById('js-canvas'),
      canvas2       = document.getElementById('js-canvas2'),
      canvas3       = document.getElementById('js-canvas3'),
      canvasbase       = document.getElementById('js-canvas-base'),
      canvasWidth  = canvas.width,
      canvasHeight = canvas.height,
      ctx          = canvas.getContext('2d'),
      ctx2          = canvas2.getContext('2d'),
      ctx3          = canvas3.getContext('2d'),
      ctxbase          = canvasbase.getContext('2d'),
      imagebase        = new Image(),
      image        = new Image(),
      brush0        = new Image(),
      brush1        = new Image(),
      brush2       = new Image();
      

  imagebase.src = "images/EP0/019a.jpg";
  imagebase.onload = function() {
    ctxbase.drawImage(imagebase, 0, 0);
  }

  image.src = "images/EP0/019.jpg";
  image.onload = function() {
    ctx.drawImage(image, 0, 0);
    ctx2.fillStyle = "white";
    ctx2.fillRect(0, 0, canvas.width, canvas.height);

    ctx3.fillStyle = "black";
    ctx3.fillRect(0, 0, canvas.width, canvas.height);

    ctx3.shadowColor = 'black';
    ctx3.shadowOffsetX = 0;
    ctx3.shadowOffsetY = 0;
    ctx3.shadowBlur = 10;
    // ctx3.fillStyle = "black";
    // ctx3.fillRect(0, 0, canvas.width, canvas.height);

  };
  brush0.src = "brash0.png";
  brush1.src = "brash1.png";
  brush2.src = "brash2.png";
  canvas.addEventListener('mousedown', handleMouseDown, false);
  canvas.addEventListener('touchstart', handleMouseDown, false);
  canvas.addEventListener('mousemove', handleMouseMove, false);
  canvas.addEventListener('touchmove', handleMouseMove, false);
  canvas.addEventListener('mouseup', handleMouseUp, false);
  canvas.addEventListener('touchend', handleMouseUp, false);
  
  function distanceBetween(point1, point2) {
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
  }
  
  function angleBetween(point1, point2) {
    return Math.atan2( point2.x - point1.x, point2.y - point1.y );
  }
  
  // Only test every `stride` pixel. `stride`x faster,
  // but might lead to inaccuracy
  function getFilledInPixels(stride) {
    if (!stride || stride < 1) { stride = 1; }
    
    var pixels   = ctx.getImageData(0, 0, canvasWidth, canvasHeight),
        pdata    = pixels.data,
        l        = pdata.length,
        total    = (l / stride),
        count    = 0;
    
    // Iterate over all pixels
    for(var i = count = 0; i < l; i += stride) {
      if (parseInt(pdata[i]) === 0) {
        count++;
      }
    }
    
    return Math.round((count / total) * 100);
  }
  
  function getMouse(e, canvas) {
    var offsetX = 0, offsetY = 0, mx, my;

    if (canvas.offsetParent !== undefined) {
      do {
        offsetX += canvas.offsetLeft;
        offsetY += canvas.offsetTop;
      } while ((canvas = canvas.offsetParent));
    }

    mx = (e.pageX || e.touches[0].clientX) - offsetX;
    my = (e.pageY || e.touches[0].clientY) - offsetY;

    return {x: mx, y: my};
  }
  
  function handlePercentage(filledInPixels) {
    filledInPixels = filledInPixels || 0;
    console.log(filledInPixels + '%');
    if (filledInPixels > 70) {
      canvas.parentNode.removeChild(canvas);
      canvas2.parentNode.removeChild(canvas2);
      canvas3.parentNode.removeChild(canvas3);
    }
  }
  
  function handleMouseDown(e) {
    rate = 1
    isDrawing = true;
    lastPoint = getMouse(e, canvas);
  }

  function handleMouseMove(e) {
    if (!isDrawing) { return;}
    rate = rate * 0.97;
    if(rate<0.3){size=0;isDrawing = false;}

    e.preventDefault();

    var currentPoint = getMouse(e, canvas),
        dist = distanceBetween(lastPoint, currentPoint),
        angle = angleBetween(lastPoint, currentPoint),
        x, y;
    
    
    
    for (var i = 0; i < dist; i++) {
      x = lastPoint.x + (Math.sin(angle) * i) - 40;
      y = lastPoint.y + (Math.cos(angle) * i) - 40;

      var size = rate * brush0.height;
      
      console.log("size:"+size);
      ctx3.globalCompositeOperation = 'destination-out';
      ctx3.drawImage(brush2, x, y, size,  size);
      ctx2.globalCompositeOperation = 'destination-out';
      ctx2.drawImage(brush1, x, y, size,  size);
      ctx.globalCompositeOperation = 'destination-out';
      ctx.drawImage(brush0, x, y, size,  size);



    }
    lastPoint = currentPoint;
    handlePercentage(getFilledInPixels(32));
  }

  function handleMouseUp(e) {
    isDrawing = false;
  }
  
})();