<!doctype html>
<html>
<head>
<title>Image in Nine Game - RJM Programming - September, 2016</title>
<style>
margin: { 0 0 0 0; }
padding: { 0 0 0 0; }

.custom-alert {
display: inline-block;
visibility: hidden;
background-color: #666;
color: #fff;
text-align: enter;
margin: 5% auto;
padding: 12px 48px;
opacity: 0.85;
}
</style>

<script type='text/javascript'>
var i, j, imgw=0, imgh=0, factor=1.0, x=0, y=0, tlx=0, tly=0, brx=0, bry=0, squarethingison=-1, rtlx=0, rtly=0, rbrx=0, rbry=0;
var leftout=40, topout=40;
var thing=location.search.split('thing=')[1] ? decodeURIComponent(location.search.split('thing=')[1]).split('&')[0] : '';
var score=location.search.split('score=')[1] ? decodeURIComponent(location.search.split('score=')[1]).split('&')[0] : 0;
var goes=location.search.split('goes=')[1] ? decodeURIComponent(location.search.split('goes=')[1]).split('&')[0] : 0;
var seconds=location.search.split('seconds=')[1] ? decodeURIComponent(location.search.split('seconds=')[1]).split('&')[0] : 0;
var imageis=location.search.split('image=')[1] ? decodeURIComponent(location.search.split('image=')[1]).split('&')[0] : 'http://www.rjmprogramming.com.au/HTMLCSS/your_acronyms.jpg';
var posdesc=["left top","center top","right top","left center","center center","right center","left bottom","center bottom","right bottom"];
var okdesc=[1,0,0,0,0,0,0,0,0];
var leftdesc=[0,0,0,0,0,0,0,0,0];
var topdesc=[0,0,0,0,0,0,0,0,0];
var imagetable='<table border=1 style="position:absolute;top:0;left:0;"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>';
var dmode='block';
var tl_click=false, br_click=false;
var lh='';
var wasseconds=seconds;
var hiding_fourfivehundred = 14500;
var finding_eightfivehundred = 18500;

function andt() {
document.getElementById('custom-alert-1').innerHTML="";
document.getElementById('custom-alert-1').style.visibility='hidden';
}


function whichsquare() {
squarethingison=-1;
if (eval(tlx) >= 0 && eval(tlx) < eval(imgw / 3) && eval(tly) >= 0 && eval(tly) < eval(imgh / 3)) {
squarethingison=0;
rtlx=eval(0 - eval(tlx) + 70);
rtly=eval(0 - eval(tly) + 70);
rbrx=eval(0 - eval(brx) - 70);
rbry=eval(0 - eval(bry) - 70);
} else if (eval(tlx) >= eval(imgw / 3) && eval(tlx) < eval(imgw * 2 / 3) && eval(tly) >= 0 && eval(tly) < eval(imgh / 3)) {
squarethingison=1;
rtlx=eval(eval(imgw / 3) - eval(tlx) + 70);
rtly=eval(0 - eval(tly) + 70);
rbrx=eval(eval(imgw / 3) - eval(brx) - 70);
rbry=eval(0 - eval(bry) - 70);
} else if (eval(tlx) >= eval(imgw * 2 / 3) && eval(tly) >= 0 && eval(tly) < eval(imgh / 3)) {
squarethingison=2;
rtlx=eval(eval(imgw * 2 / 3) - eval(tlx) + 70);
rtly=eval(0 - eval(tly) + 70);
rbrx=eval(eval(imgw * 2 / 3) - eval(brx) - 70);
rbry=eval(0 - eval(bry) - 70);
} else if (eval(tlx) >= 0 && eval(tlx) < eval(imgw / 3) && eval(tly) >= eval(imgh / 3) && eval(tly) < eval(imgh * 2 / 3)) {
squarethingison=3;
rtlx=eval(0 - eval(tlx) + 70);
rtly=eval(eval(imgh / 3) - eval(tly) + 70);
rbrx=eval(0 - eval(brx) - 70);
rbry=eval(eval(imgh / 3) - eval(bry) - 70);
} else if (eval(tlx) >= eval(imgw / 3) && eval(tlx) < eval(imgw * 2 / 3) && eval(tly) >= eval(imgh / 3) && eval(tly) < eval(imgh * 2 / 3)) {
squarethingison=4;
rtlx=eval(eval(imgw / 3) - eval(tlx) + 70);
rtly=eval(eval(imgh / 3) - eval(tly) + 70);
rbrx=eval(eval(imgw / 3) - eval(brx) - 70);
rbry=eval(eval(imgh / 3) - eval(bry) - 70);
} else if (eval(tlx) >= eval(imgw * 2 / 3) && eval(tly) >= eval(imgh / 3) && eval(tly) < eval(imgh * 2 / 3)) {
squarethingison=5;
rtlx=eval(eval(imgw * 2 / 3) - eval(tlx) + 70);
rtly=eval(eval(imgh / 3) - eval(tly) + 70);
rbrx=eval(eval(imgw * 2 / 3) - eval(brx) - 70);
rbry=eval(eval(imgh / 3) - eval(bry) - 70);
} else if (eval(tlx) >= 0 && eval(tlx) < eval(imgw / 3) && eval(tly) >= eval(imgh * 2 / 3)) {
squarethingison=6;
rtlx=eval(0 - eval(tlx) + 70);
rtly=eval(eval(imgh * 2 / 3) - eval(tly) + 70);
rbrx=eval(0 - eval(brx) - 70);
rbry=eval(eval(imgh * 2 / 3) - eval(bry) - 70);
} else if (eval(tlx) >= eval(imgw / 3) && eval(tlx) < eval(imgw * 2 / 3) && eval(tly) >= eval(imgh * 2 / 3)) {
squarethingison=7;
rtlx=eval(eval(imgw / 3) - eval(tlx) + 70);
rtly=eval(eval(imgh * 2 / 3) - eval(tly) + 70);
rbrx=eval(eval(imgw / 3) - eval(brx) - 70);
rbry=eval(eval(imgh * 2 / 3) - eval(bry) - 70);
} else if (eval(tlx) >= eval(imgw * 2 / 3) && eval(tly) >= 0 && eval(tly) >= eval(imgh * 2 / 3)) {
squarethingison=8;
rtlx=eval(eval(imgw * 2 / 3) - eval(tlx) + 70);
rtly=eval(eval(imgh * 2 / 3) - eval(tly) + 70);
rbrx=eval(eval(imgw * 2 / 3) - eval(brx) - 70);
rbry=eval(eval(imgh * 2 / 3) - eval(bry) - 70);
}
//alert('tlx=' + tlx + ' and tly=' + tly + ' and topleft=' + eval(imgw / 3) + ',0' + ' and squarethingison=' + squarethingison + ' ' + rtlx + ',' + rtly + ' to ' + rbrx + ',' + rbry);
//alert(squarethingison);
return squarethingison;
}

function our_encodeURIComponent(ins) {
var outins=encodeURIComponent(ins), abits=ins.split('&'), bbits;
if (abits.length > 1) {
if (abits[0] == '') {
outins=encodeURIComponent(imageis);
} else {
outins=encodeURIComponent(abits[0]);
imageis=abits[0];
}
for (var ii=1; ii<abits.length; ii++) {
bbits=abits[ii].split('=');
if (bbits.length > 1) {
outins+='&' + bbits[0] + '=' + encodeURIComponent(abits[ii].replace(bbits[0] + '=', ''));
if (bbits[0] == 'thing') thing=abits[ii].replace(bbits[0] + '=', '');
} else {
outins+='&' + bbits[0];
}
}
} else if (ins.indexOf(' ') != -1 || ins.indexOf('.') == -1) {
thing=ins;
outins=imageis;
//alert(outins);
}
return outins;
}

function secondstaken() {
if (dmode == 'none') {
goes=1;
var amore=thing;
if (amore == '') {
amore=prompt("Welcome to our Image in Nine Games ... firstly, one player mode game is a bit like a jigsaw game, with the top left of nine filled in (they have a yellow border when fitting nicely ... though there is a tolerance) ... and help for others via faint underneath image and getting numbers up in the title close to zero ... once you move the other eight pieces around via one finger swipe gesture for mobile or scrolling for non-mobile. This starting image is http://www.rjmprogramming.com.au/HTMLCSS/your_acronyms.jpg and you can practice or give up by using http://www.rjmprogramming.com.au/HTMLCSS/scroll_touch.htm?goes=1 URL in order to specify your own URL image as required, or enter your own image URL below, or as a collaborative game for two (Hiding Player and Finding Player), enter name of Thing You Want Other Player to Find or [image URL]&thing=[Thing You Want Other Player to Find]", "");
hiding_fourfivehundred = 4500;
finding_eightfivehundred = 8500;
}
if (amore) {
if (amore != '') {
var prevlh=imageis;
lh=our_encodeURIComponent(amore);
if (thing == '' || imageis != prevlh) location.href = './scroll_touch.htm?image=' + lh + '&score=' + score + '&goes=' + goes + '&seconds=' + seconds;
}
}
dmode='block';
var imgs=document.getElementsByTagName('img');
for (var m=0; m<imgs.length; m++) {
if (imgs[m].id != 'myimg' && thing == '') imgs[m].style.display=dmode;
}
}
seconds++;
if (thing == '' || br_click) {
setTimeout(secondstaken, 1000);
} else {
document.title="Waiting for you, 'Hiding Player', to click top left and bottom right of " + thing + " ... while 'Finding Player', please, turns away.";
document.getElementById('custom-alert-1').innerHTML="Waiting for you, 'Hiding Player', to click top left and bottom right of " + thing + " ... while 'Finding Player', please, turns away.";
document.getElementById('custom-alert-1').style.visibility='visible';
setTimeout(andt, hiding_fourfivehundred);
}
}

function pregetwh() {
var delay=1000;
if (goes == 0 || (goes == 1 && score == 0)) {
dmode='none';
document.body.innerHTML+='<img id="myimg" src="' + imageis + '" style="display:none;" onerror=" imgw=imgw; " onload=" getwh(this); "></img>';
goes=0;
delay=2000;
} else {
document.body.innerHTML+='<img id="myimg" src="' + imageis + '" style="display:none;" onerror=" imgw=imgw; " onload=" getwh(this); "></img>';
}
goes++;
setTimeout(secondstaken, delay);
}

function checkscroll(od) {
var ourdiv=eval(od.id.replace('d','')), k, allok=false;
var rect=document.getElementById('i' + ourdiv).getBoundingClientRect();
if (ourdiv == squarethingison && rect.left <= rtlx && rect.left >= rbrx && rect.top <= rtly && rect.top >= rbry) {
score++;
alert("Congratulations, 'Finding Player' ... you found " + thing + ' in ' + eval(eval(seconds) - eval(wasseconds)) + ' seconds.');
location.href = './scroll_touch.htm?image=' + lh + '&score=' + score + '&goes=0&seconds=' + seconds;
}
//alert(od.id + ' scrollLeft=' + od.scrollLeft + ' ' + od.id + ' scrollTop=' + od.scrollTop);
var sl=eval(eval(('0' + od.scrollLeft).replace('px','')) * factor);
var st=eval(eval(('0' + od.scrollTop).replace('px','')) * factor);
//if (Math.abs(leftdesc[ourdiv] - sl) <= eval(leftout) && Math.abs(topdesc[ourdiv] - st) <= eval(topout)) {
if (Math.abs(rect.left) <= eval(leftout) && Math.abs(rect.top) <= eval(topout)) {
okdesc[ourdiv] = 1;
document.title=rect.left + ' ' + rect.top; // + ' ' + od.id + ' ' + od.offsetX + ' ' + ' ' + sl + ' ' + st + ' ' + rect.left;
//alert(9);
od.style.border = '5px solid yellow';
} else {
document.title=rect.left + ' ' + rect.top; // + ' ' + od.id + ' ' + od.offsetX + ' ' + sl + ' ' + st + ' ' + rect.left;
okdesc[ourdiv] = 0;
od.style.border = '0px solid yellow';
}

allok=true;
var huh=' ';
for (k=0; k<9; k++) {
huh+=okdesc[k];
if (okdesc[k] == 0) allok=false;
}
document.title+=huh;
if (allok) {
score++;
if (goes == 0) goes=1;
var more=prompt('Congratulations! That is Score: ' + score + ' from Goes: ' + goes + ' with Take Taken in Seconds: ' + seconds + '. Another go with the image URL below?', imageis);
if (more) {
if (more == '') more = imageis;
location.href = './scroll_touch.htm?image=' + encodeURIComponent(more) + '&score=' + score + '&goes=' + goes + '&seconds=' + seconds;
}
}

}

function getwh(io) {
imgw = eval(('' + io.width).replace('px',''));
imgh = eval(('' + io.height).replace('px',''));
leftdesc[1] = eval(imgw / 3);
leftdesc[4] = eval(imgw / 3);
leftdesc[7] = eval(imgw / 3);
leftdesc[2] = eval(imgw * 2 / 3);
leftdesc[5] = eval(imgw * 2 / 3);
leftdesc[8] = eval(imgw * 2 / 3);

topdesc[3] = eval(imgh / 3);
topdesc[4] = eval(imgh / 3);
topdesc[5] = eval(imgh / 3);
topdesc[6] = eval(imgh * 2 / 3);
topdesc[7] = eval(imgh * 2 / 3);
topdesc[8] = eval(imgh * 2 / 3);

// document.title=eval(imgw / 3) + ' ' + eval(imgh / 3);
var fin='border: 5px solid yellow;';

for (i=0; i<9; i++) {
imagetable=imagetable.replace("<td></td>","<td><div id='d" + i + "' onscroll='checkscroll(this);' onmousewheel='checkscroll(this);' style='" + fin + "-webkit-overflow-scrolling:touch;overflow:scroll;opacity:0.5;height:" + eval(imgh / 3.0) + "px;width:" + eval(imgw / 3.0) + "px;background: url(" + imageis + "); background-position: " + posdesc[i] + ";'><img id='i" + i + "' src='" + imageis + "' title='Image' style='opacity:0.9;z-index:6;display:" + dmode + "'></img></div></td>");
fin='';
}
document.getElementById('mydiv').innerHTML=imagetable;
}

function oc(event) {
if (event.clientX || event.clientY) {
x = event.clientX;
y = event.clientY;
} else {
x = event.pageX;
y = event.pageY;
}
if (!tl_click && thing != '') {
tl_click=true;
tlx=x;
tly=y;
document.title="Got that, 'Hiding Player', thanks. Now the bottom right? After that, call in 'Finding Player', quickly to see a message and to find your hidden " + thing + ".";
document.getElementById('custom-alert-1').innerHTML="Got that, 'Hiding Player', thanks. Now the bottom right? After that, call in 'Finding Player', quickly to see a message and to find your hidden " + thing + ".";
document.getElementById('custom-alert-1').style.visibility='visible';
setTimeout(andt, hiding_fourfivehundred);
// alert('tlx=' + tlx + ' and tly=' + tly);
} else if (!br_click && thing != '') {
br_click=true;
brx=x;
bry=y;
//alert('brx=' + brx + ' and bry=' + bry);
squarethingison=whichsquare();
var imgs=document.getElementsByTagName('img');
for (var m=0; m<imgs.length; m++) {
if (imgs[m].id != 'myimg' && thing != '') imgs[m].style.display=dmode;
}
document.title="Okay 'Finding Player', over to you to find the " + thing + " that 'Hiding Player' has hidden, by scrolling " + thing + " into the top left of relevant of Nine Parts of Image square. The correct square must be the one scrolled in to succeed.";
document.getElementById('custom-alert-1').innerHTML="Okay 'Finding Player', over to you to find the " + thing + " that 'Hiding Player' has hidden, by scrolling " + thing + " into the top left of relevant of Nine Parts of Image square. The correct square must be the one scrolled in to succeed.";
document.getElementById('custom-alert-1').style.visibility='visible';
setTimeout(andt, finding_eightfivehundred);
setTimeout(secondstaken, 1000);
}
}

</script>
</head>
<body onload='pregetwh();' onclick=' oc(event); ' ontouchstart=' oc(event); '>
<div id='mydiv'></div>
<div id='custom-alert-1' class="custom-alert" style="position:absolute;top:20;left:20;z-index:12;"></div>
</body>
</html>