<html>
<head>
<meta charset="UTF-8">
<title>Canvas HTML Feedback Tutorial ... RJM Programming ... April 2016 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" />
<meta charset="UTF-8">
<link href="//afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>

<script type='text/javascript' src='world.js?xx=dd' defer></script>
<script language="JavaScript">
var si=false;

var filmslidenumber=1, fromfilmslidenumber=0, tofilmslidenumber=0;

var x=0, y=0, lastx=0, lasty=0;
var clickno = 0;
var first=true;
var xxoff=-680;
var yyoff=-74;

var subjectsuffix='';

var urlis='';
var titleos='';
var ddmf='';
var ihddmf='';

var xlworld = 'feedback';
var xuworld = 'Feedback';
var xuubits=document.URL.split('.htm');
var xuuubits=xuubits[0].split('/');
xlworld=xuuubits[eval(-1 + xuuubits.length)];
xuworld=xlworld.substring(0,1).toUpperCase() + xlworld.substring(1);

var isxcontact=parent.document.URL.indexOf('Contact');
if (isxcontact == -1) isxcontact=document.URL.indexOf('contact=contact');

var pseudo_sentence = "";

var score = 0.0;
var goes = 0.0;

var cf = "18px Verdana";

function wo(one,two,three) {
document.getElementById('iemoji').value=one.replace('https://emojiterra.com/','').replace('http://emojiterra.com/','').replace('//emojiterra.com/','');
document.getElementById('isubm').click();
}

function andthensubj() {
if (subjectsuffix != '') {
if (document.getElementById('subject')) {
if (document.getElementById('subject').value.indexOf(subjectsuffix) != -1) {
document.getElementById('subject').value=document.getElementById('subject').value.replace(subjectsuffix,'');
}
}
if (document.getElementById('mysubject')) {
if (document.getElementById('mysubject').value.indexOf(subjectsuffix) != -1) {
document.getElementById('mysubject').value=document.getElementById('mysubject').value.replace(subjectsuffix,'');
}
}
if (document.getElementById('myisubject')) {
if (document.getElementById('myisubject').value.indexOf(subjectsuffix) != -1) {
document.getElementById('myisubject').value=document.getElementById('myisubject').value.replace(subjectsuffix,'');
}
}
subjectsuffix='';
}
}

function athy() {
document.getElementById('iimg').innerHTML='<img style="border:8px dashed pink;" src=' + document.getElementById('thegifnamegoeshere').value + '?and=' + Math.floor(Math.random() * 23467) + '></img>';
document.getElementById('thegifnamegoeshere').value=' ';
}

function xcapture(toh, tos, toe) {
//if (navigator.userAgent.match(/Android/i)) alert('isxcontact=' + isxcontact);
//if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(700000);
var aspng=true;
if (filmslidenumber > 1) {
//alert(document.getElementById('slideshow').value);
var gbits=prompt('Leave a delay between slides in milliseconds value to send animation or make blank to send image of canvas as it stands now.','40');
if (gbits == null) gbits='4';
if (gbits != '') {
document.getElementById('delay').value=Math.floor(eval(eval(gbits) * 1.0));
subjectsuffix=' via //www.rjmprogramming.com.au/PHP/animegif/' + document.getElementById('outfile').value.replace('.gif','') + '.gif';
if (document.getElementById('subject')) {
if (document.getElementById('subject').value.indexOf(subjectsuffix) == -1) {
document.getElementById('subject').value+=subjectsuffix;
fixmyemail(document.getElementById('subject').value + ' ',1);
}
}
if (document.getElementById('mysubject')) {
if (document.getElementById('mysubject').value.indexOf(subjectsuffix) == -1) {
document.getElementById('mysubject').value+=subjectsuffix;
fixmyemail(document.getElementById('mysubject').value + ' ',1);
}
}
if (document.getElementById('myisubject')) {
if (document.getElementById('myisubject').value.indexOf(subjectsuffix) == -1) {
document.getElementById('myisubject').value+=subjectsuffix;
fixmyemail(document.getElementById('myisubject').value + ' ',1);
}
}
setTimeout(andthensubj, 12000);
document.getElementById('olbit').click();
aspng=false;
}
}

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && isxcontact == -1) {
if (document.getElementById('myiemail').value.indexOf('@') == -1) {
var femail = prompt('Please supply the Email To address', '');
if (femail == null) femail = '';
if (femail.indexOf('@') != -1) {
fixmyemail(femail, 0);
}
}
} else {
//if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(70000);
//if (isxcontact != -1 && !document.getElementById('myiemail')) alert(7);
if (document.getElementById('myiemail')) {
if (document.getElementById('myiemail').value.indexOf('@') != -1) {
// if (isxcontact != -1) alert(70);
document.getElementById('mode').value = '';
document.getElementById('ismobile').value = 'y';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
//document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
// if (isxcontact != -1) alert(700);
}
}
}
//if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(7000);
if (isxcontact == -1) {
var pretoh = elem.toDataURL("image/png",0);
if (si) {
if (document.getElementById('thegifnamegoeshere').value.trim() != '') {
document.getElementById('iimg').innerHTML='<img style="border:8px dashed pink;" src=' + document.getElementById('thegifnamegoeshere').value + '?and=' + Math.floor(Math.random() * 23467) + '></img>';
setTimeout(athy,9000);
//document.getElementById('thegifnamegoeshere').value=' ';
} else {
document.getElementById('iimg').innerHTML='<img style="border:8px dashed pink;" src=' + pretoh + '></img>';
}
if (document.getElementById('divannotation')) {
if (('' + document.getElementById('divannotation').style.top).indexOf('525') != -1) {
document.getElementById('divannotation').style.top=eval(eval(('' + document.getElementById('divannotation').style.top).replace('px','')) + 240) + 'px';
}
}
}
//toh.value = pretoh.substr(22, pretoh.length);
var xbits=pretoh.split(',');
//toh.value = pretoh.substr(eval(pretoh.indexOf(',') + 1), pretoh.length);
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(xbits[0]);
//alert(xbits[0] + ',');
toh.value = pretoh.replace(xbits[0] + ',', '');
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(70000);
if (1 == 1) {
//alert(tos.outerHTML);
tos.click();
} else {
document.getElementById('myform').submit();
}
}
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(700000);
var things = document.URL.split("?");
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert("document.getElementById('myfname').value=" + document.getElementById('myfname').value);
if (isxcontact != -1) {
if (toe.href.indexOf('body=') == -1) toe.href+='&body=';
toe.href = toe.href.split('ody=')[0].replace('fill.in.email@address',document.getElementById('myto').value).replace('tJUNK=', 't=' + encodeURIComponent(document.getElementById('mysubject').value) + '%20to%20').replace('&b','&cc=' + encodeURIComponent(document.getElementById('mycc').value) + '&bcc=' + encodeURIComponent(document.getElementById('mybcc').value) + '&b') + 'ody=' + encodeURIComponent(document.getElementById('myfeedback').value); // + (things[0] + "/~").replace("world.html/~", document.getElementById('myfname').value).replace(xxlworld + ".html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
} else {
//alert(xxlworld + 'was: ' + toe.href);
toe.href = toe.href + (things[0] + "/~").replace("world.html/~", document.getElementById('myfname').value).replace(xxlworld + ".html/~", document.getElementById('myfname').value).replace(xxlworld + ".htm/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
//alert('is: ' + toe.href);
}
// if (isxcontact != -1 && navigator.userAgent.match(/Android/i)) alert(toe.href);
if (isxcontact != -1) {
if (navigator.userAgent.match(/Android/i)) {
//toe.click();
aemail(toe);
} else {
toe.click();
}
} else {
if (document.getElementById('to').value.indexOf('@') != -1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
toe=toe;
} else {
toe.click();
}
}
}

function ChangeTutNow(selo) {
urlis=selo.value;
if (urlis.toLowerCase().indexOf('http') != 0) {
if (document.URL.indexOf(':') != -1) {
urlis=document.URL.split(':')[0] + ':' + urlis;
}
}
var fthiso=null;
var huhss=urlis.split('title='), thiso;
titleis='';
if (huhss.length > 1) {
titleis=huhss[1].replace(/_/g, " ");
elem.width = elem.width;
pseudo_sentence = 'Regarding ' + titleis + ' at ' + String.fromCharCode(10) + urlis;
cf = "16px Verdana";
if (isxcontact != -1) cf = "10px Verdana";
placetext();
cf = "18px Verdana";
if (isxcontact != -1) cf = "12px Verdana";
pseudo_sentence = 'Regarding ' + titleis;
thiso=document.getElementById('feedback');
fthiso=document.getElementById('myfeedback');
if (isxcontact != -1 && fthiso != null) {
if (fthiso.value != "") {
fthiso.value=pseudo_sentence + "\n" + fthiso.value;
thiso.value="Feedback " + pseudo_sentence;
} else {
fthiso.value=pseudo_sentence;
thiso.value="Feedback " + pseudo_sentence;
}
if (document.getElementById('myto').value != "") {
document.getElementById('mysubject').value="Feedback " + pseudo_sentence;
document.getElementById('myisubject').value="Feedback " + pseudo_sentence;
fixmyemail(document.getElementById('myto').value + ' ',0);
fixmyemail("Feedback " + pseudo_sentence + ' ',1);
}
} else {
if (thiso.value == 'Feedback') {
document.getElementById('feedback').value+=' ' + pseudo_sentence;
document.getElementById('mysubject').value=thiso.value;
document.getElementById('myisubject').value=thiso.value;
fixmyemail(thiso.value + ' ',1);
} else if (thiso.value.indexOf('Feedback ') != -1 && pseudo_sentence.indexOf(' Tutorial') != -1) {
document.getElementById('feedback').value='Feedback ' + pseudo_sentence;
document.getElementById('mysubject').value=thiso.value;
document.getElementById('myisubject').value=thiso.value;
fixmyemail(thiso.value + ' ',1);
} else if ((thiso.value + '~').indexOf(' Tutorial~') != -1 && pseudo_sentence.indexOf(' Tutorial') != -1) {
document.getElementById('feedback').value=document.getElementById('feedback').value.replace(' Tutorial','') + ' ' + pseudo_sentence.substring(pseudo_sentence.indexOf(' Tutorial'));
document.getElementById('mysubject').value=thiso.value;
document.getElementById('myisubject').value=thiso.value;
fixmyemail(thiso.value + ' ',1);
}
}
}
}

function checklast(iois) {
var swih='';
var copts='', huhs;
var sw=null, presw=iois; //top.document.getElementById('ipostings');
if (presw != null) {
var aconto = (presw.contentWindow || presw.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
sw=aconto.body; //.getElementById('tuts');
if (swih == '') {
swih=sw.innerHTML;
var isa=swih.replace('</select','<select').replace('</select','<select').replace('</select','<select').replace('</select','<select').replace('</select','<select').split('<select');
for (var iu=1; iu<isa.length; iu++) {
if (isa[iu].indexOf('tuts') != -1 && document.getElementById('ideas').innerHTML == '') {
//alert('<select' + isa[iu] + '</select>');
document.getElementById('ideas').innerHTML='Ideas: <br><select' + isa[iu] + '</select>';
}
}
}
}
}
}
}


function andlaterdo() {

document.getElementById('divannotation').innerHTML=document.getElementById('divannotation').innerHTML.replace('"black"','"blue"').replace('Annotations++','Annotations++ <input onclick="document.getElementById(' + "'" + 'canbet' + "'" + ').value=' + "'" + 'transparent' + "'" + ';" type=button value="Copy (via 2) and Paste (via 1) Parts of Canvas Above to Canvas Above"></input><br><div id=daddtofilm><input onclick="addtofilm();" value="Add to Animated Film" type="button" title="Make an Animation"></input></div>').replace('<input type="text" id="mycolour"','<input type="color" id="myrcolour" value="blue" onchange="if (this.value.toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=this.value; } document.getElementById(' + "'" + 'mycolour' + "'" + ').value=this.value;"></input> <input onblur="if (this.value.toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=this.value; }" type="text" id="mycolour"').replace('<input id="mycolour"','<input type="color" id="myrcolour" value="blue" onchange="if (this.value.toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=this.value; } document.getElementById(' + "'" + 'mycolour' + "'" + ').value=this.value;"></input> <input onblur="if (this.value.toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=this.value; } " id="mycolour"').replace("</form>","<input type=hidden id=canbet value=></input><input type=hidden name=from id=from value=''></input></form>").replace("</form>","<input type=hidden name=cc id=cc value=''></input></form>").replace("</form>","<input type=hidden name=bcc id=bcc value=''></input></form>");

document.getElementById('divannotation').style.top='525px';
document.getElementById('divannotation').style.left=10;
document.getElementById('divannotation').style.width='95%';
document.getElementById('divannotation').style.border='7px solid yellow';

document.getElementById('divannotation').style.display='block';
document.getElementById('mysubject').value = 'Feedback';
document.getElementById('myisubject').value = 'Feedback';
fixmyemail('Feedback ',1);
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
document.getElementById('from').value=document.getElementById('myfrom').value;


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 (document.getElementById('myfname')) document.getElementById('myfname').value = xlworld + "_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png";


if (document.getElementById('myform')) document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && isxcontact == -1) {
if (document.getElementById('mode')) {
document.getElementById('mode').value = '';
document.getElementById('ismobile').value = 'y';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
//document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
}
}


}

function tanimation() {
if (fromfilmslidenumber < tofilmslidenumber) {
document.getElementById('dslideshow').innerHTML='<img style="border:8px dashed lightblue;" src=' + document.getElementById('tablefilmimg' + eval(1 + fromfilmslidenumber)).src + '></img>';
fromfilmslidenumber++;
setTimeout(tanimation, 4000);
//alert(958);
} else {
document.getElementById('dslideshow').innerHTML='';
}
}

function animation() {
fromfilmslidenumber = 0;
tofilmslidenumber = eval(-1 + filmslidenumber);
document.getElementById('dslideshow').innerHTML='<img style="border:8px dashed lightblue;" src=' + document.getElementById('tablefilmimg1').src + '></img>';
location.href='#dslideshow';
fromfilmslidenumber++;
setTimeout(tanimation, 4000);
//alert(98);
}

function addtofilm() {
//alert(2);
var ptoh=elem.toDataURL('image/png',0);
//alert(22);
if (filmslidenumber == 1) {
//alert(222);
if (document.getElementById('eimg').innerHTML == '') {
if (document.getElementById('divannotation')) {
if (('' + document.getElementById('divannotation').style.top).indexOf('525') != -1) {
document.getElementById('divannotation').style.top=eval(eval(('' + document.getElementById('divannotation').style.top).replace('px','')) + 240) + 'px';
}
}
}
document.getElementById('slideshow').value=' src="' + ptoh + '" ';
document.getElementById('iimg').innerHTML='';
document.getElementById('eimg').innerHTML='<table id=tablefilm><tr id=tablefilmtr><td id=tablefilmcell1><img id=tablefilmimg1 style="border:8px dashed lightgreen;" src=' + ptoh + '></img></td></tr><tr id=tablefilmfooter><td id=tablefilmfooter1><a href=#tablefilmfooter1>Slide</a> 1 of ...</td></tr></table>';
//alert(2222);
} else {
//alert(3);
document.getElementById('iimg').innerHTML='';
document.getElementById('slideshow').value+=' src="' + ptoh + '" ';
document.getElementById('tablefilmtr').innerHTML+='<td id=tablefilmcell' + filmslidenumber + '><img id=tablefilmimg' + filmslidenumber + ' style="border:8px dashed lightgreen;" src=' + ptoh + '></img></td>';
document.getElementById('tablefilmfooter').innerHTML=document.getElementById('tablefilmfooter').innerHTML.replace(' ...',' <a href=#tablefilmfooter' + filmslidenumber + '>...</a>') + '<td id=tablefilmfooter' + filmslidenumber + '><a href=#tablefilmfooter1>Slide</a> ' + filmslidenumber + ' of ...</td>';
//alert(33);
}
//alert(4);
if (filmslidenumber == 2) {
document.getElementById('daddtofilm').innerHTML+=' <input style=display:inline-block; type=button onclick=animation(); value="Play Animation" id=banimation></input>';
}
filmslidenumber++;
}

function onloading() {
ddmf=document.getElementById('dviai').innerHTML;
ihddmf=ddmf.split('</iframe>')[1]; //.split('>')[eval(-1 + ddmf.split('</textarea>')[0].split('>').length)];
setInterval(cddmf,2900);
setTimeout(andlaterdo,3000);
elem.click();
}

function cddmf() {
var newddmf=document.getElementById('dviai').innerHTML;
if (newddmf != ddmf) {
var newihddmf=newddmf.split('</iframe>')[1]; //.split('>')[eval(-1 + newddmf.split('</textarea>')[0].split('>').length)];
if (ihddmf == '') {
ihddmf=newihddmf;
} else if (ihddmf != newihddmf && newihddmf.indexOf(ihddmf) == 0) {
var huhss=newihddmf.substring(ihddmf.length);
document.getElementById('dviai').innerHTML=document.getElementById('dviai').innerHTML.replace(newihddmf,huhss + ihddmf);
ihddmf=huhss + ihddmf;
} else {
ihddmf=newihddmf;
}
ddmf=document.getElementById('dviai').innerHTML;
}
}

function andthen() {
elem.click();
}

function placetext() {
context.font = cf;
var huhs=pseudo_sentence.split(String.fromCharCode(10)), thisy=eval(yyoff + (Math.min(y,lasty) + Math.max(y,lasty)) / 2);
for (var ii=0; ii<huhs.length; ii++) {
//alert(thisy + " via " + yyoff + " " + (Math.min(y,lasty) + Math.max(y,lasty)) / 2);
if (ii == 1 && huhs[ii].indexOf("http") == 0) {
cf = "12px Verdana";
if (isxcontact != -1) cf = "8px Verdana";
}
context.font = cf;
context.strokeText(huhs[ii].replace("ø", "ΓΈ"),eval(xxoff + 2 + Math.min(x,lastx)),thisy);
thisy+=20;
}
//gpy = gpy + 50;
}

function fixto(tvs) {
if (tvs != '') { document.getElementById('myiemail').value=tvs; document.getElementById('to').value=tvs; fixmyemail(tvs,0); document.getElementById('mode').value = ''; document.getElementById('ismobile').value = 'y'; }
}

</script>


</head>
<body align="center" onload="onloading();">
<script type='text/javascript'>
var jscontact=parent.document.URL.indexOf('Contact');
if (jscontact == -1) jscontact=document.URL.indexOf('contact=contact');
if (jscontact == -1) {
document.write('<table style=width:100%;margin-top:-10px;><tr><td><div id=dslideshow></div><h1 id=myh1 align="center">Feedback</h1></td><td style=width:90%; nowrap><div style=display:inline-block;width:100%;-webkit-overflow-scrolling:touch;overflow-x:scroll; id=dviai><form style=display:none;width:100%;-webkit-overflow-scrolling:touch;overflow-x:scroll; action=fairy_story_assistant.php method=GET target=fsa><input name=emoji id=iemoji value=></input><input type=submit id=isubm value=Submit></input></form><iframe style=display:none;width:100%;-webkit-overflow-scrolling:touch;overflow-x:scroll; id=fsa name=fsa src=></iframe></div></td></tr></table>');
document.write('<h2 align="center" id="score" style="display:none;">Score is <span id=sone>0</span> from <span id=stwo>0</span> goes</h2>');
document.write("<div align='center' style='height:240px;-webkit-overflow-scrolling:touch;overflow:scroll;'><table style='height:180px;' cellpadding=5 cellspacing=5><tr><td style='vertical-align:top;border:4px solid pink;width:33%;'>");
document.write("To: <input style='width:200px; align:right;' type='email' id='myto' onblur=\" fixto(this.value); \" value=''></input><br>");
document.write("From: <input style='width:200px; align:right;' type='email' id='myfrom' onblur=\" document.getElementById('from').value=this.value; \" value='rmetcalfe@rjmprogramming.com.au'></input><br>");
document.write("CC: <input style='width:200px; align:right;' type='email' id='mycc' onblur=\" document.getElementById('cc').value=this.value; \" value=''></input><br>");
document.write("BCC: <input style='width:200px; align:right;' type='email' id='mybcc' onblur=\" document.getElementById('bcc').value=this.value; \" value=''></input><br>");
document.write("Subject: <input style='width:200px; align:right;' type='text' id='feedback' onblur=\" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); \" value='Feedback'></input><br><input type='button' id='feedbutton' onclick=\" xcapture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail')); \" value='Send Feedback' style='background-color:yellow; align:center;'></input> <input type='button' id='feedbuttontwo' onclick=\" si=true; xcapture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail')); si=false; \" value='Send Feedback and Show Body of Email as Image' style='background-color:yellow; align:center;'></input>");
document.write("</td><td style='vertical-align:top;border:4px solid blue;width:33%;'>");
} else if (navigator.userAgent.match(/Android/i) && isxcontact != -1) {
document.write("<div align='center' style='width:100%;'><table cellpadding=5 cellspacing=5 style='width:100%;height:180px;'><tr><td style='border:4px solid pink;width:210px;'>");
document.write("To: <input style='width:160px; align:right;' type='text' id='myto' onblur=\" fixto(this.value); \" value='rmetcalfe@rjmprogramming.com.au'></input><br>");
document.write("<input style='width:160px; align:right;' type='hidden' id='myfrom' onblur=\" document.getElementById('from').value=this.value; \" value='rmetcalfe@rjmprogramming.com.au'></input>");
document.write("From: <input style='width:160px; align:right;' type='text' id='mycc' onblur=\" document.getElementById('cc').value=this.value; \" value=''></input><br>");
document.write("BCC: <input style='width:160px; align:right;' type='text' id='mybcc' onblur=\" document.getElementById('bcc').value=this.value; \" value=''></input><br>");
document.write("Subject: <input style='width:160px; align:right;' type='text' id='feedback' onblur=\" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); \" value='Feedback'></input><br><input type='button' id='feedbutton' onclick=\" xcapture(null,null,document.getElementById('myemail')); \" value='Send Feedback' style='background-color:yellow; '></input>");
document.write("</td><td style='vertical-align:top;border:4px solid blue;width:210px;float:left;'>");
} else {
document.write("<div align='center' style='width:100%;'><table cellpadding=5 cellspacing=5 style='width:100%;height:180px;'><tr><td style='border:4px solid pink;width:210px;'>");
document.write("To: <input style='width:160px; align:right;' type='email' id='myto' onblur=\" fixto(this.value); \" value='rmetcalfe@rjmprogramming.com.au'></input><br>");
document.write("<input style='width:160px; align:right;' type='hidden' id='myfrom' onblur=\" document.getElementById('from').value=this.value; \" value='rmetcalfe@rjmprogramming.com.au'></input>");
document.write("From: <input style='width:160px; align:right;' type='email' id='mycc' onblur=\" document.getElementById('cc').value=this.value; \" value=''></input><br>");
document.write("BCC: <input style='width:160px; align:right;' type='email' id='mybcc' onblur=\" document.getElementById('bcc').value=this.value; \" value=''></input><br>");
document.write("Subject: <input style='width:160px; align:right;' type='text' id='feedback' onblur=\" document.getElementById('mysubject').value=this.value; document.getElementById('myisubject').value=this.value; fixmyemail(this.value + ' ',1); \" value='Feedback'></input><br><input type='button' id='feedbutton' onclick=\" xcapture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail')); \" value='Send Feedback' style='background-color:yellow; '></input>");
document.write("</td><td style='vertical-align:top;border:4px solid blue;width:210px;float:left;'>");
}
</script>
Feedback (words<br> to augment Annotations, the position<br> of which you can double click below):<br><div style=display:inline; id=ddmyfeedback><textarea style='color=lightgray;width:200px;' rows=6 cols=40 id='myfeedback' title='Feedback' value='' onchange=" pseudo_sentence=this.value; placetext(); " onblur=" pseudo_sentence=this.value; placetext(); "></textarea></div><div style=display:inline; id=dmyfeedback contenteditable=true></div>
</td><td id='ideas' style='vertical-align:top;border:4px solid green; width:210px;height:180px; align: top;'></td>
<td id='emojis' style='vertical-align:top;border:4px solid red; float:left; height:180px; -webkit-overflow-scrolling:touch;overflow:hidden; align: top;'><iframe style='height:240px;' name='emojis' id='emojis' src='//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php#myh3'></iframe></td>
</tr></table></div>
<script type='text/javascript'>
var jjscontact=parent.document.URL.indexOf('Contact');
if (jjscontact == -1) jjscontact=document.URL.indexOf('contact=contact');
if (jjscontact == -1) {
document.write('<canvas style="margin-top:-5px;border: 5px solid green; background-color: black; opacity: 0.3;" title="Feedback" id="canvaselement" width="1350" height="200" ></canvas><br><div id=iimg></div><div id=eimg></div>');
} else {
document.write('<canvas style="margin-top:-5px;border: 5px solid green; background-color: black; opacity: 0.3;" title="Feedback" id="canvaselement" width="620" height="100" ></canvas><br><div id=iimg></div><div id=eimg></div>');
}
</script>
<script language="JavaScript">

var toggle = 0;

var elem = document.getElementById('canvaselement');
var elemLeft = eval(elem.offsetLeft + 680*0);
var elemTop = eval(elem.offsetTop + 124*0);
var context = elem.getContext('2d');
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var omyimgdata="";
var obeforetransparent="blue";
var omidatax=0;
var omidatay=0;
var omidataw=0;
var omidatah=0;
var allowable=false;

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
if (first) elem.width = elem.width;
first=false;
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;


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;
//xxoff=0;
//yyoff=0;
} 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;
}
xxoff=0;
yyoff=0;
if ((document.getElementById('canbet').value == 'transparent' || document.getElementById('mycolour').value == 'Transparent') && !allowable) {
allowable=true;
} else if ((document.getElementById('canbet').value == 'transparent' || document.getElementById('mycolour').value == 'Transparent') && allowable) {
allowable=false;
document.getElementById('canbet').value='';
//alert(obeforetransparent);
if (obeforetransparent != "") {
//omyimgdata=context.getImageData(eval(Math.min(x,lastx)), eval(Math.min(y,lasty)), Math.abs(x - lastx), Math.abs(y - lasty));
omyimgdata=elem.toDataURL('image/png',0);
//alert(omyimgdata);
document.getElementById('myim').style.width=elem.style.width;
document.getElementById('myim').style.height=elem.style.height;
document.getElementById('myim').src=omyimgdata;
omidatax=eval(Math.min(x,lastx));
omidatay=eval(Math.min(y,lasty));
omidataw=Math.abs(x - lastx);
omidatah=Math.abs(y - lasty);
document.getElementById('mycolour').value=obeforetransparent;
}
} else if (omyimgdata != "") {
//context.putImageData(omyimgdata, x, y); //, omidataw, omidatah);
//alert(',' + omidatax + ',' + omidatay + ',' + omidataw + ',' + omidatah + ',' + x + ',' + y + ',' + omidataw + ',' + omidatah);
context.drawImage(document.getElementById('myim'),omidatax,omidatay,omidataw,omidatah, x, y,omidataw,omidatah); //, omidataw, omidatah);
//alert('' + x + ',' + y + ' paste');
omyimgdata="";
}

}





clickno = clickno + 1;


var r = Math.floor((Math.random()*256)+0);
var g = Math.floor((Math.random()*256)+0);
var b = Math.floor((Math.random()*256)+0);
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];

elem.style.backgroundColor = thiscol;

}, false);

elem.addEventListener('touchstart', function(event) {
if (first) elem.width = elem.width;
first=false;
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;


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;
//xxoff=0;
//yyoff=0;
} 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;
}
xxoff=0;
yyoff=0;
if ((document.getElementById('canbet').value == 'transparent' || document.getElementById('mycolour').value == 'Transparent') && !allowable) {
allowable=true;
} else if ((document.getElementById('canbet').value == 'transparent' || document.getElementById('mycolour').value == 'Transparent') && allowable) {
allowable=false;
document.getElementById('canbet').value='';
//alert(obeforetransparent);
if (obeforetransparent != "") {
//omyimgdata=context.getImageData(eval(Math.min(x,lastx)), eval(Math.min(y,lasty)), Math.abs(x - lastx), Math.abs(y - lasty));
omyimgdata=elem.toDataURL('image/png',0);
//alert(omyimgdata);
document.getElementById('myim').style.width=elem.style.width;
document.getElementById('myim').style.height=elem.style.height;
document.getElementById('myim').src=omyimgdata;
omidatax=eval(Math.min(x,lastx));
omidatay=eval(Math.min(y,lasty));
omidataw=Math.abs(x - lastx);
omidatah=Math.abs(y - lasty);
document.getElementById('mycolour').value=obeforetransparent;
}
} else if (omyimgdata != "") {
//context.putImageData(omyimgdata, x, y); //, omidataw, omidatah);
//alert(',' + omidatax + ',' + omidatay + ',' + omidataw + ',' + omidatah + ',' + x + ',' + y + ',' + omidataw + ',' + omidatah);
context.drawImage(document.getElementById('myim'),omidatax,omidatay,omidataw,omidatah, x, y,omidataw,omidatah); //, omidataw, omidatah);
//alert('' + x + ',' + y + ' paste');
omyimgdata="";
}

}





clickno = clickno + 1;


var r = Math.floor((Math.random()*256)+0);
var g = Math.floor((Math.random()*256)+0);
var b = Math.floor((Math.random()*256)+0);
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];

elem.style.backgroundColor = thiscol;

}, false);



</script>
<img src='' title='' alt=''></img>
<table><tr><td>Your email looks as above</td></tr></table>
<iframe id='ipostings' style='display:none;' src='//www.rjmprogramming.com.au/Welcome.html' onload='checklast(this);'></iframe>
<img id='myim' style='dispay:none;' src='' title='' alt=''></img>
<form target='gifa' style='display:none;' action='//www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php' method='POST'>
<input type=hidden id=slideshow name=slideshow value=''></input>
<input type=hidden id=delay name=delay value='4000'></input>
<input type=hidden id=stitle name=stitle value='Animated Feedback'></input>
<input type=hidden id=outfile name=outfilex value='animated_gif_slideshow'></input>
<input id=olbit type=submit value=Submit></input>
</form><br>
<iframe name=gifa id=gifa style='display:none;' src='//www.rjmprogramming.com.au/PHP/animegif/tutorial_to_animated_gif.php'></iframe>
<input type=hidden id=thegifnamegoeshere value=''></input>
</body>
</html>