function switchColour(el, holder) {
	// window.alert('Current element: ' + el.id);
	var holder = $(holder);
	if (!holder) return false;
	/* find the current active element and hide it */
	var colours = holder.getElementsByTagName('a');
	for (var i=0; i<colours.length; i++) {
		if ((el.id != colours[i].id) && (colours[i].style.display != 'none')) {
			otherEm = colours[i].getElementsByTagName('em');
			// setTimeout(function() {Effect.Fade(otherEm); }.bind({el:colours[i]}), 500);
			setTimeout(function() {Effect.Fade(this.el); }.bind({el:otherEm[0]}), 400);
			otherT = colours[i].getElementsByTagName('span');
			otherT[0].style.display = 'none';
		}
	}
	activeEm = el.getElementsByTagName('em');
	Effect.Appear(activeEm[0]);
	title = el.getElementsByTagName('span');
	title[0].style.display = 'block';
	el.onclick = function() { return false };
	return false;
}

function handle_onload() {
	/* disable image caching in IE */
	try {
		document.execCommand('BackgroundImageCache', false, true);
	} catch(err) {}

	/* disable the CSS with the :hover and :focus rules */
	var kill = document.getElementById('colours_css_actions'); //
	kill.disabled = true;

	/* build functionality with javascript (and fade enabled) */
	var holder = $('colour_container');
	if (!holder) return false;
	var swatches = holder.getElementsByTagName('a');
	for (var i=0; i < swatches.length; i++) {
		/* hide elements */
		em = swatches[i].getElementsByTagName('em');
		em[0].style.display = 'none';
		t = swatches[i].getElementsByTagName('span');
		t[0].style.display = 'none';
		/* add behaviour */
		swatches[i].onmouseup = function() {
			switchColour(this, 'colour_container');
		}
	}
	/* activate first colour */
	switchColour(swatches[0], 'colour_container');
}

Event.observe(window, 'load', handle_onload);