<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>User of 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'>

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 rectbits=[0,0,0,0];
var clickno = 0;
var lastop = "nowayjose";

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

var createCookie = function(name, value, days) { // thanks to https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
if (localStorage && name != 'gameon') {
if (localStorage.getItem(name)) {
//document.title+=' remove ';
localStorage.removeItem(name);
}
//document.title+=' set ';
//alert(value);
localStorage.setItem(name, value);
} else {
document.cookie = name + "=" + value + expires + "; path=/";
}
}

function getCookie(c_name) { // https://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie
if (localStorage && localStorage.getItem(c_name) && c_name != 'gameon') { // thanks to https://www.w3schools.com/html/html5_webstorage.asp
//alert(2);
//document.title+=' get ';
//alert(localStorage.getItem(c_name));
return unescape(localStorage.getItem(c_name));
} else if (document.cookie.length > 0) {
//alert(12);
var c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
var c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return null; //"";
}

function check_for_supervision() {
return false;
// Check if being supervised by Socket.IO Node.js Whiteboard web application ...
if (getCookie('gameon') != null) {
//alert(getCookie('gameon'));
if (getCookie('gameon').substring(0,1) != 'n') { // there are potentially collaborating players
document.body.style.backgroundColor='magenta';
if (document.getElementById('rchallenge')) {
document.getElementById('rchallenge').style.display='block';
//document.getElementById('ichallenge').style.display='block';
}
setTimeout(check_for_supervision, 3000);
return true;
} else { // but we are the only players
document.body.style.backgroundColor='cyan';
if (document.getElementById('rchallenge')) {
document.getElementById('rchallenge').style.display='none';
//document.getElementById('ichallenge').style.display='none';
return false;
}
setTimeout(check_for_supervision, 3000);
return true;
}
} else if (parent.document.getElementById('gameon')) {
//alert(2);
if (parent.document.getElementById('gameon').value == '') { // but we are the only players
document.body.style.backgroundColor='cyan';
if (document.getElementById('rchallenge')) {
document.getElementById('rchallenge').style.display='none';
//document.getElementById('ichallenge').style.display='none';
}
setTimeout(check_for_supervision, 3000);
return true;
} else { // there are potentially collaborating players
document.body.style.backgroundColor='magenta';
if (document.getElementById('rchallenge')) {
document.getElementById('rchallenge').style.display='block';
//document.getElementById('ichallenge').style.display='block';
}
setTimeout(check_for_supervision, 3000);
return true;
}
} else {
//alert(3);
document.body.style.backgroundColor='olive';
}
return false;
}

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('topcanvas');
context = elem.getContext("2d");
//context.drawImage(img,0,0);
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;

if (1 == 1) {
setTimeout(rhuhf, 1000);
} else {
var rhuh=document.getElementById('rform');
if (rhuh != null) {
if (document.getElementById('rform').innerHTML.indexOf('rchallenge') != -1) rhuh=null;
}

if (check_for_supervision() || rhuh) {
document.getElementById('rform').innerHTML+="<br><input onclick='sendchallenge(this.id);' id='rchallenge' name='rchallenge' align='center' type='button' value='Share'></input>";
//document.getElementById('iform').innerHTML+="<br><input onclick='sendchallenge(this.id);' id='ichallenge' name='ichallenge' align='center' type='button' value='Challenge'></input>";
}
}

});

function pduris(tvi) {
if (parent.document.getElementById('pduration')) {
parent.document.getElementById('pduration').value=tvi;
} else if (document.getElementById('pduration')) {
document.getElementById('pduration').value=tvi;
}
}

function repositive(ibut) {
var pxqmore="";
if (ibut.value == '+') {
if (parent.document.getElementById('ppositive')) {
parent.document.getElementById('ppositive').name='positive';
parent.document.getElementById('mypsbut').click();
ibut.value='-';
ibut.style.color='white';
ibut.style.backgroundColor='black';
ibut.title="Black background";
} else if (document.getElementById('ppositive')) {
document.getElementById('ppositive').name='positive';
document.getElementById('mypsbut').click();
ibut.value='-';
ibut.style.color='white';
ibut.style.backgroundColor='black';
ibut.title="Black background";
}
} else {
if (parent.document.getElementById('dpositive')) {
//parent.document.getElementById('ppositive').name='huhpositive';
parent.document.getElementById('dpositive').innerHTML="<input type='hidden' name='huhpositive' id='ppositive' value='y'></input>";
parent.document.getElementById('mypsbut').click();
ibut.value='+';
ibut.style.color='black';
ibut.style.backgroundColor='white';
ibut.title="White background";
} else if (document.getElementById('dpositive')) {
//document.getElementById('ppositive').name='huhpositive';
parent.document.getElementById('dpositive').innerHTML="<input type='hidden' name='huhpositive' id='ppositive' value='y'></input>";
document.getElementById('mypsbut').click();
ibut.value='+';
ibut.style.color='black';
ibut.style.backgroundColor='white';
ibut.title="White background";
}
}
}

function torgba(inc, opa) {
var i, j=0, csess="rgba(:::1.0)", alp="0123456789abcdef", factor=16;
for (i=0; i<=inc.replace('#','').length; i++) {
if (i == 1) {
csess=csess.replace('rgba(:','rgba(' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 3) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 5) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else {
j=j + (factor * alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1))));
}
csess = csess.replace(":1.0)",":" + opa + ")");
}
return csess;
}

function cchange(lastnothing) {
if (parent.document.getElementById('danimation')) {
if (parent.document.getElementById('ppsize')) {
parent.document.getElementById('psize').value=parent.document.getElementById('ppsize').value;
}
if (lastnothing.length > 1) return;
//alert('before ' + parent.document.getElementById('mypform').innerHTML);
parent.document.getElementById('pcoords').value=(parent.document.getElementById('pcoords').value + '~').replace(',~','').replace(lastop + '~','').replace('~','').replace('|;','|').replace(');','),');
if (lastnothing != '') parent.document.getElementById('pcoords').value=(parent.document.getElementById('pcoords').value + torgba(parent.document.getElementById('icolour').value,parent.document.getElementById('popacity').value)).replace('0rgba','0,rgba').replace('1rgba','1,rgba').replace('2rgba','2,rgba').replace('3rgba','3,rgba').replace('4rgba','4,rgba').replace('5rgba','5,rgba').replace('6rgba','6,rgba').replace('7rgba','7,rgba').replace('8rgba','8,rgba').replace('9rgba','9,rgba').replace(',;',';').replace(',;',';'); // + ',';
parent.document.getElementById('pcircle').value=(parent.document.getElementById('pcircle').value + '~').replace(',~','').replace(lastop + '~','').replace('~','').replace('|;','|').replace(');','),');
if (lastnothing != '') parent.document.getElementById('pcircle').value=(parent.document.getElementById('pcircle').value + torgba(parent.document.getElementById('icolour').value,parent.document.getElementById('popacity').value)).replace('0rgba','0,rgba').replace('1rgba','1,rgba').replace('2rgba','2,rgba').replace('3rgba','3,rgba').replace('4rgba','4,rgba').replace('5rgba','5,rgba').replace('6rgba','6,rgba').replace('7rgba','7,rgba').replace('8rgba','8,rgba').replace('9rgba','9,rgba').replace(',;',';').replace(',;',';'); // + ',';
if (lastnothing != '') lastop=torgba(parent.document.getElementById('icolour').value,parent.document.getElementById('popacity').value);
//alert('after ' + parent.document.getElementById('mypform').innerHTML);
} else if (document.getElementById('danimation')) {
document.getElementById('psize').value=document.getElementById('ppsize').value;
if (lastnothing.length > 1) return;
//alert('Before ' + document.getElementById('mypform').innerHTML);
document.getElementById('pcoords').value=(document.getElementById('pcoords').value + '~').replace(',~','').replace(lastop + '~','').replace('~','').replace('|;','|').replace(');','),');
if (lastnothing != '') document.getElementById('pcoords').value=(document.getElementById('pcoords').value + torgba(document.getElementById('icolour').value,parent.document.getElementById('popacity').value)).replace('0rgba','0,rgba').replace('1rgba','1,rgba').replace('2rgba','2,rgba').replace('3rgba','3,rgba').replace('4rgba','4,rgba').replace('5rgba','5,rgba').replace('6rgba','6,rgba').replace('7rgba','7,rgba').replace('8rgba','8,rgba').replace('9rgba','9,rgba').replace(',;',';').replace(',;',';'); // + ',';
document.getElementById('pcircle').value=(document.getElementById('pcircle').value + '~').replace(',~','').replace(lastop + '~','').replace('~','').replace('|;','|').replace(');','),');
if (lastnothing != '') document.getElementById('pcircle').value=(document.getElementById('pcircle').value + torgba(document.getElementById('icolour').value,parent.document.getElementById('popacity').value)).replace('0rgba','0,rgba').replace('1rgba','1,rgba').replace('2rgba','2,rgba').replace('3rgba','3,rgba').replace('4rgba','4,rgba').replace('5rgba','5,rgba').replace('6rgba','6,rgba').replace('7rgba','7,rgba').replace('8rgba','8,rgba').replace('9rgba','9,rgba').replace(',;',';').replace(',;',';'); // + ',';
if (lastnothing != '') lastop=torgba(document.getElementById('icolour').value,document.getElementById('popacity').value);
//alert('After ' + document.getElementById('mypform').innerHTML);
}
}

function ihsubd() {
var pxqmore="";
pxqmore=' <input title="White background" id=ipositive onclick=repositive(this); type=button style=color:black;background-color:white; value=+></input>'; // More To Come
pxqmore+=' <input title="Foreground colour" onchange="cchange(String.fromCharCode(32));" type=color id=icolour value="#000000"></input>';
pxqmore+=' Opacity: <input style="width:40px;" title="Opacity" step=0.1 min=0.0 max=1.0 onchange="cchange(String.fromCharCode(32));" type=number id=popacity value="1.0"></input>';
pxqmore+=' Thickness: <input style="width:40px;" title="Thickness of pixel line" step=1 min=0 max=9 onchange="cchange(String.fromCharCode(32) + String.fromCharCode(32));" type=number id=ppsize value="0"></input>';
if (parent.document.getElementById('subdanimation')) {
parent.document.getElementById('subdanimation').style.display='inline';
parent.document.getElementById('subdanimation').innerHTML=pxqmore;
} else if (document.getElementById('subdanimation')) {
document.getElementById('subdanimation').style.display='inline';
document.getElementById('subdanimation').innerHTML=pxqmore;
}
}

function newslide() {
if (parent.document.getElementById('danimation')) {
parent.document.getElementById('pcoords').value+='|';
parent.document.getElementById('pcircle').value+='|';
if (parent.document.getElementById('danimation').innerHTML.indexOf('duration') == -1) {
parent.document.getElementById('danimation').innerHTML+=' Seconds: <input style="width:40px;" onchange=pduris(this.value); onblur=pduris(this.value); type=number step=0.01 min=0.01 id=nduration value="0.5"></input> <div id=subdanimation style=display:none;></div>';
ihsubd();
}
} else if (document.getElementById('danimation')) {
document.getElementById('pcoords').value+='|';
document.getElementById('pcircle').value+='|';
if (document.getElementById('danimation').innerHTML.indexOf('duration') == -1) {
document.getElementById('danimation').innerHTML+=' Seconds: <input style="width:40px;" onchange=pduris(this.value); onblur=pduris(this.value); type=number step=0.01 min=0.01 id=nduration value="0.50"></input> <div id=subdanimation style=display:none;></div>';
ihsubd();
}
}
if (parent.document.getElementById('mypform')) {
if (parent.document.getElementById('mypform').innerHTML.indexOf('duration') == -1) {
parent.document.getElementById('mypform').innerHTML+='<input type=hidden id=pduration name=duration value="0.5"></input>';
}
} else if (document.getElementById('mypform')) {
if (document.getElementById('mypform').innerHTML.indexOf('duration') == -1) {
document.getElementById('mypform').innerHTML+='<input type=hidden id=pduration name=duration value="0.5"></input>';
}
}
}

function checkilast(iois) {
var presw=document.getElementById('toppixellate');
if (presw != null) {
var aconto = (presw.contentWindow || presw.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
if (document.getElementById('oli')) {
document.getElementById('oli').innerHTML=aconto.body.innerHTML.replace(/\</g, '<').replace(/\>/g, '>');
} else if (parent.document.getElementById('oli')) {
parent.document.getElementById('oli').innerHTML=aconto.body.innerHTML.replace(/\</g, '<').replace(/\>/g, '>');
}
}
}
}
}

function rhuhf() {
var rhuh=document.getElementById('rform');
if (rhuh != null) {
//alert('rhuh != null');
if (document.getElementById('rform').innerHTML.indexOf('rchallenge') != -1) {
rhuh=null;
//alert('rhuh = null');
}
}

if (check_for_supervision() || rhuh) {
//alert('rhuh');
document.getElementById('rform').innerHTML+="<br><input onclick='sendchallenge(this.id);' id='rchallenge' name='rchallenge' align='center' type='button' value='Share'></input>";
//document.getElementById('iform').innerHTML+="<br><input onclick='sendchallenge(this.id);' id='ichallenge' name='ichallenge' align='center' type='button' value='Challenge'></input>";
}
}
</script>
</head>
<body style='background-color:orange;'>
<table style='width:100%;'><tr style='width:100%;'><td id='lefttd'>
<canvas title="Ready for you to create your canvas 🎨 content above any signature 💳 panel ..." id="topcanvas" width=850 height=600 style="background-color:white; position: absolute; top:0; left:0; border-bottom:5px solid yellow; border-right:5px solid blue;"></canvas>
<br><iframe onload='checkilast(this);' onclick="window.open(document.getElementById('mypform').action,'_blank');" width=850 height=600 title='Some graphics pixellated and click for new window display' id='toppixellate' name='toppixellate' src='' style='display:none;position:absolute;top:610px;left:0px;'></iframe><iframe id='topiframe' src='./signature_signature.html' style='display:none;'></iframe><div id=pixellate></div><br>
<form id='mypform' style='display:none;' action='//www.rjmprogramming.com.au/PHP/pixellate.php' method='POST' target='toppixellate'>
<input type='hidden' name='circle' id='pcircle' value=''></input>
<input type='hidden' name='coords' id='pcoords' value=''></input>
<input type='hidden' name='huhmode' id='pmode' value='pixellate'></input>
<input type='hidden' name='width' id='pwidth' value='850'></input>
<input type='hidden' name='height' id='pheight' value='600'></input>
<input type='hidden' name='size' id='psize' value='0'></input>
<input type='hidden' name='rotate' id='protate' value='0.0'></input>
<div id=dpositive><input type='hidden' name='huhpositive' id='ppositive' value='y'></input></div>
<input onclick="cchange('');" type='submit' id='mypsbut' value='Submit' style='display:none;'></input>
</form>

</td>
<td id='toptd' style='position: absolute; top:0px; left:860px; float:right;'>
<h1>User of Signature Signature</h1></td></tr></table><div id='rform'></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id=oli style='display:none;'></div>
</body>
</html>