<!doctype html>
<html>
<head>
<title>World 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'>

var ie = 11;
var mode = 1;
var amode = 1;
var elem;
var elemLeft = 0;
var cf = "18px Verdana";
var elemTop = 0;
var context;
var elements = [];
var img;
var london_x = 408.0, london_y = 255.0; // vs hobart 756,512
var londonx = 408.0, londony = 255.0; // hobart 42.8806 S, 147.3250 E
var x=0, y=0, lastx=0, lasty=0;
var clickno = 0;
var ourlat, ourlong;
var url = "http://www.rjmprogramming.com.au/PHP/Map/map.php?title=London&label=['Lat',&value='Lon','Name']&data=,[51.5072,-0.1275,~London~]";

var retx = 0.0, rety = 0.0;

function fixmyemail(tval, issubj) {
// mailto:fill.in.email@address?subject=My%20World%20Map&body=
if (tval != '') {
ourbits = document.getElementById('myemail').href.split('?subject=');
if (issubj == 0) {
if (ourbits.length > 1) {
prebits = ourbits[0].split(':');
document.getElementById('to').value = tval;
document.getElementById('myemail').href = prebits[0] + ':' + encodeURIComponent(tval) + '?subject=' + ourbits[eval(-1 + ourbits.length)];
if (document.getElementById('myiemail').value.indexOf('@') != -1) {
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;
}
}
} else {
var pbits = "";
if (ourbits.length > 1) {
pbits = ourbits[1].split('&');
document.getElementById('mysubject').value = tval;
if (pbits.length > 1) {
document.getElementById('myemail').href = ourbits[0] + '?subject=' + encodeURIComponent(tval) + '&' + pbits[1];
} else {
document.getElementById('myemail').href = ourbits[0] + '?subject=' + encodeURIComponent(tval);
}
}
}
}
}

function placeannotation(anno) { // new idea ... March, 2016
if (anno.value != '') {
if (anno.id == 'jannotation') {
context.clearRect(Math.min(x,lastx), Math.min(y,lasty), Math.abs(x - lastx), Math.abs(y - lasty));
context.strokeStyle = "black";
document.getElementById('iannotation').value='';
} else {
context.strokeStyle = "blue";
document.getElementById('jannotation').value='';
}
//context.font = cf;
context.font = document.getElementById('myfont').value;
context.strokeStyle=document.getElementById('mycolour').value;
context.strokeText(anno.value,eval(2 + Math.min(x,lastx)),eval((Math.min(y,lasty) + Math.max(y,lasty)) / 2));
anno.value = '';
}
}

function capture(toh, tos, toe) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (document.getElementById('myiemail').value.indexOf('@') == -1) {
var femail = prompt('Please supply the Email To address', '');
if (femail == null) femail = '';
if (femail.indexOf('@') != -1) {
fixmyemail(femail, 0);
}
}
} else {
if (document.getElementById('myiemail').value.indexOf('@') != -1) {
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;
}
}
var pretoh = elem.toDataURL("image/png",0);
//toh.value = pretoh.substr(22, pretoh.length);
var xbits=pretoh.split(',');
//toh.value = pretoh.substr(eval(pretoh.indexOf(',') + 1), pretoh.length);
//alert(xbits[0]);
toh.value = pretoh.replace(xbits[0] + ',', '');
if (1 == 1) {
tos.click();
} else {
document.getElementById('myform').submit();
}
var things = document.URL.split("?");
toe.href = toe.href + (things[0] + "/~").replace("world.html/~", document.getElementById('myfname').value).replace("index.html/~", document.getElementById('myfname').value).replace("//~", "/" + document.getElementById('myfname').value).replace("/~", "/" + document.getElementById('myfname').value);
if (document.getElementById('to').value.indexOf('@') != -1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
toe=toe;
} else {
toe.click();
}
}


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((londonx + eval(((inlong) - (0.0)) * ((348.0 * (londonx / london_x))) / (147.325))));
var oury = eval((londony + eval(((inlat) - (51.5)) * ((257.0 * (londony / london_y))) / (-94.3806))));

retx = ourx;
rety = oury;

retval = ourx + "," + oury;

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

return retval;
}

function ask() {
var huh=prompt("If you've zoomed your window, please answer Y and then click on London to scale. Then click away at places where you want to go.", "");
if (huh == null) {
clickno = 1;
//document.getElementById('mypiframe').src = "intair.php?plot=y";
} else if (huh == "y" || huh == "Y") {
clickno = 0;
} else {
clickno = 1;
//document.getElementById('mypiframe').src = "intair.php?plot=y";
}
}


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();
document.getElementById('myfname').value = "world_" + yyyy + "_" + mm + "_" + hh + "_" + minm + "_" + ss + ".png";


document.getElementById('myform').action = document.getElementById('myform').action.replace('?mode=1', '');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
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;
}

ie = (function(){ // thanks to http://stackoverflow.com/questions/5574842/best-way-to-check-for-ie-less-than-9-in-javascript-without-library

var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');

while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);

return v > 4 ? v : undef;

}());

img = document.getElementById("world");
if (ie < 9) {
document.getElementById('canvaselement').style.display = 'none';
document.getElementById('others').style.display = 'none';
context = null;
document.getElementById('world').style.display = 'block';
elem = document.getElementById('world');
// Add event listener for `click` events.
elem.attachEvent('onclick', 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;
} 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;
}
}
//alert(x + " " + y);
if (clickno == 0) {
londonx = x;
londony = y;
ourlong = eval(0.0 + (x - londonx) / (348.0 * (londonx / london_x)) * 147.325);
ourlat = eval(51.5 + (y - londony) / (257.0 * (londony / london_y)) * (-94.3806));
} else {
ourlong = eval(0.0 + (x - londonx) / (348.0 * (londonx / london_x)) * 147.325);
ourlat = eval(51.5 + (y - londony) / (257.0 * (londony / london_y)) * (-94.3806));
}

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

clickno = clickno + 1;
document.getElementById('myiframe').src = "http://www.rjmprogramming.com.au/PHP/Map/map.php?title=Your%20Place%20and%20Airports&label=['Lat',&value='Lon','Name']&data=,[" + ourlat.toFixed(5).replace(/0+$/, "") + "," + ourlong.toFixed(5).replace(/0+$/, "") + ",~Your%20Place~]"

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

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

});


} else {
elem = document.getElementById('canvaselement');
context = elem.getContext("2d");
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.pageX || event.pageY) {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
} else {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
}
lastx=x;
lasty=y;
} else {
lastx=x;
lasty=y;
if (event.pageX || event.pageY) {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
} else {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
}
}
//alert(x + " " + y);
if (clickno == 0) {
londonx = x;
londony = y;
ourlong = eval(0.0 + (x - londonx) / (348.0 * (londonx / london_x)) * 147.325);
ourlat = eval(51.5 + (y - londony) / (257.0 * (londony / london_y)) * (-94.3806));
} else {
ourlong = eval(0.0 + (x - londonx) / (348.0 * (londonx / london_x)) * 147.325);
ourlat = eval(51.5 + (y - londony) / (257.0 * (londony / london_y)) * (-94.3806));
}

elements.push({
colour: '#ff0000',
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);
if (context != null) context.fillStyle = element.colour;
if (context != null) context.fillRect(element.left, element.top, element.width, element.height);
document.getElementById('myiframe').src = "http://www.rjmprogramming.com.au/PHP/Map/map.php?title=Your%20Place%20and%20Airports&label=['Lat',&value='Lon','Name']&data=,[" + ourlat.toFixed(5).replace(/0+$/, "") + "," + ourlong.toFixed(5).replace(/0+$/, "") + ",~Your%20Place~]"
});

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


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



});
}

setTimeout(ask, 1000);


}


</script>
</head>
<body>
<table><tr><td>
<canvas id="canvaselement" width=850 height=600 style="position: absolute; top:0; left:0; "></canvas></td><td>
<h1 style="position: absolute; top:0; left:860px; " align='center'>World Clickaround <select id='others' onchange=" location.href=this.value + '.htm';"><option value='world'> ... or ...</option><option value='australia'>Australia</option><option value='brazil'>Brazil</option><option value='china'>China</option><option value='germany'>Germany</option><option value='india'>India</option><option value='ireland'>Ireland</option><option value='nigeria'>Nigeria</option><option value='united_states'>United States</option><option value='world'>World</option></select></h1><br>
<iframe style="position: absolute; top:140px; left:860px; " id="myiframe" width=320 height=460 src="http://www.rjmprogramming.com.au/PHP/Map/map.php?title=London&label=['Lat',&value='Lon','Name']&data=,[51.5072,-0.1275,~London~]"></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>
<div style="position: absolute; top:600px; left:860px; display:none; background-color: lightgreen; " id='divannotation'><h4>Your Annotations</h4><br><br>Annotation (optional): <input onblur='placeannotation(this);' id='iannotation' type='text' value=''></input><br><span>Anno B&W (optional): <input onblur='placeannotation(this);' id='jannotation' type='text' value=''></input><br>Style: <input type='text' id='myfont' value='18px Verdana'></input> <input type='text' id='mycolour' value='black'></input></span><br>
<form style='display:none;' id='myform' method='post' enctype="application/x-www-urlencoded" action='http://www.rjmprogramming.com.au/HTMLCSS/world.php' target='myiframetwo'><input type='hidden' name='mysubject' id='mysubject' value='My World Map'></input><input type='hidden' name='myfname' id='myfname' value=''></input><input type='submit' id='bsubmit' value='Submit' style='display:none;'></input><input type='hidden' name='ismobile' id='ismobile' value=''></input><input type='hidden' name='mode' id='mode' value='1'></input><input type='hidden' name='to' id='to' value=''></input><input type='hidden' name='mydurl' id='mydurl' value=''></input></form>
<iframe style='display:none;' id='myiframetwo' src='http://www.rjmprogramming.com.au/HTMLCSS/world.php'></iframe>
<input style='display:none;' onblur="fixmyemail(this.value + ' ',1);" type='text' id='myisubject' value='My World Map '></input> <input style='background-color: yellow;' type='button' value='Email (optional)' onclick=" capture(document.getElementById('mydurl'),document.getElementById('bsubmit'),document.getElementById('myemail')); "></input> <a style='display:none;' target='_blank' id='myemail' href='mailto:fill.in.email@address?subject=My%20World%20Map&body='></a><input style='display:none;' onblur='fixmyemail(this.value,0);' type='text' id='myiemail' value='' title='Fill this in for emailed attachment'></input>
</div>
</td></tr></table>
<img id="world" src="world.jpg" style="display:none;position: absolute; top:0; left:0; " />
</body>
</html>