<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<title>Site Maintenance</title>
	<style type="text/css">
		body{ text-align: center; padding-top: 50px; padding-left: 80px; font-family: sans-serif; font-weight: 100; font: 20px Helvetica, sans-serif; color: black; }
		h1{ font-size: 50px; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; }
		#article{ display: block; text-align: left; margin: auto; }
		a{ color: #dc8100; text-decoration: none; }
		a:hover{ color: #333; text-decoration: none; }
		#clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; }
		#clockdiv > div{ padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block; }
		#clockdiv div > span{ padding: 15px; border-radius: 3px; background: #00816A; display: inline-block; }
		.smalltext{ padding-top: 5px; font-size: 16px; }
	</style>
</head>

<body>
	<div id="article">
		<h1>We&rsquo;ll be back very soon!</h1>
		<img src="/maintenance.jpg" />
		<div>
			<p>Sorry for the inconvenience but we&rsquo;re making some important changes. It shouldn&rsquo;t take very long.</p>
			<p>We plan to be back online within 15 minutes.</p>
			<div id="clockdiv">
				<div>
					<span class="minutes"></span>
					<div class="smalltext">Minutes</div>
				</div>
				<div>
					<span class="seconds"></span>
					<div class="smalltext">Seconds</div>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
//<![CDATA[
function getTimeRemaining(endtime) {
	var t = Date.parse(endtime) - Date.parse(new Date());
	var seconds = Math.floor((t / 1000) % 60);
	var minutes = Math.floor((t / 1000 / 60) % 60);
	return {
		'total': t,
		'minutes': minutes,
		'seconds': seconds
	};
}

function initializeClock(id, endtime) {
	var clock = document.getElementById(id);
	var minutesSpan = clock.querySelector('.minutes');
	var secondsSpan = clock.querySelector('.seconds');

	function updateClock() {
		var t = getTimeRemaining(endtime);

		minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
		secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

		if (t.total <= 0) {
			clearInterval(timeinterval);
			window.location = window.location.href;
		}
	}

	updateClock();
	var timeinterval = setInterval(updateClock, 1000);
}

function extractDomain(url) {
	var domain;
	//find & remove protocol (http, ftp, etc.) and get domain
	if (url.indexOf("://") > -1) {
		domain = url.split('/')[2];
	}
	else {
		domain = url.split('/')[0];
	}

	//find & remove port number
	domain = domain.split(':')[0];

	return domain;
}

// if there's a cookie with the name myClock, use that value as the deadline
var deadline = 0;
if(document.cookie && document.cookie.match('myClock') && document.cookie.match(/(^|;)myClock=([^;]+)/)){
	// get deadline value from cookie
	var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
	var t = getTimeRemaining(deadline);
	if (t.total <= 0) {
		deadline = 0;
	}
}

// otherwise, set a deadline 10 minutes from now and 
// save it in a cookie with that name
if(deadline == 0){
	// create deadline 10 minutes from now
	var timeInMinutes = 15;
	var currentTime = Date.parse(new Date());
	var deadline = new Date(currentTime + timeInMinutes*60*1000);

	// store deadline in cookie for future reference
	document.cookie = 'myClock=' + deadline + '; path=/; domain=' + extractDomain(window.location.href) + '; expires=' + deadline;
}

initializeClock('clockdiv', deadline);
//]]>
</script>
</body>
</html>