let canvas;
let doodleClassifier;
let resultsDiv;
let video;
var thehtml;

vS = false;

  thehtml = "<hr> <h2> 1. Clear </h2> If you want to redraw your doodle, <br> " +
        " Press this button -> <button onclick='wipeDoodle();' class='normbutton' >Clear doodle</button> <br> ";
   AB.msg ( thehtml, 1 );
    thehtml = "<hr> <h2> 2. Video </h2> If you have access to a camera and want to doodle on paper, <br> " +
        " Press this button -> <button onclick='videoStart();' class='normbutton' >Video</button> <br> ";
   AB.msg ( thehtml, 2 );
  thehtml = "<hr> <h2> 4. Try to Draw </h2> Generate some inspiration to draw <br>" +
        " Click this button -> " +
        " <button onclick='tryToDraw();' class='normbutton' >Next Random</button> <br> ";
   AB.msg ( thehtml, 4 );
       thehtml = "<hr> <h2> 3. Mouse </h2> If you want to draw with the mouse  <br> " + 
        " click this button -> <button onclick='startDoodle();' class='normbutton' >start doodle</button> <br> ";
   AB.msg ( thehtml, 3 );
   
   function wipeDoodle()    
{
    background('255');
}

//const doodle = ["Cat", "SnowMan", "Hedgehog", "leg", "Cookie", "Strawberry","Smiley face"];

//const randomm = Math.floor(Math.random() * doodle.length);

//console.log(doodle[randomm]);

   function tryToDraw()   
{
    const doodle = ["Cat", "SnowMan", "Hedgehog", "leg", "Cookie", "Strawberry","Smiley face"];
    const randomm = Math.floor(Math.random() * doodle.length);
    
    thehtml =  "Try to draw a " + doodle[randomm] + "<br>";
 //     AB.newSplash ( thehtml );
       
        // cl = AB.removeSplash();
 //       AB.splashClick ( cl);
    AB.msg ( thehtml, 5 );
  //  $("canvas").val("thehtml");
}


   function videoStart()
    {
//       console.log("vid");
    canvas = createCanvas(400, 400);
  background(255);
  doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
  resultsDiv = createDiv('model loading');
  video = createCapture(VIDEO);
  video.hide();
  vS= true;
    }
    
function startDoodle()
{
  canvas = createCanvas(400, 400); 
  background(255);
  
  doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
  resultsDiv = createDiv('model loading');
  vS = false;
}
    
    function setup() {
    $("canvas").css("border","1px solid #000000");
        startDoodle();
         
}

function modelReady() {
  console.log('model loaded');
  doodleClassifier.classify(canvas, gotResults);
}

function gotResults(error, results) {
  if (error) {
    console.error(error);
    return;
  }
  
  let content = `${results[0].label} 
                 ${nf(100 * results[0].confidence, 2, 1)}%

                 ${results[1].label} 
                 ${nf(100 * results[1].confidence, 2, 1)}%`;
                 

  resultsDiv.html(content);
  doodleClassifier.classify(canvas, gotResults);
}


function draw() {
    if (vS)
    {
          image(video, 0, 0, width, height);
          filter(THRESHOLD, 0.5);
    }
  if (mouseIsPressed) {
    strokeWeight(16);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}