<!doctype html>
<html>
<head>
<title>Ireland Clickaround - RJM Programming - April, 2015</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='world.js' defer></script>
<script type='text/javascript'>
var blobc='#00ff00';
var mode = 1;
var amode = 1;
var elem;
var elemLeft;
var elemTop;
var context;
var elements = [];
var img;
var dublin_x = 369.0, dublin_y = 289.0;
var dublinx = 369.0, dubliny = 289.0;
var x=0, y=0, lastx=0, lasty=0;
var clickno = 0;
var ourlat, ourlong;
var url = "//www.rjmprogramming.com.au/PHP/Map/map.php?title=Dublin&onclick=y&label=['Lat',&value='Lon','Name']&data=,[53.3478,-6.2597,~Dublin~]";
var cf = "18px Verdana";

var xlworld = 'world';
var xuworld = 'World';
var xuubits=document.URL.split('.htm');
var xuuubits=xuubits[0].split('/');
xlworld=xuuubits[eval(-1 + xuuubits.length)];
xuworld=xlworld.substring(0,1).toUpperCase() + xlworld.substring(1);

var retx = 0.0, rety = 0.0;

function prereturnxy(inlatinlongthis) {
//alert(inlatinlongthis.title);
var prestuff = inlatinlongthis.title.split(",");
if (prestuff.length == 2) {
//alert(prestuff[0]);
return returnxy(prestuff[0], prestuff[1]);
}
return "0.0,0.0";
}

function returnxy(inlat, inlong) {
var retval="0.0,0.0";

var ourx = eval((dublinx + eval(((inlong) + (6.2597)) * ((185.0 * (dublinx / dublin_x))) / (2.3097))));
var oury = eval((dubliny + eval(((inlat) - (53.3478)) * ((224.0 * (dubliny / dublin_y))) / (-1.7311))));

retx = ourx;
rety = oury;

retval = ourx + "," + oury;

context.fillStyle = '#0000ff';
context.fillRect(retx, rety, 5, 5);

return retval;
}

window.onload = function() {

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
var hh = today.getHours();
var minm = today.getMinutes(); //January is 0!
var ss = today.getSeconds();
if (document.getElementById('myfname')) document.getElementById('myfname').value = xlworld + "_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png";

if (document.getElementById('myform')) document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (document.getElementById('mode')) {
document.getElementById('mode').value = '';
document.getElementById('ismobile').value = 'y';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
document.getElementById('myform').action = document.getElementById('myform').action.replace('mode=1', 'mode=');
//document.getElementById('myemail').href = '#' + document.getElementById('myemail').href;
}
}

elem = document.getElementById('canvaselement');
context = elem.getContext("2d");
img = document.getElementById("ireland");
context.drawImage(img,0,0);
elemLeft = elem.offsetLeft;
elemTop = elem.offsetTop;

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
if (event.clientX || event.clientY) {
x = event.clientX - elemLeft - elem.getBoundingClientRect().x;
y = event.clientY - elemTop - elem.getBoundingClientRect().y;
} else {
x = event.pageX - elemLeft - elem.getBoundingClientRect().x;
y = event.pageY - elemTop - elem.getBoundingClientRect().y;
}
lastx=x;
lasty=y;
if (typeof polyco == 'array' || typeof polyco == 'object') {
if (('' + x + y).indexOf('-') == -1) {
polyco.push(x);
polyco.push(y);
}
}
} else {
lastx=x;
lasty=y;
if (event.clientX || event.clientY) {
x = event.clientX - elemLeft - elem.getBoundingClientRect().x;
y = event.clientY - elemTop - elem.getBoundingClientRect().y;
} else {
x = event.pageX - elemLeft - elem.getBoundingClientRect().x;
y = event.pageY - elemTop - elem.getBoundingClientRect().y;
}
if (typeof polyco == 'array' || typeof polyco == 'object') {
if (('' + x + y).indexOf('-') == -1) {
polyco.push(x);
polyco.push(y);
}
}
}
//alert(x + " " + y);
if (clickno == 0) {
dublinx = x;
dubliny = y;
ourlong = eval(-6.2597 + (x - dublinx) / (185.0 * (dublinx / dublin_x)) * 2.3097);
ourlat = eval(53.3478 + (y - dubliny) / (224.0 * (dubliny / dublin_y)) * (-1.7311));
} else {
ourlong = eval(-6.2597 + (x - dublinx) / (185.0 * (dublinx / dublin_x)) * 2.3097);
ourlat = eval(53.3478 + (y - dubliny) / (224.0 * (dubliny / dublin_y)) * (-1.7311));
}

elements.push({
colour: blobc,
width: 5,
height: 5,
top: y,
left: x
});

clickno = clickno + 1;

// Collision detection between clicked offset and element.
elements.forEach(function(element) {
//alert('clicked Element at ' + ourlong + ' ' + ourlat + ' ' + element.left + ',' + element.top + ' with width=' + element.width + ' and height=' + element.height + ' and colour=' + element.colour);
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);
document.getElementById('myiframe').src = "//www.rjmprogramming.com.au/PHP/Map/map.php?title=Your%20Place%20and%20Airports&onclick=y&label=['Lat',&value='Lon','Name']&data=,[" + ourlat.toFixed(5).replace(/0+$/, "") + "," + ourlong.toFixed(5).replace(/0+$/, "") + ",~Your%20Place~]"
});

if (x != lastx || y != lasty) {
document.getElementById('divannotation').style.display='block';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
}

document.getElementById('mypiframe').src = "intair.php?num=4&lat=" + ourlat + "&long=" + ourlong;
});

// Add event listener for `click` events.
elem.addEventListener('touchstart', function(event) {
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
if (event.clientX || event.clientY) {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
} else {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
}
lastx=x;
lasty=y;
if (typeof polyco == 'array' || typeof polyco == 'object') {
if (('' + x + y).indexOf('-') == -1) {
polyco.push(x);
polyco.push(y);
}
}
} else {
lastx=x;
lasty=y;
if (event.clientX || event.clientY) {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
} else {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
}
if (typeof polyco == 'array' || typeof polyco == 'object') {
if (('' + x + y).indexOf('-') == -1) {
polyco.push(x);
polyco.push(y);
}
}
}
//alert(x + " " + y);
if (clickno == 0) {
dublinx = x;
dubliny = y;
ourlong = eval(-6.2597 + (x - dublinx) / (185.0 * (dublinx / dublin_x)) * 2.3097);
ourlat = eval(53.3478 + (y - dubliny) / (224.0 * (dubliny / dublin_y)) * (-1.7311));
} else {
ourlong = eval(-6.2597 + (x - dublinx) / (185.0 * (dublinx / dublin_x)) * 2.3097);
ourlat = eval(53.3478 + (y - dubliny) / (224.0 * (dubliny / dublin_y)) * (-1.7311));
}

elements.push({
colour: blobc,
width: 5,
height: 5,
top: y,
left: x
});

clickno = clickno + 1;

// Collision detection between clicked offset and element.
elements.forEach(function(element) {
//alert('clicked Element at ' + ourlong + ' ' + ourlat + ' ' + element.left + ',' + element.top + ' with width=' + element.width + ' and height=' + element.height + ' and colour=' + element.colour);
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);
document.getElementById('myiframe').src = "//www.rjmprogramming.com.au/PHP/Map/map.php?title=Your%20Place%20and%20Airports&onclick=y&label=['Lat',&value='Lon','Name']&data=,[" + ourlat.toFixed(5).replace(/0+$/, "") + "," + ourlong.toFixed(5).replace(/0+$/, "") + ",~Your%20Place~]"
});

if (x != lastx || y != lasty) {
document.getElementById('divannotation').style.display='block';
document.getElementById('myisubject').style.display = 'inline';
document.getElementById('myiemail').style.display = 'inline';
}

document.getElementById('mypiframe').src = "intair.php?num=4&lat=" + ourlat + "&long=" + ourlong;
});

function ask() {
document.getElementById('divannotation').innerHTML=document.getElementById('divannotation').innerHTML.replace('"black"','"blue"').replace('Annotations++','Annotations++ <input onclick="document.getElementById(' + "'" + 'canbet' + "'" + ').value=' + "'" + 'transparent' + "'" + ';" type=button value="Copy (via 2) and Paste (via 1) Parts of Canvas Above to Canvas Above"></input> <div id=daddtofilm style="display:inline-block;"><input style="display:inline-block;" onclick="addtofilm();" value="Add to Animated Film" type="button" title="Make an Animation"></input></div>').replace('<input type="text" id="mycolour"','<input type="color" id="myrcolour" value="blue" onchange="if (opacitymaybe(this).toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=opacitymaybe(this); } document.getElementById(' + "'" + 'mycolour' + "'" + ').value=opacitymaybe(this);"></input> <input onblur="if (opacitymaybe(this).toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=opacitymaybe(this); }" title="Only here can opacity be defined via blank separated opacity suffix (to colour) from 0.0 to 1.0" type="text" id="mycolour"').replace('<input id="mycolour"','<input type="color" id="myrcolour" value="blue" onchange="if (opacitymaybe(this).toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=opacitymaybe(this); } document.getElementById(' + "'" + 'mycolour' + "'" + ').value=opacitymaybe(this);"></input> <input onblur="if (opacitymaybe(this).toLowerCase().indexOf(' + "'" + 'transparent' + "'" + ') == -1) { obeforetransparent=opacitymaybe(this); } " title="Only here can opacity be defined via blank separated opacity suffix (to colour) from 0.0 to 1.0" id="mycolour"').replace("</form>","<input type=hidden id=canbet value=></input><input type=hidden name=from id=from value=''></input></form>").replace("</form>","<input type=hidden name=cc id=cc value=''></input></form>").replace("</form>","<input type=hidden name=bcc id=bcc value=''></input></form>");
var huh=prompt("If you've zoomed your window, please answer Y and then click on Dublin to scale. Then click away at places where you want to go.", "");
if (huh == null) {
clickno = 1;
} else if (huh == "y" || huh == "Y") {
clickno = 0;
} else {
clickno = 1;
}
}

setTimeout(ask, 3000);

};
</script>
</head>
<body>
<table><tr><td>
<canvas id="canvaselement" width=600 height=600 style="position: absolute; top:0; left:0; " /></td><td>
<h1 style="position: absolute; top:0; left:610px; " align='center'>Ireland Clickaround <select id='others' onchange=" location.href=this.value + '.htm';"><option value='ireland'> ... or ...</option><option value='australia'>Australia</option><option value="welcometonation">Welcome to Nation</option><option value='brazil'>Brazil</option><option value='india'>India</option><option value='ireland'>Ireland</option><option value='united_states'>United States</option><option value='world'>World</option></select></h1><br>
<iframe style="position: absolute; top:140px; left:610px; " id="myiframe" width=500 height=460 src="//www.rjmprogramming.com.au/PHP/Map/map.php?title=Dublin&onclick=y&label=['Lat',&value='Lon','Name']&data=,[53.3478,-6.2597,~Dublin~]"></iframe>

<a id='mya' href='#' title='-42.8806,147.3250' onclick='prereturnxy(this);' style="position: absolute; top:1000px; left:860px; display:none;text-decoration:none; "> </a><iframe id='mypiframe' style='display:none;' src='intair.php' title='International Airport plot'></iframe>
</td></tr></table><img id="ireland" src="ireland.jpg" style="display:none;" />
</body>
</html>