/* universal image highlighting script
 *
 * usage:
 * 	<script type="text/javascript" src="imghighlight.js"></script>
 *	for normal imagehighlighting (_hl will be appended to src on mouseover):
 *	<img src="../..." id="hl_[id]">
 *	for radiobutton style (like normal, but _act will be attached on click):
 *	<img src="../..." id="hla_[id]">
 *	for checkbox style (like radiobutton, but with checkbox behaviour):
 *	<img src="../..." id="hlp_[id]">
 *
 * extended: can be used with div and td elements now, too: ( '-hl' will be appended to className on mouseover)
 *  <div id="hl_[id]">...</div>
 *  <td id="hl_[id]">...</td>
 *
 * warning:
 *	don't use <body onload="..."> on pages including this script!
 *	instead try this:
 *	function myLoadFunc() {
 *		if (myLoadFunc != undefined) myLoadFunc();
 *		...
 *	}
 *	if (window.onload) window.onload = myLoadFunc;
 *
 */
var hlLoadFunc = undefined;
var llImages = new Object();
var hlImages = new Object();
var actImages = new Object();
var pressedImages = new Object();
var activeImg = "";
function init() {
	if (document.documentElement) {
		var i;
		var imgs = document.getElementsByTagName("img");
		for (i=0; i<imgs.length; i++) makeHighlightable(imgs[i])
		var divs = document.getElementsByTagName("div");
		for (i=0; i<divs.length; i++) makeContainerHighlightable(divs[i])
		var tds = document.getElementsByTagName("td");
		for (i=0; i<tds.length; i++) makeContainerHighlightable(tds[i])
	}
	if (hlLoadFunc != undefined) hlLoadFunc();
}

function makeHighlightable(imgElement) {
	if (imgElement.id.indexOf("hl_") == 0) {
		var im = new Image();
		im.src = imgElement.src;
		llImages[imgElement.id] = im;
		im = new Image();
		im.src = imgElement.src.replace(/(.+)\.(\w+)$/, "$1_hl.$2");
		hlImages[imgElement.id] = im;
		imgElement.onmouseover = function() {
			if(hlImages != undefined && hlImages[this.id] != undefined) this.setAttribute("src", hlImages[this.id].src);
		};
		imgElement.onmouseout = function() {
			if(llImages != undefined && llImages[this.id] != undefined) this.setAttribute("src", llImages[this.id].src);
		};
	} else if (imgElement.id.indexOf("hla_") == 0) {
		var im = new Image();
		im.src = imgElement.src;
		llImages[imgElement.id] = im;
		im = new Image();
		im.src = imgElement.src.replace(/(.+)\.(\w+)$/, "$1_hl.$2");
		hlImages[imgElement.id] = im;
		im = new Image();
		im.src = imgElement.src.replace(/(.+)\.(\w+)$/, "$1_act.$2");
		this.actImages[imgElement.id] = im;
		imgElement.onmouseover = function() {
			if (activeImg != this.id) this.setAttribute("src", hlImages[this.id].src);
		};
		imgElement.onmouseout = function() {
			if (activeImg != this.id) this.setAttribute("src", llImages[this.id].src);
		};
		imgElement.oldonclick = imgElement.onclick;
		imgElement.onclick = function() {
			if (activeImg != "") {
				document.getElementById(activeImg).setAttribute("src", llImages[activeImg].src);
			}
			this.setAttribute("src", actImages[this.id].src);
			activeImg = this.id;
			if (this.oldonclick != undefined) this.oldonclick();
		};
	} else if (imgElement.id.indexOf("hlp_") == 0) {
		var im = new Image();
		im.src = imgElement.src;
		llImages[imgElement.id] = im;
		im = new Image();
		im.src = imgElement.src.replace(/(.+)\.(\w+)$/, "$1_hl.$2");
		hlImages[imgElement.id] = im;
		im = new Image();
		im.src = imgElement.src.replace(/(.+)\.(\w+)$/, "$1_act.$2");
		this.actImages[imgElement.id] = im;
		imgElement.onmouseover = function() {
			if (!pressedImages[this.id]) this.setAttribute("src", hlImages[this.id].src);
		};
		imgElement.onmouseout = function() {
			if (!pressedImages[this.id]) this.setAttribute("src", llImages[this.id].src);
		};
		imgElement.oldonclick = imgElement.onclick;
		imgElement.onclick = function() {
			if (pressedImages[this.id] == undefined) pressedImages[this.id] = false;
			pressedImages[this.id] = !pressedImages[this.id];
			if (pressedImages[this.id]) {
				this.setAttribute("src", actImages[this.id].src);
			}
			if (this.oldonclick != undefined) this.oldonclick();
		};
	}
}

function makeContainerHighlightable(divElement) {
	if (divElement.id.indexOf("hl_") == 0) {
		divElement.ex_classname = divElement.className;
		divElement.ex_onmouseover = divElement.onmouseover;
		divElement.ex_onmouseout = divElement.onmouseout;
		divElement.onmouseover = function() {
			this.className = this.ex_classname+"-hl";
			if(this.ex_onmouseover != undefined) this.ex_onmouseover();
		};
		divElement.onmouseout = function() {
			this.className = this.ex_classname;
			if(this.ex_onmouseout != undefined) this.ex_onmouseout();
		};
	} else if (divElement.id.indexOf("hla_") == 0) {
		divElement.ex_classname = divElement.className;
		divElement.ex_onmouseover = divElement.onmouseover;
		divElement.ex_onmouseout = divElement.onmouseout;
		divElement.ex_onclick = divElement.onclick;
		divElement.onmouseover = function() {
			if(activeImg!=this.id) this.className = this.ex_classname+"-hl";
			if(this.ex_onmouseover != undefined) this.ex_onmouseover();
		};
		divElement.onmouseout = function() {
			if(activeImg!=this.id) this.className = this.ex_classname;
			if(this.ex_onmouseout != undefined) this.ex_onmouseout();
		};
		divElement.onclick = function() {
			if(activeImg != "") {
				var a =	document.getElementById(activeImg);
				a.className = a.ex_classname;
			}
			activeImg = this.id;
			this.className = this.ex_classname+"-act";
			if(this.ex_onclick != undefined) this.ex_onclick();
		};
	} else if (divElement.id.indexOf("hlp_") == 0) {
		divElement.ex_classname = divElement.className;
		divElement.ex_onmouseover = divElement.onmouseover;
		divElement.ex_onmouseout = divElement.onmouseout;
		divElement.ex_onclick = divElement.onclick;
		divElement.onmouseover = function() {
			if(!(pressedImages[this.id])) this.className = this.ex_classname+"-hl";
			if(this.ex_onmouseover != undefined) this.ex_onmouseover();
		};
		divElement.onmouseout = function() {
			if(!(pressedImages[this.id])) this.className = this.ex_classname;
			if(this.ex_onmouseout != undefined) this.ex_onmouseout();
		};
		divElement.onclick = function() {
			if (pressedImages[this.id] == undefined) pressedImages[this.id] = false;
			pressedImages[this.id] = !pressedImages[this.id];
			var suffix = pressedImages[this.id] ? "-act" : "";
			this.className = this.ex_classname+suffix;
			if(this.ex_onclick != undefined) this.ex_onclick();
		};
	}
}

function highlight(imgname) {
	document.getElementById(imgname).onmouseover();
}

function lowlight(imgname) {
	document.getElementById(imgname).onmouseout();
}

if (window.onload) hlLoadFunc = window.onload;
window.onload = init;

