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(3);
tracker.setStepSize(1.7);
tracker.setEdgesDensity(.2);



// image constructor create new image element
//new Image();
// image(w,h)
const img = document.createElement("img");
img.setAttribute("id", "pic");
img.src = canvas.toDataURL();

let filterX = 0;
let filterY = 0;
let filterWidth = 0;
let filterHeight = 0;

function changePic (x, y, width, height, src) {
 // alert("function changePic")
  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', () => {
  //alert("ok")
  changePic(-0.5, -1, 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=> {
  //alert(JSON.stringify(rect))
 context.drawImage(img, rect.x + (filterX * rect.width),
    rect.y + (filterY * rect.height),
    rect.width * filterWidth,
    rect.height * filterHeight
  )  
  })
});

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




  var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
var video = document.querySelector("video");
var w, h, ratio;


video.addEventListener("loadedmetadata", function() {
  ratio = video.videoWidth / video.videoHeight;
   w = video.videoWidth - 100;
     h = parseInt(w / ratio, 10);
    canvas2.width = w;
    canvas2.height = h;
}, false);

function snap(){
     context2.drawImage(video, 10, 10);
  
}