// James Brink   6/23/2020
let can, div, div2, div2Id;
let myCan, myDiv, myDiv2, myDiv2Id
       
function setup() {
  let textarea = document.getElementById("text");
  let s = "";
  s =  "*******************************************\n";
  s += "**** Testing child() with a p5 canvas  ****\n";
  s += "*******************************************\n";
  can = createCanvas(100, 100);
  background("pink");
  text("p5 canvas", 10, 10);
  div = createDiv("Hello to you my friend and neighbor.");
  div.style("background-color: blue");
  div2 = createDiv("Goodbye Joe");
  div2.style("background-color: lightYellow");
  div2.id("div2");
  s += "Before adding child elements:\n  can.child() " + can.child()
       + " can.child.length: " + can.child().length + "\n";
  can.child(div);
  can.child("p5-center");  // declared in html page
  div2Id = document.getElementById("div2");
  s += "\nReturned when adding a child:\n  can.child(div2Id): "
       + can.child(div2Id) + "\n";
  s += "\nAfter adding child elements:\n  can.child() " + can.child()
       + " can.child.length: " + can.child().length + "\n";
  for (let i = 0; i < can.child().length; i++) {
   s += "  child[" + i + "]  " + can.child()[i] + "\n";
  }
  s += "\n******************************************\n";
  s += "**** Testing child() with a CanvasClass  ****\n";
  s += "**** using 'identical' instructions   ****\n";
  s += "******************************************\n";
  can1 = createCanvasClass(100, 100);
  can1.background("lightBlue");
  can1.text("CanvasClass", 10, 10);
  myDiv = createDiv("Hello to you my friend and neighbor. (my)");
  myDiv.style("background-color: blue");
  myDiv2 = createDiv("Goodbye Joe (my)");
  myDiv2.style("background-color: lightYellow");
  myDiv2.id("myDiv2");
  s += "Before adding child elements:\n  can1.child() " + can1.child() 
        + " can1.child().length: " + can1.child().length + "\n";
  can1.child(myDiv);
  can1.child("p5-left");   // declared in html page
  myDiv2Id = document.getElementById("myDiv2");
  s += "\nReturned when adding a child\n  can1.child(myDiv2Id): " 
        + can1.child(myDiv2Id) + "\n";
  s += "\nAfter adding child elements:\n  can1.child() " + can1.child() 
        + " can1.child().length: " + can1.child().length + "\n";
  for (let i = 0; i < can1.child().length; i++) {
     s += "  child[" + i + "]  " + can1.child()[i] + "\n";
  }
  
  s += "\n******************************************\n";
  s += "**** Now a new CanvasClass becomes the   ****\n";
  s += "**** last child of the first CanvasClass ****\n";
  s += "******************************************\n";
  can2 = createCanvasClass(200, 300);
  can2.background("green");
  can1.child(can2);

  s += "Now a CanvasClass is added to the first CanvasClass:\n  "
      + "can1.child() " + can1.child()
      + " can1.child().length: " + can1.child().length
      + "\n";
  for (let i = 0; i < can1.child().length; i++) {
    s += "  child[" + i + "]  " + can1.child()[i] + "\n";
  }

  textarea.innerHTML = s;

  can3 = createCanvasClass(300, 100);
  can3.background(180, 255, 180);
  can3.fill("black");
  can3.text("Another CanvasClass with red dotted border", 10, 20);
  can3.text("using elt.  Then the top border was", 10,40);
  can3.text("changed to dashed using canvas just to", 10, 60);
  can3.text("show that elt and canvas are the same.", 10, 80);
  can3.elt.style.border = '5px dotted red'
  can3.canvas.style.borderTopStyle = 'dashed';
  
  textDiv = createDiv();
  textDiv.child(textarea);
}