$.getScript ( "https://unpkg.com/ml5@0.6.0/dist/ml5.min.js", function()
 {});
 
 

var thehtml;

  // 1 Doodle header 
   thehtml =
    `<h3>Draw here!</h3>`;
   AB.msg ( thehtml, 1 );
   
  thehtml =
    `<canvas id='doodleCanvas' width='400' height='400'></canvas> 
    <div>
        <button id='clear' style='background: teal; padding: 5px 25px; margin: 10px 0px; color: white; border: none;'>Clear</button>
    </div>`;
   AB.msg ( thehtml, 2 );
   
     thehtml = 
    "<div>" +
        "<p>Top 4 matches:</p>" +
        "<p id='item1'></p>" +
        "<p id='item2'></p>" +
        "<p id='item3'></p>" +
        "<p id='item4'></p>" +
    "</div>"
    ;
  AB.msg ( thehtml, 3 );
   
//const greenspan = "<span style='font-weight:bold; font-size:x-large; color:darkgreen'> "  ;

//--- end of AB.msgs structure: ---------------------------------------------------------




function setup() 
{
// variable to hold ml5 classifier and canvas
let doodleClassifier;
let canvas, ctx;

// Two variable to hold the label and confidence of the result
let label;
let confidence;
let button;

// width and height of canvas
const width = 400;
const height = 400;

// mouse positions. x and y will be updated only when mouse click and drag even occurs. posX and posY value will be updated before next repaint
let posX = null;
let posY = null;
let x = null;
let y = null;

// isDraw variable will be used to determine whether to draw on canvas
let isDraw = false;

// function to calculate mouse position inside canvas
function getMousePosition(canvas, event) {
    let rect = canvas.getBoundingClientRect();
    let mx = event.clientX - rect.left;
    let my = event.clientY - rect.top;
    return { mx, my };
}

// function to draw on canvas
function draw() {
    requestAnimationFrame(draw);

    if (posX === null || posY === null) {
        posX = x;
        posY = y;
    }

    // If mouse is pressed, draw line between previous and current mouse positions
    if (isDraw === true) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(posX, posY);
        ctx.stroke();
    }

    posX = x;
    posY = y;
}

function onMouseDown(e) {
    isDraw = true;
};

function onMousemove(e) {
    const pos = getMousePosition(canvas, e);
    x = pos.mx;
    y = pos.my;
};

function onMouseUp(e) {
    isDraw = false;
    doodleClassifier.classify(canvas, gotResults);
};

function modelReady() {
    console.log('model loaded');
}

function gotResults(error, results) {
  if (error) {
    console.log(error);
    return;
  }
  document.getElementById(
    "item1"
  ).innerHTML = `${results[0].label} : ${(results[0].confidence *100).toFixed(2)}%`;
  document.getElementById(
    "item2"
  ).innerHTML = `${results[1].label} : ${(results[1].confidence *100).toFixed(2)}%`;
  document.getElementById(
    "item3"
  ).innerHTML = `${results[2].label} : ${(results[2].confidence *100).toFixed(2)}%`;
  document.getElementById(
    "item4"
  ).innerHTML = `${results[3].label} : ${(results[3].confidence *100).toFixed(2)}%`;

  console.log(results);
  //
}

// setup function to be called on page load
async function init() {
    console.log("Executing initial!")
    canvas = document.getElementById("doodleCanvas");
    ctx = canvas.getContext("2d");

    // set canvas and stroke style
    ctx.fillStyle = "#ebedef";
    ctx.fillRect(0, 0, width, height);
    ctx.lineWidth = 16;
    ctx.lineCap = "round";

    doodleClassifier = await ml5.imageClassifier("DoodleNet", modelReady);

    canvas.addEventListener("mousedown", onMouseDown);
    canvas.addEventListener("mousemove", onMousemove);
    canvas.addEventListener("mouseup", onMouseUp);

    requestAnimationFrame(draw);

    // clear button
    document.getElementById('clear').onclick = function () {
        ctx.fillStyle = "#ebedef";
        ctx.fillRect(0, 0, width, height);
    document.getElementById("item1").innerHTML = "";
    document.getElementById("item2").innerHTML = "";
    document.getElementById("item3").innerHTML = "";
    document.getElementById("item4").innerHTML = "";
    }
}

init();
}