let canvas, imports;

// wait for site to be parsed so element can be found
document.addEventListener("DOMContentLoaded", function () {
  // bind listeners
  document.getElementById("take-picture").addEventListener("click", take_picture);
  document.getElementById("upload-image").addEventListener("change", upload_image)

  
  document.getElementById("save").addEventListener("click", save_image)
  document.getElementById("share").addEventListener("click", share_image)

  canvas = document.getElementById("myCanvas");
  imports = document.getElementById("imports");
})

function take_picture() {
  canvas.classList.remove("is-hidden");
  imports.classList.add("is-hidden");

}

function upload_image(event) {
  canvas.classList.remove("is-hidden");
  imports.classList.add("is-hidden");
  console.log(this.files[0]);

  const img = new Image();
  const ctx = canvas.getContext("2d");
  img.src = URL.createObjectURL(this.files[0]);
  img.onload = function() {
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
  }
}

function save_image() {
  const dataUrl = canvas.toDataURL("image/png");
  // downloading only works with links but not window.open
  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = 'imagine.png';
  link.click();
}

function share_image() {

}