<!doctype html>
<html>
<head>
<title>Analogue Clock - RJM Programming - August, 2016 - Thanks to http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<style>

.hourhand { width: 350px; height: 350px; }
.minutehand { width: 350px; height: 350px; }
.secondhand { width: 350px; height: 350px; }
#compass_needle { width: 350px; height: 175px; overflow:hidden; border: 0px solid red; }
#compass_needles { width: 350px; height: 175px; overflow:hidden; border: 0px solid pink; }
#compass_needlem { width: 350px; height: 175px; overflow:hidden; border: 0px solid blue; }
.sliver { background-color: #f0f0f0; }

</style>
<script type='text/javascript'>

var defwidth=350.0;

var brg=60;
var brgm=40;
var brgs=20;
var nowbw;
var nowbh;
var tzo=-999;
var tzname='youllneverfindthis';

function ifbit(hoursare) {
if (document.body.innerHTML.indexOf('<if' + 'rame') == -1) {
if (hoursare.replace('GMT','').replace('Local','') != '') {
document.getElementById('difbit').innerHTML='<ifr' + 'ame id="ifbit" style=" z-index:1; position:absolute; top:150px; left:0px; height:800px; width:100%;" src="http://www.rjmprogramming.com.au/HTMLCSS/daylight_saving_time.html?timezone=' + hoursare.replace('.5','') + '" title="Daylight Saving information"></ifr' + 'ame>';
}
} else if (hoursare.replace('GMT','').replace('Local','') != '') {
document.getElementById('ifbit').src="http://www.rjmprogramming.com.au/HTMLCSS/daylight_saving_time.html?timezone=" + hoursare.replace('.5','');
}
}

function definewh() {
nowbw = defwidth; //350
nowbh = eval(defwidth / 2.0); //175;
}

function getgmt() {
var tbits,lastone=0.0;
var nutcDate, zone=document.getElementById('mysel').value;
var ndt = new Date();
if (zone == 'Local') {
nutcDate = ndt.toLocaleDateString() + ' ' + ndt.toLocaleTimeString();
} else if (zone == 'GMT') {
nutcDate = ndt.toUTCString();
} else {
ndt.setHours(ndt.getHours() - eval(tzo) + eval(zone));
nutcDate = ndt.toLocaleDateString() + ' ' + ndt.toLocaleTimeString().replace(tzname,'');
}
if (tzo == -999) {
tbits=ndt.toLocaleTimeString().split(' ');
tzo = eval(-1.0 * ndt.getTimezoneOffset() / 60.0);
tzname=tbits[eval(-1 + tbits.length)];
document.getElementById('mysel').innerHTML+="<option value='" + tzo + "'>" + tzname + '</option>';
for (var tz=-12.0; tz<=12.0; tz+=0.5) {
document.getElementById('mysel').innerHTML+="<option value='" + tz + "'" + (">+" + tz).replace('+-','-') + ' hours</option>';
}
}
var bits=nutcDate.split(':'), ibits=0, prebits, plus=0.0;
var ghands=["", "m", "s"];
var xhands=[30.0, 6.0, 6.0];
for (var j=eval(-1 + bits.length); j>=0; j--) {
prebits=bits[j].split(' ');
if (ibits == 0) {
eval("brg" + ghands[j] + "=" + eval(prebits[0] * xhands[j]));
//alert("brg" + ghands[j] + "=" + eval(prebits[0] * xhands[j]));
plus=eval(prebits[0] / 60.0);
//document.title=plus;
} else {
//eval("brg" + ghands[j] + "=" + eval(eval(plus) + eval(prebits[eval(-1 + prebits.length)] * xhands[j])));
eval("brg" + ghands[j] + "=" + eval(eval(eval(plus * xhands[j]) + eval(prebits[eval(-1 + prebits.length)]) * xhands[j])));
lastone=eval(prebits[eval(-1 + prebits.length)]);
//alert("brg" + ghands[j] + "=" + eval(prebits[eval(-1 + prebits.length)] * xhands[j]));
//plus /= 60.0;
plus = eval(eval(prebits[eval(-1 + prebits.length)] / 60.0) + eval(plus / 60.0));
//document.title+=' ... ' + plus;
}
ibits=1;
}
var ids=['sliver12_6','sliver9_3','sliver1_7','sliver2_8','sliver4_10','sliver5_11'];
for (var jids=0; jids<ids.length; jids++) {
if (lastone <= 11 || nutcDate.indexOf(' am') != -1) {
document.getElementById(ids[jids]).style.backgroundColor='#f0f0f0';
} else {
document.getElementById(ids[jids]).style.backgroundColor='#0f0f0f';
}
}
document.getElementById('huh').innerHTML=nutcDate;
}

function onl() {
var tx="50%";
var ty="100%";
var stx=1.0, sty=1.0;
var hands=["", "m", "s"];
var shands=[0.9, 1.0, 0.95];
var ourbrg=0.0;

getgmt();

for (var i=0; i<hands.length; i++) {
ourbrg=eval("brg" + hands[i]);
stx=shands[i];
sty=shands[i];
try { document.getElementById('compass_needle' + hands[i]).style.webkitTransformOrigin = tx + " " + ty + " 0"; } catch(e10) { } //
try { document.getElementById('compass_needle' + hands[i]).style.MozTransformOrigin = tx + " " + ty + " 0"; } catch(e1000) { }
try { document.getElementById('compass_needle' + hands[i]).style.msTransformOrigin = tx + " " + ty + " 0"; } catch(e100) { }
try { document.getElementById('compass_needle' + hands[i]).style.OTransformOrigin = tx + " " + ty + " 0"; } catch(e10000) { }
try { document.getElementById('compass_needle' + hands[i]).style.transformOrigin = tx + " " + ty + " 0"; } catch(e1) { }

try { document.getElementById('compass_needle' + hands[i]).style.webkitTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e10) { } //
try { document.getElementById('compass_needle' + hands[i]).style.MozTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e1000) { }
try { document.getElementById('compass_needle' + hands[i]).style.msTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e100) { }
try { document.getElementById('compass_needle' + hands[i]).style.OTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e10000) { }
try { document.getElementById('compass_needle' + hands[i]).style.transform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e1) { }

try { document.getElementById('compass_needle' + hands[i]).style.webkitTransform += (" scale(" + stx + "," + sty + ")"); } catch(e10) { }
try { document.getElementById('compass_needle' + hands[i]).style.MozTransform += (" scale(" + stx + "," + sty + ")"); } catch(e10) { }
try { document.getElementById('compass_needle' + hands[i]).style.msTransform += (" scale(" + stx + "," + sty + ")"); } catch(e10) { }
try { document.getElementById('compass_needle' + hands[i]).style.OTransform += (" scale(" + stx + "," + sty + ")"); } catch(e10) { }
try { document.getElementById('compass_needle' + hands[i]).style.transform += (" scale(" + stx + "," + sty + ")"); } catch(e10) { }

//if (i == 1) document.title=document.getElementById('compass_needle' + hands[i]).style.MozTransform;
}

setTimeout(onl,1000);
}

</script>
</head>
<body id='xbody' onload="onl(); document.getElementById('difbit').innerHTML='<ifr' + 'ame id=ifbit style=z-index:1;position:absolute;top:150px;left:0px;height:800px;width:100%; src=http://www.rjmprogramming.com.au/HTMLCSS/daylight_saving_time.html title=DaylightSavinginformation></ifr' + 'ame>'; " style='background-color:#c0d0f0;'>
<svg style='position:absolute; z-index: 10; top:0px; left:0px; opacity:0.6; ' id="svgelem" height=300 xmlns="http://www.w3.org/2000/svg">
<circle id="lightgraycircle" cx="175" cy="175" r="120" fill="#979797" />
</svg>
<div id='sliver12_6' class='sliver' style='position:absolute; z-index: 18; top:135px; left:174px; width: 2px; height: 80px; '>
</div>
<div id='sliver9_3' class='sliver' style='position:absolute; z-index: 18; top:174px; left:134px; height: 2px; width: 80px; '>
</div>
<div id='sliver1_7' class='sliver' style='-ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg);position:absolute; z-index: 18; top:135px; left:174px; width: 2px; height: 80px; '>
</div>
<div id='sliver2_8' class='sliver' style='-ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);position:absolute; z-index: 18; top:135px; left:174px; width: 2px; height: 80px; '>
</div>
<div id='sliver4_10' class='sliver' style='-ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);position:absolute; z-index: 18; top:135px; left:174px; width: 2px; height: 80px; '>
</div>
<div id='sliver5_11' class='sliver' style='-ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg);position:absolute; z-index: 18; top:135px; left:174px; width: 2px; height: 80px; '>
</div>
<div id='compass_needle' style='position:absolute; z-index: 6; top:0; left: 0;'>
<img style='position: relative; opacity:0.75; z-index: 6;' onload='definewh();' class='hourhand' id='compassneedle' src="http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png" title="Thanks to http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png"></img>
</div>
<div id='compass_needlem' style='position:absolute; z-index: 6; top:0; left: 0;'>
<img style='position: relative; opacity:0.5; z-index: 6;' onload='definewh();' class='minutehand' id='compassneedlem' src="http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png" title="Thanks to http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png"></img>
</div>
<div id='compass_needles' style='position:absolute; z-index: 6; top:0; left: 0;'>
<img style='position: relative; opacity:0.08; z-index: 6;' onload='definewh();' class='secondhand' id='compassneedles' src="http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png" title="Thanks to http://marylandlearninglinks.org/wp-content/themes/learning-links/img/compass-needle.png"></img>
</div>

<h1 style='width=100%; text-align: center;'>Our <select onchange='ifbit(this.value);' id='mysel'><option value='GMT'>Greenwich Mean Time</option><option value='Local'>Local Time</option></select> Analogue Clock</h1>
<h3 style='width=100%; text-align: center;'>RJM Programming - August, 2016</h3>
<h4 style='width=100%; text-align: center;'><a style=' z-index:12; ' id='huh' onclick=" this.style.display='none'; " href='#' title='Click to stop displaying this text'></a></h4>
<div id='difbit' style='position:absolute; top:150px; left:0px; height:800px; width:100%; z-index:1;'></div>
</body>
</html>