<!doctype html>
<html>
<head>
<title>Canvas HTML Element Pros and Cons 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'>
<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 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 = "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 grd, grdf, grds;

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 (proposed.indexOf(' ') == -1 || 1 == 1) {
if (askidea == "Big") {
context.shadowBlur = 4;
} else {
context.shadowBlur = 2;
}
context.shadowColor = "black";
}

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 + "BubbleColour");
var curbigfontsize = eval(which + "BigFontSize");
var curfontname = eval(which + "FontName");
var curbigfontname = eval(which + "BigFontName");
var curnormalfontsize = eval(which + "NormalFontSize");
var curnormalfontname = eval(which + "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' Pro and Con 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 + "BubbleColour");
curbigfontsize = eval(which + "BigFontSize");
curfontname = eval(which + "FontName");
curbigfontname = eval(which + "BigFontName");
curnormalfontsize = eval(which + "NormalFontSize");
curnormalfontname = eval(which + "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';
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('myfname').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('myfname').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';
document.getElementById(q + 'topic').focus();
setInterval(makeitshow, 8000);
}
}

if (!firstgo && ok != 0) {
if (floating_form) {
location.href = "prosandcons.html?float=float";
} else {
location.href = "prosandcons.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('myfname').value = "prosandcons_" + 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 Pros and Cons 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 Pros and Cons 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 Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").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('mymobile').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 Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").replace(" the ", " "),5,30);
context.strokeText((" ... " + "Score: " + score + " Goes: " + goes).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").replace(" the ", " "),5,60);
}
setTimeout(andthen, twothousand);
} else {
info=(" ... " + stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!").replace(/ /g, "%20");
gptext=(stuff + " ... " + "Score: " + score + " Goes: " + goes).replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!");
var myans="";
if (ask != "") {
if (ask == "y" && document.getElementById('mylemail').value.replace("fill.in.email@address", "") == "") {
myans=prompt(stuff.replace("You missed the Pros and Cons by (0,0)", "Congratulations! Pros and Cons!") + " ... 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 Pros and Cons by (0,0)", "Congratulations! Pros and Cons!") + " ... 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 Pros and Cons by (0,0)", "Congratulations! Pros and Cons!"));
}
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='./prosandcons.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 Pro and Con 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='./prosandcons.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("Con", null) + " ... click to change.";
document.getElementById(q + 'bactpro').title = document.getElementById(q + 'bactpro').title + " is " + fontcolours("Pro", 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 capture(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("prosandcons.html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').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('mymobile').value=(bem[0] + "&body=").replace('Cons&body=', 'Cons' + info + '&body=').replace('fill.in.email@address', xinfoemail);
} else {
document.getElementById('mymobile').value=document.getElementById('myemail').href.replace('Cons&body=', 'Cons' + 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('mymobile').value);
capture(document.getElementById('mydurl'),document.getElementById('submit'),document.getElementById('myemail'),document.getElementById('myemail').href.replace('Cons&body=', 'Cons' + 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) capture(document.getElementById('mydurl'),document.getElementById('submit'),document.getElementById('myemail'),document.getElementById('myemail').href.replace('Cons&body=', 'Cons' + 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("Pros",55,eval(offset + 64));
context.strokeStyle = andso("red", "Con", "BubbleColour");
//context.font = cfb;
context.font = andso(cfb, "Con", "Big");
context.strokeText("Cons",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";
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";
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";
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";
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 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);
}
}
}

</script>
</head>
<body onload="drawt(); document.getElementById('topic').focus(); " ontouchend=" setTimeout(later,2000); " >
<table style="width:100%; ">
<tr style="width:100%;"><td id="lhs" style="width:50%;">
<canvas title='Pros and Cons 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 Pros and Cons <a id='gsc' target=_top title='Another go' href='./prosandcons.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('Con',this); " title="Con colour and normal font / big font" style=" colour:red;font-family:verdana; "><font color='red'>Con</font></a></font>, positive <font color='green'><a href='#' id='bactpro' onclick=" fontcolours('Pro',this); " title="Pro colour and normal font / big font" style=" colour:green;font-family:verdana; "><font color='green'>Pro</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=" 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>
<br>
<br>
</form>
</td><td style="width:5%;display:none;">

</td></tr>
</table>

<form style='display:none;' id='myform' name='myform' method='POST' action='./prosandcons.php?mode=1' target='myiframe'><input type='hidden' name='mymobile' id='mymobile' value=''><input type='hidden' name='myfname' id='myfname' value=''><input type='hidden' name='mydurl' id='mydurl' value=''></input><input type='submit' name='submit' id='submit' value='Submit' style='display:none;'></input></form>
<iframe style='display:none;' id='myiframe' src='./prosandcons.php?get='></iframe>
<a style='display:none;' id='myemail' href='mailto:fill.in.email@address?subject=My%20Pros%20and%20Cons&body='>Email</a>
<input style='display:none;' id='mylemail' type='text' value='fill.in.email@address' />

<script language="JavaScript">

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');

</script>

</body>
</html>