//  TV
// James Brink, 6/25/2020
let tv = [];
let screen = [];
let screen2Used = false;
let screen3BackgroundColor = "beige";

let keyIsPressed1 = false;  // for screen[1]
let img = null;  // for screen[3]
let imgW, imgH;  // for screen[3]


let e;

colors = [];
function setup() {
  let par = document.getElementById("p5-center");
  div = createDiv(" ");
  div.parent("p5-center");
  div.style("position: relative");
  
  for (let i = 0; i < 4; i++) {
    screen[i] = createTV(i, 180 * i + 10, 40, div);
  }
  for (let i = 0; i < 20; i++) {
    colors[i] = color(random(255), random(255), random(255));
  }
  frameRate(2);
  screen[0].rectMode(RADIUS);
  screen[1].ellipseMode(RADIUS);
  screen[1].keyDown(keydown);
  screen[1].keyUp(keyup);
  
  screen[3].dragOver(dragOver);
  screen[3].dragLeave(dragLeave);
  screen[3].drop(drop, dragLeave);

} // setup

function draw() {
  if (!keyIsPressed) {  // uses global keyIsPressed
    screen[0].fill(random(colors));
    screen[0].rect(50, 40, 40, 30);
    screen[0].fill(random(colors));
    screen[0].rect(50, 40, 25, 20);
    screen[0].fill(random(colors));
    screen[0].rect(50, 40, 10, 10);
  }
  
  if (!screen[1].keyIsPressed) {
    screen[1].fill(random(colors));
    screen[1].circle(50, 40, 35); 
    screen[1].fill(random(colors));
    screen[1].circle(50, 40, 20); 
    screen[1].fill(random(colors));
    screen[1].circle(50, 40, 5); 
  }
  
  if (screen2Used) {
    screen[2].background("beige");
    screen[2].stroke(random(colors));
    screen[2].line(screen[2].mouseX, screen[2].mouseY, 0, 0);
    screen[2].line(screen[2].mouseX, screen[2].mouseY, 100, 0);
    screen[2].line(screen[2].mouseX, screen[2].mouseY, 100, 80);
    screen[2].line(screen[2].mouseX, screen[2].mouseY, 0, 80);
    if(screen[2].mouseIsPressed) {
      screen[2].fill(random(colors));
      if (mouseButton == "center") {
        screen[2].circle(screen[2].mouseX, screen[2].mouseY, 20);
      } else if (mouseButton == "right") {
        screen[2].ellipse(screen[2].mouseX, screen[2].mouseY, 30, 15);
      } else {  
        screen[2].ellipse(screen[2].mouseX, screen[2].mouseY, 15, 30);
      }
    } 
  } else {
    screen[2].fill("purple");
    screen[2].text("Move mouse to", 3, 15);
    screen[2].text("screen. And try", 3, 35);
    screen[2].text("pressing any", 3, 55);
    screen[2].text("mouse button.", 3, 75);
    if (screen[2].isOver) {
      screen2Used = true;
    }
  }
   	
  screen[3].background(screen3BackgroundColor);
  screen[3].fill(0);
  if (img) {
    screen[3].image(img, 0, 0, imgW, imgH);
    print(imgW + " " + imgH);
  } else {
    screen[3].text("Drop Image here", 5, 40);
  }
}  // draw

function createTV(i, x, y, parent) {
  let tv = createDiv();
  tv.parent(parent);
  tv.style("background-color: black");
  tv.style("position:absolute; left: " + x + "px; top: " + y + "px;"
         + "width: 140px; height: 120px;");
  tv.id("tv" + i);  
  let screen = createCanvasClass(100, 80);
  screen.parent("tv" + i);
  screen.id("screen" + i);
  screen.elt.style.border = '10px solid  black';
  screen.background("beige");
  screen.fill("red");
  return screen;
}  // end createTV

function dragOver() {  // only for screen[3]
  screen3BackgroundColor = "BurlyWood";
}  // end dragOver

function dragLeave() {  // only for screen[3]
  screen[3].background("beige");
}  // end dragLeave

function drop(file) { // only for screen[3]
  if (file.type == "image") {
    img = createImg(file.data);
    display(img);
    img.hide();
    img2 = createImg(file.data);
    img2.style("width: 100px");
    img2.parent(document.getElementById("tray"));
    img2.mouseClicked(clicked);
  } else {
    alert(file.name + " is not an image file");
  }
}  // end drop

function display(aImg) {  // only for screen[3]
  let w = aImg.width;
  let h = aImg.height;
  if (w == 0) {
    imgW = 100;
    imgH = 80;
  } else if (w < 100) {
    imgW = w;
    imgH = h;
  } else {
    imgW = 100;
    imgH = 100 * h / w;
  }
  img = aImg;
}  // end display 

function clicked(event) {  // only for screen[3]
  let aImage = createImg(event.target.src);
  aImage.hide();
  display(aImage);
}  // end clicked

function keydown() {
}

function keyup() {
}