<html>
<head>
<title>Venn Diagram on Canvas Primer Tutorial ... RJM Programming ... December 2013, January, 2015 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element and https://css-tricks.com/basics-css-blend-modes/</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
</head>
<body style='background-color: ochre;' onload='selof("z","youllneverfindthis"); checkviaold(viaold); '>
<h1 title="Click to email snapshot of Venn Diagram" onclick=" capture(document.getElementById('mydurl'),document.getElementById('submit'),document.getElementById('myemail')); ">Click two points to place Venn Diagram circle</h1>
<table><tr><td><select onchange=" if (this.value.indexOf(' ') == 0) { pasteit(this.value.replace(' ','')); } else if (this.value == ' ') { emailit(); } else if (this.value == '') { capture(document.getElementById('mydurl'),document.getElementById('submit'),document.getElementById('myemail')); this.value = mval; } else { mval = this.value; } " id='mode' style='display:block;'><option value='Diameter'>Two ends of Diameter</option><option value='Centre'>Centre point then Circumference point</option><option value='Circumference'>Circumference point then Centre point</option><option value=' '>Paste in a previous Venn Diagram URL ...</option><option value=' '>Email image snapshot of Venn Diagram ...</option><option value=''>Email snapshot of Venn Diagram ...</option></select></td><td><select id='px' onchange='fontsize(this.value);' style='color:black;'><option value=''>px?</option><option value='0'>Email snapshot</option></select></td><td><div id='inter'> </div></td></tr></table>
<canvas title='Click two points to place Venn Diagram circle' id="canvaselement" width="1300" height="900" style="border: 1px solid green;background-color: ochre;" />
<form style='display:none;' id='myform' name='myform' method='POST' action='./venn_diagram.php?mode=1' target='myiframe'><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='./venn_diagram.php?mode='></iframe>
<a onclick=' if (navigator.userAgent.match(/Android/i)) { aemail(this); } ' style='display:none;' id='myemail' href='mailto:fill.in.email@address?subject=My%20Venn%20Diagram&body='>Email</a>
<script language="JavaScript">

var winois=null;
var viaold = location.search.split('viaold=')[1] ? decodeURIComponent(location.search.split('viaold=')[1].split('&')[0]) : '';

var mval = 'Diameter';

var toggle = 0;
var elem = document.getElementById('canvaselement');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
var context = elem.getContext('2d');
context.globalCompositeOperation = 'multiply'; // thanks to https://css-tricks.com/basics-css-blend-modes/
var elements = [];
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var prevx = -10.0;
var prevy = -10.0;
var x = -10.0;
var y = -10.0;
var commontoall = 0.0;
var remainder = 0;
var remaindeer = 0;
var radius = 0.0;
var ioff = 0, ij=0;
var r=0, g=0, b=0;
var cntinters=0, jcnt = 0;
var cf = "12px Verdana";
var ctext = "";
var chelpertext = "";
var opac = 0.6;
var total = 0.0;
var results = [];
var iresults = 0;
var ooff = -0.1;
var pref, suff;
var readytosolve = 0;
var resta = ",,,";
var restq = ", Optionally what is outside (everything) label, Optionally how many altogether for outside, Optionally what is good label for this Circle";
var cid = "";

function closewinois() {
if (winois != null) {
winois.close();
winois=null;
}
var postbbits='', pbbits;
var bbits=document.getElementById('myemail').href.split('%20...%20');
if (bbits.length > 1) {
if (bbits[1].indexOf('&') != -1) {
pbbits=bbits[1].split('&');
postbbits='&' + pbbits[1];
}
} else if (bbits[0].indexOf('&') != -1) {
bbits=document.getElementById('myemail').href.split('&');
postbbits='&' + bbits[1];
}
document.getElementById('myemail').href=bbits[0] + encodeURIComponent(' ... ' + 'http://www.rjmprogramming.com.au/HTMLCSS/Canvas/VennDiagram/') + postbbits;
document.getElementById('myemail').click();
}

function aemail(ame) { // thanks to http://www.telerik.com/forums/proper-way-to-do-mailto-and-tel-links(
var postbbits='', pbbits;
var bbits=ame.href.split('%20...%20');
if (bbits.length > 1) {
if (bbits[1].indexOf('&') != -1) {
pbbits=bbits[1].split('&');
postbbits='&' + pbbits[1];
}
} else if (bbits[0].indexOf('&') != -1) {
bbits=ame.href.split('&');
postbbits='&' + bbits[1];
}
ame.href=bbits[0] + encodeURIComponent(' ... ' + 'http://www.rjmprogramming.com.au/HTMLCSS/Canvas/VennDiagram/') + postbbits;
window.top.location = ame.href;
}


function emailit() {
elem = document.getElementById('canvaselement');
var canvuri=elem.toDataURL("image/png",0);
alert('When new window with Venn Diagram image opens after this ... Command-A or Ctrl-A (for Select All) and Command-C or Ctrl-C (for Copy) ... new window will close in 5 seconds');
winois=window.open('','_blank','top=2,left=2,width=1300,height=900');
winois.document.write('<html><body><img src=' + canvuri + '></img></body></html>');
setTimeout(closewinois, 5000);
}

function athen(myimg) {
if (myimg.src != '') {
elem = document.getElementById('canvaselement');
context = elem.getContext('2d');
context.globalCompositeOperation = 'multiply';
context.drawImage(myimg,0,0);
}
}

function bthen(myimg) {
myimg=myimg;
}

function checkviaold(vo) {
if (vo != '') {
if (vo.indexOf(':') == -1) {
var prevo=document.URL.split('?');
vo=(prevo[0].replace('venn_diagram.html','') + '/~').replace('//~','/').replace('/~','/').replace('~','') + vo;
}
document.getElementById('myspareimg').src=vo;
}
}

function pasteit(inhm) {
var previs=viaold;
if (inhm != '') {
viaold=inhm;
} else {
viaold=prompt("Please enter a URL describing a previously saved Venn Diagram we will paste into your Venn Diagram canvas below. Prefix it by + to add to what is there already.", previs);
}
if (viaold == null) {
viaold=previs;
} else if (viaold == previs) {
viaold=previs;
} else if (viaold != '') {
if (viaold.substring(0,1) != '+') {
elem = document.getElementById('canvaselement');
context = elem.getContext('2d');
context.globalCompositeOperation = 'multiply';
context.clearRect(0, 0, elem.width, elem.height);
}
checkviaold(viaold.replace('+',''));
}
}

function capture(toh, tos, toe) {
var pretoh = elem.toDataURL();
toh.value = pretoh.substr(22, pretoh.length);
tos.click();
var things = document.URL.split("?");
toe.href = toe.href + (things[0] + "/~").replace("venn_diagram.html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
toe.click();
}

function analyze() {
var cr = "\n";
var alerts = "";
var want = 1.0;
var cwant = "";
var rt = [0, 0, 0, 0,0, 0, 0];
var rt1start = 1;
var rt1end = results[1];
if (commontoall != 0.0) {
rt1start = commontoall;
rt1end = commontoall;
}
while (want > 0.001 || want < -0.001) {
for (rt[0]=1; rt[0]<=results[0]; rt[0]++) {
for (rt[1]=rt1start; rt[1]<=rt1end; rt[1]++) {
for (rt[2]=1; rt[2]<=results[2]; rt[2]++) {
for (rt[3]=1; rt[3]<=results[3]; rt[3]++) {
if (want > 0.001 || want < -0.001) {
want = rt[0] + rt[1] + rt[1] + rt[2] + rt[3] + (remainder);
rt[4] = elements[0].total - (rt[0] + rt[1] + rt[2]);
rt[5] = elements[1].total - (rt[0] + rt[1] + rt[3]);
rt[6] = elements[2].total - (rt[2] + rt[1] + rt[3]);
if (want <= 0.001 && want >= -0.001) {
//alert("(parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0])) = " + (parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0])));
if ((parseFloat(elements[0].intersections[1]) + parseFloat(elements[1].intersections[0])) > 0.0) {
if ((parseFloat(rt[0]) + parseFloat(rt[1])) != (parseFloat(elements[0].intersections[1]) + parseFloat(elements[1].intersections[0]))) want = 1.0;
}
if ((parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0])) > 0.0) {
if ((parseFloat(rt[2]) + parseFloat(rt[1])) != (parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0]))) want = 1.0;
}
if (elements[0].intersections.length > 3) {
if ((parseFloat(elements[0].intersections[3 % (elements[0].intersections.length)]) + parseFloat(elements[3].intersections[0])) > 0.0) {
if ((parseFloat(rt[1]) + parseFloat(rt[3])) != (parseFloat(elements[0].intersections[3 % (elements[0].intersections.length)]) + parseFloat(elements[3].intersections[0]))) want = 1.0;
}
}
}
if (want <= 0.001 && want > -0.001 && (rt[0] + rt[1] + rt[2]) < elements[0].total && (rt[3] + rt[1] + rt[2]) < elements[2].total && (rt[0] + rt[1] + rt[3]) < elements[1].total) {
cwant = prompt("Just " + elements[0].id + ": " + rt[4] + cr + " + Just " + elements[1].id + ": " + rt[5] + cr + " + Just " + elements[2].id + ": " + rt[6] + cr + " + All: " + rt[1] + cr + " + First two: " + rt[0] + cr + " + First and last: " + rt[2] + cr + " + Last two: " + rt[3] + cr + " = " + total, "0");
want = parseFloat(cwant.replace(".0","") + ".0");
//alert(want);
if (want <= 0.001 && want >= -0.001) {
chelpertext = " (Just " + elements[0].id + ") " + cr + " (Just " + elements[1].id + ") " + cr + " (Just " + elements[2].id + ") " + cr + " (All) " + cr + " (First two) " + cr + " (First and last) " + cr + " (Last two) ";
ctext = rt[4] + cr + rt[5] + cr + rt[6] + cr + rt[1] + cr + rt[0] + cr + rt[2] + cr + rt[3];
alerts = "Next click should be to position '" + rt[4] + "' (Just " + elements[0].id + ") ... others will follow in that order mentioned earlier ... thanks.";
document.getElementById("st").value = rt[4];
alert(alerts);
return alerts;
}
} else {
want = 1.0;
}
}
}
}
}
}
want = 0.0;
}
return alerts;
}



function analyzealt() {
var cr = "\n";
var alerts = "";
var want = 1.0;
var cwant = "";
var rt = [0, 0, 0, 0, 0, 0, 0];
var rt1start = 1;
var rt1end = results[1];
if (commontoall != 0.0) {
rt1start = commontoall;
rt1end = commontoall;
}
while (want > 0.001 || want < -0.001) {
for (rt[0]=1; rt[0]<=results[0]; rt[0]++) {
for (rt[1]=rt1start; rt[1]<=rt1end; rt[1]++) {
for (rt[2]=1; rt[2]<=results[2]; rt[2]++) {
for (rt[3]=1; rt[3]<=results[3]; rt[3]++) {
if (want > 0.001 || want < -0.001) {
//alert("remaindeer=" + remaindeer + " total=" + total);
rt[4] = elements[0].nonintersections;
rt[5] = elements[1].nonintersections;
rt[6] = elements[2].nonintersections;
want = 0.0 + parseFloat(rt[0]) + parseFloat(rt[1]) + parseFloat(rt[2]) + parseFloat(rt[3]) + parseFloat(rt[4]) + parseFloat(rt[5]) + parseFloat(rt[6]);
//alert("Just " + elements[0].id + ": " + rt[4] + cr + " + Just " + elements[1].id + ": " + rt[5] + cr + " + Just " + elements[2].id + ": " + rt[6] + cr + " + All: " + rt[1] + cr + " + First two: " + rt[0] + cr + " + First and last: " + rt[2] + cr + " + Last two: " + rt[3] + cr + " = " + total + " vs " + want + " ?");
want = parseFloat(want) - parseFloat(total);
//alert("just " + elements[0].id + ": " + rt[4] + cr + " + Just " + elements[1].id + ": " + rt[5] + cr + " + Just " + elements[2].id + ": " + rt[6] + cr + " + All: " + rt[1] + cr + " + First two: " + rt[0] + cr + " + First and last: " + rt[2] + cr + " + Last two: " + rt[3] + cr + " = " + total + " vs " + want + " ?");
if (want <= 0.001 && want >= -0.001) {
//alert("(parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0])) = " + (parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0])));
if ((parseFloat(elements[0].intersections[1]) + parseFloat(elements[1].intersections[0])) > 0.0) {
if ((parseFloat(rt[0]) + parseFloat(rt[1])) != (parseFloat(elements[0].intersections[1]) + parseFloat(elements[1].intersections[0]))) want = 1.0;
}
if ((parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0])) > 0.0) {
if ((parseFloat(rt[2]) + parseFloat(rt[1])) != (parseFloat(elements[0].intersections[2]) + parseFloat(elements[2].intersections[0]))) want = 1.0;
}
if (elements[0].intersections.length > 3) {
if ((parseFloat(elements[0].intersections[3 % (elements[0].intersections.length)]) + parseFloat(elements[3].intersections[0])) > 0.0) {
if ((parseFloat(rt[1]) + parseFloat(rt[3])) != (parseFloat(elements[0].intersections[3 % (elements[0].intersections.length)]) + parseFloat(elements[3].intersections[0]))) want = 1.0;
}
}
}
if ((want <= 0.001 && want > -0.001)) {
cwant = prompt("Just " + elements[0].id + ": " + rt[4] + cr + " + Just " + elements[1].id + ": " + rt[5] + cr + " + Just " + elements[2].id + ": " + rt[6] + cr + " + All: " + rt[1] + cr + " + First two: " + rt[0] + cr + " + First and last: " + rt[2] + cr + " + Last two: " + rt[3] + cr + " = " + total, "0");
want = parseFloat(cwant.replace(".0","") + ".0");
//alert(want);
if (want <= 0.001 && want >= -0.001) {
chelpertext = " (Total " + elements[0].id + ") " + cr + " (Total " + elements[1].id + ") " + cr + " (Total " + elements[2].id + ") " + cr + " (All) " + cr + " (First two) " + cr + " (First and last) " + cr + " (Last two) ";
ctext = ":" + (parseFloat(rt[4]) + parseFloat(rt[0]) + parseFloat(rt[1]) + parseFloat(rt[2])) + cr + ":" + (parseFloat(rt[5]) + parseFloat(rt[0]) + parseFloat(rt[1]) + parseFloat(rt[3])) + cr + ":" + (parseFloat(rt[6]) + parseFloat(rt[1]) + parseFloat(rt[2]) + parseFloat(rt[3])) + cr + rt[1] + cr + rt[0] + cr + rt[2] + cr + rt[3];
alerts = "Next click should be to position ':" + (parseFloat(rt[4]) + parseFloat(rt[0]) + parseFloat(rt[1]) + parseFloat(rt[2])) + "' (Total " + elements[0].id + ") ... others will follow in that order mentioned earlier ... thanks.";
document.getElementById("st").value = ":" + (parseFloat(rt[4]) + parseFloat(rt[0]) + parseFloat(rt[1]) + parseFloat(rt[2]));
alert(alerts);
return alerts;
}
} else {
want = 1.0;
}
}
}
}
}
}
want = 0.0;
}
return alerts;
}

function fontsize(ournum) {
if (ournum == "0") {
capture(document.getElementById('mydurl'),document.getElementById('submit'),document.getElementById('myemail'));
} else if (ournum != "") {
cf=ournum + "px Verdana";
}
}

function placenumber(ournum) {
ctext = ournum;
}

function selof(innum, tcol) {
var csel = "";

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 = "venn_diagram_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png";

ij = 0;
if (innum == "z") {
var opx = document.getElementById('px');
var cs = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
csel = "<input type='text' id='st' onblur='placenumber(this.value);' value=''></input> <select onchange='placenumber(this.value);' style='color:" + tcol + "'><option value=''>?</option>";
for (ij=0; ij<cs.length; ij++) {
csel = csel + "<option value='" + cs[ij].toUpperCase() + "'>" + cs[ij].toUpperCase() + "</option>";
csel = csel + "<option value='" + cs[ij].toLowerCase() + "'>" + cs[ij].toLowerCase() + "</option>";
}
//csel = csel + "</select>";
//csel = csel + "<select onchange='fontsize(this.value);' style='color:" + tcol + "'><option value=''>px?</option>";
for (ij=12; ij<=120; ij++) {
//csel = csel + "<option value='" + ij + "'>" + ij + "</option>";
}
} else {
results[iresults] = innum;
iresults = iresults + 1;
csel = "<select onchange='placenumber(this.value);' style='color:" + tcol + "'><option value=''>?</option><option value='" + innum + "'>" + innum + "</option>";
if (innum > 0) {
for (ij=(innum - 1); ij>=0; ij--) {
csel = csel + "<option value='" + ij + "'>" + ij + "</option>";
}
}
}

csel = csel + "</select>";

return csel;
}

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
var alertstr = "";
var xx = event.pageX - elemLeft;
var yy = event.pageY - elemTop;

var mode = Math.floor((Math.random()*2)+0);
var amode = Math.floor((Math.random()*2)+0);
var twenty = Math.floor((Math.random()*20)+1);
var hgt = Math.floor((Math.random()*150)+1);
var wdt = Math.floor((Math.random()*100)+1);
if (ioff == 0) {
r = Math.floor((Math.random()*256)+0);
g = Math.floor((Math.random()*256)+0);
b = Math.floor((Math.random()*256)+0);
var xr = 255 - (r % 20);
var xb = 255 - (b % 20);
var xg = 255 - (g % 20);
var thatcol ='#' + arr[(xr-(xr % 16)) / 16] + arr[xr % 16] + arr[(xg-(xg % 16)) / 16] + arr[xg % 16] + arr[(xb-(xb % 16)) / 16] + arr[xb % 16];
elem.style.backgroundColor = thatcol;
ioff = 29;
} else {
r = ((r + ioff) % 256);
g = ((g + ioff) % 256);
b = ((b + ioff) % 256);
}
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];
var internums = [];
var noninternums = [];
var totals = [];


context.globalAlpha = opac;
if (ctext != "") {
var cres = ctext.split("\n");
var chelpres = chelpertext.split("\n");
context.globalAlpha = 1.0;
context.font = cf;
context.strokeText(cres[0],xx,yy);
if (cres.length == 1) {
ctext = "";
document.getElementById("st").value = "";
} else if (chelpres.length > 1) {
alertstr = "Next click should be to position '" + cres[1] + "'" + chelpres[1] + " ... thanks.";
ctext = ctext.substring((cres[0].length+1));
chelpertext = chelpertext.substring((chelpres[0].length+1));
document.getElementById("st").value = cres[1];
} else {
alertstr = "Next click should be to position '" + cres[1] + "' ... thanks.";
ctext = ctext.substring((cres[0].length+1));
document.getElementById("st").value = cres[1];
}
} else if (toggle == 0) {
if (document.getElementById("mode").value == "Centre") {
prevx = xx;
prevy = yy;
} else {
x = xx;
y = yy;
}
toggle = 1;
document.getElementById("mode").style.display = 'none';
} else {
cntinters = 0;
toggle = 0;
if (document.getElementById("mode").value == "Centre") {
x = xx;
y = yy;
} else if (document.getElementById("mode").value == "Diameter") {
prevx = (xx + x) / 2.0;
prevy = (yy + y) / 2.0;
} else {
prevx = xx;
prevy = yy;
}

radius = Math.pow(((prevx - x) * (prevx - x) + (prevy - y) * (prevy - y)), 0.5);

cid = "centred_at_-" + prevx + "-_-" + prevy + "- ";

// Add element
elements.push({
id: cid,
colour: thiscol,
width: radius,
height: 0.0,
intersections: internums,
nonintersections: noninternums,
total: totals,
top: prevy,
left: prevx
});

var oointer = document.getElementById('inter');
if (oointer.innerHTML.indexOf("span") == -1) {
oointer.innerHTML = oointer.innerHTML + "<span style='color:black;'>" + selof('z','black') + "</span>";
oointer.innerHTML = oointer.innerHTML + "<span style='color:black;'>" + selof('9','black') + "</span>";
}

if (jcnt > 0) {
restq = ", Optionally what is good label for this Circle";
resta = ",";
}
elements[jcnt].intersections[jcnt * 0] = 0;
elements[jcnt].nonintersections[jcnt * 0] = 0;
elements[jcnt].total[jcnt * 0] = 0;
pref = " (optionally separate with , the number independently in this circle (+ prefix for this is used to say number is a total figure))";
suff = ",0";

// Collision detection between clicked offset and element.
elements.forEach(function(element) {
var arm=0.0, dist=0.0, roi=0.0, icnt=0, pans, ipans, other="", ijk, kjl;
var ointer = document.getElementById('inter');
// ABS(R0-R1) <= SQRT((x0-x1)^2+(y0-y1)^2) <= (R0+R1)
if (2 == 3 && y > element.top && y < element.top + element.height
&& x > element.left && x < element.left + element.width) {
alert('Clicked Element at ' + element.left + ',' + element.top + ' with width=' + element.width + ' and height=' + element.height + ' and colour=' + element.colour);
} else if (mode != 0 && 1 == 2) {
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);
} else {
context.beginPath();
twenty = 20.0;
context.arc(element.left, element.top, element.width, (element.height * 0.0), (0.1 * twenty)*Math.PI);
if (amode > 0 && 1 == 2) {
context.strokeStyle = element.colour;
context.stroke();
} else {
context.fillStyle = element.colour;
context.fill();
}
}

arm = Math.abs(element.width - radius);
dist = Math.pow(((prevx - element.left) * (prevx - element.left) + (prevy - element.top) * (prevy - element.top)), 0.5);
roi = (element.width + radius);
if (arm <= dist && dist <= roi && dist > 0.0) {
opac = opac + (ooff);
if (opac < 0.25) {
ooff = 0.1;
} else if (opac > 0.75) {
ooff = -0.1;
}
pans = prompt("This circle, " + elements[jcnt].id.replace("-_-", ",").replace("_-", " (").replace("- ", ") ").replace("_", " ") + ", intersects with Circle " + element.id.replace("-_-", ",").replace("_-", " (").replace("- ", ") ").replace("_", " ") + " ... how many in intersection (put 0 if unknown)" + pref + restq + " ?", "1" + suff + resta);
pref = "";
suff = "";
ipans = pans.indexOf(",");
var overrest = pans.split(",");
cntinters = cntinters + 1;
if (ipans == -1) {
if (element.intersections.length < jcnt) {
for (ijk=element.intersections.length; ijk<jcnt; ijk++) element.intersections[ijk] = 0;
}
element.intersections[jcnt] = parseFloat(pans);
if (jcnt == 2 && readytosolve == 0 && parseFloat(pans) == 0 && total > 0 && remainder < 0) {
readytosolve = 1;
}
if (jcnt == 2 && readytosolve == 0 && parseFloat(pans) == 0 && total > 0 && remaindeer > 0) {
readytosolve = 2;
}
for (kjl=0; kjl<=jcnt; kjl++) {
if (elements[kjl].intersections.length <= jcnt) {
for (ijk=elements[kjl].intersections.length; ijk<=jcnt; ijk++) elements[kjl].intersections[ijk] = 0;
}
}
//elements[jcnt].nonintersections[jcnt * 0] = 0;
//elements[jcnt].total[jcnt * 0] = 0;
ointer.innerHTML = ointer.innerHTML + "<span style='color:" + element.colour + ";'> ----> </span><span style='color:black;'>" + selof(element.intersections[jcnt],thiscol) + "</span><span style='color:" + thiscol + ";'> <---- </span>";
} else {
if (element.intersections.length < jcnt) {
for (ijk=element.intersections.length; ijk<jcnt; ijk++) element.intersections[ijk] = 0;
}
element.intersections[jcnt] = parseFloat(overrest[0]);
for (kjl=0; kjl<=jcnt; kjl++) {
if (elements[kjl].intersections.length <= jcnt) {
for (ijk=elements[kjl].intersections.length; ijk<=jcnt; ijk++) elements[kjl].intersections[ijk] = 0;
}
}
var rest = pans.substring((ipans+1)).split(",");
if (rest.length == 1 && rest[0].indexOf("+") == -1) {
elements[jcnt].nonintersections[jcnt * 0] = rest[0];
remaindeer = remaindeer - parseFloat(rest[0]);
} else if (rest.length == 1 && rest[0].indexOf("+") != -1) {
elements[jcnt].total[jcnt * 0] = parseFloat(rest[0].replace("+", ""));
remainder = remainder - parseFloat(rest[0].replace("+", ""));
} else if (rest[0].indexOf("+") != -1) {
elements[jcnt].total[jcnt * 0] = parseFloat(rest[0].replace("+", ""));
remainder = remainder - parseFloat(rest[0].replace("+", ""));
alertstr = "Next click should be to position '" + rest[1] + ":" + rest[0].replace("+", "") + "' ... thanks.";
elements[jcnt].id = rest[1];
ctext = rest[1];
document.getElementById("st").value = rest[1];
} else {
elements[jcnt].nonintersections[jcnt * 0] = rest[0];
remaindeer = remaindeer - parseFloat(rest[0]);
alertstr = "Next click should be to position '" + rest[1] + "' ... thanks.";
elements[jcnt].id = rest[1];
ctext = rest[1];
document.getElementById("st").value = rest[1];
}
if (jcnt == 2 && readytosolve == 0 && parseFloat(overrest[0]) == 0 && total > 0 && remainder < 0) {
readytosolve = 1;
}
if (jcnt == 2 && readytosolve == 0 && parseFloat(overrest[0]) == 0 && total > 0 && remaindeer > 0) {
readytosolve = 2;
}
if (element.intersections.length < jcnt) {
for (ijk=element.intersections.length; ijk<jcnt; ijk++) element.intersections[ijk] = 0;
}
element.intersections[jcnt] = parseFloat(pans.substring(0,ipans).replace(",", ""));
for (kjl=0; kjl<=jcnt; kjl++) {
if (elements[kjl].intersections.length <= jcnt) {
for (ijk=elements[kjl].intersections.length; ijk<=jcnt; ijk++) elements[kjl].intersections[ijk] = 0;
}
}
ointer.innerHTML = ointer.innerHTML + "<span style='color:" + element.colour + ";'> ----> </span><span style='color:black;'>" + selof(element.intersections[jcnt],thiscol) + "</span><span style='color:" + thiscol + ";'> <--" + selof((element.nonintersections[icnt] + element.total[icnt]),'black') + "-- </span>";
if (elements[jcnt].nonintersections[jcnt * 0] > 0) {
if (ctext != "") {
ctext = ctext + "\n" + elements[jcnt].nonintersections[jcnt * 0];
} else {
alertstr = "Next click should be to position '" + elements[jcnt].nonintersections[jcnt * 0] + "' ... thanks.";
ctext = elements[jcnt].nonintersections[jcnt * 0];
document.getElementById("st").value = elements[jcnt].nonintersections[jcnt * 0];
}
} else if (elements[jcnt].total[jcnt * 0] > 0) {
if (ctext != "") {
ctext = ctext + ":" + elements[jcnt].total[jcnt * 0];
} else {
alertstr = "Next click should be to position ':" + elements[jcnt].total[jcnt * 0] + "' ... thanks.";
ctext = ":" + elements[jcnt].total[jcnt * 0];
document.getElementById("st").value = ":" + elements[jcnt].total[jcnt * 0];
}
}
}
restq = "";
resta = "";
}


icnt = icnt + 1;

});


var kpans;
if (cntinters == 0) {
//alert(cntinters + "?" + jcnt);
elements[jcnt].nonintersections[jcnt * 0] = 0;
elements[jcnt].total[jcnt * 0] = 0;
var arst = prompt("No intersections here, but how many are independently in this circle, " + elements[jcnt].id.replace("-_-", ",").replace("_-", " (").replace("- ", ") ").replace("_", " ") + " (+ prefix to this is used to say number is a total figure)" + restq + " ?", "0" + resta);
var rst = arst.split(",");
if (rst.length == 1 && rst[0].indexOf("+") == -1) {
elements[jcnt].nonintersections[jcnt * 0] = rst[0];
} else if (rst.length == 1 && rst[0].indexOf("+") != -1) {
elements[jcnt].total[jcnt * 0] = parseFloat(rst[0].replace("+", ""));
} else if (rst[0].indexOf("+") != -1) {
elements[jcnt].total[jcnt * 0] = parseFloat(rst[0].replace("+",""));
kpans = arst.indexOf(",");
alertstr = "Next click should be to position '" + rst[1] + "' ... thanks.";
if (resta == ",,," && rst.length >= 4) {
elements[jcnt].id = rst[3];
total = parseFloat(rst[2]);
remainder = total - parseFloat(rst[0].replace("+",""));
ctext = rst[1] + "\n" + rst[2] + "\n" + rst[3];
document.getElementById("st").value = rst[1]; // + "\n" + rst[2] + "\n" + rst[3];
} else if (resta == ",,," && rst.length == 3) {
total = parseFloat(rst[2]);
remainder = total - parseFloat(rst[0].replace("+",""));
ctext = rst[1] + "\n" + rst[2];
document.getElementById("st").value = rst[1]; // + "\n" + rst[2];
} else if (resta == ",,," && rst.length == 2) {
ctext = rst[1];
document.getElementById("st").value = rst[1]; //;
} else if (resta == ",") {
elements[jcnt].id = rst[1];
ctext = arst.substring((kpans+1)).replace(",", "\n");
document.getElementById("st").value = rst[1];
}
} else {
elements[jcnt].nonintersections[jcnt * 0] = rst[0];
kpans = arst.indexOf(",");
alertstr = "Next click should be to position '" + rst[1] + "' ... thanks.";
if (resta == ",,," && rst.length >= 4) {
elements[jcnt].id = rst[3];
total = parseFloat(rst[2]);
remaindeer = total - parseFloat(rst[0]);
ctext = rst[1] + "\n" + rst[2] + "\n" + rst[3];
document.getElementById("st").value = rst[1]; // + "\n" + rst[2] + "\n" + rst[3];
} else if (resta == ",,," && rst.length == 3) {
total = parseFloat(rst[2]);
remaindeer = total - parseFloat(rst[0]);
ctext = rst[1] + "\n" + rst[2];
document.getElementById("st").value = rst[1]; // + "\n" + rst[2];
} else if (resta == ",,," && rst.length == 2) {
ctext = rst[1];
document.getElementById("st").value = rst[1]; //;
} else if (resta == ",") {
elements[jcnt].id = rst[1];
ctext = arst.substring((kpans+1)).replace(",", "\n");
document.getElementById("st").value = rst[1];
}
}
rst[0] = parseFloat(rst[0].replace("+", ""));
if (rst[0] > 0 && elements[jcnt].nonintersections[jcnt * 0] > 0) {
if (ctext != "") {
ctext = ctext + "\n" + rst[0];
} else {
alertstr = "Next click should be to position '" + rst[0] + "' ... thanks.";
ctext = rst[0];
document.getElementById("st").value = rst[0];
}
} else if (rst[0] > 0 && elements[jcnt].total[jcnt * 0] > 0) {
if (ctext != "") {
ctext = ctext + ":" + rst[0];
} else {
alertstr = "Next click should be to position ':" + rst[0] + "' ... thanks.";
ctext = ":" + rst[0];
document.getElementById("st").value = ":" + rst[0];
}
}
restq = ", Optionally what is good label for this Circle";
resta = ",";
if (elements[jcnt].nonintersections[jcnt * 0] != "0") {
oointer.innerHTML = oointer.innerHTML + "<span style='color:" + thiscol + ";'>--</span><span style='color:black;'>" + selof(elements[jcnt].nonintersections[jcnt * 0],thiscol) + "</span><span style='color:" + thiscol + ";'>--</span>";
}
for (kjl=0; kjl<=jcnt; kjl++) {
if (elements[kjl].intersections.length <= jcnt) {
for (ijk=elements[kjl].intersections.length; ijk<=jcnt; ijk++) elements[kjl].intersections[ijk] = 0;
}
}
}

jcnt = jcnt + 1;
cntinters = 0;
prevx = -10.0;
prevy = -10.0;
x = -10.0;
y = -10.0;
document.getElementById("mode").style.display = 'block';
}
if (alertstr != "") {
alert(alertstr);
alertstr = "";
} else if (readytosolve == 1) {
var reas = prompt("Are you ready for program to try to calculate unknowns (could be several viable answers)? You can also answer with the 'common to all' value, if you know it (hint: less than or equal to " + results[1] + ") ?", "Y");
if (reas != "N" && reas != "n") {
if (reas != "Y" && reas != "y") {
commontoall = parseFloat(reas);
}
readytosolve = 0;
analyze();
}
} else if (readytosolve == 2) {
var reas = prompt("Are you ready for program to try to calculate unknowns (could be several viable answers)? You can also answer with the 'common to all' value, if you know it (hint: less than or equal to " + results[1] + ") ?", "Y");
if (reas != "N" && reas != "n") {
if (reas != "Y" && reas != "y") {
commontoall = parseFloat(reas);
}
readytosolve = 0;
analyzealt();
}
}

}, false);

var opx = document.getElementById('px');
for (ij=12; ij<=120; ij++) {
opx.innerHTML = opx.innerHTML + "<option value='" + ij + "'>" + ij + "</option>";
}


</script>

<img src='' style='display:none;' id='myspareimg' onerror='bthen(this);' onload='athen(this);'></img>

</body>
</html>