Image0 = new Image();
Image0.src = "fileadmin/images/tropfen.gif"; // Source für das zu zeigende Bild
Image1 = new Image();
Image1.src = "fileadmin/images/tropfenspritzer.gif"; // Source für das Spritzerbild
var speed = 50; // Definiert, wie schnell der Tropfen fällt - Zeitangabe in Millisekunden
var startwidth = 15;
var startheight = 23;
var growth = 1;

//-------------------------------------------------------

var YMouse = 1;
var XMouse = Math.round(Math.random() * 700);
var currentXMouse, currentYMouse, currentwidth, currentheight, cy;

// das capturn von MouseMove-Events aktivieren
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(e)
{
	XMouse=(e)?e.pageX-15:window.event.clientX + document.documentElement.scrollLeft-15;
	YMouse=(e)?e.pageY+5:window.event.clientY + document.documentElement.scrollTop+5;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
document.write('<img id="raindrop" src="'+Image0.src+'" width="1" height="2" style="position:absolute;top:0px;left:0px;">');
document.write('</div></div>');

function init()
{
	currentXMouse = XMouse;
	currentYMouse = YMouse;
	currentwidth = startwidth;
	currentheight = startheight;
	cy = 0;

	rainDrop();
}

function rainDrop()
{
	var hscrll = (document.all)?document.documentElement.scrollTop:window.pageYOffset;
	var height = (document.all)?document.documentElement.clientHeight:window.innerHeight;

	document.getElementById('raindrop').style.left = currentXMouse + "px";
	document.getElementById('raindrop').style.top = (cy + currentYMouse) + "px";
	document.getElementById('raindrop').style.width = currentwidth + "px";
	document.getElementById('raindrop').style.height = currentheight + "px";

	// damit wir mit der Tropfenanimation nicht zu weit nach unten laufen und scrollen
	if((cy + currentYMouse) < (hscrll + height - 75))
	{
		if (currentwidth < (2*startwidth) && currentheight < (2*startheight))
		{
			currentwidth += growth;
			currentheight += growth * 1.5;
		}

		if (((hscrll + height - 75) - currentYMouse) > 200)
			cy += 15;
		else if (((hscrll + height - 75) - currentYMouse) > 75)
			cy += 8;
		else if (((hscrll + height - 75) - currentYMouse) <= 75)
		{
			currentwidth = 0;
			currentheight = 0;
			cy += 8;
		}
		
		if (((hscrll + height - 75) - (cy + currentYMouse)) < 20 && (((hscrll + height - 75) - currentYMouse) >= 75))
		{
			document.getElementById('raindrop').src = Image1.src;
			document.getElementById('raindrop').style.left = (currentXMouse - 20)+ "px";
			document.getElementById('raindrop').style.top = (cy + currentYMouse - 10) + "px";
			document.getElementById('raindrop').style.width = "60px";
			document.getElementById('raindrop').style.height = "40px";
		}
		else
			document.getElementById('raindrop').src = Image0.src;		
	}
	// sobald wir wieder weit genug vom unteren Rand entfernt sind, wird der Tropfen wieder eingeblendet und animiert
	else if (((hscrll + height - 75) - YMouse) > 75)
	{
		currentXMouse = XMouse;
		currentYMouse = YMouse;
		currentwidth = startwidth;
		currentheight = startheight;

		cy = 0;
	}
	// unten blenden wir den Tropfen aus, da die Animation sonst zu schnell wird und doof aussieht
	else
	{
		currentXMouse = XMouse;
		currentYMouse = YMouse;
		currentwidth = 0;
		currentheight = 0;

		cy = 0;
	}

	window.setTimeout("rainDrop()", speed);
}