Consider my thunder stolen.
Here's mine, since it might be the only way you get to see it.
Differences are I used a more complicated way of formatting the time string, which I had to look up online, but that was because it originally made it say "1 day, 3 hours, 20 minutes, 5 seconds" and then people said I should just make it compact. It also just looks for the first img tag on the page where I stupidly hardcoded the banner image so Yarr can never change it again. What it ought to do is find the src of the first image and set it as the tablecell background. Too lazy now.
Code:
// This is the FFXIV Server Launch Date
var BaseDate = new Date("September 22, 2010 00:00:00 GMT");
// Variables
var CurrentDate, LastDate, NextDate;
var i18n = {weeks: ['week', 'weeks'], days: ['day', 'days'], hours: ['hour', 'hours'], minutes: ['minute', 'minutes'], seconds: ['second', 'seconds']};
var i18c = {days: ['', ''],hours: ['', ''],minutes: ['', ''],seconds: ['', '']};
var units = {days: 24 * 60 * 60, hours: 60 * 60, minutes: 60, seconds: 1};
// This function adds the HTML to the banner, then initializes the leve timer.
function setupLevePage() {
var imgTag = document.getElementsByTagName('img')[0]
if (!imgTag) {
// Not loaded yet for some reason, add a timer and try again in a bit.
setTimeout(setupLevePage, 100);
} else {
var tableCell = imgTag.parentNode.parentNode;
var html = '<div class="LeveTrans" style="padding: 5px; margin: 5px; background-color: #04002a; border: solid 1px #FFFFFF; width: 190px;">' +
'<div class="LeveText">' +
'<table cellpadding="0" cellspacing="0">' +
' <tr>' +
' <td style="width:36px; height: 47px;" valign="top"><img style="position: absolute;" src="http://imgur.com/6nAow.png" width="30" height="47" border="0"></td>' +
' <td valign="top"><div style="position: absolute; width: 150px;"><div style="position: relative; top:2px;">' +
' <div class="LeveText" style="margin-bottom: 4px; font-weight: bold;">Levequest Reset Timer</div>' +
' <table cellpadding="0" cellspacing="0">' +
' <col width="65" />' +
' <tr><td class="LeveText">Last Reset:</td><td class="LeveText"><div id="TimeSince"></div></td></tr>' +
' <tr><td class="LeveText">Next Reset:</td><td class="LeveText"><div id="TimeUntil"></div></td></tr>' +
' </table>' +
' </div></div></td>' +
' </tr>' +
' </div>' +
'</div>' +
'<style type="text/css">' +
' .LeveText {font-family: Tahoma; font-size: 11px; color: white;}' +
' .LeveTrans {filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;}' +
'</style>';
tableCell.style.backgroundImage = "url('images/logo/newlogo3c.jpg')";
tableCell.style.height = "245px";
tableCell.style.cursor = "pointer";
tableCell.vAlign = "top";
tableCell.onclick = function () { window.location = "index.php"; };
tableCell.innerHTML = html;
// Initialize
initLeveTimes();
}
}
// Automatically load without fiddling with body onload stuff.
setupLevePage();
// Recalculate!
function initLeveTimes() {
NextDate = new Date(BaseDate);
var SinceDiv = document.getElementById('TimeSince');
var UntilDiv = document.getElementById('TimeUntil');
if (SinceDiv) SinceDiv.innerText = 'Calculating...';
if (UntilDiv) UntilDiv.innerText = 'Calculating...';
setTimeout(recalculateLeveTimes, 1000);
}
// Calculate current Leve times using a 36 hour loop
function recalculateLeveTimes() {
var i = 0;
CurrentDate = new Date();
while (NextDate < CurrentDate) {
NextDate.setHours(NextDate.getHours() + 36);
}
LastDate = new Date(NextDate);
LastDate.setHours(NextDate.getHours() - 36);
setTimeout(updateLeveTimerDivs, 1000);
}
// Update the divs with the calculated text.
function updateLeveTimerDivs() {
CurrentDate = new Date();
var TimeSince = CurrentDate - LastDate;
var TimeSinceSeconds = parseInt(TimeSince / 1000);
var TimeUntil = NextDate - CurrentDate;
var TimeUntilSeconds = parseInt(TimeUntil / 1000);
if (TimeUntilSeconds <= 0) {
initLeveTimes();
} else {
var SinceDiv = document.getElementById('TimeSince');
var UntilDiv = document.getElementById('TimeUntil');
if (SinceDiv) SinceDiv.innerText = getTimeStringCompact(TimeSinceSeconds);
if (UntilDiv) UntilDiv.innerText = getTimeStringCompact(TimeUntilSeconds);
if (SinceDiv) SinceDiv.title = LastDate;
if (UntilDiv) UntilDiv.title = NextDate;
setTimeout(updateLeveTimerDivs, 1000);
}
}
// This function takes a number of seconds and turns it into a formatted string.
function getTimeStringCompact(seconds) {
if (seconds < 1) {
return '00:00:00:00';
}
var hideEmpty = false;
var onlyLargestUnit = false;
var returnArray = [];
var value;
for (unit in units) {
value = units[unit];
if (seconds / value >= 1 || unit == 'seconds' || !hideEmpty) {
secondsConverted = Math.floor(seconds / value);
var i18cUnit = i18c[unit][secondsConverted == 1 ? 0 : 1];
returnArray.push(((secondsConverted + '').length == 2 || unit == 'weeks') ? secondsConverted : '0' + secondsConverted);
seconds -= secondsConverted * value;
if (onlyLargestUnit) {
break;
}
}
};
return returnArray.join(':');
}