<!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 elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : "canvas";
var canconth=location.search.split('canconth=')[1] ? eval(location.search.split('canconth=')[1].split('&')[0]) : -1;
var cancontw=location.search.split('cancontw=')[1] ? eval(location.search.split('cancontw=')[1].split('&')[0]) : -1;
var sscoords=location.search.split('sscoords=')[1] ? (location.search.split('sscoords=')[1].split('&')[0]) : "";
var zfac=location.search.split('zoom=')[1] ? decodeURIComponent(location.search.split('zoom=')[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 lastdrop='';
var wocheck=false, woop=null, lastwoopj='';
var slideis=location.search.split('slide=')[1] ? (location.search.split('slide=')[1].split('&')[0]) : "";
var thewords=location.search.split('thewords=')[1] ? decodeURIComponent(location.search.split('thewords=')[1].split('&')[0]) : "";
var cbcol=location.search.split('cbcol=')[1] ? decodeURIComponent(location.search.split('cbcol=')[1].split('&')[0]) : "";
var cfcol=location.search.split('cfcol=')[1] ? decodeURIComponent(location.search.split('cfcol=')[1].split('&')[0]) : "";
var cffam=location.search.split('cffam=')[1] ? decodeURIComponent(location.search.split('cffam=')[1].split('&')[0]) : "";
var cfsz=location.search.split('cfsz=')[1] ? decodeURIComponent(location.search.split('cfsz=')[1].split('&')[0]) : "";

if (('' + window.opener).replace('null','') != '') {

if (!wocheck) {
wocheck=true;
if (window.opener && slideis != '') {
woop=window.opener;
setTimeout(function() { document.getElementById('topcanvas').title=initialtextmaybe(slideis); setInterval(topcwoop, 5000); }, 3000);
}
}

var cans=window.opener.document.getElementsByTagName(elemode);
if (cans.length > 0 && !woop) {
if (elemode == 'img') {
cancont=cans[0].src;
} else {
cancont=cans[0].toDataURL('image/png');
}
if (cancontw < 0 && canconth < 0) {
cancontw=cans[0].width;
canconth=cans[0].height;
}
}
}

if (sscoords != "") sscordsdelim=",";
if (('' + location.hash).indexOf('zoom=') != -1) { zfac=decodeURIComponent(('' + location.hash).split('zoom=')[1].split(';')[0]); }
//if (zfac != '') { document.head.innerHTML=' <style> html { zoom:' + zfac.replace(';','') + '; } </style> '; }
setTimeout(zoomlater, 5000);

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 placethistext() {
var mycon=document.getElementById('topcanvas').getContext('2d');
mycon.font = cf;
var huhs=thewords.split(String.fromCharCode(92) + 'n'), thisy=eval(8 + eval('' + cfsz));
//if (('' + cbcol) != 'white') {
// mycon.fillStyle='' + cbcol;
// mycon.fillRect(0,0,document.getElementById('topcanvas').width,document.getElementById('topcanvas').height);
//}
for (var ii=0; ii<huhs.length; ii++) {
mycon.font = cf;
mycon.strokeStyle='' + cfcol;
mycon.strokeText(huhs[ii],20,thisy);
thisy+=eval(8 + eval('' + cfsz));
}
}

function ourfillrect() {
document.getElementById('topcanvas').getContext('2d').fillStyle='' + cbcol;
document.getElementById('topcanvas').getContext('2d').fillRect(0,0,document.getElementById('topcanvas').width,document.getElementById('topcanvas').height);
}

function initialtextmaybe(inslidename) {
//useyourwords='&thewords=' + encodeURIComponent(dtval) + '&cbcol=' + encodeURIComponent(cbcol) + '&cfcol=' + encodeURIComponent(cfcol) + '&cffam=' + encodeURIComponent(cffam) + '&cfsz=' + encodeURIComponent(cfsz);
if (thewords.trim() != '') {
cf = "" + cfsz + "px " + cffam;
if (('' + cbcol) != 'white') {
setTimeout(ourfillrect, 4000);
}
setTimeout(placethistext, 5000);
}
return inslidename;
}

function imagestraight(topoel, actual_cover_contain_o) {
//alert('More work for ' + actual_cover_contain_o.value);
lastacc=actual_cover_contain_o.value;
actual_cover_contain_o.setAttribute('data-lastacc', lastacc);
//alert(lastacc);
if (actual_cover_contain_o.value.substring(1) == actual_cover_contain_o.value.substring(1).toUpperCase()) {
actual_cover_contain_o.value='im';
} else if (actual_cover_contain_o.value.substring(1) == actual_cover_contain_o.value.substring(1).toLowerCase()) {
actual_cover_contain_o.value='ib';
}
if (lastacc == 'Contain' && !advicegiven) { // Postcard advice blurb
advicegiven=true;
if ((parent.document.getElementById('shareurl') || top.document.getElementById('shareurl') || document.getElementById('shareurl')) && top.document.URL.indexOf('https:') == 0) {
safariblurb=' (as textbox below goes yellow, click email sender button to its left for easier usage)';
setTimeout(checkonyellow, 3000);
}
if (1 == 6 && parent.document.getElementById('myta')) {
if (parent.document.getElementById('myta').value == '') {
parent.document.getElementById('myta').value='Postcard via smart device Camera advice ...' + String.fromCharCode(10) + String.fromCharCode(10) + '1. Touch browsing Choose File button that has just appeared.' + String.fromCharCode(10) + '2. Choose to Take Photo.' + String.fromCharCode(10) + '3. Consider any zooming in or selfie modes of use in Photo mode.' + String.fromCharCode(10) + '4. Take photo with Camera app white button, choosing Use Photo or Retake, as required.' + String.fromCharCode(10) + '5. Scribble any optional messaging in white area to right, or use other discreet touch functionalities.' + String.fromCharCode(10) + '6. Optionally email off to recipient' + safariblurb + '.' + String.fromCharCode(10);
}
} else if (8 == 9 && document.getElementById('myta')) {
document.getElementById('myta').value='Postcard via smart device Camera advice ...' + String.fromCharCode(10) + String.fromCharCode(10) + '1. Touch browsing Choose File button that has just appeared.' + String.fromCharCode(10) + '2. Choose to Take Photo.' + String.fromCharCode(10) + '3. Consider any zooming in or selfie modes of use in Photo mode.' + String.fromCharCode(10) + '4. Take photo with Camera app white button, choosing Use Photo or Retake, as required.' + String.fromCharCode(10) + '5. Scribble any optional messaging in white area to right, or use other discreet touch functionalities.' + String.fromCharCode(10) + '6. Optionally email off to recipient' + safariblurb + '.' + String.fromCharCode(10);
} else if (parent.document.URL.indexOf('postcard=y') != -1 && parent.document.getElementById('mode')) {
setTimeout(function() { if (safariblurb == '') { safariblurb=' (as textbox below goes yellow, click email sender button to its left for easier usage)'; setTimeout(checkonyellow, 3000); } parent.document.getElementById('mode').innerHTML=('Postcard via smart device Camera advice ...<br><br>1. Touch browsing Choose File button that has just appeared.<br>2. Choose to Take Photo.<br>3. Consider any zooming in or selfie modes of use in Photo mode.<br>4. Take photo with Camera app white button, choosing Use Photo or Retake, as required.<br>5. Scribble any optional messaging in white area to right, or use other discreet touch functionalities.<br>6. Optionally email off to recipient' + safariblurb + '.<br>'); setTimeout(clearmode, 20000); }, 7000);
} else {
setTimeout(function() { alert('Postcard via smart device Camera advice ...' + String.fromCharCode(10) + String.fromCharCode(10) + '1. Touch browsing Choose File button that has just appeared.' + String.fromCharCode(10) + '2. Choose to Take Photo.' + String.fromCharCode(10) + '3. Consider any zooming in or selfie modes of use in Photo mode.' + String.fromCharCode(10) + '4. Take photo with Camera app white button, choosing Use Photo or Retake, as required.' + String.fromCharCode(10) + '5. Scribble any optional messaging in white area to right, or use other discreet touch functionalities.' + String.fromCharCode(10) + '6. Optionally email off to recipient' + safariblurb + '.' + String.fromCharCode(10)); }, 7000);
}
}
}

function zoomlater() {
if (zfac != '') { document.head.innerHTML=' <style> html { zoom:' + zfac.replace(';','') + '; } </style> '; }
}

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 topcwoop() {
var thiswoopj=document.getElementById('topcanvas').toDataURL('data/jpeg', 10);
if (thiswoopj != lastwoopj) {
lastwoopj=thiswoopj;
document.getElementById('topcanvas').style.cursor='progress';
woop.document.getElementById(slideis).value=lastwoopj;
setTimeout(function(){ document.getElementById('topcanvas').style.cursor='pointer'; }, 2000);
}
}

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;
//console.log('cancontw,canconth=' + cancontw + ',' + canconth + ' cancont=' + cancont);
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();
}

function dragstart(ev) {
ev.dataTransfer.setData("text/plain", document.getElementById('topcanvas').toDataURL());
}

function dragover(ev) {
ev.preventDefault();
}

function drop(ev) {
ev.target.innerHTML = ev.dataTransfer.getData("text");
lastdrop=ev.target.innerHTML;
document.getElementById('topcanvas').setAttribute('draggable','false');
document.getElementById('target').innerHTML='<button id=tarbut onclick=\" document.getElementById(' + "'topcanvas').setAttribute('draggable','true'); document.getElementById('target').innerHTML=''; document.getElementById('starbut').style.marginTop='-50px'; document.getElementById('starbut').style.zIndex='-50'; document.getElementById('starbut').innerHTML='Drop Zone'" + '; \">Drop Zone for Canvas After Click</button>';
document.getElementById('starbut').innerHTML='';
var rectis=document.getElementById('target').getBoundingClientRect();
if (document.getElementById('mydbut')) {
rectis=document.getElementById('mydbut').getBoundingClientRect();
} else if (document.getElementById('tarbut')) {
rectis=document.getElementById('tarbut').getBoundingClientRect();
}
document.getElementById('target').setAttribute('data-mt','' + eval(-30 + eval('' + rectis.width)));
document.getElementById('target').style.height='' + rectis.width + 'px';
document.getElementById('target').style.backgroundImage='URL(' + lastdrop + ')';
document.getElementById('target').style.backgroundSize='contain';
document.getElementById('target').style.backgroundRepeat='no-repeat';
if (document.getElementById('topdragstyle').innerHTML == '') {
document.getElementById('tarbut').style.marginTop='' + eval(-30 + eval('' + rectis.width)) + 'px';
//var rectistb=document.getElementById('tarbut').getBoundingClientRect();
//document.getElementById('topdragstyle').innerHTML='<style> #tarbut { position:absolute; left:' + rectistb.left + 'px; top:' + eval(eval(0 * eval(-30 + eval('' + rectis.width))) + eval('' + rectistb.top)) + 'px; margin-top:0px !important; } </style>';
}
}

setTimeout(fixtopiframe, 2000);
</script>
</head>
<body style='background-color:orange;' onload=" if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById('target').style.display='none'; } setTimeout(cancontlook,7000);">
<table style='width:100%;'><tr style='width:100%;'><td id='lefttd'>
<canvas ondragstart="dragstart(event);" draggable="false" 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=hwpjg' 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>
<div id="target" ondrop="drop(event);" ondragover="dragover(event);" data-mt="0" style="vertical-align:bottom;display:block;background-color:transparent;">
<button id=mydbut onclick=" document.getElementById('topcanvas').setAttribute('draggable','true'); document.getElementById('target').innerHTML='<span id=tarbut style=margin-top:' + document.getElementById('target').getAttribute('data-mt') + 'px;>Drop Zone</span>'; ">Drop Zone for Canvas After Click</button>
</div>
<span id=starbut></span>
</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>
<script type='text/javascript' src='/web_share_api_test.js?canvasshare=as_necessary9867654' defer></script>
<div id=topdragstyle style=display:none;></div>
</body>
</html>