(function() { 
  window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimaitonFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
  })();

  var canvas = document.getElementById("sig-canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
    var touch = false;
    var last_pos = { x: 0, y: 0 };
    var curr_pos = { x: 0, y: 0 };
	/* Drawing on Paint App */
	ctx.lineWidth = 2;
	ctx.lineJoin = 'round';
	ctx.lineCap = 'round';
	ctx.strokeStyle = 'black';

  var drawing = false;
  var mousePos = {
    x: 0,
    y: 0
  };
  var lastPos = mousePos;

  canvas.addEventListener("mousedown", function(e) {
    drawing = true;
    lastPos = getMousePos(canvas, e);
  }, false);

  canvas.addEventListener("mouseup", function(e) {
    drawing = false;
  }, false);

  canvas.addEventListener("mousemove", function(e) {
    mousePos = getMousePos(canvas, e);
  }, false);

  // Add touch event support for mobile
  canvas.addEventListener("touchstart", function(e) {

  }, false);

  canvas.addEventListener("touchmove", function(e) {
    var touch = e.touches[0];
    var me = new MouseEvent("mousemove", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    canvas.dispatchEvent(me);
  }, false);

  canvas.addEventListener("touchstart", function(e) {
    mousePos = getTouchPos(canvas, e);
    var touch = e.touches[0];
    var me = new MouseEvent("mousedown", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    canvas.dispatchEvent(me);
  }, false);

  canvas.addEventListener("touchend", function(e) {
    var me = new MouseEvent("mouseup", {});
    canvas.dispatchEvent(me);
  }, false);

  function getMousePos(canvasDom, mouseEvent) {
    var rect = canvasDom.getBoundingClientRect();
    return {
      x: mouseEvent.clientX - rect.left,
      y: mouseEvent.clientY - rect.top
    }
  }

  function getTouchPos(canvasDom, touchEvent) {
    var rect = canvasDom.getBoundingClientRect();
    return {
      x: touchEvent.touches[0].clientX - rect.left,
      y: touchEvent.touches[0].clientY - rect.top
    }
  }

  function renderCanvas() {
    if (drawing) {
      ctx.moveTo(lastPos.x, lastPos.y);
      ctx.lineTo(mousePos.x, mousePos.y);
      ctx.stroke();
      lastPos = mousePos;
    }
  }

  // Prevent scrolling when touching the canvas
  document.body.addEventListener("touchstart", function(e) {
    if (e.target == canvas) {
      e.preventDefault();
    }
  }, false);
  document.body.addEventListener("touchend", function(e) {
    if (e.target == canvas) {
      e.preventDefault();
    }
  }, false);
  document.body.addEventListener("touchmove", function(e) {
    if (e.target == canvas) {
      e.preventDefault();
    }
  }, false);

  (function drawLoop() {
    requestAnimFrame(drawLoop);
    renderCanvas();
  })();

  function clearCanvas() {
    canvas.width = canvas.width;
  }

  // Set up the UI
  var submitSuccess = document.getElementById("submitSuccess");
  var sigdataUrlerror = document.getElementById("sigdataUrl-error");
  var sigText = document.getElementById("sigdataUrl");
  var sigImage = document.getElementById("sig-image");
  var clearBtn = document.getElementById("sig-clearBtn");
  var submitBtn = document.getElementById("sig-submitBtn");
  clearBtn.addEventListener("click", function(e) {
    clearCanvas();
    ctx.lineWidth = 2;
	ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
	/* sigText.innerHTML = "Data URL for your signature will go here!";
    sigImage.setAttribute("src", ""); */
  }, false);
  /* submitBtn.addEventListener("click", function(e) {
	
	var dataUrl = canvas.toDataURL('image/jpeg', 0.8);
	var b64du = dataUrl.replace(/^data:image\/?[A-z]*;base64,/, "");
    sigText.value = b64du;
    
	
  }, false); */
  
  submitBtn.addEventListener("click", function(e) {
    var dataUrl = canvas.toDataURL();
	
	if(dataUrl=='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAACWCAYAAACW5+B3AAAAAXNSR0IArs4c6QAABNBJREFUeF7t1MEJADAMA7F2/6Fd6BD3UhYwiHB3244jQIAAgUzgCm9mbYgAAQJfQHg9AgECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEBAeP0AAQIEYgHhjcHNESBAQHj9AAECBGIB4Y3BzREgQEB4/QABAgRiAeGNwc0RIEDgAfvdVl1oruKgAAAAAElFTkSuQmCC'){
		dataUrl="";
	}
	var b64du = dataUrl.replace(/^data:image\/?[A-z]*;base64,/, "");
    sigText.value = b64du;
    //sigText.value = dataUrl;
  	if (dataUrl=="") {
	submitSuccess.innerHTML = "<span style='color:#FF0000;font-weight:bold;'>Please Write Signature</span>";
	document.getElementById('sigdataUrl-error').style.display = 'none';
	}else if(dataUrl!=""){
	submitSuccess.innerHTML = "<span style='color:#0DA700;font-weight:bold;'>Signature Submitted Successfully!</span>";
	document.getElementById('sigdataUrl-error').style.display = 'none';
	}else{
	submitSuccess.innerHTML = "";
	}
  }, false);

})();