<!doctype html>
<html>
<head>
<title>Rectangle Analyze - RJM Programming - March, 2020</title>
<style>
td { opacity: 0,9; }
span { opacity: 0.9; }
</style>
<script type="text/javascript">
var popupWindow = null;
var popupIsShown = false;
var pword="";
var wo=null;
var bks='    ';
var argnumcols=location.search.split('numcols=')[1] ? decodeURIComponent(location.search.split('numcols=')[1].split('&')[0]) : '11';
// Thanks to https://htmlcolorcodes.com/color-names/ below
var allcols=['lime','black','blue','purple','navy','teal','fuchsia','olive','maroon','gray','green',
'IndianRed','LightCoral','Salmon','DarkSalmon','LightSalmon','Crimson','Red','FireBrick','DarkRed',
'Pink','LightPink','HotPink','DeepPink','MediumVioletRed','PaleVioletRed','Coral',
'Tomato','OrangeRed','DarkOrange','Orange','Gold','Yellow','LightYellow',
'LemonChiffon','LightGoldenrodYellow','PapayaWhip','Moccasin','PeachPuff',
'PaleGoldenrod','Khaki','DarkKhaki','Lavender','Thistle',
'Plum','Violet','Orchid','Fuchsia','Magenta',
'MediumOrchid','MediumPurple','RebeccaPurple',
'BlueViolet','DarkViolet','DarkOrchid','DarkMagenta',
'Indigo','SlateBlue','DarkSlateBlue','MediumSlateBlue',
'GreenYellow','Chartreuse','LawnGreen','LimeGreen',
'PaleGreen','LightGreen','MediumSpringGreen','SpringGreen',
'MediumSeaGreen','SeaGreen','ForestGreen','DarkGreen',
'YellowGreen','OliveDrab','DarkOliveGreen','MediumAquamarine','DarkSeaGreen',
'LightSeaGreen','DarkCyan','Aqua','Cyan','LightCyan','PaleTurquoise',
'Aquamarine','Turquoise','MediumTurquoise','DarkTurquoise',
'CadetBlue','SteelBlue','LightSteelBlue','PowderBlue',
'LightBlue','SkyBlue','LightSkyBlue','DeepSkyBlue','DodgerBlue','CornflowerBlue',
'MediumSlateBlue','RoyalBlue','MediumBlue','DarkBlue','Navy',
'MidnightBlue','Cornsilk','BlanchedAlmond','Bisque','NavajoWhite','Wheat',
'BurlyWood','Tan','RosyBrown','SandyBrown','Goldenrod',
'DarkGoldenrod','Peru','Chocolate','SaddleBrown','Sienna','Brown','Snow',
'HoneyDew','MintCream','Azure','AliceBlue','GhostWhite','WhiteSmoke','SeaShell',
'Beige','OldLace','FloralWhite','Ivory','AntiqueWhite','Linen',
'LavenderBlush','MistyRose','Gainsboro','LightGray','Silver','DarkGray','DimGray',
'LightSlateGray','SlateGray','DarkSlateGray'];
var cols=['lime','black','blue','purple','navy','teal','fuchsia','olive','maroon','gray','green'];
var xs=[0,0,0,0,0,0,0,0,0,0,0];
var ys=[0,0,0,0,0,0,0,0,0,0,0];
var ls=[0,0,0,0,0,0,0,0,0,0,0];
var ts=[0,0,0,0,0,0,0,0,0,0,0];
var ws=[0,0,0,0,0,0,0,0,0,0,0];
var hs=[0,0,0,0,0,0,0,0,0,0,0];
var pw=[null,null,null,null,null,null,null,null,null,null,null];
var ps=[null,null,null,null,null,null,null,null,null,null,null];
if (eval('' + argnumcols) != 11) {
if (eval('' + argnumcols) >= 40) { bks='  '; }
cols=[];
xs=[];
ys=[];
ls=[];
ts=[];
ws=[];
hs=[];
pw=[];
ps=[];
for (var ijk=0; ijk<argnumcols; ijk++) {
cols.push(allcols[ijk]);
xs.push(0);
ys.push(0);
ls.push(0);
ts.push(0);
ws.push(0);
hs.push(0);
pw.push(null);
ps.push(null);
}
}
var cmds=[];
var lastevent=null;
var rects=[];
var extentx=0, extenty=0;
var score=0;
var goes=0;
var ok=false;
var doneonce=false;
var ci=null;
var prevx=0, prevy=0, lastx=0, lasty=0, myx=0, myy=0;
var prevscore=0, qt=0, sin=0;
var prehtmltablerteport='<table onclick="woit(this);" title="Show in new window" id=mytable border=1 id=trep style=width:30%;align:right;z-index:67;margin-right:10px;><tr><th>Colour</th><th>Intersects?</th><th>Is within?</th><th>Adjacent to?</th><th>Separate to?<input id=iootw type=text style=position:absolute;top:-200px;left:-200px; value=""></input></th></tr></table>';
for (var li=0; li<ts.length; li++) {
prehtmltablerteport=prehtmltablerteport.replace('</table>', '<tr style=height:30px; id=row' + li + '><td id=col' + li + '></td><td id=intersects' + li + '></td><td id=within' + li + '></td><td id=adjacent' + li + '></td><td id=separate' + li + '></td></tr></table>');
}
var htmltablerteport=prehtmltablerteport;

function intersectRect(r1, r2) { // thanks to https://stackoverflow.com/questions/2752349/fast-rectangle-to-rectangle-intersection
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}

function adjacentTo(r1, r2) { // thanks to https://stackoverflow.com/questions/2752349/fast-rectangle-to-rectangle-intersection
if (intersectRect(r1, r2)) {
return (r2.left == r1.right ||
r2.right == r1.left ||
r2.top == r1.bottom ||
r2.bottom == r1.top);
} else {
return false;
}
}

function contains(r1, r2) { // thanks to https://stackoverflow.com/questions/27768039/find-out-if-a-rectangle-is-inside-another-rectangle-c
if ( (r2.right) < (r1.right)
&& (r2.left) > (r1.left)
&& (r2.top) > (r1.top)
&& (r2.bottom) < (r1.bottom) ) {
return true;
} else {
return false;
}
}

function woit(tois) {
if (wo != null) {
wo.close();
wo=null;
}
wo=window.open('','_blank','top=20,left=20,width=900,height=900');
wo.document.write('<html><body>' + tois.outerHTML + '</body></html>');
}

function enoughmovement() {
var avx=0.0, avy=0.0, xok=true, yok=true;
var i, jx=0, jy=0;
prevx=0;
prevy=0;
lastx=-1;
lasty=-1;
if (ok) {
for (i=0; i<ts.length; i++) {
if (ok) {
if (xs[i] != 0) {
if (jx == 0) {
prevx=xs[i];
lastx=xs[i];
} else if (lastx == xs[i]) {
if (xok == true) {
prevx=lastx;
lastx=xs[i];
xok=false;
} else {
ok=false;
sin=11;
}
} else {
prevx=lastx;
lastx=xs[i];
xok=true;
}
jx++;
avx=eval(avx * eval(-1 + jx) + xs[i]) / eval(jx);
}
if (ys[i] != 0) {
if (jy == 0) {
prevy=ys[i];
lasty=ys[i];
} else if (lasty == ys[i]) {
if (xok == true) {
prevy=lasty;
lasty=ys[i];
yok=false;
} else {
ok=false;
sin=12;
}
} else {
prevy=lasty;
lasty=ys[i];
yok=true;
}
jy++;
avy=eval(avy * eval(-1 + jy) + ys[i]) / eval(jy);
}
}
}
return ok;
} else {
return false;
}
}

function onesec() {
var i;
if (ok) {
score++;
if (myx != 0 && myy != 0) {
xs[eval(score % ts.length)] = myx;
ys[eval(score % ts.length)] = myy;
if (score > eval(prevscore + 5)) ok=enoughmovement();
} else if (qt == 15) {
ok=false;
sin=5;
qt=0;
} else {
qt++;
}
myx=0;
myy=0;
} else if (ci != null) {
clearInterval(ci);
ci=null;
var synopsis=prompt('You have scored ' + score + ' from ' + goes + ' goes. You can answer with number of colours (currently ' + ts.length + ') to use up to ' + allcols.length, '');
if (synopsis != null) {
if ((synopsis + ' ').toUpperCase().substring(0,1) == "Y") {
alert(("" + sin).replace('12','Y co-ordinate lazy').replace('11','X co-ordinate lazy').replace('7','You stepped on a tile.').replace('5','Too passive.').replace('1','X co-ordinate still').replace('2','X co-ordinate still'));
} else if ((synopsis + ' ').substring(0,1) >= '1' && (synopsis + ' ').substring(0,1) <= '9') {
location.href=document.URL.split('#')[0].split('?')[0] + '?numcols=' + synopsis;
}
}
document.body.innerHTML='<table style=width:100%;><tr><td id=left style=width:70%;><input id=crb type="button" value="Create Rectangles ' + eval(goes + 1) + '! Score:' + score + '" onclick="MakePopups(event);" style="background-color: lightgreen;position:absolute;left:0px;top:0px;"/></td><td id=right style=vertical-align:top; style=width:30%;background-color:#f0f0f0;>' + htmltablerteport + '</td></tr></table>';
//document.title='Create Rectangles ... Score:' + score + ' Goes:' + goes;
pword="";
extentx=0;
extenty=0;
ok=false;
prevx=0;
prevy=0;
lastx=0;
lasty=0;
myx=0;
myy=0;
for (i=0; i<ts.length; i++) xs[i]=0;
for (i=0; i<ts.length; i++) ys[i]=0;
prevscore=score;
qt=0;
sin=0;
//kup();
MakePopups(lastevent);
}
}

function MakePopups(event) {
var i, j=1;
lastevent=event;
doneonce=false;
if (ci != null) {
clearInterval(ci);
ci=null;
}
document.body.innerHTML='<table style=width:100%;><tr><td id=left style=width:70%;><input id=crb type="button" value="Create Rectangles ' + eval(goes + 1) + '! Score:' + score + '" onclick="MakePopups(event);" style="background-color: lightgreen;position:absolute;left:0px;top:0px;"/></td><td id=right style=vertical-align:top; style=width:30%;background-color:#f0f0f0;>' + htmltablerteport + '</td></tr></table>';
//document.title='Create Rectangles ... Score:' + score + ' Goes:' + goes;
pword="";
extentx=0;
extenty=0;
ok=false;
prevx=0;
prevy=0;
lastx=0;
lasty=0;
myx=0;
myy=0;
for (i=0; i<ts.length; i++) xs[i]=0;
for (i=0; i<ts.length; i++) ys[i]=0;
prevscore=score;
qt=0;
sin=0;
goes++;
j--;
for (i=0; i<(ts.length - 1); i++) {
j++;
ls[i]=Math.floor(Math.random() * (600 - 35) + 35);
ts[i]=Math.floor(Math.random() * (600 - 35) + 35);
ws[i]=Math.floor(Math.random() * (200 - 35) + 35);
hs[i]=Math.floor(Math.random() * (200 - 35) + 35);
MakePopup(event, pw[i], ps[i], cols[i], ls[i], ts[i], ws[i], hs[i], i);
if (eval(ls[i] + ws[i]) > extentx) extentx=eval(ls[i] + ws[i]);
if (eval(ts[i] + hs[i]) > extenty) extenty=eval(ts[i] + hs[i]);
}
ls[j]=eval(5 + extentx);
ts[j]=0;
ws[j]=10;
hs[j]=1200;
MakePopup(event, pw[j], ps[j], cols[j], ls[j], ts[j], ws[j], hs[j], j);

ok=true;
ci=setInterval(onesec,1000);
}

function andlater() {
if (!doneonce) {
for (var ji=0; ji<cmds.length; ji++) {
eval(cmds[ji]);
}
for (var kji=0; kji<rects.length; kji++) {
var seprt=false;
document.getElementById('intersects' + kji).innerHTML='';
document.getElementById('within' + kji).innerHTML='';
document.getElementById('adjacent' + kji).innerHTML='';
document.getElementById('separate' + kji).innerHTML='';
for (var mji=0; mji<rects.length; mji++) {
if (mji != kji) {
seprt=true;
if (mji > kji || 1 == 1) {
if (intersectRect(rects[kji], rects[mji])) {
seprt=false;
if (document.getElementById('intersects' + kji).innerHTML.indexOf(cmds[mji].split("='")[1].split("'")[0]) == -1) {
document.getElementById('intersects' + kji).innerHTML+='<span style=background-color:' + cmds[mji].split("='")[1].split("'")[0] + ';>' + bks + '</span>';
}
}
if (adjacentTo(rects[kji], rects[mji])) {
seprt=false;
if (document.getElementById('adjacent' + kji).innerHTML.indexOf(cmds[mji].split("='")[1].split("'")[0]) == -1) {
document.getElementById('adjacent' + kji).innerHTML+='<span style=background-color:' + cmds[mji].split("='")[1].split("'")[0] + ';>' + bks + '</span>';
}
}
}
if (contains(rects[mji], rects[kji])) {
seprt=false;
if (document.getElementById('within' + kji).innerHTML.indexOf(cmds[mji].split("='")[1].split("'")[0]) == -1) {
document.getElementById('within' + kji).innerHTML+='<span style=background-color:' + cmds[mji].split("='")[1].split("'")[0] + ';>' + bks + '</span>';
}
}
if (seprt) {
if (document.getElementById('separate' + kji).innerHTML.indexOf(cmds[mji].split("='")[1].split("'")[0]) == -1) {
document.getElementById('separate' + kji).innerHTML+='<span style=background-color:' + cmds[mji].split("='")[1].split("'")[0] + ';>' + bks + '</span>';
}
}
}
}
}
doneonce=true;
}
cmds=[];
rects=[];
}

function MakePopup(event, popupWindow, popupIsShown, colis, lis, tis, wis, his, indx) {
if (1 == 56 && window.createPopup) { //Internet Explorer
if (!popupWindow) {
popupWindow = window.createPopup();
var popupBody = popupWindow.document.body;
popupBody.style.backgroundColor = colis; //"lightblue";
popupBody.style.opacity = "0.9"; //"lightblue";
cmds.push("document.getElementById('col" + indx + "').style.backgroundColor='" + colis + "'");
if (indx == 0) { setTimeout(andlater,200); }
popupBody.style.border = "solid black 1px";
//popupBody.mousedown="function(event) { alert('IE'); }";
//popupBody.mouseover="function(event) { alert('IEblur'); }";
if (1 == 2) popupBody.innerHTML = "Click outside to close.";
}
popupWindow.show (lis, tis, wis, his, document.body); //100, 100, 150, 25, document.body);
//document.title='Create Rectangle ... Score:' + score + ' Goes:' + goes;
pword="client";
}
else {
if (!popupIsShown) {
if (!popupWindow) {
popupWindow = document.createElement("div");
popupWindow.style.backgroundColor = colis; //"lightblue";
cmds.push("document.getElementById('col" + indx + "').style.backgroundColor='" + colis + "'");
if (indx == 0) { setTimeout(andlater,200); }
popupWindow.style.border = "solid black 1px";
popupWindow.style.position = "absolute";
popupWindow.style.width = wis + "px"; //150
popupWindow.style.height = his + "px"; //25
popupWindow.style.top = tis + "px"; //"100px";
popupWindow.style.left = lis + "px"; //"100px";
popupWindow.style.opacity = "0.9"; //"100px";
//popupWindow.onmouseover="function(event) { top.document.title='Mouse Over'; }";
//popupWindow.mouseout="function(event) { top.document.title='Mouse Out'; }";
if (1 == 2) popupWindow.innerHTML = "Click outside to close.";
}

document.body.appendChild(popupWindow);
rects.push(popupWindow.getBoundingClientRect());
//if (pword == "") window.addEventListener ('click', RemovePopup, true);
if (pword == "") window.addEventListener('mouseover', MouseOver, true);
//window.addEventListener ('mouseout', MouseOut, true);
//window.addEventListener ('mousedown', MouseIsDown, true);
popupIsShown = true;
//document.title='Create Rectangles ... Score:' + score + ' Goes:' + goes;

// to avoid that the current click event propagates up
if (pword == "") event.stopPropagation ();
}
pword="page";
}
}

function MouseIsDown(event) {
alert('non-IE');
}

function MouseOver(event) {
if (pword != "" && ok) {
qt=0;
myx=eval("event." + pword + "X");
myy=eval("event." + pword + "Y");
if (eval(myx - extentx) > 0) {
sin=1;
ok=false;
}
if (eval(myy - extenty) > 0) {
sin=2;
ok=false;
}
if (ok) {
xs[eval(score % ts.length)] = myx;
ys[eval(score % ts.length)] = myy;
ok=enoughmovement();
}
var i, found=false;
if (ok) {
for (i=0; i<ts.length; i++) {
if (!found) {
if (myx >= ls[i] && myy >= ts[i] && myx <= eval(ls[i] + ws[i]) && myy <= eval(ts[i] + hs[i])) {
found=true;
}
}
}
}
if (found) {
if (1 == 7) { top.document.title='Mouse Over ... Score:' + score + ' Goes:' + goes; }
sin=7;
ok=false;
} else {
if (1 == 7) { top.document.title='Mouse Out ... Score:' + score + ' Goes:' + goes; }
}
}
}

function MouseOut(event) {
if (1 == 7) { top.document.title='Mouse Out ... Score:' + score + ' Goes:' + goes; }
//alert(99);
}

function RemovePopup(event) {
if (popupIsShown) {
var relation = popupWindow.compareDocumentPosition (event.target);
var clickInPopup = (event.target == popupWindow) || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY);
if (!clickInPopup) {
document.body.removeChild(popupWindow);
window.removeEventListener('click', RemovePopup, true);
popupIsShown = false;
//document.title='Create Rectangles ... Score:' + score + ' Goes:' + goes;
pword="";
extentx=0;
extenty=0;
ok=false;
prevx=0;
prevy=0;
lastx=0;
lasty=0;
}
}
}

function firstone() {
document.getElementById('right').innerHTML=htmltablerteport;
}

function kup() {
document.body.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.which == 13 || event.keyCode == 13) {
if (ci != null) {
clearInterval(ci);
ci=null;
}
MakePopups(event); //document.getElementById("crb").click();
}
});
}

setTimeout(kup,1000);
</script>
</head>
<body data-onload="kup();" style="width: 100%;">
<h1>Rectangle Analyze</h1>
<h4>RJM Programming - March, 2020</h4>
<table id=mytable style=width:100%;><tr><td id=left style=width:70%;>
<input id=crb type="button" value="Create Rectangles" onclick="MakePopups(event);" style="background-color: yellow;position:absolute;left:0px;top:0px;"/>
</td><td id=right style=vertical-align:top;width:30%;align:right;background-color:#f0f0f0;><script type='text/javascript'> document.write(htmltablerteport); document.getElementById('crb').click(); </script></td><input id=iootw type=text style=position:absolute;top:-200px;left:-200px; value=""></input></tr></table>
</body>
</html>