<!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; }
</style>
<script type='text/javascript'>
var i, j, imgw=0, imgh=0, factor=1.0;
var leftout=40, topout=40;
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';
function secondstaken() {
if (dmode == 'none') {
goes=1;
var amore=prompt("Welcome to our Image in Nine Game ... bit like a jigsaw game with 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.html?goes=1 URL in order to specify your own URL image as required, or enter your own image URL below.", "");
if (amore) {
if (amore != '') {
imageis = amore;
location.href = './scroll_touch.html?image=' + encodeURIComponent(amore) + '&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') imgs[m].style.display=dmode;
}
}
seconds++;
setTimeout(secondstaken, 1000);
}
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();
//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.html?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;
}
</script>
</head>
<body onload='pregetwh();'>
<div id='mydiv'></div>
</body>
</html>