<!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='world.js' 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 allowc = false;
var ie = 11;
var mode = 1;
var amode = 1;
//var elem;
//var elemLeft = 0;
var cf = "18px Verdana";
//var elemTop = 0;
//var context;
var elements = [];
var 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;
var ask="y";
var info=" ... ";
var infoemail="fill.in.email@address";
var gptext="";

var ConBubbleColour = "red";
var ProBubbleColour = "green";
var ConBigFontSize = "18px";
var ProBigFontSize = "18px";
var ConNormalFontSize = "14px";
var ProNormalFontSize = "14px";
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 elemzero; //= document.getElementById('canvaselement');
//var elemLeftzero; //= elem.offsetLeft;
//var elemTopzero; //= elem.offsetTop;
//var contextzero; //= elem.getContext('2d');

function andso(proposed, tmode, askidea) {
var fs="", fn="";
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(/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 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 onl() {
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.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.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.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);
//alert(toe.href);
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=5, thisxcon=threehundred, 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(0, 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",5,eval(offset + 60));
context.strokeStyle = andso("red", "Con", "BubbleColour");
//context.font = cfb;
context.font = andso(cfb, "Con", "Big");
context.strokeText("Not so much",eval(threehundred + 5),eval(offset + 60));

context.beginPath();
context.lineWidth="2";
context.strokeStyle="black"; // Black path
context.moveTo(0, 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.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.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 + 15 - (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 + 15 + (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(0, 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.arc(thisxpro, thisypro, eval(0.5 * (dzero * magnification)), 0, 2*Math.PI);
context.fill();

thisypro = eval(thisypro + 60);
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(0, 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(0, 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.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(0, eval(thisycon + 30));
context.lineTo(eval(threehundred * 2), eval(thisycon + 30));
context.stroke();
}

document.getElementById(q + 'esnap').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);
}
}

</script>
</head>

<body 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 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 (negative <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>, positive <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>): <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>
<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 src='http://www.rjmprogramming.com.au/MarkItUp/image.png' onclick=" if (1 == 2) { document.getElementById('file').click(); document.getElementById('file').style.display='block'; } document.getElementById('dpf').style.display='block'; " alt='Image' title='Image'></img><input style='display:none;' id='file' type='file' name='file'></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='url' 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><br><button onclick='readBlob(0,0);'>Place into Canvas</button><button onclick='readOBlob(0,0);'>Overlay into Canvas</button></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>

<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() {

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) {
if (eval(x) <= eval(elem.width) && eval(y) <= eval(elem.height) && allowc) {
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;
} 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');
}

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>

</body>
</html>