<!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;

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) {
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';
}
setTimeout(check_for_supervision, 3000);
return true;
}
} else if (parent.document.getElementById('gameon')) {
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 {
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) {
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 ihsubd() {
if (parent.document.getElementById('subdanimation')) {
parent.document.getElementById('subdanimation').style.display='inline';
parent.document.getElementById('subdanimation').innerHTML=' <input title="White background" id=ipositive onclick=repositive(this); type=button style=color:black;background-color:white; value=+></input>'; // More To Come
} else if (document.getElementById('subdanimation')) {
document.getElementById('subdanimation').style.display='inline';
document.getElementById('subdanimation').innerHTML=''; // More to come
}
}

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 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 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 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 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>
<div id=dpositive><input type='hidden' name='huhpositive' id='ppositive' value='y'></input></div>
<input 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>

</body>
</html>