$(function () {
  $(document).on('keydown', function (event) {
    if (event.which == 17) { 
      ctrl = true; 
      //$('#divCanvas').css('cursor', 'all-scroll');
    }
  });
  $(document).on('keyup', function (event) {
    if (event.which == 17) { 
      ctrl = false; 
      //$('#divCanvas').css('cursor', 'default');
    }
  });
});

const ratio = '16:9'

let notes = [];
let ctrl = false;
let canWidth;
let canHeight;

function setup() {
    let tmpSplit = ratio.split(':');
    canWidth = $('#divCanvas').width();
    canHeight = canWidth / (parseFloat(tmpSplit[0]) / parseFloat(tmpSplit[1]));
    let canvas = createCanvas(canWidth, canHeight, SVG); // Create SVG Canvas
    canvas.parent('divCanvas');
    
    notes.push(new Note(100, 100, 150, 150));
    notes.push(new Note(400, 400, 150, 150));
    //strokeWeight(1); // do 0.1 for laser
    //background(255);
    //stroke(255, 0, 0); // red is good for laser
    //noFill(); // better not to have a fill for laser
  }



function draw() {
    background(255);

    notes.forEach(note => {
      note.over();
      note.update();
      note.show();
    });
}

function mousePressed() {
  for(i = notes.length-1; i >= 0; i--){
    let note = notes[i];
    if (note.pressed()){
      return;
    }
  }
}

function mouseReleased() {
  notes.forEach(note => {
    note.released();
  });
}