//   James Brink,   7/2/2020  

let can;
let img;
let id1, id2;
let showHeart = true;
let can2;
let down = false;
let downp5 = false;
let p5can2;
let msg = "";
let loadImg = null;
let preLoadImg = null;

let hide, infoThumb, thumb, click, parentDiv;
let tray;

let radioImage, radioMode;
let aImage;

function preload() {
  preLoadImg = loadImage("sleigh.png", preloaded, preerror);
  img = loadImage("heart.png", preloaded, preerror);
}  

function setup() {
  can1 = createCanvasClass(500, 300);
  try {
    loadImg = can1.loadImage("flower.png", loaded, error);
  } catch(err) {  // the catch does not really work but is required
    alert("loadImage failed:  local server required");
  }
  p1 = can1.parent();
  can1.parent("p5");
  p2 = can1.parent();
  id1 = can1.id();
  can1.id("CanvasClass");
  id2 = can1.id();
  can1.background(210);
  can1.image(img, 0, 0, 100, 100);
  can1.mousePressed(heartOnOff);

  can2 = createCanvasClass(100, 300);
  can2.parent("p5");
  can2.rectMode(CENTER);
  can2.mousePressed(down2);
  can2.mouseReleased(up2); 
  
  p5can2 = createCanvas(100, 300)
  p5can2.parent("p5");
  rectMode(CENTER);
  p5can2.mousePressed(down2p5);
  p5can2.mouseReleased(up2p5); 

  can3 = createCanvasClass(400, 300);
  can3.background(210);
  can3.parent("p5");
  can3.drop(dropFile, dropFinished);
  can3.fill("blue");
  can3.text("You can drop image files on this canvas. Images will be "
        + "displayed. If the mode is CORNER or CORNERS, "
        + "the upper left corner will be in the center of the canvas. The "
        + 'image will be smaller if "CORNERS" has been selected. '
        + "When the mode is CENTER, the image is centered in the canvas."
        + '\n\nIf you picked the "clicked" option, you can click on an image.'
        + "and it will be displayed in this canvas."
        + "\n\nIf you picked the 5 argument "
        + "option the complete picture is displayed.  But if chose the "
        + "9 argument option, the edges of the image will not used.",
            10, 20, 360);
            
  
  options3 = createDiv(
       "Make selection(s) before dropping. <br><br>"
      + "<b>Drop options:</b>");   
  options3.style("display: inline-block");
  options3.parent("p5");
  options3.style("width: 280px");
  tray = createDiv("<tt>tray</tt> for images ");
  tray.parent("p5");
  tray.style("background-color: lightBlue");

  hide = createCheckbox("Hide the image. (Incompatible with other options.)");
  hide.parent(options3);
  thumb = createCheckbox("Show image as a thumb nail.");
  thumb.parent(options3);
  click = createCheckbox("Display image on canvas if it is clicked.");
  click.parent(options3);
  parentDiv = createCheckbox("Put images in the tray.");
  parentDiv.parent(options3);
  s = createSpan("<b>Image mode options<b>");
  s.parent(options3);
  radioMode = createRadio();
  radioMode.parent(options3);
  radioMode.option("mode(CORNER)");
  radioMode.option("mode(CORNERS)");
  radioMode.option("mode(CENTER)");
  radioMode.value("mode(CORNER)");
  radioMode.changed(modeChange);
  s2 = createSpan("<b>Image arguments</b>");
  s2.parent(options3);
  radioImage = createRadio();
  radioImage.parent(options3);
  radioImage.option("use 5 arguments");
  radioImage.option("use 9 arguments");
  radioImage.value("use 5 arguments");
}

function draw() {
  if (loadImg) {
    can1.image(loadImg, 430, 10, 60, 60);
  }
  if (preLoadImg) {
    can1.image(preLoadImg, 330, 10, 90, 60);
  }
  can1.textSize(16);
  can1.fill(210);
  can1.rect(105, 5, 175, 30);
  can1.fill("maroon");
  can1.text("Testing parent, id, clear", 110, 20);
  can1.fill("blue");
  can1.textSize(16);
  can1.text("Parent() before changing the parent: " + p1, 10, 120);
  can1.text("Parent() after changing the parent: " + p2, 10, 140);
  can1.fill("black");
  can1.text("id() before changing the id: " + id1, 10, 180);
  can1.text("id() after changing the id: " + id2, 10, 200);
  can1.fill("SeaGreen");
  can1.text("Click the mouse to make the heart disappear or reappear.", 10, 240);
  can1.fill(220);
  can1.rect(5, 260, 300, 30);
  can1.fill("red");
  can1.text(msg, 10, 280);
  
  let step = (frameCount % 200) /10;
  let angle = map(step, 0, 20, 0, TWO_PI);
  let cos_a = cos(angle);
  let sin_a = sin(angle);
  can2.background("AntiqueWhite");
 // Equivalent to rotate(angle);
  can2.resetMatrix();
  can2.text("Matrix test", 3, 190);
  can2.text("CanvasClass", 3, 218);
  can2.translate(50, 50);
  can2.applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  can2.rect(0, 0, 50, 50);
  // Equivalent to translate(x, y);
  can2.resetMatrix();
  can2.fill("black");
  can2.fill("green");
  if (down) {
    can2.resetMatrix();
  } else {
    can2.applyMatrix(1, 0, 0, 1, 40 + step, 150);
  }
  can2.rect(0, 0, 50, 50);
  
  p5can2.background("Bisque");
  // Equivalent to rotate(angle);
  text("Matrix test", 3, 190);
  text("P5 canvas", 3, 218);
  translate(50, 50);
  applyMatrix(cos_a, sin_a, -sin_a, cos_a, 0, 0);
  rect(0, 0, 50, 50);
  // Equivalent to translate(x, y);
  resetMatrix();
  fill("black");
  fill("blue");
  if (downp5) {
    resetMatrix();
  } else {
    applyMatrix(1, 0, 0, 1, 40 + step, 150);
  }
  rect(0, 0, 50, 50); 
}

function heartOnOff() {
    msg = "The " + mouseButton + " button was pressed.";
  if (showHeart) {
    can1.clear();
  } else {
    if (mouseButton === "right") {
       can1.image(img, 100, 10);
     } else if (mouseButton === "center") {
        can1.image(img, 0, 0, 100, 100, 63, 10, 150, 150);
     } else {
        can1.image(img, 0, 0, 100, 100);
     }
  }
  showHeart = !showHeart;
  return false;
}

function down2() {
  down = true;
}

function up2() {
  down = false;
}

function up2p5() {
  downp5 = false;
}

function down2p5() {
  downp5 = true;
}

function loaded() {
//  print("Image loaded");
}

function error(e) {
  print("loadImage error");
}

function preloaded() {
//  print("pre Image loaded");
}

function preerror(e) {
  print("pre loadImage error");
}

function dropFile(file) {
  if (file.type == "image") {
    print(aImage);
    let img2 = createImg(file.data);
    if (thumb.checked()) {
      img2.style("width: 80px");
    }
    if (hide.checked())  {
      img2.hide();
    }
    if (click.checked()) {
      img2.mouseClicked(clicked);
    }
    if (parentDiv.checked()) { 
      img2.parent(tray);      
    }
    aImage = createImg(file.data);
    displayImage(aImage, can3.width/2, can3.height/2, 170);
    aImage.hide();
    let s = "The file " + file.name + " did not load properly.";
    if (aImage.width == 0) {
      if (click.checked()) {
        s  += "  You may be able to click on the image.";
      } else {
        s += " Please try again."
      }
      alert(s);
    }
  } else {
    can3.background(230);
    can3.fill("blue");
    can3.text(file.name, 10, 30);
  }
} 

function dropFinished() {
//  print("All files loaded");
}

function displayImage(img, x, y, wide) { 
  let w = img.width;
  let h = img.height;
  if (w == 0) {  // this might happen if load is not finished
    clickW = wide;
    clickH = wide;
  } else if (w < 100) {
    clickW = w;
    clickH = h;
  } else {
    clickW = wide; 
    clickH = wide * h / w; 
  }
  if (can3._imageMode == CORNERS) {
    clickW = x + clickW/2;
    clickH = y + clickH/2;
  }
  can3.clear();  
  can3.background(210);
  if (radioImage.value() == "use 5 arguments") {
    can3.image(img, x, y, clickW, clickH);
  } else {
    can3.image(img, x, y, clickW, clickH,
         .1 * w, .1 * h, .8 * w, .8 * h);
  }       
}
 
function clicked(event) {
  if (event.target == "[object HTMLImageElement]") {
    let aImage = createImg(event.target.src);
    displayImage(aImage, can3.width/2, can3.height/2, 150);
  }
}

function modeChange() {	
  if (radioMode.value() == "mode(CORNER)") {
    can3.imageMode(CORNER);
  } else if (radioMode.value() == "mode(CORNERS)") {
    can3.imageMode(CORNERS);
  } else  {
    can3.imageMode(CENTER);
  }
}

function getImage(id) {
  let img = document.getElementById(id);
  let aImage = createImg(img.src);
  displayImage(aImage, 0, 0, 150);
}