<html>
<head>
<title>Canvas HTML Element Onions of the 4th Dimension Game Tutorial ... RJM Programming ... April 2014 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>

<script language="JavaScript">
var gpx = 200;
var gpy = 20;
var gpttext = "";
var cf = "24px Verdana";

var anames=['Tal' + 'ker 1','Tal' + 'ker 2','Tal' + 'ker 3','Tal' + 'ker 4','Tal' + 'ker 5'];

var lbit='';

var dialog = new Array();

var five=5;

var curfocus=0;

var elem=null, context=null;

var lasttalker='';

var asknowat = 10;
var currasknowat = 0;

var stuff='', laststuff='';

var score = 0.0;
var goes = 0.0;

function updatescore() {
}

function converse(to,tid, tval) {
var ans, trbit;
if (tval != '') {
if (1 == 1) {
lasttalker=parent.document.getElementById('h' + tid.replace('i','')).value;
} else {
lasttalker='Talker ' + tid.replace('i','') + ': ';
}
if (tval.indexOf(':') != -1) {
ans=tval.split(':');
trbit=document.getElementById('mytr');
//alert(trbit.innerHTML);
if (trbit.innerHTML.indexOf(ans[0] + ':') == -1) {
for (var iji=1; iji<=5; iji++) {
if (trbit.innerHTML.indexOf('Ta' + 'lker ' + iji + ':') != -1) {
trbit.innerHTML=trbit.innerHTML.replace('Ta' + 'lker ' + iji + ':', ans[0] + ':').replace('a' + 'lker ' + iji + ':', ans[0] + ':');
}
}
}
top.document.title+=';' + tval;
} else {
top.document.title+=';' + lasttalker + tval;
}
to.value='';
placetext();
}
}

function checkGet() {
var tdi=null, donei=null, lasttdi=null, aline='', alines, thisfocus, ho=null;

if (document.URL.indexOf('Graymalkin') != -1) {
cf = "28px Snell Roundhand";
gpx = 100;
gpy = 40;
document.body.style.backgroundImage="url('http://www.rjmprogramming.com.au/PHP/66697520_c45d1ff78a_b.jpg')";
}

for (var ii=1; ii<=5; ii++) {
if (window.location.search.indexOf("td" + ii + "=") != (0 - 1)) {
document.getElementById('myh1').style.display='none';
document.getElementById('pretable').style.display='none';
document.getElementById('canvaselement').style.display='none';
document.getElementById('mytable').style.display='none';
tdi=parent.document.getElementById("td" + ii);
donei=document.getElementById("i" + ii);
if (!donei && tdi && document.body.innerHTML.indexOf('Ta' + 'lker ' + ii) == -1) {
lasttdi=tdi;
//tdi.innerHTML+='Tal' + 'ker ' + ii + ': ';
//document.body.innerHTML+='<input style=position:absolute;z-index:9;top:0;left:0;background-color:yellow; id=i' + ii + ' type=text onblur=converse(this.id,this.value); value=></input>';
ho=parent.document.getElementById('h' + ii);
var pref='', suff='';
if (top.document.URL.indexOf('Graymalkin') != -1) {
pref='<font color=white>';
suff='</font>';
}
if (ho) {
document.body.innerHTML+=pref + ho.value.replace(':','') + ': ' + suff + '<input style=width:100px;background-color:yellow; id=i' + ii + ' type=text onblur=converse(this,this.id,this.value); value=></input>';
} else {
document.body.innerHTML+=pref + 'Tal' + 'ker ' + ii + ': ' + suff + '<input style=width:100px;background-color:yellow; id=i' + ii + ' type=text onblur=converse(this,this.id,this.value); value=></input>';
}
document.body.style.width='250px';
setTimeout(parentcheck, 1000);
}
}
}

if (window.location.search.indexOf("num=") != (0 - 1)) {
if (window.location.search.indexOf("num=1") != (0 - 1)) five=1;
if (window.location.search.indexOf("num=2") != (0 - 1)) five=2;
if (window.location.search.indexOf("num=3") != (0 - 1)) five=3;
if (window.location.search.indexOf("num=4") != (0 - 1)) five=4;
if (window.location.search.indexOf("num=5") != (0 - 1)) five=5;
document.getElementById("mysel").value=five;
}

if (!lasttdi) {
document.title='';
for (var iii=1; iii<=five; iii++) {
document.getElementById('if' + iii).src='onion4co_chalkboard.html?td' + iii + '=';
}
document.getElementById('h1').value='T' + document.getElementById('h1').value.replace('TT','T');
if (five > 1) document.getElementById('h2').value='T' + document.getElementById('h2').value.replace('TT','T');
if (five > 2) document.getElementById('h3').value='T' + document.getElementById('h3').value.replace('TT','T');
if (five > 3) document.getElementById('h4').value='T' + document.getElementById('h4').value.replace('TT','T');
if (five > 4) document.getElementById('h5').value='T' + document.getElementById('h5').value.replace('TT','T');
setTimeout(placetext,1000);
}

if (window.location.search.indexOf("names=") != (0 - 1)) {
var names=location.search.split('names=')[1] ? location.search.split('names=')[1].split('&')[0] : '';

if (names != '') {
var snames=decodeURIComponent(names).split(";");
for (var ini=0; ini<snames.length; ini++) {
if (five >= ini) {
anames[ini] = snames[ini];
document.getElementById('h' + eval(1 + ini)).value=document.getElementById('h' + eval(1 + ini)).value.replace('Talker ' + eval(1 + ini), snames[ini]).replace('alker ' + eval(1 + ini), snames[ini]);
}
}
}

}

if (window.location.search.indexOf("lines=") != (0 - 1)) {
var lines=location.search.split('lines=')[1] ? location.search.split('lines=')[1].split('&')[0] : '';

if (lines != '') {
var slines=decodeURIComponent(lines).split(";");
for (var insi=0; insi<slines.length; insi++) {
aline=slines[insi];
if (slines[insi].indexOf(':') != -1) {
alines=slines[insi].split(':');
thisfocus=curfocus;
if (anames.indexOf(alines[0]) == -1) {
anames[curfocus]=alines[0];
document.getElementById('h' + eval(1 + curfocus)).value=alines[0] + ': ';
curfocus=eval((curfocus + 1) % five);
} else {
thisfocus=anames.indexOf(alines[0]);
}
aline=alines[1].replace("`","'").replace("`","'").replace("`","'").replace("`","'").replace("`","'");
}
//if (document.getElementById('i' + eval(1 + insi))) {
//document.getElementById('i' + eval(1 + insi)).value=anames[thisfocus] + ': ' + aline;
//converse(document.getElementById('i' + eval(1 + insi)),document.getElementById('i' + eval(1 + insi)).id,document.getElementById('i' + eval(1 + insi)).value);
//} else {
dialog.push(anames[thisfocus] + ': ' + aline);
//}
}
}

}

curfocus=0;
setTimeout(recheck, 2000);
}

function recheck() {
var proceed=true, moretodo=true, doy=null;
for (var iii=0; iii<five; iii++) {
doy=document.getElementById('d' + iii);
if (doy) {
if (doy.value != '') proceed=false;
}
}
if (proceed) {
for (var ii=0; ii<dialog.length; ii++) {
if (dialog[ii] != '' && moretodo) {
document.getElementById('d' + eval(eval((0 + ii) % five) + 1)).value=dialog[ii];
dialog[ii] = '';
moretodo=false;
}
}
}
setTimeout(recheck, 1000);
}

function parentcheck() {
var oy=null, amio=null;
for (var jj=1; jj<=five; jj++) {
oy=parent.document.getElementById('d' + jj);
if (oy) {
if (oy.value != '') {
amio=document.getElementById('i' + jj);
if (amio) {
document.getElementById('i' + jj).value=oy.value;
oy.value='';
converse(document.getElementById('i' + jj),document.getElementById('i' + jj).id,document.getElementById('i' + jj).value);
}
}
}
}
if (document.URL.indexOf('Graymalkin') != -1) {
setTimeout(parentcheck, 5000);
} else {
setTimeout(parentcheck, 1000);
}
}

function domacbeth() {
var macbeth_a1_s1="First Witch: When shall we three meet again. \nIn thunder, lightning, or in rain?;";
macbeth_a1_s1+="Second Witch: When the hurlyburly`s done, \nWhen the battle`s lost and won.;";
macbeth_a1_s1+="Third Witch: That will be ere the set of sun.;";
macbeth_a1_s1+="First Witch: Where the place?;";
macbeth_a1_s1+="Second Witch: Upon the heath.;";
macbeth_a1_s1+="Third Witch: There to meet with Macbeth.;";
macbeth_a1_s1+="First Witch: I come, Graymalkin!;";
macbeth_a1_s1+="Second Witch: Paddock calls.;";
macbeth_a1_s1+="Third Witch: Anon.;";
macbeth_a1_s1+="All: Fair is foul, and foul is fair. Hover through the fog and filthy air. [Exeunt ...";
location.href="./onion4co_chalkboard.html?num=4&lines=" + encodeURIComponent(macbeth_a1_s1);
}

function placetext() {
stuff=top.document.title;
if (stuff != laststuff && elem && context) {
laststuff=stuff;
context.clearRect ( 0 , 0 , 1150 , 500 );
context.font = cf;
if (document.URL.indexOf('Graymalkin') != -1) {
context.fillStyle = 'red';
context.strokeStyle = 'red';
} else {
context.fillStyle = 'black';
}
elem.style.backgroundImage = "none";
if (top.document.URL.indexOf('Graymalkin') != -1) {
elem.style.opacity = 0.6;
} else {
elem.style.opacity = 1.0;
}

var r = Math.floor((Math.random()*256)+0);
var g = Math.floor((Math.random()*256)+0);
var b = Math.floor((Math.random()*256)+0);
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];

elem.style.backgroundColor = thiscol;
var ygpy=gpy;
var lines=stuff.substring(1).split(';');
for (var il=0; il<lines.length; il++) {
context.strokeText(lines[il],gpx,ygpy);
if (document.URL.indexOf('Graymalkin') != -1) {
ygpy = eval((ygpy + 46) % 480);
} else {
ygpy = eval((ygpy + 26) % 480);
}
}
//gpy = gpy + 50;
}
setTimeout(placetext, 2000);
}
if (document.URL.indexOf('Graymalkin') != -1) {
lbit="<div id=divlast align='center' style='position:absolute;top:120;left:0;z-index:-3;opacity:0.2;background: url(" + '"' + "http://www.rjmprogramming.com.au/PHP/66697520_c45d1ff78a_b.jpg" + '"' + ");'>";
lbit+="<a target=_blank href='https://www.flickr.com/photos/arbron/66697520/in/photolist-5iSphL-6TQRf-5TK2Do-5TMPAn-5TSamJ-5TMPvM-5TMPDt-7CDip-5T2zrS-67g614-5TK2QL-5U1xiu-5UhhUG-5UhhxW-5UhhKs-5Uc8q6-5TN8by-5TEKWn-5TSa2d-5TMZcu-5TdSVN-5TPcPh-5U2QP1-74VJ52-7EaaYg-5TQT1C-5TEKQv-5TQdu3-5Uc8eP-5Ugury-5TKTbr-5UguCC-5TEFZ6-5TK2r7-5UguB5-5TtjkA-5TRfKS-5Uc7J2-6vFC9T-6vKQd9-6TQXQ-abDgmQ-5TSaFq-6TQUC-c8yAH-6TQK3-6TQDJ-3HwkWt-bxZcJo-bxZd55' title='Background image courtesy of Jeff Hitchcock at flickr at https://www.flickr.com/photos/arbron/66697520/in/photolist-5iSphL-6TQRf-5TK2Do-5TMPAn-5TSamJ-5TMPvM-5TMPDt-7CDip-5T2zrS-67g614-5TK2QL-5U1xiu-5UhhUG-5UhhxW-5UhhKs-5Uc8q6-5TN8by-5TEKWn-5TSa2d-5TMZcu-5TdSVN-5TPcPh-5U2QP1-74VJ52-7EaaYg-5TQT1C-5TEKQv-5TQdu3-5Uc8eP-5Ugury-5TKTbr-5UguCC-5TEFZ6-5TK2r7-5UguB5-5TtjkA-5TRfKS-5Uc7J2-6vFC9T-6vKQd9-6TQXQ-abDgmQ-5TSaFq-6TQUC-c8yAH-6TQK3-6TQDJ-3HwkWt-bxZcJo-bxZd55 ... thanks'>";
lbit+="<img align='center' src='http://www.rjmprogramming.com.au/PHP/66697520_c45d1ff78a_b.jpg' title='Background image courtesy of Jeff Hitchcock at flickr at place that image click takes you ... thanks. Thunder sounds thanks to http://soundbible.com/1907-Thunder.html at SoundBible. Sound mp3 to ogg free conversion thanks to http://www.online-convert.com/result/5ffdcdd4e819f0db2c902a677656d0b5'></img></a></div>";
lbit+="<div align='center' style='opacity: 1.0; margin-top: 0px; position: absolute; top: 0px; left: 200px;'><font face='Snell Roundhand' color='red'><b>";
lbit="<div id='player'><audio id='audio' controls='controls' autoplay='autoplay' loop='loop' style='width:150px;display:none;'><source src='http://www.rjmprogramming.com.au/Games/Battleshipsandcruisers/sounds/Thunder-Mike_Koenig-315681025.ogg' type='audio/ogg' /><source src='http://www.rjmprogramming.com.au/Games/Battleshipsandcruisers/sounds/Thunder-Mike_Koenig-315681025.wav' type='audio/wav' />";
lbit="<embed src='http://www.rjmprogramming.com.au/Games/Battleshipsandcruisers/sounds/Thunder-Mike_Koenig-315681025.wav' hidden='true' loop='TRUE' autostart='TRUE'></embed>";
lbit+="</audio>";
lbit+="</div>";
document.write(lbit);
}

</script>
</head>
<body onload="checkGet(); ">
<table id=pretable><tr><td><h1 id='myh1'>Please feel free to converse, the <select id=mysel onchange=" if (five != eval(this.value)) { if (eval(this.value) == 0) { domacbeth(); } else { location.href='./onion4co_chalkboard.html?num=' + this.value; } } "><option value=5>5</option><option value=4>4</option><option value=3>3</option><option value=2>2</option><option value=1>1</option><option value=0>Macbeth Act 1 Scene 1</option></select> of you, we'll record ...</h1><p style=display:none;>Score <span style='color:green;' id=score>0</span> achieved via <span style='color:red;' id=goes>0</span> goes</td>
</tr></table>

<table id=mytable style=width:1150px;><tbody id=mytbody><tr id=mytr><td id=td1 style=width:170px;><iframe frameborder=0 style=height:40px;width:200px; id=if1 src=></iframe></td><td id=td2 style=width:170px;><iframe frameborder=0 style=height:40px;width:200px; id=if2 src=></iframe></td><td id=td3 style=width:170px;><iframe frameborder=0 style=height:40px;width:200px; id=if3 src=></iframe></td><td id=td4 style=width:170px;><iframe frameborder=0 style=height:40px;width:200px; id=if4 src=></iframe></td><td id=td5 style=width:170px;><iframe frameborder=0 style=height:40px;width:200px; id=if5 src=></iframe></td></tr></tbody></table>
<canvas style='border: 5px solid green; background-color: black; opacity: 0.3;' title='Click for your Onions of the 4th Dimension conversation' id="canvaselement" width="1150" height="500" style="border: 1px solid green;" /><br>
<input type=hidden id=h1 value='alker 1: '></input><input type=hidden id=h2 value='alker 2: '></input><input type=hidden id=h3 value='alker 3: '></input><input type=hidden id=h4 value='alker 4: '></input><input type=hidden id=h5 value='alker 5: '></input>
<input type=hidden id=d1 value=></input><input type=hidden id=d2 value=></input><input type=hidden id=d3 value=></input><input type=hidden id=d4 value=></input><input type=hidden id=d5 value=></input>

<script language="JavaScript">

if (window.location.search.indexOf("td") == -1) {
var scoretoget = 20;

elem = document.getElementById('canvaselement');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
context = elem.getContext('2d');
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
elem.style.backgroundImage = "none";
if (top.document.URL.indexOf('Graymalkin') != -1) {
elem.style.opacity = 0.6;
} else {
elem.style.opacity = 1.0;
}

var r = Math.floor((Math.random()*256)+0);
var g = Math.floor((Math.random()*256)+0);
var b = Math.floor((Math.random()*256)+0);
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];

elem.style.backgroundColor = thiscol;

}, false);

//updatescore();
}
</script>

</body>
</html>