/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://p5js.sketchpad.cc/sp/pad/view/ro.NCsFQMsFqh7/rev.21
 * 
 * authors: 
 *   
 *   GoToLoop

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



/**
 * Image Drop (v3.0.3)
 * GoToLoop (2017-Oct-26) (2015-Nov-25)
 *
 * Forum.Processing.org/two/discussion/24750/
 * p5js-drag-n-drop-hover-not-working-why#Item_3
 *
 * Forum.Processing.org/two/discussion/13650/
 * dropped-image-not-showing-in-the-draw-loop-gotfile-createimg-image#Item_4
 *
 * p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest
 */

"use strict";

var img, bg, hover;

function setup() {
  createCanvas(800, 600).drop(gotFile).dragOver(highlight).dragLeave(redraw);

  textAlign(CENTER).textSize(32).textStyle(BOLD).noLoop();
  colorMode(RGB).imageMode(CORNER);
  fill('yellow').noStroke();

  bg = color(0o200);
  hover = color('red');
}

function draw() {
  background(bg);

  if (img) image(img, 0, 0, width, height);
  else     text('Drag an image file onto the canvas.', width>>1, height>>1);
}

function gotFile(f) {
  if (f.type == 'image') return img = loadImage(f.data, redraw);

  print(`"${f.name}" isn't an image file!`);
  redraw();
}

function highlight(evt) {
  this.background(hover);
  evt.preventDefault();
}