/*	Javascript animation for Sandydown logo
 *
 *	has a background image, a drop-shadow image, a main logo image
 *	(initially blue), two overlay images (initially orange) and
 *	various sprayer images.
 *
 *	The top overlay is set to the height of the first spray distance
 *	and the middle overlay is set to match up with the sprayer position.
 *	As the sprayer moves so too does the middle overlay clipping margin.
 *	At the end of the row the sprayer is moved down along with the
 *	top of the upper overlay.
 *
 *	Prajna Pranab 9 May 2006
*/

var interval;								// handle for the callback function
var sprayOffset = -5;				// step size for moving the sprayer
var logoOffset = -15;				// the clipping margin distance from the sprayer
var rotation = 0;						// rotation angle
var clipTop = 0;						// height of the left/right overlay
var pass = 0;								// sweep count for the sprayer
var sprayers = new Array();	// preload buffer for sprayer images

function setSprayImage(angle) {
	var e = document.getElementById('spray');
	if (pass < 3) {
		// every third rotation angle move the sprayer down one pixel
		if (!(angle % 3)) e.style.top = (parseInt(e.style.top) + 1) + 'px';
	} else
		// on the fourth pass move the sprayer back up
		if (parseInt(e.style.top) > 24) e.style.top = (parseInt(e.style.top) - 1) + 'px';
	// set sprayer image depending on the rotation angle
	e = document.getElementById('sprayer');
	if ((angle > 1) && !(angle % 2) && (angle < 19)) e.src = sprayers[(angle / 2)].src;
}

function setSprayColour() {
	// set the sprayer colour by swapping images
	sprayers[13].src = sprayers[0].src;
	sprayers[0].src = sprayers[11].src;
	sprayers[11].src = sprayers[13].src;
	sprayers[13].src = sprayers[10].src;
	sprayers[10].src = sprayers[12].src;
	sprayers[12].src = sprayers[13].src;
}

function setClips() {
	var e, f, g;
	pass++;
	if (pass == 3) setSprayColour();
	if (pass == 4) {
		// at the end of the fourth pass swap foreground and background images
		pass = 0;
		e = document.getElementById('logoImg');
		f = document.getElementById('logo1Img');
		g = document.getElementById('logo2Img');
		g.src = e.src;
		e.src = f.src;
		f.src = g.src;
	}
	// set clipping height for overlays
		e = document.getElementById('logo1');
		f = document.getElementById('logo2');
	switch (pass) {
		case 0:
			clipTop = 0;
			e.style.clip = 'rect(0px, 554px, 31px, 0px)';
			f.style.clip = 'rect(8px, 554px, 31px, 0px)';
			break;
		case 1:
			clipTop = 8;
			e.style.clip = 'rect(8px, 554px, 31px, 0px)';
			f.style.clip = 'rect(16px, 554px, 31px, 0px)';
			break;
		case 2:
			clipTop = 16;
			e.style.clip = 'rect(16px, 554px, 31px, 0px)';
			f.style.clip = 'rect(21px, 554px, 31px, 0px)';
			break;
		case 3:
			clipTop = 21;
			e.style.clip = 'rect(21px, 554px, 31px, 0px)';
			f.style.clip = 'rect(40px, 554px, 31px, 0px)';
			break;
	}
}

function callback() {
	var clipMargin;		// clipping margin for the left/right overlay
	var e = document.getElementById('spray');
	var f = document.getElementById('sprayer');
	if (parseInt(e.style.left) < 14) {
		// left extent of the sprayer movement
		if (rotation < 20) {
			// rotate sprayer
			rotation++;
			setSprayImage(rotation);
		} else {
			// switch sprayer to move right
			sprayOffset = 5;
			logoOffset = -75;
			f.src = sprayers[10].src;	// switch sprayer image to point left
			e.style.left = '14px';
			setClips();
		}
	} else if (parseInt(e.style.left) > 630) {
		// right extent of the sprayer movement
		if (rotation > 0) {
			// rotate sprayer
			rotation--;
			setSprayImage(rotation);
		} else {
			// switch sprayer to move left
			sprayOffset = -5;
			logoOffset = -15;
			f.src = sprayers[0].src;	// switch sprayer image to point right
			e.style.left = '630px';
			setClips();
		}
	} else {
		// move sprayer
		e.style.left = (parseInt(e.style.left) + sprayOffset) + 'px';
		clipMargin = parseInt(e.style.left) + logoOffset;
		e = document.getElementById('logo1');
		if (!(pass % 2))
			e.style.clip = 'rect(' + clipTop + 'px, ' + clipMargin + 'px, 31px, 0px)';
		else
			e.style.clip = 'rect(' + clipTop + 'px, 554px, 31px, ' + clipMargin + 'px)';
	}
}

function init() {
	
	//preload the sprayer images
	for (var n = 0; n < 14; n++)
		sprayers[n] = new Image();
	sprayers[0].src = 'logo/sprayrb.gif';
	sprayers[1].src = 'logo/sprayr1.gif';
	sprayers[2].src = 'logo/sprayr2.gif';
	sprayers[3].src = 'logo/sprayr3.gif';
	sprayers[4].src = 'logo/sprayr4.gif';
	sprayers[5].src = 'logo/sprayr5.gif';
	sprayers[6].src = 'logo/sprayr6.gif';
	sprayers[7].src = 'logo/sprayr7.gif';
	sprayers[8].src = 'logo/sprayr8.gif';
	sprayers[9].src = 'logo/sprayr9.gif';
	sprayers[10].src = 'logo/spraylb.gif';
	sprayers[11].src = 'logo/sprayro.gif';
	sprayers[12].src = 'logo/spraylo.gif';
	sprayers[13].src = 'logo/spraylo.gif';
	// set initial positions and clipping
	var e = document.getElementById('logo2');
	e.style.clip = 'rect(8px, 554px, 31px, 0px)';
	e = document.getElementById('spray');
	e.style.left = '630px';
	e.style.top = '24px';
	// show sprayer (hidden by the stylesheet for no-script browsers)
	e.style.visibility = 'visible';
	// start animation
	interval = window.setInterval("callback()", 25);
}