<!doctype html>
<html>
<head>
<title>No Popup</title>
<script type="text/javascript">
var popupWindow = null;
var popupIsShown = false;
var pword="";
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];
var extentx=0, extenty=0;
var score=0;
var goes=0;
var ok=false;
var ci=null;
var prevx=0, prevy=0, lastx=0, lasty=0, myx=0, myy=0;
var prevscore=0, qt=0, sin=0;

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. Answer Y to get advice on where you went wrong', '');
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'));
}
document.body.innerHTML=' <input type="button" value="Create Obstacle Course ' + eval(goes + 1) + '! Score:' + score + '" onclick="MakePopups (event);" style="background-color: lightgreen;"/>';
document.title='No PoPup ... 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;
}
}

function MakePopups (event) {
var i, j=1;
goes++;
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]);
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]);

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

function MakePopup (event, popupWindow, popupIsShown, colis, lis, tis, wis, his) {
if (window.createPopup) { //Internet Explorer
if (!popupWindow) {
popupWindow = window.createPopup ();
var popupBody = popupWindow.document.body;
popupBody.style.backgroundColor = colis; //"lightblue";
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='Popup ... Score:' + score + ' Goes:' + goes;
pword="client";
}
else {
if (!popupIsShown) {
if (!popupWindow) {
popupWindow = document.createElement ("div");
popupWindow.style.backgroundColor = colis; //"lightblue";
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.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);
//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='Popup ... 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) {
top.document.title='Mouse Over ... Score:' + score + ' Goes:' + goes;
sin=7;
ok=false;
} else {
top.document.title='Mouse Out ... Score:' + score + ' Goes:' + goes;
}
}
}

function MouseOut (event) {
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='No PoPup ... Score:' + score + ' Goes:' + goes;
pword="";
extentx=0;
extenty=0;
ok=false;
prevx=0;
prevy=0;
lastx=0;
lasty=0;
}
}
}
</script>
</head>
<body style="width: 100%;">
<h1>No Stepping on Tiles, No Lax Play Game</h1>
<h4>RJM Programming - May, 2015</h4>
<input type="button" value="Create Obstacle Course Number 1! No lax play please (ie. keep mouse moving)!" onclick="MakePopups (event);" style="background-color: yellow;"/>
</body>
</html>