<!doctype html>
<html>
<head>
<title>Signature Signature - RJM Programming - May, 2017</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='signature_signature.js'></script>
<script type='text/javascript'>

var sscoords=location.search.split('sscoords=')[1] ? (location.search.split('sscoords=')[1].split('&')[0]) : "";
var sscordsdelim="", wassscoords="";
var ie = 11;
var mode = 1;
var amode = 1;
var elem;
var elemLeft = 0;
var cf = "18px Verdana";
var elemTop = 0;
var context;
var elements = [];
var x=0, y=0, lastx=0, lasty=0;
var clickno = 0;

if (sscoords != "") sscordsdelim=",";

window.onload = (function() {

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var hh = today.getHours();
var minm = today.getMinutes(); //January is 0!
var ss = today.getSeconds();

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
hh=hh;
}

ie = (function(){ // thanks to http://stackoverflow.com/questions/5574842/best-way-to-check-for-ie-less-than-9-in-javascript-without-library

var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');

while (
div.innerHTML = '',
all[0]
);

return v > 4 ? v : undef;

}());

elem = document.getElementById('canvaselement');
context = elem.getContext("2d");
//context.drawImage(img,0,0);
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;
// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
if (event.pageX || event.pageY) {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
} else {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
}
lastx=x;
lasty=y;
} else {
lastx=x;
lasty=y;
if (event.pageX || event.pageY) {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
} else {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
}
}

clickno = clickno + 1;

});
});

</script>
</head>
<body style='background-color:pink;'>
<table><tr><td>
<canvas title="Ready for you to sign away ..." id="canvaselement" width=850 height=200 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas></td><td>
</td></tr></table>
<br><br><br><br><br><br><br><br><br><br><h1>Signature Signature</h1>
<h3>RJM Programming - May, 2017</h3>
<h4 id='myh4'></h4>
<span id="showit" style='display:none;'><input style="background-color:yellow;" value="Show and Save Your Signature (as above)" type=button onclick="if (wassscoords != '') { if ((document.URL.split('?')[0].split('#')[0] + ('?sscoords=' + wassscoords).replace('=,','=')).length > ninehundred) { document.getElementById('sscoords').value=wassscoords.replace('=,','='); document.getElementById('mysbut').click(); } else { location.href=document.URL.split('?')[0].split('#')[0] + ('?sscoords=' + wassscoords).replace('=,','='); } } else { if ((document.URL.split('?')[0].split('#')[0] + ('?sscoords=' + sscoords).replace('=,','=')).length > ninehundred) { document.getElementById('sscoords').value=sscoords.replace('=,','='); document.getElementById('mysbut').click(); } else { location.href=document.URL.split('?')[0].split('#')[0] + ('?sscoords=' + sscoords).replace('=,','='); } }"></input></span>
<span id="showi" style='display:none;'><br><br>And below is an image version of the last signature ...<br><br><img style='width:850px;height:200px;border-bottom:5px solid yellow; border-right:5px solid blue; border-top:1px solid white; border-left:1px solid white;' id='animage' src='' title='Image version of last canvas'></img></span>
<div id='longsignature' style='display:none;'></div>
<form id='myform' style='display:none;' action='./signature_signature.php' method='POST' target='_self'>
<input type='hidden' name='sscoords' id='sscoords' value=''></input>
<input type='submit' id='mysbut' value='Submit'></input>
</form>
<iframe id='myask' src='./signature_signature.php' style='display:none;'></iframe>
</body>
</html>