<doctype html>
<head>
<title>Flowchart - RJM Programming - January, 2019 ... Thanks to https://enjoycss.com/</title>
<style>
.diamond {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 0;
position: relative;
top: 0;
border: 50px solid rgba(0,0,0,0);
border-top-width: 0;
border-bottom: 70px solid yellow; //#1abc9c;
font: normal 70%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
//-o-text-overflow: visible; //clip;
//text-overflow: visible; //clip;
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

.diamond::after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 0;
position: absolute;
content: "";
top: 70px;
left: -50px;
border: 50px solid rgba(0,0,0,0);
border-top: 70px solid yellow; //#1abc9c;
font: normal 70%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
//-o-text-overflow: visible; //clip;
//text-overflow: visible; //clip;
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}


.diamond:hover {
overflow: visible;
}

.oval {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-align: center;
width: 200px;
height: 100px;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: lightgreen; //#1abc9c;
}

.rectangle {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 200px;
height: 100px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: lightblue; //#1abc9c;
}
</style>
<script type='text/javascript'>
var idarr=[];
var undoid=-1;
var redoid=-1;
var ambeingsupervised=false;
var bodyclick=true, nonbodyclick=0, div1=null, div2=null, dval='';
var x=0,y=0,lastx=0,lasty=0,icnt=0,jcnt=0;
var wording="Start", shape="oval";
var wwok=true;
var myselsc='', urlis='';
var mcnt=0;
var outst='';
var gpreb='';
var ncol=0;

function overdiv(adiv, acol) {
if (adiv.className == 'diamond') {
adiv.style.borderTop='70px solid ' + acol;
adiv.style.borderBottom='70px solid ' + acol;
} else {
adiv.style.backgroundColor=acol;
}
return adiv;
}

function somuchmore(inst) {
var mycol='', r=0, g=0, b=0, arr='0123456789abcdef'.split('');
outst=inst;
if (idarr.length == 0 && inst == '') {
outst+='<div id=dcolour style=display:inline-block;><input onclick=notc(); id=icolour type="color" onchange="overdiv(div1,this.value);" value="#90ee90"></input></div>  <div id=dpf style=display:NONE;><input onclick="wnotc(); setTimeout(preprocess,12000);" style=display:inline-block; id=file type=file name=file></input><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><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span></div>';
} else if (inst != '' && div1 == null) {
outst+='<div id=dcolour style=display:inline-block;><input onclick=notc(); id=icolour type="color" onchange="overdiv(div1,this.value);" value="#90ee90"></input></div>  <div id=dpf style=display:NONE;><input onclick="wnotc(); setTimeout(preprocess,12000);" style=display:inline-block; id=file type=file name=file></input><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><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span></div>';
} else {
if (inst == '') { div1=document.getElementById(idarr[eval(-1 + idarr.length)]); }
mycol=('' + div1.style.backgroundColor);
if (mycol == '') {
if (div1.outerHTML.indexOf('background-color:') != -1) {
mycol=div1.outerHTML.split('background-color:')[1].split(';')[0].trim();
} else if (div1.outerHTML.indexOf(' class="oval"') != -1) {
mycol='#90ee90';
} else if (div1.outerHTML.indexOf(' class="diamond"') != -1) {
mycol='#ffff00';
} else if (div1.outerHTML.indexOf(' class="rectangle"') != -1) {
mycol='#add8e6';
} else {
mycol='#90ee90';
}
}
if (mycol.indexOf('rgb') != -1) {
r=eval(mycol.split('(')[1].split(',')[0].trim());
g=eval(mycol.split('(')[1].split(',')[1].trim());
b=eval(mycol.split('(')[1].split(',')[2].split(')')[0].split(',')[0].trim());
//alert('r=' + r + ' and g=' + g + ' and b=' + b);
mycol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];
}
outst+='<div id=dcolour style=display:inline-block;><input onclick=notc(); id=icolour type="color" onchange="overdiv(div1,this.value);" value="' + mycol + '"></input></div>  <div id=dpf style=display:NONE;><input onclick="wnotc(); setTimeout(preprocess,12000);" style=display:inline-block; id=file type=file name=file></input><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><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span></div>';
if (inst == '' && document.getElementById('dcolour')) {
ncol++;
document.getElementById('dcolour').innerHTML='<input onclick=notc(); id=icolour' + ncol + ' type="color" onchange="overdiv(div1,this.value);" value="' + mycol + '"></input>';
//alert(document.getElementById('dcolour').innerHTML);
}
}
//alert(outst);
return inst;
}

function tfc(intb) {
var outtb=intb.replace(';','').trim();
if (outtb.length == 7) {
if (outtb.substring(0,1) == '#') {
if (outtb.toLowerCase().substring(1).replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').replace(/a/g,'').replace(/b/g,'').replace(/c/g,'').replace(/d/g,'').replace(/e/g,'').replace(/f/g,'') == '') {
if (div1 != null) {
overdiv(div1,outtb);
document.getElementById('dstart').innerHTML='?';
return '?';
}
}
}
}
return intb;
}

function preprocess() {
//alert(254);
if (document.getElementById("file").value != '') {
//alert(2254);
eh();
document.getElementById('button').click();

//alert(354);
document.getElementById("file").value='';
//alert(454);
bodyclick=true;
//nonbodyclick=0;
}
}

function process(infilecontents) {
//alert(754);
if (infilecontents != null) {
//alert(99);
//alert(1754);
notc();
if (div1.outerHTML.indexOf('diamond') != -1) {
if (gpreb == '') {
div1.style.backgroundImage="URL(data:image/png;base64," + btoa(infilecontents) + ")";
} else {
div1.style.background="linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(data:image/png;base64," + btoa(infilecontents) + ")";
}
gpreb='';
//alert(2754);
document.getElementById('dcontentd').innerHTML+=div1.outerHTML.replace('diamond','oval').replace(' id="', ' id="z').replace(' style="', ' style="opacity:0.1;z-index:90;');
//alert(document.getElementById('z' + div1.id).outerHTML);
idarr.push('z' + div1.id);
} else {
if (gpreb == '') {
div1.style.backgroundImage="URL('data:image/png;base64," + btoa(infilecontents) + "')";
} else {
div1.style.background="linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('data:image/png;base64," + btoa(infilecontents) + "')";
}
gpreb='';
}

//alert(999);
//document.getElementById('dpf').style.display='inline-block';
//alert(9999);
wording='?';
nonbodyclick=0;
document.getElementById('dsave').innerHTML=document.getElementById('dsave').innerHTML.replace(somuchmore('Now other end of line please.  '), '');
}
}

function readBlob(opt_startByte, opt_stopByte) {

//alert(33);
wnotc();
var files = document.getElementById("file").files;
//alert(333);
if (!files.length) {
//alert("Please select a file!");
return;
} else {
//alert(54);
//setTimeout(preprocess, 3000);
w = files[0].name;
//document.getElementById("fil").value = w;
}

var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;

//alert(stop);

var reader = new FileReader();

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
//alert(77);
process(evt.target.result);
//alert(777);
}
};

var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}

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

function doundo() {
notc();
if (undoid >= 0) {
redoid=undoid;
document.getElementById(idarr[undoid]).style.display='none';
document.getElementById('iredo').style.display='inline-block';
undoid--;
if (undoid < 0) {
document.getElementById('iundo').style.display='none';
}
}
}

function doredo() {
notc();
if (redoid >= 0 && redoid < idarr.length) {
undoid=redoid;
document.getElementById(idarr[redoid]).style.display='block';
document.getElementById('iundo').style.display='inline-block';
redoid++;
}
}

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

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

if (event.clientX || event.clientY) {
if (x != event.clientX || y != event.clientY) {
lastx=x;
lasty=y;
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('ClIck ' + wording + ' ' + bodyclick); }
//}
setTimeout(xthen, 2000);
setTimeout(andthen, 1000);
//} else {
//document.title+=' ! ';
}
} else {
if (x != event.pageX || y != event.pageY) {
lastx=x;
lasty=y;
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('clicK ' + wording + ' ' + bodyclick); }
//}
setTimeout(xthen, 2000);
setTimeout(andthen, 1000);
//} else {
//document.title+=' ? ';
}
}

if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
}
//alert('x=' + x + ' and y=' + y);
}
}

function clickme(dois) {
bodyclick=false;
if (nonbodyclick == 0) {
div1=dois;
} else if (nonbodyclick > 0) {
if (dois.id == div1.id) {
//document.title+=' n ' + dois.id + '*';
nonbodyclick--;
} else {
div2=dois;
}
} else if (nonbodyclick < 0) {
div1=dois;
nonbodyclick=0;
}
nonbodyclick++;
}

function resetit() {
bodyclick=true;
}

function getOffset(el) { // thanks to https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
}

function connect() { // div1, div2) { //, color, thickness) { // draw a line connecting elements
wording='?';
var notwithin=true;
var thisrect;
var thickness = 0;
var ioff=0;
var off1 = 0;
var off2 = 0;
off1 = getOffset(div1);
off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
notwithin=true;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
thisrect=div1.getBoundingClientRect();
if (lastx >= thisrect.left && lastx <= eval(thisrect.left + thisrect.width) && lasty >= thisrect.top && lasty <= eval(thisrect.top + thisrect.height)) {
notwithin=false;
} else {
x1=eval(thisrect.left + thisrect.width / 2);
y1=eval(thisrect.top + thisrect.height / 2);
}
}
if (notwithin && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
x2=x2;
} else {
x1=lastx;
y1=lasty;
}
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
notwithin=true;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
thisrect=div2.getBoundingClientRect();
if (lastx >= thisrect.left && lastx <= eval(thisrect.left + thisrect.width) && lasty >= thisrect.top && lasty <= eval(thisrect.top + thisrect.height)) {
notwithin=false;
} else {
x2=eval(thisrect.left + thisrect.width / 2);
y2=eval(thisrect.top + thisrect.height / 2);
}
}
if (notwithin && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
x2=x2;
} else {
x2=x;
y2=y;
}
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
idarr.push("ld" + mcnt);
undoid=eval(-1 + idarr.length);
document.getElementById('iundo').style.display='inline-block';
var htmlLine = "<div id=ld" + mcnt + " style='" + dval + "padding:0px;opacity:0.3; margin:0px; height:4px; position:absolute; left:" + eval(ioff + cx) + "px; top:" + eval(ioff + cy) + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);background: linear-gradient(to left, olive 80%, rgba(255,0,0,1) 20%);'>  </div>";
mcnt++;
//
// alert(htmlLine);
return htmlLine; //document.body.innerHTML += htmlLine;
}

function xthen() {
if (nonbodyclick < -2) { nonbodyclick=0; }
}

function andthen() {
var brbr="<br><br>", biis='', preb='';
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('' + nonbodyclick + ' ' + document.getElementById('secpoint').innerHTML.indexOf('Now other end of line please.') + ' CLICK ' + wording + ' ' + bodyclick); }
//}
if (bodyclick && document.getElementById('secpoint').innerHTML.indexOf('Now other end of line please.') == -1) {
if (wording.replace('?','') == '' && nonbodyclick >= 0) {
wording='';
while (wording == '' && wwok) {
wording=prompt("What wording do you want? (~ is carriage return) ... optional (space to) URL will be a background image (append ' /browse' to browse for background image) ... later an #ffffff type of colour can change a background colour (should the colour picker not work)", "");
if (wording == null) { wording='?'; } else { wording=tfc(wording); }
}
}
if (wording.replace('?','') != '') {
if (wording.toLowerCase().indexOf(' http') != -1) {
if (wording.split(' http')[0].split(' HTTP')[0].split(' Http')[0] != '') { preb='linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),'; }
biis='background:' + preb + 'URL(' + 'http' + wording.replace(' Http',' http').replace(' HTTP',' http').split(' http')[1] + ');';
wording=wording.split(' http')[0].split(' HTTP')[0].split(' Http')[0];
if ((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.') != -1) {
//alert(222);
biis='';
if (!document.getElementById('dpf')) {
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input>  <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input>  ' + outst + '  <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+='  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
}
//document.getElementById('dpf').style.display='inline-block';
wnotc();
gpreb=wording;
document.getElementById('file').click();
setTimeout(preprocess, 12000);
}
} else if (wording.toLowerCase().indexOf(' //') != -1) {
if (wording.split(' //')[0] != '') { preb='linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),'; }
biis='background:' + preb + 'URL(' + document.URL.split(':')[0] + '://' + wording.split(' //')[1] + ');';
wording=wording.split(' //')[0];
if ((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.') != -1) {
//alert(22);
biis='';
if (!document.getElementById('dpf')) {
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input>  <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input>  ' + outst + '  <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+='  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
}
//document.getElementById('dpf').style.display='inline-block';
wnotc();
gpreb=wording;
document.getElementById('file').click();
setTimeout(preprocess, 12000);
}
} else if (wording.toLowerCase().indexOf(' /') != -1) {
//alert(1);
if (wording.split(' /')[0] != '') { preb='linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),'; }
//alert(11);
biis='background:' + preb + 'URL(' + document.URL.split('flowchart.')[0] + wording.split(' /')[1] + ');';
//alert(biis);
wording=wording.split(' /')[0];
//alert((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.'));
if ((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.') != -1) {
//alert(2);
biis='';
if (!document.getElementById('dpf')) {
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input>  <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input>  ' + outst + '  <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+='  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
}
//document.getElementById('dpf').style.display='inline-block';
wnotc();
gpreb=wording;
document.getElementById('file').click();
setTimeout(preprocess, 12000);
}
//alert(11111);
}
wording=wording.replace(/~/g, '<br>');
if ((wording.trim() + '~').indexOf('?~') != -1) {
shape="diamond";
brbr="<br>";
} else if (wording.trim().toLowerCase() == 'end' || wording.trim().toLowerCase() == 'start') {
shape='oval';
} else {
shape='rectangle';
}
icnt++;
wwok=false;
while (document.getElementById('d' + icnt)) {
icnt++;
}
idarr.push("d" + icnt);
undoid=eval(-1 + idarr.length);
document.getElementById('dcontent').innerHTML+="<div id=d" + icnt + " onclick='clickme(this);' class='" + shape + "' style='" + biis + "line-height:20px;position:absolute;left:" + x + "px;top:" + y + "px;'>" + brbr + "  " + wording + "</div>";
somuchmore('');
wording='?';
document.getElementById('dstart').innerHTML=wording;
nonbodyclick=0;
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input>  <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input>  ' + outst + '  <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+='  <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
if (document.getElementById('iundo')) {
document.getElementById('iundo').style.display='inline-block';
}
setTimeout(wwokagain, 2000);
}
} else if (nonbodyclick == 1) {
wording='?';
//document.title+=' xx';
document.getElementById('secpoint').innerHTML=somuchmore('Now other end of line please.  ');
} else if (nonbodyclick <= 0) {
nonbodyclick=0;
//alert(134);
//document.title+=' zz' + document.getElementById('secpoint').innerHTML + 'zz ';
document.getElementById('secpoint').innerHTML=document.getElementById('secpoint').innerHTML.replace(somuchmore('Now other end of line please.  '), '');
document.getElementById('dsave').innerHTML=document.getElementById('dsave').innerHTML.replace(somuchmore('Now other end of line please.  '), '');
} else {
//document.title+=' yy';
document.getElementById('secpoint').innerHTML='';
document.getElementById('dcontent').innerHTML+=connect();
bodyclick=true;
nonbodyclick=-5;
}
}

function wwokagain() {
wwok=true;
}

function ifit(osel) {
if (osel.value != '') {
wording='?';
jcnt++;
document.getElementById('dstart').innerHTML='?';
if (1 == 1) {
location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(osel.value);
} else {
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " src='" + document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(osel.value) + "'></iframe>";
}
}
}

function ath() {
location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(urlis);
}

function ifsave() {
notc();
var nameis=prompt('Please enter Flowchart name to Save to (and be able to recall later).', '');
if (nameis != null) {
notc();
jcnt++;
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " name=if" + jcnt + " src=''></iframe>";
notc();
document.getElementById('dcontother').innerHTML+="<form style=display:none; method=POST target=if" + jcnt + " action=flowchart.php><input type=hidden name=newsave id=newsave value='" + nameis + "'></input><textarea style=display:none; rows=5 cols=5 name=newsavecontent id=newsavecontent value=''>" + document.getElementById('dcontent').innerHTML.replace(/\ \;/g,' ').replace(/\ \;/g,' ') + "</textarea><input type=submit id=ifb" + jcnt + " value=Save></input></form>";
notc();
document.getElementById('isave').value='Saved to ' + nameis.replace(/\ /g,'');
notc();
document.getElementById('ifb' + jcnt).click();
urlis=nameis; //location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(nameis);
notc();
setTimeout(ath, 2000);
}
}

function ifemail() {
notc();
var nameis=prompt('Please enter Email Address.', '');
if (nameis != null) {
if (nameis.indexOf('@') != -1) {
notc();
jcnt++;
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " name=if" + jcnt + " src=''></iframe>";
notc();
document.getElementById('dcontother').innerHTML+="<form style=display:none; method=POST target=if" + jcnt + " action=flowchart.php><input type=hidden name=newemail id=newemail value='" + nameis + "'></input><textarea style=display:none; rows=5 cols=5 name=newemailcontent id=newemailcontent value=''>" + document.getElementById('dcontent').innerHTML.replace(/\ \;/g,' ') + "</textarea><input type=submit id=ifb" + jcnt + " value=Email></input></form>";
notc();
document.getElementById('iemail').value='Emailed to ' + nameis;
notc();
document.getElementById('ifb' + jcnt).click();
//urlis=nameis; //location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(nameis);
notc();
//setTimeout(ath, 2000);
}
}
}

function onl() {
if (document.getElementById('d0') || document.getElementById('d1')) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input>  <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input>  <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
if (!ambeingsupervised) {
jcnt++;
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " src='" + document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + "?rand=" + Math.floor(Math.random() * 123456) + "'></iframe>";
}
}

function wnotc() {
bodyclick=false;
nonbodyclick=-2;
}

function notc() {
wording='?';
bodyclick=false;
nonbodyclick=-2;
setTimeout(resetit,1000);
}

function mysels() {
var xxxx=myselsc;
if (xxxx != '') {
if (document.getElementById('mysel')) { document.getElementById('mysel').value=xxxx; }
}
}

</script>
</head>
<body style='width:100%; height: 100vh;' ontouchstart='recxy(event);' onmousedown='recxy(event);' onload='onl();'>
<h1 style=display:inline-block; id="myemail"></h1> <h1 style=display:inline-block; id="myh1">Flowchart</h1>
<h3>RJM Programming - January, 2019 ... Thanks to <a target=_blank title='Enjoy CSS' href='https://enjoycss.com/'>Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS</a></h3>
<h4 id='instruction' onclick='notc();'><div onclick='notc();' style='display:inline-block;' id=secpoint></div>Click where you want "<div onclick=" if (this.innerHTML.length == 0) { wording='?'; } bodyclick=false; nonbodyclick=-2; setTimeout(resetit,1000); " style='display:inline-block;background-color:pink;' id=dstart contenteditable=true onblur="wording=tfc(this.innerHTML); " title="What wording do you want? (~ is carriage return) ... optional (space to) URL will be a background image (append ' /browse' to browse for background image) ... later an #ffffff type of colour can change a background colour (should the colour picker not work)">Start</div>" to be placed</h4>
<div id="dsave"></div>
<div id="diamond" class="diamond" style='display:none;'></div><div id="oval" class="oval" style='display:none;'></div><div id="rectangle" class="rectangle" style='display:none;'></div>
<div id="dcontent"></div>
<div id="dcontentd"></div>
<div id="dcontother"></div>
</body>
</html>