var colour = "#000000";
		var backColour = "#ffffff";

		var clipWidth = 50;
		var clipRange = 314;
		
		
			
// there are more variables which will be inserted by the XSLT before this
// point. These are colours, dimensions and the like, which must correspond to
// what we have in the CSS. 
var ctlLayer;
var ctlImage;
var ctlText;
var hiSlideLayer;
var hiSlideImage;
var hiTransLayer;
var hiTransImage;
var overLayer;
var overImage;
var underLayer;
var underImage;
var transLayer;
var transImage;
var loSlideLayer;
var loSlideImage;
var loTransLayer;
var loTransImage;
var hiTransX;
var hiTransY;
var transX;
var transY;
var transW;
var transH;
var loTransX;
var loTransY;
var opTimer = null;
var opLock = 0;
var opA = 0;
var opS = 1;
var opN = 1;
var opL = 0;
var opR = 0;

// Place absolute positioned layers where they belong.
function arrangeElements()
{
	hiTransX = getElemPosX(hiTransLayer);
	hiTransY = getElemPosY(hiTransLayer);
	transX = getElemPosX(transLayer);
	transY = getElemPosY(transLayer);
	transW = transLayer.offsetWidth;
	transH = transLayer.offsetHeight;
	loTransX = getElemPosX(loTransLayer);
	loTransY = getElemPosY(loTransLayer);
	hiSlideLayer.style.left = hiTransX;
	hiSlideLayer.style.top = hiTransY;
	hiSlideLayer.style.width = clipWidth;
	hiSlideLayer.style.height = 1;
	underLayer.style.left = transX;
	underLayer.style.top = transY;
	underLayer.style.width = transW;
	underLayer.style.height = transH;
	overLayer.style.left = transX;
	overLayer.style.top = transY;
	overLayer.style.width = transW;
	overLayer.style.height = transH;
	loSlideLayer.style.left = loTransX;
	loSlideLayer.style.top = loTransY;
	loSlideLayer.style.width = clipWidth;
	loSlideLayer.style.height = 1;
	clipRange = transW;
}

// sets the visibility property of the sliding elements
function showSlides(s)
{
	hiSlideLayer.style.visibility = s;
	overLayer.style.visibility = s;
	loSlideLayer.style.visibility = s;
}

// Loads a new distortion image for the overlayer,
// selected randomly.
function changeDistortionImage()
{
	var numDistorts = 6;
	var r = Math.floor((Math.random() * numDistorts) + 1.0);
	if (r > numDistorts)
		r = 1;
	overImage.setAttribute("src", "images/index-var-" + r + ".png");
}

// Distorts the world automatically.
function autoDistort()
{
	if (opLock == 1)
		return;
	opLock = 1;
	var opTimeSlice = 500;
	if (opS == 1) {
//		showSlides("visible");
		overLayer.style.visibility = "visible";
		opN = 1;
		opL = 0;
		opR = 0;
		opS = 0;
	}
	if ((opL < 0) || (opR > transW) || (opL > opR)) {
		opN++;
		if (opN > 6)
			opN = 1;
		if (opN % 2)
			changeDistortionImage();
		switch (opN) {
		case 1: // LTR
			opR = 0;
			opL = 0;
			break;
		case 2: // LTRB
			opR = transW;
			opL = 0;
			break;
		case 3: // RTL
			opL = transW;
			opR = transW;
			break;
		case 4: // RTLB
			opL = 0;
			opR = transW;
			break;
		case 5: // CTS
			opL = Math.floor(transW / 2);
			opR = Math.floor(transW / 2);
			break;
		case 6: // CTSB
			opL = 0;
			opR = transW;
			break;
		}
	} else {
		switch (opN) {
		case 1: // LTR
			opR += 6;
			break;
		case 2: // LTRB
			opR -= 6;
			break;
		case 3: // RTL
			opL -= 6;
			break;
		case 4: // RTLB
			opL += 6;
			break;
		case 5: // CTS
			opL -= 3;
			opR += 3;
			break;
		case 6: // CTSB
			opL += 3;
			opR -= 3;
			break;
		}
		opTimeSlice = 10;
	}
	overLayer.style.clip = "rect(auto " + opR + " auto " + opL + ")";
	var w = opR - opL;
	if (w < 0)
		w = 0;
	hiSlideLayer.style.left = opL + hiTransX;
	hiSlideLayer.style.width = w;
	loSlideLayer.style.left = opL + loTransX;
	loSlideLayer.style.width = w;
	if (opTimer)
		clearTimeout(opTimer);
	opTimer = setTimeout("autoDistort()", opTimeSlice);
	opLock = 0;
}

// Stops the timed operation
function operateManual()
{
	if (opTimer)
		clearTimeout(opTimer);
	opTimer = null;
	opLock = 0;
	hiSlideLayer.style.width = clipWidth;
	loSlideLayer.style.width = clipWidth;
}

// Starts the timed operation.
function operateTimed()
{
	if (opTimer)
		clearTimeout(opTimer);
	opTimer = setTimeout("autoDistort()", 100);
	opLock = 0;
}

// onmousemove handler.
function mouseSlide(e)
{
	var mx = getMouseEventX(e);
	var l = mx - (clipWidth / 2);
	var r = mx + (clipWidth / 2);
	if (l < 0) {
		l = 0;
		r = clipWidth;
	}
	if (r > clipRange) {
		r = clipRange;
		l = clipRange - clipWidth;
	}
	// rect(top right bottom left)
	overLayer.style.clip = "rect(auto " + r + " auto " + l + ")";
	hiSlideLayer.style.left = l + hiTransX;
	hiSlideLayer.style.width = clipWidth;
	loSlideLayer.style.left = l + loTransX;
	loSlideLayer.style.width = clipWidth;
}

// onmouseover handler
function mouseCome(e)
{
	operateManual();
	showSlides("visible");
}

// onmouseout handler
function mouseGo(e)
{
	showSlides("hidden");
	if (opA == 1)
		operateTimed();
	opS = 1;
}

// onresize handler
function windowResize(e)
{
	arrangeElements();
}

// onclick handler, auto transition off/on
function autoTransitionCtl(e)
{
	if (opA == 1) {
		ctlImage.setAttribute("src", "images/control-stop.png");
		ctlText.innerHTML = " stopped";
		operateManual();
		showSlides("hidden");
		opA = 0;
	} else {
		ctlImage.setAttribute("src", "images/control-play.png");
		ctlText.innerHTML = " playing";
		operateTimed();
		opA = 1;
	}
}

// Entry point
function main()
{
	if (!(document.getElementById))
		return;
	ctlLayer = document.getElementById("control-layer");
	ctlImage = document.getElementById("control-image");
	ctlText = document.getElementById("control-text");
	ctlLayer.style.visibility = "visible";
	ctlText.innerHTML = " loading...";
	hiSlideLayer = document.getElementById("hi-slide-layer");
	hiSlideImage = document.getElementById("hi-slidei-mage");
	hiTransLayer = document.getElementById("hi-trans-layer");
	hiTransImage = document.getElementById("hi-trans-image");
	underLayer = document.getElementById("under-layer");
	underImage = document.getElementById("under-image");
	overLayer = document.getElementById("over-layer");
	overImage = document.getElementById("over-image");
	transLayer = document.getElementById("trans-layer");
	transImage = document.getElementById("trans-image");
	loSlideLayer = document.getElementById("lo-slide-layer");
	loSlideImage = document.getElementById("lo-slide-image");
	loTransLayer = document.getElementById("lo-trans-layer");
	loTransImage = document.getElementById("lo-trans-image");
	hiSlideLayer.style.backgroundColor = colour;
	overLayer.style.backgroundColor = backColour;
	changeDistortionImage();
	underImage.setAttribute("src", "images/index-logo.png");
	transImage.setAttribute("src", "images/blank.gif");
	loSlideLayer.style.backgroundColor = colour;
	ctlImage.onclick = autoTransitionCtl;
	ctlText.onclick = autoTransitionCtl;
	underLayer.onmousemove = mouseSlide;
	underLayer.onmouseover = mouseCome;
	underLayer.onmouseout = mouseGo;
	overLayer.onmousemove = mouseSlide;
	overLayer.onmouseover = mouseCome;
	overLayer.onmouseout = mouseGo;
	window.onresize = windowResize;
	ctlImage.style.cursor = "pointer";
	ctlText.style.cursor = "pointer";
	if (document.all) {
		// Thanks, Microsoft, for these bits of extra work.
		ctlImage.style.cursor = "hand";
		ctlText.style.cursor = "hand";
	}
	if (opA == 1) {
		ctlImage.setAttribute("src", "images/control-play.png");
		ctlText.innerHTML = " playing";
	} else {
		ctlImage.setAttribute("src", "images/control-stop.png");
		ctlText.innerHTML = " stopped";
	}
	arrangeElements();
	underLayer.style.visibility = "visible";
	if (opA == 1)
		operateTimed();
	return 0;
}