window.onload=startCounter

function startCounter(e) {
	var ob=document.getElementById("counter");
	if (!ob) {
		setTimeout(startCounter, 1000);
		return;
	}
//	ob.innerHTML="<table class=\"counter\"><tr><td><div id=\"w1\" class=\"countdigit\">?</div><div id=\"w2\" class=\"countdigit\">?</div></td><td><div id=\"d1\" class=\"countdigit\">?</div><div id=\"d2\" class=\"countdigit\">?</div></td></tr><tr><td>Weeks</td><td>Days</td></tr><td><div id=\"h1\" class=\"countdigit\">?</div><div id=\"h2\" class=\"countdigit\">?</div></td><td><div id=\"m1\" class=\"countdigit\">?</div><div id=\"m2\" class=\"countdigit\">?</div></td></tr><tr><td>Hours</td><td>Minutes</td></tr><tr><td><div id=\"s1\" class=\"countdigit\">?</div><div id=\"s2\" class=\"countdigit\">?</div></td></tr><tr><td>Seconds</td></tr></table>";
	ob.innerHTML="<h1>Countdown to Event</h1><table class=\"counter\"><tr><td><div id=\"w1\" class=\"countdigit\">?</div><div id=\"w2\" class=\"countdigit\">?</div></td><td><div id=\"d1\" class=\"countdigit\">?</div><div id=\"d2\" class=\"countdigit\">?</div></td></tr><tr><td>Weeks</td><td>Days</td></tr></table>";
	updateCounter();
}
function updateCounter() {
	var ob=document.getElementById("counter");
	var tgt=Date.parse("1 June 2012 09:00:00 GMT+0100");
	var now=new Date();
	var togo=(tgt - now.getTime())/1000;
	
	ob.style.display=(togo<0) ? 'none' : '';
	var seconds=togo % 60;
	togo=Math.floor(togo/60);
	var minutes=togo % 60;
	togo=Math.floor(togo/60);
	var hours=togo % 24;
	togo=Math.floor(togo/24);
	var days=togo % 7;
	togo=Math.floor(togo/7);
	var weeks=togo;
	setDigit("w1", Math.floor(weeks/10));
	setDigit("w2", weeks % 10);
	setDigit("d1", Math.floor(days/10));
	setDigit("d2", days % 10);
//	setDigit("h1", Math.floor(hours/10));
//	setDigit("h2", hours % 10);
//	setDigit("m1", Math.floor(minutes/10));
//	setDigit("m2", minutes % 10);
//	setDigit("s1", Math.floor(seconds/10));
//	setDigit("s2", seconds % 10);
	doCounterDrop();
	setTimeout(updateCounter, 100);
}

function setDigit(n, t) {
	t=Math.floor(t);
	var ob=document.getElementById(n);
	if ((!ob) || (ob.innerHTML.length!=1) || (ob.innerHTML==t)) return;
	dropob=document.createElement('div');
	dropob.className='countdigit';
	dropob.style.position='absolute';
	dropob.style.top='0px';
	dropob.style.left='0px';
	dropob.id=n + "drop" + Math.random();
	dropob.innerHTML=ob.innerHTML;
	ob.innerHTML=t;
	ob.appendChild(dropob);
	var d=new Date();
	setTimeout("doCounterDrop('" + dropob.id + "'," + d.getTime() + ")", 45);
}
function doCounterDrop(id, base) {
	var ob=document.getElementById(id);
	if (ob) {
		var now=new Date();
		now=now.getTime()-base;
		if (now>500) {
			ob.parentNode.removeChild(ob);
		} else {
			
			setTimeout("doCounterDrop('" + id + "'," + base + ")", 45);
			ob.style.top=Math.floor(now/30) + "px";
		}
	}
}