// Bild-Maße
var imgWidth = 512;
var imgHeight = 384;

// absolute Position des Bildes zu Beginn
var xAbs = 230;
var yAbs = 250;

// relative Position des Ausschnitts zu Beginn
var x = 0;
var y = 0;

// Ausschnitts-Maße
var clipWidth = 180;
var clipHeight=110;

// Rest-Breite und Rest-Höhe (Hilfsgrößen)
var restWidth = imgWidth - clipWidth;
var restHeight = imgHeight - clipHeight;

// Während der Ausschnitt über das Bild wandert,
// bewegt sich das Bild genau in die entgegengesetzte Richtung.
// Dies erzeugt die Illusion der Bewegung des Bildausschnitts.

function move() {
	var obj = document.getElementById("image");
	// neuer Ausschnitt: rect(oben rechts unten links)
	obj.style.clip = "rect(" + y + " " + (x + clipWidth) + " " + (y + clipHeight) + " " + x + ")";
	obj.style.left = xAbs;
	obj.style.top = yAbs;
}

// Der Ausschnitt startet oben-links und bewegt sich immer diagonal über das Bild.
// Erreicht der Ausschnitt einen Bildrand prallt er im 90°-Winkel ab.
// Die Zufallselemente sollen monotone Bewegungsmuster verhindern.

// Startfunktion
function rightDown() {
	// Ausschnitt-Koordinaten um einen Pixel nach rechts-unten und Bild-Koordinaten um einen Pixel nach links-oben verschieben
	x++;
	y++;
	xAbs--;
	yAbs--;

	// Bewegung ausführen
	move();

	// Sonderfall: Ausschnitt befindet sich genau in der rechten unteren Ecke
	if (x == restWidth && y== restHeight) {
		setTimeout('leftUp()', 40);
	// Ausschnitt berührt den rechten Bildrand
	} else if (x == restWidth) {
		setTimeout('leftDown()', 40);
	// Ausschnitt berührt den unteren Bildrand
	} else if (y == restHeight) {
		setTimeout('rightUp()', 40);
	// Zufallselement
	} else if (Math.random() < 0.001) {
		setTimeout('rightUp()', 40);
	// Ausschnitt bewegt sich weiter nach rechts-unten, Verzögerung 40 mSec
	} else {
		setTimeout('rightDown()',40);
	}
}

function leftDown() {
	x--;
	y++;
	xAbs++;
	yAbs--;

	move();

	if (x == 0 && y == restHeight) {
		setTimeout('rightUp()', 40);
	} else if (x == 0) {
		setTimeout('rightDown()', 40);
	} else if (y == restHeight) {
		setTimeout('leftUp()', 40);
	} else if (Math.random() < 0.001) {
		setTimeout('leftUp()', 40);
	} else {
		setTimeout('leftDown()', 40);
	}
}

function rightUp() {
	x++;
	y--;
	xAbs--;
	yAbs++;

	move();

	if (x == restWidth && y == 0) {
		setTimeout('leftDown()', 40);
	} else if (x == restWidth) {
		setTimeout('leftUp()', 40);
	} else if (y == 0) {
		setTimeout('rightDown()', 40);
	} else if (Math.random() < 0.001) {
		setTimeout('rightDown()', 40);
	} else {
		setTimeout('rightUp()', 40);
	}
}

function leftUp() {
	x--;
	y--;
	xAbs++;
	yAbs++;

	move();

	if (x == 0 && y == 0) {
		setTimeout('rightDown()', 40);
	} else if (x == 0) {
		setTimeout('rightUp()', 40);
	} else if (y == 0) {
		setTimeout('leftDown()', 40);
	} else if (Math.random() < 0.001) {
		setTimeout('leftDown()', 40);
	} else {
		setTimeout('leftUp()', 40);
	}
}