<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Diablo III countdown</title>
<meta name="description" content="Diablo III countdown" />
<meta name="keywords" content="diablo III, diablo 3, countdown, launch" />
<link rel="shortcut icon" href="d3.ico" type="image/x-icon"/>
<style type="text/css">
@font-face {
 font-family: exocet-heavy;
 src: url('exocet-heavy.ttf');
}
@font-face {
 font-family: exocet-heavyIE;
 src: url("exocet-heavy.eot");
}


body {
 background: #000;
}

div#counter {
 position: absolute;
 font-family:exocet-heavy, exocet-heavyIE;
 width: auto;
 height: auto;
 color: #EEEFB6;
 visibility: hidden;
}

div#shadowcounter {
 position: absolute;
 font-family:exocet-heavy, exocet-heavyIE;
 width: auto;
 height: auto;
 color: black;
 visibility: hidden;
}

div#eyeleft {
 position:absolute;
 background-color: black; 
}

div#eyeright {
 position:absolute;
 background-color: black;
}

div#test {
  position:absolute;
  color: white;
}

a#link1 {
 position: absolute;
 left: 0px;
 top: 0px;
 border-style: none;
 border-color:transparent;
}

a#link2 {
 position: absolute;
 left: 0px;
 top: 0px;
 border-style: none;
 border-color:transparent;
}

img#pic {
 position: absolute;
 left: 0px;
 top: 0px;
 border-style: none;
 visibility: hidden;
}

img#trans1 {
 position:absolute;
 border-style: none;
}

img#trans2 {
 position:absolute;
 border-style: none;
}

img#imgleft {
 position: absolute;
 left:0px;
 right:0px;
}

img#imgright {
 position: absolute;
 left:0px;
 right:0px;
}

a {
 outline-color: invert;
 outline-style: none;
 outline-width: medium;
}

</style>

</head>
<body onload="load()">
<div><img src ="diablo-3-angel-quality-hd-65912.jpg" id="pic" alt=""/></div>
<div><a id="link1" href="http://www.diablo3.com"><img src="transparent.gif" id="trans1" alt=""/></a></div>
<div><a id="link2" href="http://www.blizzard.com"><img src="transparent.gif" id="trans2" alt=""/></a></div>
<div id="shadowcounter"></div>
<div id="counter"></div>
<div id="eyeleft"><img id="imgleft" src="eye1.png"/></div>
<div id="eyeright"><img id="imgright" src="eye1.png"/></div>
<div id="test"></div>


<script type="text/javascript">
<!--	
var windowWidth=0, windowHeight=0;
var cx=0, tx=0;

function calcWindowSize() {
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		windowWidth = window.innerWidth;
		windowHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    		//IE 6+ in 'standards compliant mode'
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
}
calcWindowSize();

function load() {
	validate();
	elem = document.getElementById("counter").style.visibility = "visible";
	elem = document.getElementById("shadowcounter").style.visibility = "visible";
	elem = document.getElementById("pic").style.visibility = "visible";
}

function validate() {
	calcWindowSize();

	elem = document.getElementById("pic");
	elem.style.width = windowWidth + "px";
	elem.style.height = windowHeight + "px";

	elem = document.getElementById("trans1");
	elem.style.left = windowWidth * 0.33 + "px";
	elem.style.top = windowHeight * 0.347 + "px";
	elem.style.width = windowWidth * 0.342 + "px";
	elem.style.height = windowHeight * 0.093 + "px";

	elem = document.getElementById("trans2");
	elem.style.left = windowWidth * 0.460 + "px";
	elem.style.top = windowHeight * 0.894 + "px";
	elem.style.width = windowWidth * 0.072 + "px";
	elem.style.height = windowHeight * 0.063 + "px";

	elem = document.getElementById("eyeleft");
	elem.style.left = windowWidth * 0.480 + "px";
	elem.style.top = windowHeight * 0.135 + "px";
	elem.style.width = windowWidth * 0.0073 + "px";
	elem.style.height = windowHeight * 0.0117 + "px";

	elem = document.getElementById("imgleft");
	elem.style.width = windowWidth * 0.0073 + "px";
	elem.style.height = windowHeight * 0.0117 + "px";

	elem = document.getElementById("eyeright");
	elem.style.left = windowWidth * 0.503 + "px";
	elem.style.top = windowHeight * 0.135 + "px";
	elem.style.width = windowWidth * 0.0073 + "px";
	elem.style.height = windowHeight * 0.0117 + "px";

	elem = document.getElementById("imgright");
	elem.style.width = windowWidth * 0.0073 + "px";
	elem.style.height = windowHeight * 0.0117 + "px";

	
	validateTimer(1);
}

function validateTimer(smooth) {
	elem = document.getElementById("counter");
	elem2 = document.getElementById("shadowcounter");

	f = windowWidth / 34;
	elem.style.fontSize = (f < 14 ? 14 : f) + "px";
	elem2.style.fontSize = (f < 14 ? 14 : f) + "px";

	tx = (windowWidth/2) - (elem.clientWidth/2);
	
	dx = tx - cx;
	
	if (Math.abs(dx) < smooth)
		dx /= smooth;

	cx += dx;

	elem.style.left = cx + "px";
	elem.style.top = ((windowHeight/2) - (elem.clientHeight/2))* 1.30 + "px";

	elem2.style.left = cx + 2 + "px";
	elem2.style.top = ((windowHeight/2) - (elem.clientHeight/2))* 1.30 + 2 + "px";
}

window.onresize = validate;

function display() {
	t = new Date(2012,4,15) - new Date();

	if (t>0) {
		d = Math.floor(t/86400000);t %= 86400000;
		h = Math.floor(t/3600000);	t %= 3600000;
		m = Math.floor(t/60000);	t %= 60000;
		s = Math.floor(t/1000);

		txt =	 (d<=0?"":d + " days ") + (h<10?"0":"") + h + ":" + (m<10?"0":"") + m + ":" + (s<10?"0":"") + s;

		document.getElementById("counter").innerHTML = txt;
		document.getElementById("shadowcounter").innerHTML = txt;

		setTimeout("display()", 250);

		validateTimer(20);
	} else {
		document.getElementById("counter").innerHTML = "Diablo III has launched!";
		document.getElementById("shadowcounter").innerHTML = "Diablo III has launched!";
		validateTimer(1);
	}
} 
display();

var rr=0, fad=0;
function fade() {
	var elem1 = document.getElementById("eyeleft");
	var elem2 = document.getElementById("eyeright");

 	elem1.style.backgroundColor = "rgb(" + rr + ",0,0)";
	elem2.style.backgroundColor = "rgb(" + rr + ",0,0)";

	rr += fad;

	rr = (rr>220?220:(rr<0?0:rr));

	setTimeout("fade()", 100);
}
fade();


function pointInEllipse (ex,ey,ea,eb,px,py) {
	var dx = px - ex;
	var dy = py - ey;
	return ((dx*dx)/(ea*ea) + (dy*dy)/(eb*eb) <= 1);
}

var IE = document.all?true:false;

if (!IE) document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = getMouseXY;

function getMouseXY(e) {
	if (IE) {
		posx = event.clientX + document.body.scrollLeft;
		posy = event.clientY + document.body.scrollTop;
	} else {
    		posx = e.pageX;
		posy = e.pageY;
	}
	if (posx < 0) posx = 0;
	if (posy < 0) posy = 0;

	ex=windowWidth*0.4955;
	ey=windowHeight*0.1641;
	exr=windowWidth*0.0568/2;
	eyr=windowHeight*0.1133/2;

	if (pointInEllipse(ex,ey,exr,eyr,posx,posy))
		fad = 8; else fad = -2; 
}

//-->
</script>


</body>
</html>�