// attachHover - used when an element with a background needs a rollover effect
function attachHover (elementId, backgroundImageUrl, hoverImageUrl) {
	var thingy = document.getElementById(elementId);

	if (!thingy) { return false; }

	thingy._backgroundImageUrl = backgroundImageUrl;
	thingy._hoverImageUrl = hoverImageUrl;

	initMouseEvents ( elementId, changeToHover, changeToBackground );

	var preload = new Image();
	preload.src = hoverImageUrl;
}

// initMouseEvents - to attach mouseover and mouseout events to any DOM object
function initMouseEvents (elementId, overEvent, outEvent) {
	initEvent(elementId, "mouseover", overEvent);
	initEvent(elementId, "mouseout", outEvent);
}

// initEvent - to attach an event listener to any DOM object
function initEvent (elementId, eventName, listenerFunction) {
	var thingy = document.getElementById(elementId);
	if (!thingy) { return false; }
	if (thingy.addEventListener) {
		thingy.addEventListener (eventName, listenerFunction , false);
	} else if (thingy.attachEvent) {
		//thingy.attachEvent ("on"+eventName, listenerFunction); I just hate IE's love for NOT supporting standards
		eval('thingy.on' + eventName + ' = ' + listenerFunction );
	} else {
		// ancient browsers = meh!
		return false;
	}
	return true;
}
function dinitEvent (elementId, eventName, listenerFunction) {
	var thingy = document.getElementById(elementId);
	if (!thingy) { return false; }
	if (thingy.removeEventListener) {
		thingy.removeEventListener (eventName, listenerFunction , false);
	} else if (thingy.detachEvent) {
		thingy.detachEvent ("on"+eventName, listenerFunction);
	} else {
		// ancient browsers not supported
		return false;
	}
	return true;
}

/*
changeToHover
	pre-condition : the DOM object to which the function is attached must 
					have ._hoverImageUrl definied
*/
function changeToHover () {
	this.style.backgroundImage = "url(" + this._hoverImageUrl + ")";
}

/*
changeToBackground
	pre-condition : the DOM object to which the function is attached must 
					have ._backgroundImageUrl definied
*/
function changeToBackground () {
	this.style.backgroundImage = "url(" + this._backgroundImageUrl + ")";
}

function setOpacity (elementId, value) {
	var thingy = document.getElementById(elementId);
	thingy.style.opacity = value/10;
	thingy.style.filter = 'alpha(opacity=' + value*10 + ')';
}

function debug (string) {
	var div = document.getElementById('debug');
	if (!div) {
		div = document.createElement('pre');
		div._line = 0;
		div.id = 'debug';
		div.style.position = 'fixed';
		div.style.zIndex = '10000';
		div.style.top = '0';
		div.style.right = '0';
		div.style.width = '400px';
		div.style.backgroundColor = '#FFF';
		div.style.color = '#000';
		div.style.fontSize = '12px';
		div.style.lineHeight = '18px';
		document.body.appendChild(div);
		var a = document.createElement('a');
		a.appendChild(document.createTextNode('+'));
		a.href="#";
		a.style.float = 'right';
		a.style.width = '18px';
		a.style.height = '18px';
		a.style.textAlign = 'center';
		a.style.color = '#00E';
		a.style.backgroundColor = '#EEE';
		a.onclick = function() {
			var debug = this.parentNode;
			if (!debug._hidden) {
				debug.style.width = '18px';
				debug.style.height = '18px';
				debug.style.overflow = 'hidden';
				debug._hidden = true;
			} else {
				debug.style.width = '400px';
				debug.style.height = 'auto';
				debug.style.overflow = 'none';
				debug._hidden = false;
			}
			return false;
		};
		div.appendChild(a);
		div._pre = document.createElement('pre');
		div.appendChild(div._pre);
	}
	var pre = div._pre;
	pre.appendChild(document.createTextNode((++div._line) + ":\t" + string + "\n"));
}