// moreTests - style, html, position, & center
// James Brink, 5/23/2020

let btn1, btn2, btn3, btn4, btn5, btn6, btn7;
let btn10, btn11, btn12, btn13, btn14, span;
let hide, show, showInline;
function setup() {
  //  ***** create canvases and div
  can = createMyCanvas(200, 300);
  p5can = createCanvas(200, 300);
  p5can.text("This is a p5 canvas", 10, 110); 
  div = createDiv("Center and position the red canvas.  Initially"
    + " that canvas is below the canvas on the left.<br>");
  div.style("background-color", "antiqueWhite");
  div.style("display: inline-block; float:right; width: 280px;");
  createSpan("<br>");
  can2 = createMyCanvas(20, 20);
  can2.background("red");
   
  /*p5can.*/rect(20, 40, 30, 50);   // rect doesn't work with canvas name

  // ***** test style
  createSpan("<br>These style command work:");
  btn1 = createButton('"border-color", "red"');
  btn1.mousePressed(borderColorRed);
  btn2 = createButton('"border-style", "dashed"');
  btn2.mousePressed(borderStyleDashed);
  btn3 = createButton('"border: 10px dotted blue"');
  btn3.mousePressed(border10pxDottedBlue);
  btn3 = createButton('"background-color", "pink"');
  btn3.mousePressed(backgroundColorPink);
  createSpan("<br>These command ask for a return value:");
  btn5 = createButton('"width"');
  btn5.mousePressed(width_);
  btn6 = createButton('"background-color"');
  btn6.mousePressed(background_color);
  createSpan("<br>This does not work:");
  btn4 = createButton('"color", "blue"');
  btn4.mousePressed(colorBlue);
  createSpan("<br>This works but may not be completely what is expected:");
  btn7 = createButton('"height: 150px"')
  btn7.mousePressed(height_);
  
  // ***** test center and position
  btn10 = createButton('center()');
  btn10.mousePressed(center);
  btn10.parent(div);
  btn11 = createButton('center("horizontal")');
  btn11.mousePressed(centerHor);
  btn11.parent(div);
  btn12 = createButton('center("vertical")');
  btn12.mousePressed(centerVer);
  btn12.parent(div);
  btn13 = createButton('position(500, 700)');
  btn13.mousePressed(position500700);
  btn13.parent(div);
  btn14 = createButton('position()');
  btn14.mousePressed(position);
  btn14.parent(div)
  
  // ***** test html
  can.html("Some html.");
  can.html("  Appended html.", true);
  can.text("html: " + can.html(), 4, 190);  
  p5can.html("Some html.");
  p5can.html("  Appended html.", true);
  p5can.text("html: " + p5can.html(), 4, 190); 
  
  // ***** test hide, show
  let sp = createSpan("<br>Test hide, show, and MyCanvas' showInline option."
    + " MyCanvas only.<br>");
  sp.parent(div);
  hide = createButton("hide");
  hide.mousePressed(hideIt);
  hide.parent(div);
  show = createButton("show");
  show.mousePressed(showIt);
  show.parent(div);
  showInline = createButton("showInline");
  showInline.mousePressed(showInlineIt);
  showInline.parent(div);
  
  // ***** test resizeCanvas
  let sp2 = createSpan("test resizeCanvas.  (MyCanvas only)");
  sp2.parent(div);
  resizeBig = createButton("resizeCanvas(300, 400)");
  resizeBig.mousePressed(resize300x400);
  resizeBig.parent(div);
  resizeOriginal = createButton("resizeCanvas(200, 300, true)");
  resizeOriginal.mousePressed(resize200x300);
  resizeOriginal.parent(div);
  resizeSmall = createButton("resizeCanvas(100, 200)");
  resizeSmall.mousePressed(resize100x200);
  resizeSmall.parent(div);
  
  noLoop();
  
} // setup

function draw() {
  can.fill("white");
  can.rect(20, 40, 30, 50);
  can.text("This is a MyCanvas", 10, 110);
}  // draw

function borderColorRed() {
  can.style("border-color", "red");
  p5can.style("border-color", "red");
} // end borderColorRed

function borderStyleDashed() {
  can.style("border-style", "dashed");
  p5can.style("border-style", "dashed");
} // borderStyleDashed

function border10pxDottedBlue() {
 can.style("border: 10px dotted blue");
 p5can.style("border: 10px dotted blue");
} // end border10pxDottedBlue

function backgroundColorPink() {
  can.style("background-color", "pink");
  p5can.style("background-color", "pink");
}  // end backgroundColorPink

function colorBlue() {
  can.style("color", "blue");   // doesn't work
  can.text('style("color", "blue") does not  work', 5, 170);
  p5can.style("color", "blue");   // doesn't work
  p5can.text('style("color", "blue") does not  work', 5, 170);
} // end colorBlue 


function width_() {
  can.text(can.style("width"), 10, 130);
  p5can.text(p5can.style("width"), 10, 130);
} // end width_

function background_color() {
  can.text(can.style("background-color"), 10, 150);
  p5can.text(can.style("background-color"), 10, 150);
} // end background_color

function height_() {
  can.text(can.style("height: 150px"), 10, 150); 
  p5can.text(p5can.style("height: 150px"), 10, 150);
} // end height_

function center() {
  can2.center();
}  // end center

function centerHor() {
  can2.center("horizontal");
}  // end centerHor

function centerVer() {
  can2.center("vertical");
}  // end centerVer

function position500700() {
  can2.position(500, 700);
}  // end position500700

function position() {
  let pos = can2.position();
  span.html("  (" + pos.x + ", " + pos.y + ")");
}

function hideIt() {
  can.hide();
}

function showIt() {
  can.show();
}

function showInlineIt() {
  can.show(true);
}

function resize300x400() {
  can.resizeCanvas(300, 400);
}

function resize200x300() {
  can.resizeCanvas(200, 300, true);
}

function resize100x200() {
  can.resizeCanvas(100, 200);
}