const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const tracker = new tracking.ObjectTracker('face');
const flowerCrownButton = document.getElementById('flower-crown');
const bunnyEarsButton = document.getElementById('bunny-ears');
const doggyButton = document.getElementById('doggy');
const heartsButton = document.getElementById('hearts');

tracker.setInitialScale(1);
tracker.setStepSize(2.7);
 tracker.setEdgesDensity(.2);

// image constructor create new image element
//new Image();
// image(w,h)
const img = document.createElement("img");
let filterX = 0;
let filterY = 0;
let filterWidth = 0;
let filterHeight = 0;

function changePic (x, y, width, height, src) {
  img.src = src;
  filterX = x;
  filterY = y;
  filterWidth = width;
  filterHeight = height;
}

function flowerCrown () {
  //alert("ok")
  changePic(0, -0.5, 1, 1, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/450347/flower-crown.png')
}

flowerCrownButton.addEventListener('click', flowerCrown);


bunnyEarsButton.addEventListener('click', () => {
  changePic(-0.5, -0.9, 2, 2, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/450347/bunny-ears.png')
})

function doggy () {
  //alert("ok")
  changePic(0, -1, 1, 3, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/450347/dog-face.png')
}

doggyButton.addEventListener('click', doggy);


function hearts( ) {
  changePic(0, -1, 2, 2, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/450347/hearts.png')
}

heartsButton.addEventListener('click', hearts);


//listen for track events
tracker.on('track', function(event) {
  //if (event.data.length === 0) {
    //alert("No objects were detected in this frame.");
  //} else {
context.clearRect(0, 0, canvas.width, canvas.height)
  event.data.forEach(rect => {
 context.drawImage(img, rect.x + (filterX * rect.width),
    rect.y + (filterY * rect.height),
    rect.width * filterWidth,
    rect.height * filterHeight
  )  })
  //}// end of else
});

//start tracking
tracking.track('#video', tracker, { camera: true })