var elements = 15;
var xAngle = 0, yAngle = 0;

function drawTunnel() {
    var z = 2 - ((new Date().getMilliseconds() * 3) % 1000) / 1000;
    var xa = xAngle;
    var ya = yAngle;
    for (var i = 0; i < elements; i++) {
	var e = document.getElementById("tunnel-" + i);
	var s = Math.round(1024 / (z + i));
	e.style.left = ((129 - s / 2) + Math.round(128 / (z + 2 + (elements - i)) * Math.sin(xa))) + "px";
	e.style.top = ((129 - s / 2) + Math.round(128 / (z + 2 + (elements - i)) * Math.cos(ya))) + "px";
	e.style.width = s + "px";
	e.style.height = s + "px";
	xa += 0.2;
	ya += 0.3;
    }
    xAngle += 0.1;
    yAngle += 0.07;
}

function initializeTunnel() {
  document.write('<style type="text/css">');
  document.write('div.tunnel {');
  document.write('position: absolute;');
  document.write('left: 1px;');
  document.write('top: 1px;');
  document.write('width: 256px;');
  document.write('height: 256px;');
  document.write('overflow: hidden;');
  document.write('z-index: 3;');
  document.write('}');
  document.write('img.tunnel {');
  document.write('position: absolute;');
  document.write('left: 0px;');
  document.write('top: 0px;');
  document.write('width: 256px;');
  document.write('height: 256px;');
  document.write('z-index: 3;');
  document.write('}');
  document.write('</style>');

  document.write("<div class=\"tunnel\">");
  for (var i = 0; i < elements; i++) {
    document.write("<img src=\"img/tunnel" + (elements - i) + ".png\" id=\"tunnel-" + i +"\" class=\"tunnel\"/>");
    var e = document.getElementById("tunnel-" + i);
    e.style.zIndex = 3 + (elements - 1 - i);
  }
  document.write("</div>");
  var e = document.getElementById("tunnel-" + (elements - 1));
  e.style.backgroundColor = "#000000";
}

if (navigator.userAgent.indexOf("Gecko") >= 0 || navigator.userAgent.indexOf("Opera") >= 0) {
    randomInitializeFunctions.push(initializeTunnel);
    randomDrawFunctions.push(drawTunnel);
}