<!doctype html>
<head>
<title>Unde the Stairs - Reworking the HTML Map Tag - RJM Programming - November, 2015</title>
<script type='text/javascript'>

var mydivbit='';
var utsifo=null;
var ovt=null;
var aconto=null;
var startwith = location.search.split('startwith=')[1] ? location.search.split('startwith=')[1].split('&')[0] : "";
var wasih='';
var choice='';
var images, maps, areas;
var contents='';
var objects=new Array();
var thisobj='';
var lastobj='';
var snum=-1;
var midis='';

function dostuff(iois) {
if (iois != null) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
utsifo=document.getElementById('utsif');
}
}
}
}

function overtopforabit() {
if (document.URL.indexOf('?') == -1) {
mydivbit = '<div id="ovti" style="opacity:0.8;position:absolute;z-index:5;top:0;left:0;width:100%;height:1133;"></div>';
mydivbit = mydivbit.replace("</div>", "<br><br><br><br>      <select style='font-size:18px;background-color:yellow;' onchange='chooseone(this);' id='mysel'><option value=''>Under the Stairs Vocabulary Game - optionally choose mode of use [Click and Be Prompted (selected in 20 seconds)] vs Find Prompted Object ... below ...</option><option value='" + utsifo.src.replace('.html','') + "'>Click and Be Prompted</option><option value='" + utsifo.src + "'>Find Prompted Object</option></select></div>");
document.body.innerHTML += mydivbit;
setTimeout(andthen, 20000);
}
}

function andthen() {
if (document.getElementById('mysel') != null) choice=document.getElementById('mysel').value;
chooseone(document.getElementById('selo'));
}

function chooseone(selo) {
if (selo != null) choice=selo.value;
if (choice.indexOf('.htm') != -1) {
contents=aconto.body.innerHTML;
}
document.getElementById('mysel').style.display='none';
document.getElementById('mysel').innerHTML='';
if (contents != "") process();
}

function process() {
var theseobjs;
images=aconto.getElementsByTagName('img');
maps=aconto.getElementsByTagName('map');
maps[0].title='Todo';
midis=maps[0].id;
areas=aconto.getElementsByTagName('area');
for (var ia=0; ia<areas.length; ia++) {
if (areas[ia].href != null) {
if (areas[ia].href != "") objects.push(areas[ia].href.replace('http://www.thefreedictionary.com/','').replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," ") + ";" + areas[ia].coords);
}
}
setTimeout(nextone, 1000);
selone();
}

function nextone() {
var theseobjs;
theseobjs=objects[snum].split(';');
if (maps[0].title == '') {
selone();
} else if (maps[0].title == 'lookup') {
window.open('http://www.thefreedictionary.com/' + theseobjs[0].replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+'),'_blank','top=20,left=20,width=400,height=400');
selone();
}
setTimeout(nextone, 1000);
}

function selone() {
var theseobjs;
snum = Math.floor(Math.random() * objects.length) + 0;
while (thisobj == lastobj) {
theseobjs=objects[snum].split(';');
thisobj=theseobjs[0];
if (thisobj == lastobj) snum = Math.floor(Math.random() * objects.length) + 0;
}
//alert(images[0].src + ' ... ' + maps[0].id + ' ... ' + areas[0].coords + ' ... ' + areas[0].href.replace('http://www.thefreedictionary.com/','').replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," "));
alert("Please click '" + thisobj + "'.");
lastobj=thisobj;
maps[0].title='Todo';
maps[0].innerHTML=justchooseone(); // huh?
}

function justchooseone() {
var theseobjs;
theseobjs=objects[snum].split(';');
var ih='<area shape="poly" alt="What is that?" title="' + thisobj + '" coords="' + theseobjs[1] + '" href="javascript:void(0);" onClick="alert(' + "'" + "Well done!" + "'" + '); document.getElementById(' + "'" + midis + "'" + ').title=' + "''" + '; " /><area shape="default" nohref alt="" onclick="var cnf=prompt(' + "'" + "Sorry, this is not " + thisobj + ", and cannot give you a temperature, yet. Cancel gives up, other answer will give dictionary view." + "',''" + '); if (cnf == null) { document.getElementById(' + "'" + midis + "'" + ').title=' + "''" + '; } else { if (cnf.length == 0) { cnf=cnf; } else { document.getElementById(' + "'" + midis + "'" + ').title=' + "'lookup'" + '; } } return false; " />';
return ih;
}
</script>
</head>
<body onload=" wasih= document.getElementById('mydiv').innerHTML; if (startwith.length != 0) { document.getElementById('utsif').src=startwith; } overtopforabit(); ">
<div id='mydiv' style='height:1133; width:1692;'>
<iframe id='utsif' src='under_the_stairs.html' title='Under The Stairs' onload='dostuff(this);' height='1133' border='0' width='1692'></iframe>
</div>
</body>
</html>