<!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='../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, celem, cimg;
var elemLeft = 0;
var cf = "18px Verdana";
var elemTop = 0;
var context, ccontext;
var elements = [];
var x=0, y=0, lastx=0, lasty=0;
var rectbits=[0,0,0,0];
var clickno = 0;
var ssois=null;
var cancont='';
var cancontw=-1, canconth=-1;

if (('' + window.opener).replace('null','') != '') {
var cans=window.opener.document.getElementsByTagName('canvas');
if (cans.length > 0) { cancont=cans[0].toDataURL('image/png'); cancontw=cans[0].width; canconth=cans[0].height; }
}

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 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>';
}
} 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>';
}
}
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>";
}
}

function fixtopiframe() {
if (document.URL.indexOf('?') != -1) {
if (document.getElementById('topiframe').src.indexOf('?') == -1) {
document.getElementById('topiframe').src=document.getElementById('topiframe').src.split('#')[0] + '?' + document.URL.split('?')[1] + '&randn=' + Math.floor(Math.random() * 456789);
} else {
document.getElementById('topiframe').src=document.getElementById('topiframe').src.split('#')[0] + '&' + document.URL.split('?')[1] + '&randn=' + Math.floor(Math.random() * 456789);
}
//alert( document.getElementById('topiframe').src);
}
}

function s_s_o(iois) {
if (iois != null) {
ssois = (iois.contentWindow || iois.contentDocument);
if (ssois.rezeroalt) {
top.ssois=ssois;
}
if (ssois != null) {
if (ssois.document) { ssois = ssois.document; }
if (ssois.rezeroalt) {
top.ssois=ssois;
}
//alert('xjhgf');
}
}
}

function cancontlook() {
if (cancont != '') { // called via SVG - IMG - CANVAS
celem=document.getElementById('topcanvas');
ccontext = celem.getContext("2d");
celem.width=cancontw;
celem.height=canconth;
cimg=new Image;
cimg.onload = function(){
ccontext.drawImage(cimg,0,0);
};
cimg.src=cancont;
if (document.getElementById('toptd')) {
document.getElementById('toptd').style.left='' + cancontw + 'px';
var recttoptd=document.getElementById('toptd').getBoundingClientRect();
document.getElementById('topcbutton').innerHTML='⬅';
document.getElementById('topcbutton').style.position='fixed';
document.getElementById('topcbutton').style.top='' + recttoptd.top + 'px';
//document.getElementById('topcbutton').style.left='' + recttoptd.left + 'px';
document.getElementById('topcbutton').style.left='' + eval(0.98 * eval('' + screen.width)) + 'px';
document.getElementById('topcbutton').style.zIndex='89';
document.getElementById('topcbutton').title='Back to SVG - IMG - CANVAS web application caller';
//document.getElementById('topcbutton').onclick=function() { window.opener.focus(); };
}
if (document.getElementById('toppixellate')) {
document.getElementById('toppixellate').style.top='' + canconth + 'px';
}
if (('' + location.hash).replace(/^\#/g,'') != '') {
document.getElementById('topcstyle').innerHTML='<style> #topcanvas { ' + decodeURIComponent(('' + location.hash)).replace(/^\#/g,'') + ' } </style>';
document.body.style.backgroundColor='transparent';
}
}
}

function iysh() {
if (document.getElementById('topcbutton').innerHTML.indexOf(' ') != -1) {
document.getElementById('topcbutton').innerHTML=document.getElementById('topcbutton').innerHTML.replace(' ','');
alert('Please do this manually');
}
}

function woff() {
document.getElementById('topcbutton').innerHTML+=' ';
setTimeout(iysh, 2000);
window.opener.focus();
}

setTimeout(fixtopiframe, 2000);
</script>
</head>
<body style='background-color:orange;' onload='setTimeout(cancontlook,2000);'>
<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 width=850 height=600 title='Some graphics pixellated' id='toppixellate' name='toppixellate' src='' style='display:none;position:absolute;top:610px;left:0px;'></iframe><iframe onload='s_s_o(this);' id='topiframe' src='./signature_signature.html?fgd=hjg' style='display:none;'></iframe><div id=pixellate></div><br>

<form id='mypform' style='display:none;' action='../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='mode' 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='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=topcstyle style=display:none;></div>
<div id=topcbutton onclick=woff();></div>
</body>
</html>