<!doctype html>
<html>
<head>
<title>Canvas HTML Element What We Stand For Primer Tutorial ... RJM Programming ... April 2015 ... 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" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='worldly.js?d=fddf' defer></script>
<style>
body {
background-color: lightblue;
padding-top: 20px;
background: -webkit-linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent;
background: -o-linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent;
background: -moz-linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent;
background: linear-gradient(180deg, rgb(255, 255, 0), rgb(0, 255, 255)); /* linear-gradient(center top , rgb(255, 255, 0), rgb(0, 255, 255)) repeat scroll 0% 0% transparent */
}
</style>

<script language="JavaScript">

var saveemoji='', expat='';
var allowc = false;
var ie = 11;
var mode = 1;
var amode = 1;
var fx=0, fy=0;
var first=true;
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var xscalestuff="Scale Width: <input style='width:120px;' onchange='scalex=this.value;' min='0.0000001' id='scalex' type='number' value='1.0000000' step='0.0000001'></input> Height: <input style='width:120px;' onchange='scaley=this.value;' min='0.0000001' id='scaley' type='number' value='1.0000000' step='0.0000001'></input><br>Cropping X: <input style='width:100px;' onchange='cropx=this.value;' min='0.0' id='cropx' type='number' value='0.00' step='0.01'></input> Y: <input style='width:100px;' onchange='cropy=this.value;' min='0.01' id='cropy' type='number' value='0.00' step='0.01'></input><br>Cropping Width<select id='cselwidth'><option value='%'>%</option><option value='px'>px</option></select>: <input style='width:60px;' onchange='cropwidth=this.value;' min='0.01' id='cropwidth' type='number' value='100.00' step='0.01'></input> Height<select id='cselheight'><option value='%'>%</option><option value='px'>px</option></select>: <input style='width:60px;' onchange='cropheight=this.value;' min='0.01' id='cropheight' type='number' value='100.00' step='0.01'></input><br>";

//var elem;
//var elemLeft = 0;
var cf = "18px Verdana";
//var elemTop = 0;
//var context;
var elements = [];
var img;
var x=0, y=0, lastx=0, lasty=0;
var clickno = 0;
var ourlat, ourlong;

var xlworld = 'world';
var xuworld = 'World';
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 retx = 0.0, rety = 0.0;

var q = '';
var twp = '4' + '5%;';
var we600 = 'wid' + 'th="600"';
var fpc = '5' + '0%';
var af = 'qm' + 'yf';
var floating_form = true; // two modes of use ... if true can make the canvas bigger ... which may affect "var threehundred" below

var threehundred=300;

var topic='';
var issuedata=[''];
var thisissue='';
var ofstring=' 1';
var iof=1;

var twothousand=2000; //4000;
var ask="y";
var info=" ... ";
var infoemail="fill.in.email@address";
var gptext="";

var ConBubbleColour = "red";
var ProBubbleColour = "green";
var ConBigFontSize = "24px";
var ProBigFontSize = "24px";
var ConNormalFontSize = "20px";
var ProNormalFontSize = "20px";
var ConFontName = "Verdana";
var ProFontName = "Verdana";
var ConNormalFontName = "Verdana";
var ConBigFontName = "Verdana";
var ProNormalFontName = "Verdana";
var ProBigFontName = "Verdana";

var cfb = ProBigFontSize + " " + ProBigFontName; //"18px Verdana";
var cf = ProNormalFontSize + " " + ProNormalFontName; //"14px Verdana";

var firsttime=1;

var iscanvas=-1;

var score=3000;
var goes=0;

var wis=400;
var his=400;

//var elemzero;
//var elemLeftzero;
//var elemTopzero;
//var contextzero;

var partx = 0;
var party = 0;

var firstX = -999.0;
var firstY = -999.0;
var secondX = -999.0;
var secondY = -999.0;

var yourfirstX = -999.0;
var yourfirstY = -999.0;
var yoursecondX = -999.0;
var yoursecondY = -999.0;

var elem; //= document.getElementById('canvaselement');
var elemLeft; //= elem.offsetLeft;
var elemTop; //= elem.offsetTop;
var context; //= elem.getContext('2d');

var grd, grdf, grds;
var scratch=null, pattern=null, scratchc=null;

//var elemzero; //= document.getElementById('canvaselement');
//var elemLeftzero; //= elem.offsetLeft;
//var elemTopzero; //= elem.offsetTop;
//var contextzero; //= elem.getContext('2d');

if (!String.fromCodePoint) { // thanks to http://xahlee.info/js/js_unicode_code_point.html
// ES6 Unicode Shims 0.1 , © 2012 Steven Levithan , MIT License
String.fromCodePoint = function fromCodePoint () {
var chars = [], point, offset, units, i;
for (i = 0; i < arguments.length; ++i) {
point = arguments[i];
offset = point - 0x10000;
units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
chars.push(String.fromCharCode.apply(null, units));
}
return chars.join("");
}
}

function andso(proposed, tmode, askidea) {
var fs="", fn="";

pattern=null;

if (proposed.indexOf(' ') == -1 || 1 == 1) {
if (askidea == "Big") {
context.shadowBlur = 1;
context.shadowColor = "black";
if (scratch && !pattern) {
pattern = context.createPattern(scratch, 'repeat');
}
//return pattern;
} else {
context.shadowBlur = 2;
context.shadowColor = "black";
if (scratch && !pattern) {
pattern = context.createPattern(scratch, 'repeat');
}
//return pattern;
}
}

if (askidea == "Big" || askidea == "Normal") {
fs = eval(tmode + askidea + "FontSize");
fn = eval(tmode + askidea + "FontName");
return fs + " " + fn;
}
return eval(tmode + askidea);
}

function fontcolours(which,ia) {
var curcolour = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "BubbleColour");
var curbigfontsize = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "BigFontSize");
var curfontname = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "FontName");
var curbigfontname = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "BigFontName");
var curnormalfontsize = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "NormalFontSize");
var curnormalfontname = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "NormalFontName");

var defis = curcolour + " " + curnormalfontsize + " " + curnormalfontname + "/" + curbigfontsize + " " + curbigfontname;
if (ia == null) return defis;
var ylmk = prompt("Here are " + which + " display parameters currently for 'Colour Normal/Big' What We Stand For Report considerations. Change, keeping the format the same, as you desire. You can leave out things as you move right (ie. you can just give a colour, for instance).", defis);
if (ylmk != null) {
if (ylmk != defis && ylmk.length > 0) {
var normb = ylmk.split(" ");
if (normb.length == 1) {
eval(which + "BubbleColour='" + ylmk + "'");
ia.innerHTML = which;
ia.style.color = ylmk;
} else {
eval(which + "BubbleColour='" + normb[0] + "'");
ia.innerHTML = which;
ia.style.color = normb[0];
var normbb = (ylmk.replace(normb[0] + " ", "")).split("/");
var normbbb = normbb[0].split(" ");
if (normbb.length == 1) {
if (normbbb[0].length > 0) {
eval(which + "NormalFontSize='" + normbbb[0] + "'");
if (normbbb.length > 1) {
eval(which + "NormalFontName='" + normbb[0].replace(normbbb[0] + " ", "") + "'");
eval(which + "FontName='" + normbb[0].replace(normbbb[0] + " ", "") + "'");
ia.style.fontFamily = normbb[0].replace(normbbb[0] + " ", "");
}
}
} else {
if (normbbb[0].length > 0) {
eval(which + "NormalFontSize='" + normbbb[0] + "'");
if (normbbb.length > 1) {
eval(which + "NormalFontName='" + normbb[0].replace(normbbb[0] + " ", "") + "'");
}
}
normbbb = normbb[1].split(" ");
if (normbbb[0].length > 0) {
eval(which + "BigFontSize='" + normbbb[0] + "'");
if (normbbb.length > 1) {
eval(which + "BigFontName='" + normbb[1].replace(normbbb[0] + " ", "") + "'");
ia.style.fontFamily = normbb[1].replace(normbbb[0] + " ", "");
}
}
}
}
}

curcolour = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "BubbleColour");
curbigfontsize = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "BigFontSize");
curfontname = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "FontName");
curbigfontname = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "BigFontName");
curnormalfontsize = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "NormalFontSize");
curnormalfontname = eval(which.replace('Not so much','Con').replace('Definitely', 'Pro') + "NormalFontName");
defis = curcolour + " " + curnormalfontsize + " " + curnormalfontname + "/" + curbigfontsize + " " + curbigfontname;
ia.title = which + " colour and normal font / big font is " + defis + " ... click to change.";
}
}

function delit(inrec,inid) {
if (inrec != '') {
var fid=inid.replace("mysel", "issue");
issuedata[eval(inrec)] = ',0';
//alert(fid);
document.getElementById(fid).focus();
party = 0;
}
}

function etc(iniof) {
var ij, suff="";
var upto=eval(iniof.replace(" ",""));
for (ij=1; ij<=upto; ij++) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (ij == 1) {
suff="   ";
} else if (issuedata[eval(-1 + ij)] != ',0') {
suff=suff.replace("   ", "  <a href='#' title='Delete designated issue number of link to right ...' style='text-decoration:none;'>x</a> ") + "<a href='#' onclick=\" delit(this.title,'" + q + "mysel'); \" title=\"" + eval(-1 + ij) + "\">" + eval(-1 + ij) + "</a> ";
}
} else if (issuedata[eval(-1 + ij)] != ',0') {
if (ij == 1) {
suff=" <select id=" + q + "mysel onchange=' delit(this.value,this.id); ' title='Delete designated issue number'><option value='' selected></option></select>";
} else {
suff=suff.replace("></option>", ">x</option>").replace("<option ", "<option value=" + eval(-1 + ij) + ">x" + eval(-1 + ij) + "</option><option ");
}
}
}
return iniof + suff;
}

function effectiveDeviceWidth() { // thanks to http://stackoverflow.com/questions/9477028/how-to-programmatically-find-the-device-width-in-phonegap-jquery-mobile
var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
// iOS returns available pixels, Android returns pixels / pixel ratio
// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
deviceWidth = deviceWidth / window.devicePixelRatio;
}
return deviceWidth;
}

function makeitshow() {
if (document.getElementById(q + 'myf').style.display == 'none') {
document.getElementById(q + 'myf').style.display = 'inline';
setTimeout(allowcfalse, 2000);
document.getElementById(q + 'issue').focus();
}
}

function checkfloat(firstgo) { // cater for new floating form idea ... 1/4/2015
var ok=1;
if (floating_form) {
if (document.body.innerHTML.indexOf(af) == -1 && firstgo && document.URL.indexOf("nofloat") != -1) {
firstgo = false;
floating_form = false;
ok = 0;
}
if (document.body.innerHTML.indexOf(af) == -1 && firstgo) {
var dw = effectiveDeviceWidth();
var omyfih = document.getElementById('myf').innerHTML;
omyfih = omyfih.replace(/rating/g, "qrating");
omyfih = omyfih.replace(/weighting/g, "qweighting");
omyfih = omyfih.replace(/topic/g, "qtopic");
omyfih = omyfih.replace(/issue/g, "qissue");
omyfih = omyfih.replace(/bact/g, "qbact");
omyfih = omyfih.replace(/esnap/g, "qesnap");
omyfih = omyfih.replace(/eisnap/g, "qeisnap");
omyfih = omyfih.replace(/mycnt/g, "qmycnt");
omyfih = omyfih.replace(/thisqissue/g, "thisissue");
omyfih = omyfih.replace(/qissuedata/g, "issuedata");
threehundred = eval(dw / 2);
//alert(dw);
var xx=document.getElementById('myfname2').value;
var xxx=document.getElementById('mylemail').value;
document.body.innerHTML = document.body.innerHTML.replace(fpc, '100%').replace(we600, 'width="' + dw + '"').replace(twp, '4' + '5%;display:none;') + "<form onsubmit='return false;' id='" + af + "' action='#' style='opacity:0.8; z-index:5; position:absolute; top: 10px; left: " + eval(dw - 300) + "px; border: 3px solid red; background-color: pink;'><h1> " + document.getElementById('myh1').innerHTML.replace('Game', 'Report').replace('gsc', 'qgsc').replace(/nofloat/g, 'float') + "</h1>" + omyfih + "</form>";
document.getElementById('myfname2').value = xx;
document.getElementById('mylemail').value = xxx;

elem = document.getElementById('canvaselement');
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
elem.width = eval(threehundred * 2);
}
context = elem.getContext('2d');

document.getElementById('myf').style.display = 'none';
q = 'q';
setTimeout(allowcfalse, 2000);
document.getElementById(q + 'topic').focus();
setInterval(makeitshow, 8000);
}
}

if (!firstgo && ok != 0) {
if (floating_form) {
location.href = "whatdowestandfor.html?float=float";
} else {
location.href = "whatdowestandfor.html?nofloat=nofloat";
}
}
}

function measureTextHeight(ctx, left, top, width, height) { // thanks to https://stackoverflow.com/questions/1134586/how-can-you-find-the-height-of-text-on-an-html-canvas

// Draw the text in the specified area
//ctx.save();
//ctx.translate(left, top + Math.round(height * 0.8));
//ctx.mozDrawText('gM'); // This seems like tall text... Doesn't it?
//ctx.restore();

// Get the pixel data from the canvas
var data = ctx.getImageData(left, top, width, height).data,
first = false,
last = false,
r = height,
c = 0;

// Find the last line with a non-white pixel
while(!last && r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
last = r;
break;
}
}
}

// Find the first line with a non-white pixel
while(r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
first = r;
break;
}
}

// If we've got it then return the height
if(first != r) return last - first;
}

// We screwed something up... What do you expect from free code?
return 0;
}

function emojicodepoints() {
if (expat != '') {
saveemoji=prompt("Optionally use as background to circles Emoji Codepoint(s) eg. Your Answer Last Time (" + expat + ") or Australian Flag (" + String.fromCodePoint(127462) + String.fromCodePoint(127482) + ") would be 127462.127482", saveemoji);
} else {
saveemoji=prompt("Optionally use as background to circles Emoji Codepoint(s) eg. Australian Flag (" + String.fromCodePoint(127462) + String.fromCodePoint(127482) + ") would be 127462.127482", saveemoji);
}
if (saveemoji == null) { saveemoji=""; }
if (saveemoji.trim() != "") { emojipattern(saveemoji); } else { scratch=null; }
}

function emojipattern(inpat) {
if (('' + inpat) != '') {
if (('' + inpat + ' ').substring(0,1) >= '0' && ('' + inpat + ' ').substring(0,1) <= '9') {
inpat=eval("String.fromCodePoint(" + inpat.replace(/\./g, ") + String.fromCodePoint(") + ")");
expat=inpat;
scratch=document.getElementById('scratch');
scratchc=scratch.getContext('2d');
} else {
scratch=document.getElementById('scratch');
scratchc=scratch.getContext('2d');
scratch.width=eval(24 * inpat.length);
scratch=document.getElementById('scratch');
scratchc=scratch.getContext('2d');
}
scratchc.font="24px Verdana";
scratchc.strokeStyle='blue';
scratchc.strokeText(inpat, 0, scratch.height); //String.fromCodePoint(127462) + String.fromCodePoint(127482), 0, scratch.height); //71);
scratchc.stroke();
var thi=measureTextHeight(scratchc, 0, 0, scratch.width, scratch.height); //scratchc.measureText(String.fromCodePoint(127462) + String.fromCodePoint(127482)).height;
var twi=scratchc.measureText(inpat).width;
//alert(thi);
scratch=document.getElementById('scratch');
scratchc=scratch.getContext('2d');
//alert('' + twi + ',' + thi);
scratch.width=twi;
scratch.height=thi;
scratch.style.width='' + twi + 'px';
scratch.style.height='' + thi + 'px';
scratchc.font="24px Verdana";
scratchc.strokeStyle='blue';
scratchc.strokeText(inpat, 0, scratch.height); //71);
scratchc.stroke();
}
}

function onl() {
saveemoji=(location.search.split('codepoints=')[1] ? decodeURIComponent(location.search.split('codepoints=')[1].split('&')[0]) : '');
emojipattern(saveemoji);
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();
document.getElementById('myfname2').value = "whatdowestandfor_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png";

// New floating form logic 1/4/2015
checkfloat(true);
}

function partwipe() {
context.clearRect ( partx , party , elem.width, elem.height);
}

function andthen() {
context.setTransform(1, 0, 0, 1, 0, 0);
partwipe(); // context.clearRect ( 0 , 0 , elem.width, elem.height);
//contextzero.setTransform(1, 0, 0, 1, 0, 0);
//contextzero.clearRect ( 0 , 0 , elemzero.width, elemzero.height );

yourfirstX = -999.0;
yourfirstY = -999.0;
nextbit();
}

function nextyourbit() {
context.strokeStyle = "pink";
context.beginPath();
context.shadowBlur = 7;
context.shadowColor = "black";
context.arc((yourfirstX + ((secondX - firstX) / 2.0)), (yourfirstY + ((secondY - firstY) / 2.0)), (Math.sqrt((secondX - firstX)*(secondX - firstX) + (secondY - firstY)*(secondY - firstY)) / 2.0),0,2*Math.PI);
context.stroke();

context.fillStyle = "yellow";
context.beginPath();
context.shadowBlur = 7;
context.shadowColor = "black";
context.arc(yourfirstX, yourfirstY,2,0,2*Math.PI);
context.fill();

context.strokeStyle = "yellow";
context.beginPath();
context.moveTo(yourfirstX, yourfirstY);
context.lineTo(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY)));
context.stroke();

context.fillStyle = "green";
context.beginPath();
context.shadowBlur = 7;
context.shadowColor = "black";
context.arc(eval(yourfirstX + (secondX - firstX)), eval(yourfirstY + (secondY - firstY)),5,0,2*Math.PI);
context.fill();

var stuff="You missed the What We Stand For by (" + eval(yoursecondX - (yourfirstX + (secondX - firstX))) + "," + eval(yoursecondY - (yourfirstY + (secondY - firstY))) + ")";
goes = goes + 1;
score = eval(score - Math.abs(eval(yoursecondX - (yourfirstX + (secondX - firstX)))) - Math.abs(eval(yoursecondY - (yourfirstY + (secondY - firstY)))));
document.getElementById('myh3').innerHTML = "Score: " + score + " Goes: " + goes + "<br>" + stuff.replace("You missed the What We Stand For by (0,0)", "Congratulations! Hole in one!");
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
info=(" ... " + stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!").replace(/ /g, "%20");
var xinfoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
if (xinfoemail.indexOf("@") != -1) infoemail=xinfoemail;
if (xinfoemail.indexOf("@") != -1) {
document.getElementById('mymobile2').value=document.getElementById('myemail').href.replace('T&body=', 'T' + info + '&body=').replace('fill.in.email@address', infoemail);
context.strokeStyle = "blue";
//context.font = cf;
context.font = andso(cf, "Pro", "Normal");
context.strokeText((stuff).replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!").replace(" the ", " "),5,30);
context.strokeText((" ... " + "Score: " + score + " Goes: " + goes).replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!").replace(" the ", " "),5,60);
}
setTimeout(andthen, twothousand);
} else {
info=(" ... " + stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!").replace(/ /g, "%20");
gptext=(stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!");
var myans="";
if (ask != "") {
if (ask == "y" && document.getElementById('mylemail').value.replace("fill.in.email@address", "") == "") {
myans=prompt(stuff.replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!") + " ... and you can email snapshot by answering with anything (eg. email address) or Cancel for no email, ever ... NB. on next click (or double click) helper line should appear", document.getElementById('mylemail').value.replace("fill.in.email@address", ""));
if (myans == null) {
ask="";
} else {
ask="Y";
}
} else {
myans=prompt(stuff.replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!") + " ... and you can email snapshot by answering with anything (eg. email address) or Cancel for no email ... NB. on next click (or double click) helper line should appear", document.getElementById('mylemail').value.replace("fill.in.email@address", ""));
}
} else {
alert(stuff.replace("You missed the What We Stand For by (0,0)", "Congratulations! What We Stand For!"));
}
if (myans != null) {
if (myans != "") {
if (myans.indexOf("@") != -1) {
infoemail=myans;
document.getElementById('mylemail').value=myans.replace("fill.in.email@address", "");
//alert("3:" + document.getElementById('mylemail').value);

document.getElementById('myiframe').src='./whatdowestandfor.php?set=' + myans.replace("fill.in.email@address", "");
} else {
infoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
}
snapshot();
}
}
info="";
infoemail="fill.in.email@address";
andthen();
}

}

function nextbit() {
if (firsttime == 1) {
var pemail=prompt("Optionally, if you want to email snapshot What Do We Stand For Reports, who would it be to? Cancel for no emails in this session.", document.getElementById('mylemail').value.replace("fill.in.email@address", ""));
if (pemail != null) {
if (pemail.replace("fill.in.email@address", "").indexOf("@") != -1) {
document.getElementById('mylemail').value=pemail.replace("fill.in.email@address", "");
document.getElementById('myh2').innerHTML = "Email " + pemail.replace("fill.in.email@address", "") + (" <br>via click/touch outside canvases<br>").substring(0,5) + document.getElementById('myh2').innerHTML;
document.getElementById('myiframe').src='./whatdowestandfor.php?set=' + pemail.replace("fill.in.email@address", "");
twothousand=9000;
//alert("1:" + document.getElementById('mylemail').value);
}
} else {
ask="";
}
firstX = 5;
} else {
firstX = Math.floor((Math.random()*wis)+50);
}
firstY = Math.floor((Math.random()*his)+50);
//contextzero.beginPath();
//contextzero.lineWidth="2";
//contextzero.fillStyle = "green";
//contextzero.strokeStyle="black"; // Black path
//contextzero.moveTo(firstX, firstY);
if (firsttime == 1) {
secondX = 5;
} else {
secondX = Math.floor((Math.random()*wis)+50);
}
secondY = Math.floor((Math.random()*his)+50);

//contextzero.lineTo(secondX, secondY);
//contextzero.stroke();
//contextzero.fillStyle = "yellow";
//contextzero.beginPath();
//contextzero.arc(((secondX + firstX) / 2.0), ((secondY + firstY) / 2.0), (Math.sqrt((secondX - firstX)*(secondX - firstX) + (secondY - firstY)*(secondY - firstY)) / 2.0),0,2*Math.PI);
//contextzero.fill();

//contextzero.beginPath();
//contextzero.lineWidth="1";
//contextzero.fillStyle = "green";
//if (firsttime == 1) {
//contextzero.strokeStyle="magenta";
//} else {
//contextzero.strokeStyle="brown"; // Brown path
//}
//contextzero.moveTo((firstX - ((secondY - firstY) / 2.0)), (firstY + ((secondX - firstX) / 2.0)));
//contextzero.lineTo((firstX + ((secondY - firstY) / 2.0)), (firstY - ((secondX - firstX) / 2.0)));
//contextzero.stroke();

firsttime=0;
}

function drawt() {
onl();

document.getElementById(q + 'bactcon').title = document.getElementById(q + 'bactcon').title + " is " + fontcolours("Not so much", null) + " ... click to change.";
document.getElementById(q + 'bactpro').title = document.getElementById(q + 'bactpro').title + " is " + fontcolours("Definitely", null) + " ... click to change.";

//elemzero = document.getElementById('canvaselementzero');
//elemLeftzero = elemzero.offsetLeft;
//elemTopzero = elemzero.offsetTop;

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
twothousand=9000;
wis = eval(wis / 2);
//elemzero.width = eval(500 / 2);
//elemzero.style.left = eval(510 / 2);

//contextzero = elemzero.getContext('2d');
if (document.URL.indexOf("nofloat") != -1) {
setTimeout(nextbit, 1000);
//document.getElementById(q + 'myf').style.zIndex = "2";
} else {
setTimeout(nextbit, 1000);
}
} else {
firsttime=0;
//document.getElementById('mylemail').style.display='block';

//contextzero = elemzero.getContext('2d');
nextbit();
}

}

function ourcapture(toh, tos, toe, toehref) {
//alert(0);
var things = document.URL.split("?");
var tis=toehref.split("body=");
toe.href = tis[0] + "body=" + (things[0].replace("#","") + "/~").replace("whatdowestandfor.html/~", document.getElementById('myfname2').value).replace("index.html/~", document.getElementById('myfname2').value).replace("//~", "/" + document.getElementById('myfname2').value).replace("/~", "/" + document.getElementById('myfname2').value).replace("whatdowestandfor.htm/~", document.getElementById('myfname2').value).replace("index.html/~", document.getElementById('myfname2').value).replace("//~", "/" + document.getElementById('myfname2').value).replace("/~", "/" + document.getElementById('myfname2').value);
var pretoh = elem.toDataURL();
toh.value = pretoh.substr(22, pretoh.length);
tos.click();
//alert(1);
if (twothousand == 2000) {
//alert(toe.href);
toe.click();
//alert(111);
} else {
//alert(1111);
document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Email ', 'Emailed ');
//alert(11111);
}
//alert(10);
setTimeout(onl, 2000);
}

function presnapshot() {
if (yourfirstX != -999.0 || yourfirstY != -999.0) {
infoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
if (infoemail.indexOf("@") != -1) snapshot();
return infoemail;
}
return '';
}

function snapshot() {
var ik=0;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
var xinfoemail=document.getElementById('mylemail').value.replace("fill.in.email@address", "");
if (xinfoemail.indexOf("@") != -1) {
var bem=document.getElementById('myemail').href.split("&body");
if (bem.length > 1) {
document.getElementById('mymobile2').value=(bem[0] + "&body=").replace('For&body=', 'For' + info + '&body=').replace('fill.in.email@address', xinfoemail);
} else {
document.getElementById('mymobile2').value=document.getElementById('myemail').href.replace('For&body=', 'For' + info + '&body=').replace('fill.in.email@address', xinfoemail);
}
if (document.getElementById(q + 'esnap').value.indexOf("@") == -1) {
document.getElementById(q + 'esnap').value = 'Emailed ' + xinfoemail + ' Snapshot';
} else if (document.getElementById(q + 'esnap').value.indexOf("Email ") != -1) {
document.getElementById(q + 'esnap').value = 'Emailed ' + xinfoemail + ' Snapshot';
}
}
//alert(document.getElementById('mymobile2').value);
ourcapture(document.getElementById('mydurl2'),document.getElementById('submit2'),document.getElementById('myemail'),document.getElementById('myemail').href.replace('For&body=', 'For' + info + '&body=').replace('fill.in.email@address', xinfoemail));
ik=1;
} //else {
//context.strokeStyle = "blue";
//context.font = cf;
//var pgt=gptext.split(" ... ");
//context.strokeText(pgt[0].replace(" the ", " "),5,30);
//context.strokeText(pgt[1].replace(" the ", " "),5,60);
//}
if (ik == 0) ourcapture(document.getElementById('mydurl2'),document.getElementById('submit2'),document.getElementById('myemail'),document.getElementById('myemail').href.replace('For&body=', 'For' + info + '&body=').replace('fill.in.email@address', infoemail));
}

function postic() {
iscanvas=0;
}

function resetic() {
iscanvas=1;
document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Emailed ', 'Email ');
//setTimeout(postic,400);
}

function later() {
document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Emailed ', 'Email ');
if (iscanvas != 1) { if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (ask != '') { iscanvas=-1; var xif=presnapshot(); if (xif.indexOf('@') != -1) { document.getElementById('myh2').innerHTML=document.getElementById('myh2').innerHTML.replace('Email ', 'Emailed '); } } } }
iscanvas=0;
}

function ourdraw() {
var ii, total=0, prototal=0, contotal=0, things, ithing=0, biggestprod=0, biggestcond=0, dzero=0.0;
var diameters=[0], thisxpro=35, thisxcon=eval(eval('' + threehundred) + 30), thisypro=90, thisycon=90, offs, iii;
var magnification = 5.0, offset=0;

thisxcon += 5;

if (floating_form) document.getElementById(q + 'myf').style.display = 'none';

//alert(1);
context.strokeStyle = "black";
context.font = andso(cfb, "Pro", "Big");
topic = document.getElementById(q + 'topic').value.replace(/\n/g, "<br>").replace(",", " ");
info = "%20...%20regarding%20" + topic.replace(/ /g, "%20").replace(/<br>/g, "%20");
//alert(11);
if (topic.indexOf("<br>") != -1) {
offs = topic.split("<br>");
context.strokeText(offs[0],105, eval(offset + 30));
for (ii=1; ii<offs.length; ii++) {
offset = eval(30 + offset);
context.strokeText(offs[ii],105, eval(offset + 30));
}
} else {
context.strokeText(document.getElementById(q + 'topic').value,105, eval(offset + 30));
}
//alert(111);

context.beginPath();
context.lineWidth="2";
context.strokeStyle="black"; // Black path
context.moveTo(20, eval(offset + 40));
context.lineTo(eval(threehundred * 2), eval(offset + 40));
context.stroke();
//alert(1111);
context.beginPath();
context.lineWidth="2";
context.strokeStyle="brown"; // Black path
context.moveTo(threehundred, eval(offset + 40));
context.lineTo(threehundred, 1500);
context.stroke();

//context.strokeStyle = "green";
context.strokeStyle = andso("green", "Pro", "BubbleColour");
//context.font = cfb;
context.font = andso(cfb, "Pro", "Big");
context.strokeText("Definitely",55,eval(offset + 64));

context.strokeStyle = andso("red", "Con", "BubbleColour");
//context.font = cfb;
context.font = andso(cfb, "Con", "Big");
context.strokeText("Not so much",eval(threehundred + 55),eval(offset + 64));
context.beginPath();
context.lineWidth="2";
context.strokeStyle="black"; // Black path
context.moveTo(20, eval(offset + 70));
context.lineTo(eval(threehundred * 2), eval(offset + 70));
context.stroke();

//alert(11111);

for (ii=1; ii<issuedata.length; ii++) {
things = issuedata[ii].split(",");
ithing = eval((things[1].replace("-", "")));
if (issuedata[ii].indexOf(",-") != -1) {
diameters.push(eval(-2.0 * Math.sqrt((ithing / Math.PI))));
if (biggestcond < eval(2.0 * Math.sqrt((ithing / Math.PI)))) biggestcond = eval(2.0 * Math.sqrt((ithing / Math.PI)));
//contotal = eval(contotal + ithing); // (things[1].replace("-", "")));
contotal += ithing; // (things[1].replace("-", "")));
//total = eval(total - ithing); //(things[1].replace("-", "")));
total -= ithing; //(things[1].replace("-", "")));
//alert("Con: " + issuedata[ii] + " contotal=" + contotal + " prototal=" + prototal + " total=" + total + " thisdiameter=" + diameters[ii]);
} else {
if (biggestprod < eval(2.0 * Math.sqrt((ithing / Math.PI)))) biggestprod = eval(2.0 * Math.sqrt((ithing / Math.PI)));
diameters.push(eval(2.0 * Math.sqrt((ithing / Math.PI))));
//prototal = eval(prototal + ithing); //(things[1]));
prototal += ithing; //(things[1]));
//total = eval(total + ithing); // (things[1]));
total += ithing; //(things[1].replace("-", "")));
//alert("Con: " + issuedata[ii] + " contotal=" + contotal + " prototal=" + prototal + " total=" + total + " thisdiameter=" + diameters[ii]);
}
}

dzero = eval(2.0 * Math.sqrt((Math.abs(total) / Math.PI)));
thisxpro = eval(thisxpro + biggestprod * magnification / 2.0);
thisxcon = eval(thisxcon + biggestcond * magnification / 2.0);

var gthan = -1;
if (party != 0) gthan = eval(issuedata.length - 2);

for (ii=1; ii<issuedata.length; ii++) {
things = issuedata[ii].split(",");
if (diameters[ii] < 0) { // con
context.fillStyle = andso("red", "Con", "BubbleColour");
context.beginPath();
if (thisycon == 90) {
thisycon = eval(thisycon + offset - (diameters[ii] * magnification / 2.0));
} else {
thisycon = eval(thisycon - (diameters[ii] * magnification / 1.0));
}
context.shadowBlur = 7;
context.shadowColor = "black";
if (pattern) {
context.fillStyle = pattern;
}
context.arc(thisxcon, thisycon, eval(-0.5 * (diameters[ii] * magnification)), 0, 2*Math.PI);
} else { // pro
//context.fillStyle = "green";
context.fillStyle = andso("green", "Pro", "BubbleColour");
context.beginPath();
if (thisypro == 90) {
thisypro = eval(thisypro + offset + (diameters[ii] * magnification / 2.0));
} else {
thisypro = eval(thisypro + (diameters[ii] * magnification / 1.0));
}
context.shadowBlur = 7;
context.shadowColor = "black";
if (pattern) {
context.fillStyle = pattern;
}
context.arc(thisxpro, thisypro, eval(0.5 * (diameters[ii] * magnification)), 0, 2*Math.PI);
}
if (ii > gthan) context.fill();

offs = things[0].split("<br>");

if (diameters[ii] < 0) { // con
thisycon = eval(thisycon + 25 - (diameters[ii] * magnification / 2.0)); //+ 30);

context.strokeStyle = andso("red", "Con", "BubbleColour");
//context.font = cf;
context.font = andso(cf, "Con", "Normal");
if (things[0].indexOf("<br>") != -1) {
if (ii > gthan) context.strokeText(offs[0], thisxcon, thisycon);
for (iii=1; iii<offs.length; iii++) {
thisycon = eval(thisycon + 30);
if (ii > gthan) context.strokeText(offs[iii], thisxcon, thisycon);
}
} else {
if (ii > gthan) context.strokeText(things[0], thisxcon, thisycon);
}
} else { // pro
thisypro = eval(thisypro + 25 + (diameters[ii] * magnification / 2.0)); //+ 30);
//context.strokeStyle = "green";
context.strokeStyle = andso("green", "Pro", "BubbleColour");
//context.font = cf;
context.font = andso(cf, "Pro", "Normal");
if (things[0].indexOf("<br>") != -1) {
if (ii > gthan) context.strokeText(offs[0], thisxpro, thisypro);
for (iii=1; iii<offs.length; iii++) {
thisypro = eval(thisypro + 30);
if (ii > gthan) context.strokeText(offs[iii], thisxpro, thisypro);
}
} else {
if (ii > gthan) context.strokeText(things[0], thisxpro, thisypro);
}
}

}

if (issuedata.length > 1 && thisypro >= thisycon) {
context.beginPath();
context.strokeStyle="black"; // Black path
party = eval(thisypro + 25);
context.moveTo(20, eval(thisypro + 30));
context.lineTo(eval(threehundred * 2), eval(thisypro + 30));
context.stroke();
thisypro = eval(thisypro + 100.0 + (dzero * magnification / 2.0));
thisxpro = eval(threehundred - (dzero * magnification / 2.0));
context.beginPath();

if (eval(total) < 0) {
context.fillStyle = andso("red", "Con", "BubbleColour");
if (contotal != 0) {
//alert(ithing + " ::: " + prototal + " ... " + contotal + " ... " + total);
thisxpro = eval(threehundred);
}
} else {
//context.fillStyle = "green";
context.fillStyle = andso("green", "Pro", "BubbleColour");
if (contotal != 0) {
//alert(ithing + " ::: " + prototal + " ... " + contotal + " ... " + total);
thisxpro = eval(threehundred - eval(contotal / eval(contotal + prototal)) * (dzero * magnification / 1.0));
}
}

if (contotal != 0) { // && prototal != 0
thisxpro = eval(thisxpro + eval(contotal / eval(contotal + prototal)) * (dzero * magnification / 2.0));
}

context.shadowBlur = 7;
context.shadowColor = "black";
if (pattern) {
context.fillStyle = pattern;
}
context.arc(thisxpro, thisypro, eval(0.5 * (dzero * magnification)), 0, 2*Math.PI);
context.fill();

thisypro = eval(thisypro + 100);
context.beginPath();
context.strokeStyle = "black";
//context.font = cfb;
context.font = andso(cfb, "Pro", "Big");
context.strokeText("Total", thisxpro, thisypro);
thisypro = eval(thisypro + 60);
context.beginPath();
context.strokeStyle="black"; // Black path
context.moveTo(20, eval(thisypro + 30));
context.lineTo(eval(threehundred * 2), eval(thisypro + 30));
context.stroke();
} else if (issuedata.length > 1 && thisypro < thisycon) {
party = eval(thisycon + 25);
context.beginPath();
context.strokeStyle="black"; // Black path
context.moveTo(20, eval(thisycon + 30));
context.lineTo(eval(threehundred * 2), eval(thisycon + 30));
context.stroke();
context.beginPath();
thisycon = eval(thisycon + 100.0 + (dzero * magnification / 2.0));
thisxcon = eval(threehundred + (dzero * magnification / 2.0));

if (eval(total) < 0) {
context.fillStyle = andso("red", "Con", "BubbleColour");
if (prototal != 0) {
thisxcon = eval(threehundred + eval(prototal / eval(contotal + prototal)) * (dzero * magnification / 1.0));
}
} else {
//context.fillStyle = "green";
context.fillStyle = andso("green", "Pro", "BubbleColour");
if (prototal != 0) {
//alert(ithing + " :;: " + prototal + " ... " + contotal + " ... " + total);
thisxcon = eval(threehundred);
}
}

if (prototal != 0) { // && contotal != 0) {
thisxcon = eval(thisxcon - eval(prototal / eval(contotal + prototal)) * (dzero * magnification / 2.0));
}

context.shadowBlur = 7;
context.shadowColor = "black";
if (pattern) {
context.fillStyle = pattern;
}
context.arc(thisxcon, thisycon, eval(0.5 * (dzero * magnification)), 0, 2*Math.PI);
context.fill();

thisycon = eval(thisycon + 60);
context.beginPath();
context.strokeStyle = "black";
//context.font = cfb;
context.font = andso(cfb, "Pro", "Big");
context.strokeText("Total", thisxcon, thisycon);
thisypro = eval(thisycon + 60);
context.beginPath();
context.strokeStyle="black"; // Black path
context.moveTo(20, eval(thisycon + 30));
context.lineTo(eval(threehundred * 2), eval(thisycon + 30));
context.stroke();
}

document.getElementById(q + 'esnap').style.display = 'block';
document.getElementById(q + 'eisnap').style.display = 'block';
document.getElementById(q + 'bactfloat').style.display = 'none';

document.getElementById(q + 'mycnt').innerHTML = etc(ofstring);
document.getElementById(q + 'rating').value = 0;
document.getElementById(q + 'weighting').value = 1;
document.getElementById(q + 'issue').value = '';
document.getElementById(q + 'esnap').value = 'Email Snapshot';
document.getElementById(q + 'issue').focus();

}

function allowctrue() {
allowc = true;
}

function allowcfalse() {
if (!allowc) {
allowc = false;
} else if ((x != 0 || y != 0) && (lastx != 0 || lasty != 0)) {
allowc = false;
} else if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
allowc = false;
} else if ((x != 0 || y != 0)) {
setTimeout(allowcfalse, 100);
} else {
setTimeout(allowcfalse, 1000);
}
}

function emailhtmlit() {
var pemail=prompt("Who do you want to email to? Comma separate a To emailee from optional From emailer.", document.getElementById('mylemail').value);
if (pemail != null) {
if (pemail.replace("fill.in.email@address", "").indexOf("@") != -1) {
document.getElementById('mylemail').value=pemail;
var zhr = new XMLHttpRequest();
var zform=new FormData();
zform.append('inline', encodeURIComponent('<body><img src="' + document.getElementById('canvaselement').toDataURL() + '"></img></body>'));
if (pemail.replace(/\;/g,',').indexOf(',') != -1) {
zform.append('to', pemail.replace(/\;/g,',').split(',')[0]);
zform.append('bcc', pemail.replace(/\;/g,',').split(',')[1]);
zform.append('subj', 'My Pros and Cons ... ' + topic.split('<')[0].split(String.fromCharCode(10))[0] + ' from ' + pemail.replace(/\;/g,',').split(',')[1]);
} else {
zform.append('to', pemail);
zform.append('subj', 'My Pros and Cons ... ' + topic.split('<')[0].split(String.fromCharCode(10))[0]);
}
zform.append('tdhuhta', encodeURIComponent('<body><img src="' + document.getElementById('canvaselement').toDataURL() + '"></img></body>'));
zhr.open('post', '//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php', true);
zhr.send(zform);
}
}
}

function recxy(event) {
var isok=true;
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('cliCk ' + wording + ' ' + bodyclick); }
//}
if (event.touches) { // thanks to https://stackoverflow.com/questions/24567441/how-do-i-detect-two-fingers-at-touchstart-in-javascript
if (event.touches.length > 1) { isok=false; }
}
if (isok) {
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {

if (event.touches) {
var touches1 = event.changedTouches;
var first1 = touches1[0];
x = first1.clientX;
y = first1.clientY;
} else if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
lastx=x;
lasty=y;
//document.title='lastx_one';
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('Click ' + wording + ' ' + bodyclick); }
//}
//setTimeout(xthen, 2000);
//setTimeout(andthen, 1000);
} else {

if (event.touches) {
//document.title='pre lastx_2';
var touches2 = event.changedTouches;
var first2 = touches2[0];
lastx=x;
lasty=y;
//document.title='lastx_2';
fx = first2.clientX;
fy = first2.clientY;
//setTimeout(xthen, 2000);
//setTimeout(andthen, 1000);
} else if (event.clientX || event.clientY) {
if (x != event.clientX || y != event.clientY) {
lastx=x;
lasty=y;
//document.title='lastX_2';
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('ClIck ' + wording + ' ' + bodyclick); }
//}
//setTimeout(xthen, 2000);
//setTimeout(andthen, 1000);
//} else {
//document.title+=' ! ';
}
} else {
if (x != event.pageX || y != event.pageY) {
lastx=x;
lasty=y;
//document.title='LastX_2';
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('clicK ' + wording + ' ' + bodyclick); }
//}
//setTimeout(xthen, 2000);
//setTimeout(andthen, 1000);
//} else {
//document.title+=' ? ';
}
}

if (event.touches) {
var touches3 = event.changedTouches;
var first3 = touches3[0];
//lastx=x;
//lasty=y;
x = first3.clientX;
y = first3.clientY;
} else if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
}
//alert('x=' + eval(sxoff + xoff + x) + ' and y=' + y);
}

}

</script>
</head>

<body data-ontouchdown='recxy(event);' data-onmousedown='recxy(event);' ontouchend=" setTimeout(later,2000); " >
<table style="width:100%; ">
<tr style="width:100%;"><td id="lhs" style="width:50%;">
<canvas title='What We Stand For Report goes here' id="canvaselement" width="600" height="1500" style="position:absolute; top:0; left:0; border: 1px solid yellow; background-color: lightblue;" />
</td><td id="rhs" style="width:45%;">
<h1 id='myh1' align="right">Try Our What We Stand For <a id='gsc' target=_top title='Another go' href='./whatdowestandfor.html?nofloat=nofloat'>Game</a></h1><br>
<h2 id='myh2' align="right"></h2><br>
<br>
<form onsubmit='return false;' id='myf' action='#' style='border: 3px solid red; background-color: pink;'>
<br>
<label> Topic: <textarea rows=5 cols=60 name='topic' id='topic' onblur=" if (this.value.length > 0) { party=0; topic=this.value.replace(/\n/g,'<br>'); issuedata= ['']; ofstring=' 1'; iof=1; } " value=""></textarea></label><br><br><br>
<hr>
<label> Issue<span id='mycnt'> 1</span>: <br> <textarea onclick=" if (this.value.length == 0) { this.value=' '; } " rows=5 cols=60 name='issue' id='issue' onblur=" if (this.value.length > 0) { document.getElementById('mycnt').innerHTML = etc(ofstring); thisissue=this.value.replace(/,/g, ' ').replace(/\n/g,'<br>'); } " value=''></textarea></label><br><br>
<label> Rating -10 to 10 (-ve <font color='red'><a href='#' id='bactcon' onclick=" fontcolours('Not so much',this); " title="Not so much colour and normal font / big font" style=" colour:red;font-family:verdana; "><font color='red'>Not so much</font></a></font>, +ve <font color='green'><a href='#' id='bactpro' onclick=" fontcolours('Definitely',this); " title="Definitely colour and normal font / big font" style=" colour:green;font-family:verdana; "><font color='green'>Definitely</font></a></font>, background Emoji <a href='#' id='ebactpro' onclick=" emojicodepoints(); " title="Emoji Codepoints eg. 127462.127482">Codepoint(s)</a></font>): <br> <input type='number' name='rating' id='rating' value='0'></input></label><br><br>
<label> Weighting for This Issue: <br> <input type='number' name='weighting' id='weighting' value='1'></input></label><br><br>
<hr>
<div align='center'> <input type='button' name='bact' id='bact' value='Update and Draw to Left' onclick=" x=0; y=0; lastx=0; lasty=0; setTimeout(allowctrue, 1000); andthen(); iof=eval(1 + iof); ofstring=' ' + iof; issuedata.push(thisissue + ',' + eval(document.getElementById('rating').value * document.getElementById('weighting').value)); ourdraw(); "></input>
<input type='button' name='bactfloat' id='bactfloat' value='Toggle Form Float' onclick=" floating_form=!floating_form; checkfloat(false); " style="display:block;"></input>
<input type='button' name='esnap' id='esnap' value='Email Snapshot' onclick=" if (this.value.indexOf('ed ') == -1) { iscanvas=1; snapshot(); } " style="display:none;"></input>
<input type='button' id='eisnap' value='HTML Email' onclick="emailhtmlit();" style="display:none;"></input>
<div id='divannotation' style='display:block;'>
<h4>Your Annotations++</h4>
<img src='http://www.rjmprogramming.com.au/MarkItUp/line.png' onclick=' doline(); ' alt='Line' title='Line'></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/rectangle.png' onclick=' dorectangle(); ' alt='Rectangle' title='Rectangle'></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/rectangleborder.png' onclick=' dorectangleborder(); ' alt='Rectangle Border' title='Rectangle Border'></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/circle.png' onclick=' docircle(); ' alt='Circle' title='Circle'></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/clear.png' onclick=' clearall(); ' alt='Clear' title='Clear'></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/sline.png' onclick=" alert('Ready to Scribble in two seconds. Any key stroke stops scribbling.'); setTimeout(intwo,2000); " alt='Scribble' title=''></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/zline.png' onclick=" if (isScribble == 2 || isScribble == 1) { storecanvascommands('context=context;', true); } isScribble=0; " alt='End of scribble' title='End of scribble'></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/minus.png' onclick=" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); } undo(); " alt='Undo' title='Undo'></img>
<img src='http://www.rjmprogramming.com.au/MarkItUp/plus.png' onclick=" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); } redo(); " alt='Redo' title='Redo'></img>
<img onload='thisim=this;' src='http://www.rjmprogramming.com.au/MarkItUp/image.png' onclick=" document.getElementById('file').click(); document.getElementById('file').style.display='inline-block'; if (1 == 2) { document.getElementById('file').click(); document.getElementById('file').style.display='block'; } document.getElementById('dpf').style.display='block'; " alt='Image' title='Image' id=imagefile></img><span id=spanimo></span><input style='display:none;' id='file' type='file' name='file' data-ucapture='user' accept='image/*' data-capture='camera'></input><div id=dpf style='display:BLOCK;'>  <span class='readBytesButtons'><button style='display:none;' data-endbyte='4' data-startbyte='0'>1-5</button><button style='display:none;' data-endbyte='14' data-startbyte='5'>6-15</button><button style='display:none;' data-endbyte='7' data-startbyte='6'>7-8</button><br>... vs Image URL: <input id='vsiurl' type='text' value='+' onblur='readUBlob(this.value,0,0);' style='width:60%;'></input><br>... Offset X: <input style='width:25%;' id='xoff' type='number' value='0'></input> Offset Y: <input style='width:25%;' id='yoff' type='number' value='0'></input> Rotation<select id='rof' onchange=' maybe(this.value); '><option value=''>in Degrees</option><option value=' of Canvas'> of Canvas</option><option value=' into Canvas'> into Canvas</option></select>: <input style='width:10%;' max='360' min='-360' id='rotation' type='number' value='0'></input><br>Scale Width: <input style='width:120px;' onchange='scalex=this.value;' min='0.0000001' id='scalex' type='number' value='1.0000000' step='0.0000001'></input> Height: <input style='width:120px;' onchange='scaley=this.value;' min='0.0000001' id='scaley' type='number' value='1.0000000' step='0.0000001'></input><br>Cropping X: <input style='width:100px;' onchange='cropx=this.value;' min='0.0' id='cropx' type='number' value='0.00' step='0.01'></input> Y: <input style='width:100px;' onchange='cropy=this.value;' min='0.00' id='cropy' type='number' value='0.00' step='0.01'></input><br>Cropping Width<select id='cselwidth'><option value='%'>%</option><option value='px'>px</option></select>: <input style='width:60px;' onchange='cropwidth=this.value;' min='0.01' id='cropwidth' type='number' value='100.00' step='0.01'></input> Height<select id='cselheight'><option value='%'>%</option><option value='px'>px</option></select>: <input style='width:60px;' onchange='cropheight=this.value;' min='0.01' id='cropheight' type='number' value='100.00' step='0.01'></input><br><br><button id=pcbut onclick='zeroone=1.0; readBlob(0,0);'>Place into Canvas</button><button id=ocbut data-id=oic onclick='zeroone=1.0; readOBlob(0,0);'>Overlay into Canvas</button><select id='imageclickmode' onchange=' if (eval(this.value) == 4) { icover=true; icontain=false; document.getElementById("pcbut").click(); } else if (eval(this.value) == 6) { icover=true; icontain=false; document.getElementById("ocbut").click(); } else if (eval(this.value) == 5) { icover=false; icontain=true; document.getElementById("pcbut").click(); } else if (eval(this.value) == 7) { icover=false; icontain=true; document.getElementById("ocbut").click(); } else { imageclickmode=dmyformit(eval(this.value)); } '><option value=0>Scaling as shown above</option><option value=1>Scaling to fit last two click/touch rectangle</option><option value=2>Scaling to suit last two click/touch rectangle width</option><option value=3>Scaling to suit last two click/touch rectangle height</option><option value=4>Cover Place</option><option value=5>Contain Place</option><option value=6>Cover Overlay</option><option value=7>Contain Overlay</option></select><button onclick="icover=true; icontain=false; document.getElementById('pcbut').click();">Cover Place</button><button onclick="icontain=true; icover=false; document.getElementById('pcbut').click();">Contain Place</button><button onclick="icover=true; icontain=false; document.getElementById('ocbut').click();">Cover Overlay</button><button onclick="icontain=true; icover=false; document.getElementById('ocbut').click();">Contain Overlay</button>  <select id=phpsel onchange=phpselit(this.value);><option value=''>Image Filter ...</option><option value='emboss'>Emboss</option><option value='edge'>Edge</option><option value='negedge'>Negedge</option><option value='sharpen'>Sharpen</option><option value='boxblur'>Boxblur</option><option value='negate'>Negate</option><option value='colourizered'>Colourizered</option><option value='colourizegreen'>Colourizegreen</option><option value='colourizeblue'>Colourizeblue</option><option value='colourize'>Colourize</option><option value='pixellate'>Pixellate</option><option value='smooth'>Smooth</option><option value='contrast'>Contrast</option><option value='brightness'>Brightness</option><option value='sketchy'>Sketchy</option></select>  Grayscale: <input id=chkgrayscale title=Grayscale type=checkbox onchange=oureval('dograyscale=',this.checked);></input>  Inverse: <input id=chkinverse title=Inverse type=checkbox onchange=oureval('doinverse=',this.checked);></input>  Flip: <input id=chkflip title=Flip type=checkbox onchange=oureval('doflip=',this.checked);></input>  Flop: <input id=chkflop title=Flop type=checkbox onchange=oureval('doflop=',this.checked);></input></div><div id='byte_range' style='display:none;'></div><div id='byte_content' style='display:none;'></div><input id='fil' value='' type='hidden'></input><img id='spareimg' src='' style='display:none;'></img>
<br>Annotation (optional): <input onblur='placeannotation(this);' id='iannotation' type='text' value=''></input><br><span>Anno B&W (optional): <input onblur='placeannotation(this);' id='jannotation' type='text' value=''></input><br>Style: <input type='text' id='myfont' value='18px Verdana'></input> <input type='text' id='mycolour' value='black'></input></span><br>
</div></div>
</form>
<br>
<br><br>
</td><td style="width:5%;display:none;">
</td></tr>
</table>

<form style='display:none;' id='myform2' name='myform' method='POST' action='./whatdowestandfor.php?mode=1' target='myiframe'>
<input type='hidden' name='mymobile' id='mymobile2' value=''></input>
<input type='hidden' name='myfname' id='myfname2' value=''></input>
<input type='hidden' name='mydurl' id='mydurl2' value=''></input>
<input type='submit' name='submit' id='submit2' value='Submit' style='display:none;'></input></form>
<iframe style='display:none;' id='myiframe' src='./whatdowestandfor.php?get='></iframe>
<a style='display:none;' id='myemail' href='mailto:fill.in.email@address?subject=My%20What%20Do%20We%20Stand%20For&body='>Email</a>
<input style='display:none;' id='mylemail' type='text' value='fill.in.email@address' />

<form style='display:none;' id='myform' method='POST' enctype='application/x-www-urlencoded' action='http://www.rjmprogramming.com.au/HTMLCSS/world.php' target='myiframetwo'>
<input type='hidden' name='mysubject' id='mysubject' value='My What Do We Stand For'></input>
<input type='hidden' name='myfname' id='myfname' value=''></input>
<input type='submit' id='bsubmit' value='Submit' style='display:none;'></input>
<input type='hidden' name='ismobile' id='ismobile' value=''></input>
<input type='hidden' name='mode' id='mode' value='1'></input>
<input type='hidden' name='to' id='to' value=''></input>
<input type='hidden' name='mydurl' id='mydurl' value=''></input>
</form>
<iframe style='display:none;' id='myiframetwo' src='http://www.rjmprogramming.com.au/HTMLCSS/world.php'></iframe>
<iframe style='display:none;' id='myiframetwo' src='//www.rjmprogramming.com.au/HTMLCSS/world.php'></iframe><img onload=myiminteresting(this); style=display:none; id=myimx src=''></img><form target=myiframenine method=POST style=display:none; action='../PHP/gimp_guillotine_followup.php'><div id=phpaction style=display:none;></div><textarea name=duis id=duis style=display:none;></textarea><input id=bduis type=submit style=display:none; value=Act></input></form><iframe style='display:none;' name='myiframenine' id='myiframenine' src='../PHP/gimp_guillotine_followup.php'></iframe>

<input style='display:BLOCK;width:250px;' onblur='fixmyemail(this.value + String.fromCharCode(32),1);' type='text' id='myisubject' value='My What Do We Stand For '></input> <input style='background-color: yellow;' type='button' value='Email (optional)' onclick=" capture(document.getElementById('mydurl'),document.getElementById('submit2'),document.getElementById('myemail')); "></input> <a style='display:none;' target='_blank' id='myemail' href='mailto:fill.in.email@address?subject=My%20What%20Do%20We%20Stand%20For&body='></a><input style='display:BLOCK;width:250px;' onblur='fixmyemail(this.value,0);' type='email' id='myiemail' value='' title='Fill this in for emailed attachment'></input>

<script language="JavaScript">

window.onload = function() {

document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
alert(145);
alert(2);
//wnotc();
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
alert(22);
readBlob(startByte, endByte);
alert(222);
}
}, false);

elem = document.getElementById('canvaselement');
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
var ourdw = effectiveDeviceWidth();
//alert(ourdw + " versus " + eval(threehundred * 2));
if (eval(threehundred * 2) > eval(ourdw / 2)) threehundred = eval((ourdw * 2) / 9);
elem.width = eval(threehundred * 2);
}
context = elem.getContext('2d');

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

elem = document.getElementById('canvaselement');
context = elem.getContext("2d");
//context.drawImage(img,0,0);
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;
// Add event listener for `click` events.
document.body.addEventListener('click', function(event) {
var prex=-10, prey=-10, touches, first;
if (event.touches) { // thanks to https://stackoverflow.com/questions/24567441/how-do-i-detect-two-fingers-at-touchstart-in-javascript
if (event.touches.length > 1) {
touches = event.changedTouches;
first = touches[0];
prex = first.clientX;
prey = first.clientY;
}
} else if ((event.pageX || event.pageY)) {
prex = event.pageX; // - elemLeft;
prey = event.pageY; // - elemTop;
} else if (1 == 1) {
prex = event.clientX; // - elemLeft;
prey = event.clientY; // - elemTop;
}
//alert('prepreclick ' + prex + ',' + prey);
if (eval(prex) <= eval(elem.width) && eval(prey) <= eval(elem.height)) { // && allowc) {
//alert('preclick ' + prex + ',' + prey);
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
if (event.touches) { // thanks to https://stackoverflow.com/questions/24567441/how-do-i-detect-two-fingers-at-touchstart-in-javascript
if (event.touches.length > 1) {
touches = event.changedTouches;
first = touches[0];
x = first.clientX;
y = first.clientY;
}
} else 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;
} 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;
}
}

//alert('click ' + x + ',' + y);
}

elements.push({
colour: '#ff0000',
width: 5,
height: 5,
top: y,
left: x
});

clickno = clickno + 1;

if (x != lastx || y != lasty) {
document.getElementById('divannotation').style.display='block';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
}

});
//alert('set up click');

drawt(); allowc = false; document.getElementById('topic').focus();
};

</script>


<canvas id=scratch width=24 height=24 style="display:none;height:24px;width:24px;"></canvas>
</body>
</html>