<section class="scratched-in">
  <div class="pattern"></div>
  <canvas class="in"></canvas>
</section>

<section class="scratched-out">
  <div class="lineup">
  	<img src="http://guymunday.superhi.com/csot-potential-da-1-.jpg">
  </div>
  <canvas class="out"></canvas>
</section>


<div class="cursor"></div>

@keyframes bgmove {
  0% { background-position: 0, 0; }
  100% { background-position: 450px, 0; }
}


body {
	font-family: Arial;
	font-size: 16px;
	line-height: 1.5;
  height: 100vh;
  cursor: none;
  user-select: none;
}

div.cursor {
  position: absolute;
  top:  50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius:50%;
 	transform: translate3d(-50%, -50%, 0px);
  transition: width 0.25s, height 0.25s;
}

div.cursor.is-down {
  width:  80px;
  height: 80px;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width:  100%;
  height:  100%;
  mix-blend-mode: lighten;
  vertical-align: bottom;
}

div.pattern {
  position:  absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0083;
  background-image: url(http://guymunday.superhi.com/pattern2-01.svg);
  background-size: 450px, 450px;
  animation: bgmove 10s infinite linear;
}

section.scratched-out {
  mix-blend-mode: darken;
}

div.lineup {
  background-color: #000000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.lineup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

const cursor = document.querySelector("div.cursor")
const canvasIn = document.querySelector("canvas.in")
const canvasOut = document.querySelector("canvas.out")

let isMouseDown = false

// cursor to get bigger when mouse held down
const growCursor = function () {
  cursor.classList.add("is-down")
}

// when cursor is released, make the cursor smaller
const shrinkCursor = function () {
  cursor.classList.remove("is-down")
}

// move the cursor based on coordiates
const moveCursor = function (x, y) {
  cursor.style.left = x + "px"
  cursor.style.top = y + "px"
}

//set up a canvas
const setupCanvas = function (canvas) {
  const bodyTag = document.querySelector("body")
  
  const w = window.innerWidth
  const h = bodyTag.offsetHeight
  const dpi = window.devicePixelRatio
  
  canvas.width = w * dpi
  canvas.height = h * dpi
  canvas.style.width = w + "px"
  canvas.style.height = h + "px"
  
  //which context? 2D? 3D?
  const context = canvas.getContext("2d")
  context.scale(dpi, dpi)
  
  if (canvas.classList.contains("out")) {
    context.fillStyle = "#ffffff"
    context.strokeStyle = "#000000"
      } else {
    context.fillStyle = "#000000"
    context.strokeStyle = "#ffffff"
      }
  
  
  context.lineWidth = 80
  context.lineCap = "round"
  context.lineJoin = "round"
  
  context.shadowBlur = 10
  context.shadowColor = context.strokeStyle
  
  context.rect(0, 0, w, h)
  context.fill()
}

//lets start to draw based on the canvas, a and y
const startDraw = function (canvas, x, y) {
  const context = canvas.getContext("2d")
//   const colors = ["red", "yellow", "green", "blue"]
//   const randomNum = Math.floor(Math.random() * colors.length)
//   context.strokeStyle = colors[randomNum]
 	context.moveTo(x, y)
  context.beginPath()
}

// lets draw based on: canvas, X and Y
const moveDraw = function (canvas, x, y) {
  const context = canvas.getContext("2d")
  if (isMouseDown) {
    context.lineTo(x, y)
  	context.stroke()
  }
}

setupCanvas(canvasIn)
setupCanvas(canvasOut)

document.addEventListener("mousedown", function (event) {
  isMouseDown = true
  growCursor()
  startDraw(canvasIn, event.pageX, event.pageY)
  startDraw(canvasOut, event.pageX, event.pageY)
})

document.addEventListener("touchstart", function (event) {
  isMouseDown = true
  growCursor()
  startDraw(canvasIn, event.pageX, event.pageY)
  startDraw(canvasOut, event.pageX, event.pageY)
})

document.addEventListener("mouseup", function () {
  isMouseDown = false
  shrinkCursor()
})

document.addEventListener("touchend", function () {
  isMouseDown = false
  shrinkCursor()
})

document.addEventListener("mousemove", function (event) {
  console.log(event)
  // event.pageX 
  // event.pageY
  moveCursor(event.pageX, event.pageY)
  moveDraw(canvasIn, event.pageX, event.pageY)
  moveDraw(canvasOut, event.pageX, event.pageY)
})

document.addEventListener("touchmove", function (event) {
  console.log(event)
  // event.pageX 
  // event.pageY
  moveCursor(event.pageX, event.pageY)
  moveDraw(canvasIn, event.pageX, event.pageY)
  moveDraw(canvasOut, event.pageX, event.pageY)
})

window.addEventListener("resize", function () {
  setupCanvas(canvasIn)
  setupCanvas(canvasOut)
})