// Copyright is a Human Right
// rico rico rico rico

var janimateMaxFrames = 27;

var Overx1 = 1;
var Overx2 = 1;
var Overx3 = 1;
var Overx4 = 1;
var Overx5 = 1;

function MouseOverx1() {Overx1=!Overx1;}
function MouseOverx2() {Overx2=!Overx2;}
function MouseOverx3() {Overx3=!Overx3;}
function MouseOverx4() {Overx4=!Overx4;}
function MouseOverx5() {Overx5=!Overx5;}

function MouseOver() {

spindown=35;
spinend=80+Math.random()*20;
action();}

// Draaier Object
function Draaier(id, frames, x, y, z, d) {

    // PROPERTIES 

    this.id  = id;		// Id of the div, and name of the image
    this.frames = frames;	// directory name of animation frames

    this.x = x;			// x, y, & z position
    this.y = y;
    this.z = z;
    this.maxFrames = 27;

    this.seq = d;		// current frame


    // Construct the div and image DOM nodes.
    document.write('<div id="' + id + '" style="background:transparent;position:absolute;left:' + x + 'px;top:' + y + 'px;z-index:' + z + '">'+ 
		   '<img name="' + id + '" src="'+ frames[Math.floor(this.seq)].src+'" onmouseover="MouseOver();"/></div>'+
		   '<div id="'+id+'dbg" style="background:transparent;position:absolute;left:' + x + 'px;top:' + y + 'px;z-index:' + 1000 + '"></div>');


    this.layer=document.getElementById(this.id);
    this.debug=document.getElementById(this.id+'dbg');
    this.image=document.images[this.id];

    // MOVE METHOD  move()
    //              move(speed, x, y, z)

    this.move = function( x, y, z) {

	this.x += x;
	this.y += y;
	this.z += z;

	this.layer.style.left   = this.x + 'px';
	this.layer.style.top    = this.y + 'px';
	this.layer.zIndex =       this.z;
	this.layer.style.zIndex = this.z;
	this.image.zIndex =       this.z;
	this.image.style.zIndex = this.z;
	
	document.images[this.id].src = frames[Math.floor(this.seq)].src;

    }

    // TURN METHOD turn(d)
    this.turn = function(d) {
	this.seq += d;
        if (this.seq < 0) {
		this.seq = this.maxFrames;
	} else if (this.seq >= this.maxFrames) {
		this.seq = 0
	}
	
	// this.debug.innerHTML= 'Frame: ' + Math.floor(this.seq);
	document.images[this.id].src = frames[Math.floor(this.seq)].src;
    } 

    
    // ZET METHOD
    this.zet = function(z) {
        this.z = z;
	this.layer.zIndex =       this.z;
	this.layer.style.zIndex = this.z;
	this.image.zIndex =       this.z;
	this.image.style.zIndex = this.z;
    }
}

X1  = new Draaier('x1', frames,   50, 10, 10,  0);
X2  = new Draaier('x2', frames,  200, 10, 10,  5);
X3  = new Draaier('x3', frames,  350, 10, 10, 15);
X4  = new Draaier('x4', frames,  500, 10, 10, 20);
X5  = new Draaier('x5', frames,  650, 10, 10, 25);

Y1  = new Draaier('y1', frames,   50, 210, 10,  0);
Y2  = new Draaier('y2', frames,  200, 210, 10,  5);
Y3  = new Draaier('y3', frames,  350, 210, 10, 15);
Y4  = new Draaier('y4', frames,  500, 210, 10, 20);
Y5  = new Draaier('y5', frames,  650, 210, 10, 25);

Z1  = new Draaier('z1', frames,   50, 410, 10,  0);
Z2  = new Draaier('z2', frames,  200, 410, 10,  5);
Z3  = new Draaier('z3', frames,  350, 410, 10, 15);
Z4  = new Draaier('z4', frames,  500, 410, 10, 20);
Z5  = new Draaier('z5', frames,  650, 410, 10, 25);


s1 = 2 - Math.random()*4;
s2 = 2 - Math.random()*4;
s3 = 2 - Math.random()*4;
s4 = 2 - Math.random()*4;
s5 = 2 - Math.random()*4;

spindown=35;
spinend=80+Math.random()*20;

function action() {

	if (Overx1) X1.turn(Math.random()*2);
	if (Overx2) X2.turn(Math.random()*2);
	if (Overx3) X3.turn(Math.random()*2);
	if (Overx4) X4.turn(Math.random()*2);
	if (Overx5) X5.turn(Math.random()*2);

	if (Overx1) Y1.turn(Math.random()*2);
	if (Overx2) Y2.turn(Math.random()*2);
	if (Overx3) Y3.turn(Math.random()*2);
	if (Overx4) Y4.turn(Math.random()*2);
	if (Overx5) Y5.turn(Math.random()*2);

	if (Overx1) Z1.turn(Math.random()*2);
	if (Overx2) Z2.turn(Math.random()*2);
	if (Overx3) Z3.turn(Math.random()*2);
	if (Overx4) Z4.turn(Math.random()*2);
	if (Overx5) Z5.turn(Math.random()*2);

	if (spindown < spinend) {
	    setTimeout('action();', spindown);
	    spindown = spindown *1.003;
	}
}

setTimeout('action();', 50);