var wrapper = document.getElementById("signature-pad");
var clearButton = wrapper.querySelector("[data-action=clear]");
var changeColorButton = wrapper.querySelector("[data-action=change-color]");
var undoButton = wrapper.querySelector("[data-action=undo]");
var savePNGButton = wrapper.querySelector("[data-action=save-png]");
var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
var saveSVGButton = wrapper.querySelector("[data-action=save-svg]");
var cancelButton = wrapper.querySelector("[data-action=cancel]");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
  // It's Necessary to use an opaque color when saving image as JPEG;
  // this option can be omitted if only saving as PNG or SVG
  backgroundColor: 'rgb(255, 255, 255)'
});

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
  // When zoomed out to less than 100%, for some very strange reason,
  // some browsers report devicePixelRatio as less than 1
  // and only part of the canvas is cleared then.
  var ratio =  Math.max(window.devicePixelRatio || 1, 1);

  // This part causes the canvas to be cleared
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);

  // This library does not listen for canvas changes, so after the canvas is automatically
  // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
  // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
  // that the state of this library is consistent with visual state of the canvas, you
  // have to clear it manually.
  signaturePad.clear();
}

// On mobile devices it might make more sense to listen to orientation change,
// rather than window resize events.
window.onresize = resizeCanvas;
resizeCanvas();

function download(dataURL, filename) {
  var blob = dataURLToBlob(dataURL);
  var url = window.URL.createObjectURL(blob);

  var a = document.createElement("a");
  a.style = "display: none";
  a.href = url;
  a.download = filename;

  document.body.appendChild(a);
  a.click();

  window.URL.revokeObjectURL(url);
}

// One could simply use Canvas#toBlob method instead, but it's just to show
// that it can be done using result of SignaturePad#toDataURL.
function dataURLToBlob(dataURL) {
  // Code taken from https://github.com/ebidel/filer.js
  var parts = dataURL.split(';base64,');
  var contentType = parts[0].split(":")[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], { type: contentType });
}

clearButton.addEventListener("click", function (event) {
  signaturePad.clear();
});

undoButton.addEventListener("click", function (event) {
  var data = signaturePad.toData();

  if (data) {
    data.pop(); // remove the last dot or line
    signaturePad.fromData(data);
  }
});

//changeColorButton.addEventListener("click", function (event) {
//  var r = Math.round(Math.random() * 255);
//  var g = Math.round(Math.random() * 255);
//  var b = Math.round(Math.random() * 255);
//  var color = "rgb(" + r + "," + g + "," + b +")";
//
//  signaturePad.penColor = color;
//});

savePNGButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL();
    //download(dataURL, "signature.png");

    var base64img = dataURL;// canvas.toDataURL("image/png");

    $('#file').val(base64img);
    //$('#form').submit();
    //window.location.href = SITE_SCHEMA+'://sendSignature';
    window.parent.showSignatureImage(base64img);
    return false;

/*
    window.location.href = SITE_SCHEMA+'://startUploading';
    setTimeout(function(){
        $.ajax({
            type: "POST",
            url: FILE_UPLOAD_URL,
            data: {hash: account_hash, member_hash: member_hash, device:'android', imageNo:'100', action:'upload', uploader_name:'signature', file: encodeURIComponent(base64img)},
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            success: function(data){
                window.location.href = SITE_SCHEMA+'://sendSignature?data=' + data;
            }
        });

    }, 1000);
*/
  }
  return false;
});

//saveJPGButton.addEventListener("click", function (event) {
//  if (signaturePad.isEmpty()) {
//    alert("Please provide a signature first.");
//  } else {
//    var dataURL = signaturePad.toDataURL("image/jpeg");
//    download(dataURL, "signature.jpg");
//  }
//});
//
//saveSVGButton.addEventListener("click", function (event) {
//  if (signaturePad.isEmpty()) {
//    alert("Please provide a signature first.");
//  } else {
//    var dataURL = signaturePad.toDataURL('image/svg+xml');
//    download(dataURL, "signature.svg");
//  }
//});

cancelButton.addEventListener("click", function (event) {
  //window.location.href = SITE_SCHEMA+'://cancelSignatureForm';
  window.parent.closeSignatureForm();
  return false;
});