<!doctype html>
<head>
<title>Under 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='';
var lastx=0.0, lasty=0.0;
var smallesth=-1.0;

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();
} else if (Math.abs(eval(lastx - document.getElementById('x').value)) > 0.001 || Math.abs(eval(lasty - document.getElementById('y').value)) > 0.001) {
maps[0].title = 'other';
x=document.getElementById('x').value;
y=document.getElementById('y').value;
var retv=calcdist();
lastx=document.getElementById('x').value;
lasty=document.getElementById('y').value;
}
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 find_dist(x1, y1, x2, y2) {
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}

function herons_formula_triangle_area(x1, y1, x2, y2, x3, y3) {
var a=Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
var b=Math.sqrt((x3 - x2) * (x3 - x2) + (y3 - y2) * (y3 - y2));
var c=Math.sqrt((x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
var s=eval((a + b + c) / 2.0);
return Math.sqrt(s * (s - a) * (s - b) * (s - c));
}

function calcdist() { //(event) {
var theseobjs, area=0.0, base=0.0, height=0.0, smallestijh=-1;
var thesexy;
eval("aconto.getElementById('" + midis + "').title='other';");
smallesth=-1.0;
theseobjs=objects[snum].split(';');
//alert(theseobjs[1]);
thesexy=theseobjs[1].split(',');

//if (event.clientX || event.clientY) {
// x = event.clientX;
// y = event.clientY;
// } else {
// x = event.pageX;
// y = event.pageY;
// }

for (var ijh=2; ijh<eval(-2 + (thesexy.length / 1)); ijh+=2) {
area=herons_formula_triangle_area(x, y, thesexy[eval(-2 + ijh)], thesexy[eval(-1 + ijh)], thesexy[ijh], thesexy[eval(1 + ijh)]);
//alert('x=' + x + ' y='+ y + ' ijh=' + ijh + ' area=' + area);
base=find_dist(thesexy[eval(-2 + ijh)], thesexy[eval(-1 + ijh)], thesexy[ijh], thesexy[eval(1 + ijh)]);
//alert('ijh=' + ijh + ' base=' + base);
height=eval((2.0 * area) / base);
//alert('ijh=' + ijh + ' height=' + height);
if (eval(height) < eval(smallesth) || eval(smallesth) < 0.0) {
smallesth=height;
}
}

var cnf;
if (eval(smallesth) < 3) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is boiling. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 10) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is very hot. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 20) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is very warm. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 40) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is warm. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 80) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is lukewarm. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 120) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is cool. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 160) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is cold. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 160) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is freezing. Cancel gives up, other answer will give dictionary view.","");
}
if (cnf == null) {
eval("aconto.getElementById('" + midis + "').title='';");
} else {
if (cnf.length == 0) {
cnf=cnf;
return true;
} else {
eval("aconto.getElementById('" + midis + "').title='lookup';");
}
}
return false;
}

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=" if (event.clientX || event.clientY) { parent.document.getElementById(' + "'" + 'x' + "'" + ').value=event.clientX; parent.document.getElementById(' + "'" + 'y' + "'" + ').value=event.clientY; } else { parent.document.getElementById(' + "'" + 'x' + "'" + ').value=event.pageX; parent.document.getElementById(' + "'" + 'y' + "'" + ').value=event.pageY; } " />';
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>
<input type='hidden' id='x' value='0.0'></input><input type='hidden' id='y' value='0.0'></input>
</body>
</html>