// James Brink,   5/21/2020

//  eventTest

let can1;
let mouseCircle = false;
let msg1 = "";
let msg2 = "";
let msg3 = "";
let msg4 = "";
let msg5 = "";
let msg6 = "";
let msg7 = "";
let msg8 = "";
let msg7Count = 0;
let wheelPos = 100;
let mouseOverColor = 210;
let touch = false;
let touchS;
let startX, startY;
let img = null;
let imgW, imgH;
let loadImg = null;
let clickW, clickH;
let clickImg = null;
let textMsg = "";
let tray;

let p5touch = false;
let p5touchS;
let p5wheelPos = 100;
let p5img = null;
let p5imgH;
let p5msg1 = "";
let p5msg2 = "";
let p5startX, p5startY;

let dragMsg = "";

function setup() {
  can1 = createMyCanvas(250, 350);
  can1.parent("p5");
  can1.mousePressed(mouseDown);
  can1.mouseReleased(mouseUp);
  can1.mouseClicked(mouseClick);
  can1.doubleClicked(mouseDouble);
  can1.mouseWheel(wheel);
  can1.mouseMoved(mouseMove);
  can1.mouseOver(mouseOver);
  can1.mouseOut(mouseOut);
  can1.touchStarted(touchStart);
  can1.touchMoved(touchMove);
  can1.touchEnded(touchEnd);
  
  can1.keyDown(myKeydown);
  can1.keyUp(myKeyup);
  
  can1.dragOver(dragover);
  can1.dragLeave(dragleave);
  can1.drop(fileDrop, dragleave);
  can1.textSize(12);
  
  // setup can2 which test changing and deleting events
  can2 = createMyCanvas(400, 200);
  can2.background("lightyellow");
  can2.ellipseMode(RADIUS);
  can2.rectMode(RADIUS);
  createSpan("<br>Click  (tests mouseClick)");
  clickRadio = createRadio();
  clickRadio.option("red circles");
  clickRadio.option("blue squares");
  clickRadio.option("ignore click");
  clickRadio.changed(clickOption);
  clickRadio.value("ignore click");
  createSpan("<br>Mouse pressed (tests mousePressed)");
  downRadio = createRadio();
  downRadio.option("green line");
  downRadio.option("magenta line");
  downRadio.option("ignore mouse press");
  downRadio.changed(downOption);
  downRadio.value("ignore mouse press");
  createSpan("<br>Over/out (tests mouseOver and mouseOut)");
  overOutRadio = createRadio();
  overOutRadio.option("blue corner");
  overOutRadio.option("ignore over/out");
  overOutRadio.changed(overOutOption);
  overOutRadio.value("ignore over/out");
  createSpan("<br>Moved (tests mouseMoved)");
  movedRadio = createRadio();
  movedRadio.option("draw circles");
  movedRadio.option("ignore mouse moved");
  movedRadio.changed(movedOption);
  movedRadio.value("ignore mouse moved");
  createSpan("<br>Double (tests doubleClick)");
  doubleRadio = createRadio();
  doubleRadio.option("triangle");
  doubleRadio.option("ignore doubleclicks");
  doubleRadio.changed(doubleOption);
  doubleRadio.value("ignore doubleclicks");
  createSpan("<br>Drag (tests dragOver and dragLeave");
  dragRadio = createRadio();
  dragRadio.option("handle drags");
  dragRadio.option("ignore drags");
  dragRadio.changed(dragOption);
  dragRadio.value("ignore drags");
  
   
  p5Can = createCanvas(250, 350);
  p5Can.parent("p5");
  p5Can.mouseWheel(p5wheel);
  p5Can.touchStarted(p5touchStarted);
  p5Can.touchMoved(p5touchMoved);
  p5Can.touchEnded(p5touchEnded);
  p5Can.mouseOver(p5mouseOver);
  p5Can.mouseOut(p5mouseOut);
  p5Can.dragOver(p5dragover);
  p5Can.dragLeave(p5dragleave);
  p5Can.drop(p5gotFile);

  //  Create a tray for dropped images
  tray = createDiv();
  tray.parent(document.getElementById("p5"));
  tray.style("background-color: lightblue");
  
} // setup

function draw() {
  // now turn attention to can1
  can1.background(mouseOverColor);
  can1.text("A MyCanvas", 90, 20);
  if (mouseCircle) {
    can1.fill("red");
    can1.ellipse(can1.mouseX, can1.mouseY, 15);
    can1.text(pointStr(can1.mouseX, can1.mouseY), can1.mouseX + 17, 
            can1.mouseY);
  }
  if (loadImg != null) {
      can1.image(loadImg, 100,100, 50, 50);
  }
  can1.fill("blue");
  can1.text("(mouseX, mouseY) = " + pointStr(can1.mouseX, can1.mouseY),
         10, 340);
  can1.text("isOver: " + can1.isOver, 10, 138);
  can1.text("keyIsPressed: " + can1.keyIsPressed, 10, 156);
  can1.text("mouseIsPressed: " + can1.mouseIsPressed, 10, 174);
  can1.text(msg1, 10, 192);
  can1.text(msg2, 10, 210);
  can1.text(msg3, 10, 228);
  can1.text(msg4, 10, 264);
  can1.text(msg5, 10, 282);
  can1.text(msg6, 10, 246);
  if (msg7Count > 0) {
    can1.text(msg7, 10, 318);
    msg7Count = max(msg7Count - 1, 0);
  }
  can1.text(msg8, 10, 300);
  
  can1.fill("blue");
  can1.rect(5, wheelPos, 13);
  if (img != null) {
    can1.text("image size: " + pointStr(img.naturalWidth,img.naturalHeight),
               20, 50);
    can1.image(img, 153, 50, imgW, imgH);
  }
  if (clickImg != null) {
    can1.image(clickImg, 153,170, clickW, clickH);
  }
  
  can1.text("A touch is happening: " + touch + " " + pointStr(startX, startY), 10,40);
  if (touch) {
    can1.text(touchS, 5, 77);
    can1.fill("blue");
    can1.stroke(0);
    can1.rect(can1.mouseX - 5, can1.mouseY - 5, 5, 5);
    can1.stroke(0);
    can1.fill("red");
    can1.ellipse(startX, startY, 6);
    can1.line(startX, startY, can1.mouseX, can1.mouseY);
    let display = touches.length + " touches";
    can1.text(display, 5, 57);
  }

    
  // *** start working with the p5js canvas 
  background(255, 240, 240);  // p5 canvas
  text("A p5js canvas", 90, 20);
  fill("navy");  //  It was hoped to
  textSize(10);
  text("This p5 canvas tests p5.js mouseWheel, ", 10, 213);
  text("keyIsPressed, mouseIsPressed, & drag/drop events.", 10, 229);
  text("It was hoped to help with touch events but", 10, 245);
  text("MyCanvas touch events attempts failed.", 10, 261);
  fill("#00CCFF");
  text("Drag an image onto this canvas",10, 290);
    
  fill("blue");
  rect(5, p5wheelPos, 13, 13);
  text("(mouseX, mouseY) = " + pointStr(mouseX, mouseY), 10, 340);

  text("A touch is happening: "
        + p5touch + " " + pointStr(p5startX, p5startY), 10,40);
  if (p5touch) { 
    text(p5touchS, 5, 60);
    fill("blue");
    stroke(0);
    rect(mouseX - 5, mouseY - 5, 5, 5);
    stroke(0);
    fill("red");
    ellipse(p5startX, p5startY, 6);
    line(p5startX, p5startY, mouseX, mouseY);
    let p5display = touches.length + " touches";
    p5display  
    text(p5display, 5, 57);
  }
  text("keyIsPressed: " + keyIsPressed, 10, 160);
  text("mouseIsPressed: " + mouseIsPressed, 10, 178);
  text(p5msg2, 10, 196);
  fill(0);
  noStroke();
  text(p5msg1, 10, 70);
  if (p5img != null) {
      image(p5img, 150, 50, 100, p5imgH);
  }
  
  // **** Start working with the second MyCanvas
  // this is part of handling can2
  can2.fill("lightyellow");
  can2.noStroke();
  can2.rect(355, 190, 42, 12);  // using rectMode = RADIUS
  can2.fill("blue");
  can2.text(dragMsg, 315, 190);
 
}  // draw

function pointStr(x, y) {
  return "(" + round(x) + ", " + round(y) + ")";
}

// **************** first MyCanvas handlers ****************

function mouseDown() {
   mouseCircle = true;
   msg1 = mouseButton + " button";
   msg2 = "";
}

function mouseUp() {
  mouseCircle = false;
}

function mouseClick() {
  msg1 = "Clicked at " + pointStr(can1.mouseX , can1.mouseY);
}

function mouseDouble() {
  msg2 = "Doubleclicked at " + pointStr(can1.mouseX, can1.mouseY);
}

function wheel() {
  wheelPos += event.deltaY;
  return false;  // does not prevent page scrooling
}

function mouseMove() {
 msg7 = "Mouse moved";
 msg7Count = 30;
}

function mouseOver() {
  mouseOverColor = "LemonChiffon";
}

function mouseOut() {
  mouseOverColor = 210;
}

let count = 0;
function myKeydown() {
  count++;
  msg5 = "key  " + key + " down. Keys pressed = " + count;
  msg8 = "keyCode: " + keyCode;
}

function myKeyup() {
  msg5 = "";
  msg8 = "";
}

function fileDrop(file) {// file is a bad name right now
  msg3 = "dropped " + file.name;
  print(msg3);
  if (file.type == "image") {
    img = file.data;
    let w = img.naturalWidth;
    let h = img.naturalHeight;
    if (w == 0) {
      imgW = 95;
      imgH = 95;
    } else if (w < 95) {
      imgW = w;
      imgH = h;
    } else {
      imgW = 95;
      imgH = 95 * h / w;
    }
    file.thumb();
    file.click(clicked);
    file.parent(tray);    
    msg6 = "";

   // var span = document.getElementById("S" + file.idNum);
  } else if (file.type == "text"  || file.type == "application") {
    // only javascript applications are read
    let s = file.data;
    if (file.data) {
      textMsg = s.substr(0, 20);
      msg6 = 'It starts with: "' + textMsg + '"';
    } else {
      s = "";
    }
    if (s != "") {
      extra = document.getElementById("extra");
      extra.innerHTML = '<span style = "color: blue">'
          + 'Text from the dropped file.</span>'
          + '<textarea rows="20" cols="80">'+ s.substr(0, 1000)
          + '</textarea>';
    }
  } else {
  //  file.hide();  // if desired but only warning is in console
    msg6 = "";
  } 
}  // fileDrop

function clicked(event) {
  if (event.target == "[object HTMLImageElement]") {
    clickImg = event.target;
    let w = clickImg.naturalWidth;
    let h = clickImg.naturalHeight;
    if (w == 0) {
      clickW = 95;
      clickH = 95;
    } else if (w < 95) {
      clickW = w;
      clickH = h;
    } else {
      clickW = 95;
      clickH = 95 * h / w;
    }
  }
}

function dragover(event) {
  msg4 = "Dragging a file onto this canvas";
}

function dragleave() {
  msg4 = "";
}

function loadDone() {
  print("initial loadDone:" + pointStr(loadImg.width, loadImg.height));
}

function loadError(msg) {
  alert("load err: " + msg);
}

function touchStart(event) {
  touchS = "MyCanvas number of touches: " + can1.touches.length;
  for (let i = 0; i < can1.touches.length; i++) {
    touchS += "\ntouches[" + i + "]\n (x, y): " 
       + pointStr(can1.touches[i].x, can1.touches[i].y)
       + "\n (winX, winY): "
       + pointStr(can1.touches[i].winX, can1.touches[i].winY)
       + "\n id: " + can1.touches[i].id;
  }
  touchS += "\ncan1.mouseX, can1.mouseY" + pointStr(can1.mouseX, can1.mouseY);
  print(touchS);
  touch = true;
  startX = can1.mouseX;
  startY = can1.mouseY;
  return false;
}  
function touchMove() {
  return false;
}

function touchEnd() {
  touch = false;
  return false;
}

/* --------------------- p5js process methods--------------------- */
function p5touchStarted(){
  p5touch = true;
  p5startX = round(mouseX);
  p5startY = round(mouseY);
  touchS = "p5 canvas number of touches: " + touches.length;
  for (let i = 0; i < touches.length; i++) {
    touchS += "\ntouches[" + i + "]\n (x, y): " 
       + pointStr(touches[i].x, touches[i].y)
       + "\n (winX, winY): "
       + pointStr(touches[i].winX, touches[i].winY)
       + "\n id: " + touches[i].id;
  }
  touchS += "\ncan1.mouseX, can1.mouseY" + pointStr(can1.mouseX, can1.mouseY);
  print(touchS);
}

function p5touchMoved() {
  return false;
}

function p5touchEnded() {
  p5touch = false;
  return false;
}

function p5wheel() {
  p5wheelPos += event.deltaY;
  return false;
}

function p5dragover() {
  p5msg1 = "dragOver";
}

function p5dragleave() {
  p5msg1 = "";
}
function p5gotFile(file) {
  // If it's an image file
  if (file.type === 'image') {
    // Create an image DOM element but don't show it
    p5img = createImg(file.data); //.hide();
    if (p5img.width == 0) {
       p5imgH = 100;
    } else {
       p5imgH = 100 * p5img.height/p5img.width;
    }
    print("p5 " + p5img.width + "x"+p5img.height   + "     " + "100 x " + p5imgH);
    // Draw the image onto the canvas
  } else {
    console.log('Not an image file!\n'
          +  file);
  }
}

function p5mouseOver() {
  p5msg2 = "Mouse is over this canvas";
}

function p5mouseOut() {
  p5msg2 = "";
}

// ******************* second MyCanvas methods **************
// *************** for testing changing handlers ************

function clickOption() {
  let value = clickRadio.value();
  if (value == "") {
    downRadio.value();
  }
  if (value == "red circles") {
    can2.mouseClicked(redCircles);
  } else if (value == "blue squares") {
    can2.mouseClicked(blueSquares);
  } else if (value == "ignore click"){
    can2.mouseClicked();
  } 
}  

function redCircles() {
  can2.fill("red");
  can2.circle(can2.mouseX, can2.mouseY, 5);
}

function blueSquares() {
  can2.fill("blue");
  can2.rect(can2.mouseX, can2.mouseY, 5, 5);
}

function downOption() {
  let value = downRadio.value();
  if (value == "green line") {
    can2.mousePressed(greenLine);
  } else if (value == "magenta line") {
    can2.mousePressed(magentaLine);
  } else if (value == "ignore mouse press") {
    can2.mousePressed();
  }
} 
function greenLine() {
  can2.stroke("green");
  can2.line(0, 0, can2.mouseX, can2.mouseY);
}

function magentaLine() {
  can2.stroke("magenta");
  can2.line(0, 200, can2.mouseX, can2.mouseY);
}

function overOutOption() {
  let value = overOutRadio.value();
  if (value == "blue corner") {
    can2.mouseOver(blueCornerOver);
    can2.mouseOut(blueCornerOut);
  } else {
    can2.mouseOver();
    can2.mouseOut();
  }
}

function blueCornerOver() {
  can2.noStroke();
  can2.fill("blue");
  can2.rect(385, 15, 15, 15);
}

function blueCornerOut() {
  can2.noStroke();
  can2.fill("lightYellow");
  can2.rect(385, 15, 15, 15);
} 

function movedOption() {
  let value = movedRadio.value();
  if (value == "draw circles") {
    can2.mouseMoved(drawCircles);
  } else {
    can2.mouseMoved();
  }
}

function drawCircles() {
  can2.stroke("mediumOrchid");
  can2.noFill();
  can2.circle(can2.mouseX, can2.mouseY, 5);
}

function doubleOption() {
  let value = doubleRadio.value();
  if (value == "triangle") {
    can2.doubleClicked(triangleOption);
  } else {
    can2.doubleClicked();
  }
}

function triangleOption() {
  can2.fill("lime");
  can2.triangle(can2.mouseX, can2.mouseY, can2.mouseX + 8, can2.mouseY + 8,
       can2.mouseX - 8, can2.mouseY + 8);
}

function dragOption() {
  let value = dragRadio.value();
  if (value == "handle drags") {
    can2.dragOver(overOption);
    can2.dragLeave(leaveOption);
  } else {
    can2.dragOver();
    can2.dragLeave();
 }
}

function overOption() {
  dragMsg = "Dragging files";
} 

function leaveOption() {	
  dragMsg = "";
}