<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 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='';
function recxy(event) {
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;
setTimeout(xthen, 2000);
setTimeout(andthen, 1000);
} else {

if (event.clientX || event.clientY) {
if (x != event.clientX || y != event.clientY) {
lastx=x;
lasty=y;
setTimeout(xthen, 2000);
setTimeout(andthen, 1000);
} else {
document.title+=' ! ';
}
} else {
if (x != event.pageX || y != event.pageY) {
lastx=x;
lasty=y;
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
var htmlLine = "<div 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>";
//
// alert(htmlLine);
return htmlLine; //document.body.innerHTML += htmlLine;
}

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

function andthen() {
var brbr="<br><br>";
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)', '');
if (wording == null) { wording='?'; }
}
}
if (wording.replace('?','') != '') {
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++;
}
document.getElementById('dcontent').innerHTML+="<div id=d" + icnt + " onclick='clickme(this);' class='" + shape + "' style='line-height:20px;position:absolute;left:" + x + "px;top:" + y + "px;'>" + brbr + "  " + wording + "</div>";
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=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>';
} 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>';
}
}
setTimeout(wwokagain, 2000);
}
} else if (nonbodyclick == 1) {
wording='?';
document.getElementById('secpoint').innerHTML='Now other end of line please.  ';
} else if (nonbodyclick <= 0) {
nonbodyclick=0;
document.getElementById('secpoint').innerHTML=document.getElementById('secpoint').innerHTML.replace('Now other end of line please.  ', '');
} else {
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=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 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'><div 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=this.innerHTML;">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="dcontother"></div>
</body>
</html>