// ====================================================

// script: Gerard Ferrandez - Ge-1-doot - June 2005

// http://www.dhteumeuleu.com/

// ====================================================

document.onselectstart = new Function("return false");



var object = new Array();



var H;

var W;

var img;

var Z = 1000;

var I = 0;

var In = 0;

var Ni = 0;



/////////////

Nx   = 12;

Ny   = 9;

/////////////



function CObj(N, x, y){



	this.obj = document.createElement("span");

	this.obj.style.width = W - 0;

	this.obj.style.height = H - 0;

	this.obj.style.left = x;

	this.obj.style.top = y;

	this.obj.style.position = "absolute";

	this.obj.style.overflow = "hidden";



	this.oim = document.createElement("img");

	this.oim.src = img[0].src;

	this.oim.style.position = "absolute";

	this.oim.style.left = Math.round(-x * W);

	this.oim.style.top = Math.round(-y * H);

	this.oim.onmouseover = new Function("object["+N+"].start()");



	this.obj.appendChild(this.oim);

	document.getElementById("frame").appendChild(this.obj);



	this.x0  = x * W;

	this.y0  = y * H;

	this.px  = 0;

	this.py  = 0;

	this.x   = 0;

	this.y   = 0;

	this.Ix  = 0;



	this.start = function () {

		with(this){

			if(x==0 && y==0){

				if(Ix==I){

					Ix++;

					oim.src = img[Ix%Ni].src;

					In++;

					document.getElementById("pointer").style.background="#fff";

					if(In==Nx*Ny)I++,In=0;

				} else document.getElementById("pointer").style.background="#fff";



				document.getElementById("pointer").style.top = y0;

				document.getElementById("pointer").style.left = x0;

				setTimeout('document.getElementById("pointer").style.background="transparent";', 32);



				init();

				obj.style.zIndex = Z++;

				obj.style.left = x0+x;

				obj.style.top = y0+y;

			}

		}

	}



	this.init = function () {

		with(this){

			do {

				px = Math.round(Math.random()*8-4);

				py = Math.round(Math.random()*8-4);

				x = 200 * px;

				y = 200 * py;

			} while (px==0 || py==0)

		}

	}



	this.anim = function () {

		with(this){

			if(x!=0)x -= px;

			if(y!=0)y -= py;

			obj.style.left = x0+x;

			obj.style.top = y0+y;

		}

	}

	this.init();

}



function run(){

	for(i in object)object[i].anim();

	setTimeout(run, 16);

}



onload = function(){

	img = document.getElementById("images").getElementsByTagName("img");

	Ni = img.length;

	x = img[0].width;

	y = img[0].height;

	with(document.getElementById("frame").style){

		left   = -x / 2;

		top    = -y / 2;

		width  = x;

		height = y;

	}

	with(document.getElementById("pointer").style){

		left   = -x / 2 - 40;

		top    = -y / 2 - 40;

		width  = x + 80;

		height = y + 80;

	}

	W = Math.round(x / Nx);

	H = Math.round(y / Ny);



	document.getElementById("pointer").style.width  = W;

	document.getElementById("pointer").style.height = H;



	var k = 0;

	for(y=0;y<Ny;y++) for(x=0;x<Nx;x++) object[k] = new CObj(k++, x, y);

	run();

}