/*
	Modified 02/09/05, matthias w
	Automatically adds rollover effects to image links.
	The function should be called 
	- on load of the body (<body onload="prepareRollOvers()">...</body>)
	- or tied to the window.onLoad event (window.onload = prepareRollOvers;)
	
	It assumes the following:
	- The image tag is marked with class="imgRollOver" (<img src="image_off.jpg" name="imgRollOver"></a>)
	- The off-state is marked with an underscore after the name, before the suffix ("img_off.gif", "image_lo.gif" etc.)
	- The hover image file is named with the suffix "_on", i.e. "image_off.gif" has the hover graphic "image_on.gif"
	
	Full example:
	<img class="imgRollOver" src="/images/toolbar/add_comment_off.gif" width="102" height="18" alt="Add comment" title="Add comment" />
	
	*/
	function prepareRollOvers()
	{
		var rollOverLinks = document.getElementsByTagName("img");
		for (var i=0; i<rollOverLinks.length; i++)
		{
			
			//episode rollover extension. puts the following image(if it exists) into _next state.
			if (rollOverLinks[i].className == "epiRollOver")
			{
				var img = rollOverLinks[i];
				var imgSrc = img.src;
				
				var hoverImg = new Image();
				var hoverSrc;
				
				var nextImg = new Image();
				var nextSrc;
				
				var imgPath = imgSrc.substr( 0, imgSrc.lastIndexOf("_") );
					hoverSrc = imgPath + "_on" + imgSrc.substr( imgSrc.lastIndexOf(".") );
					nextSrc = imgPath + "_next" + imgSrc.substr( imgSrc.lastIndexOf(".") );
				
				hoverImg.src = hoverSrc;
				nextImg.src = nextSrc;
				
				rollOverLinks[i].img = img;
				rollOverLinks[i].hoverSrc = hoverSrc;
				rollOverLinks[i].imgSrc = imgSrc;
				rollOverLinks[i].nextSrc = nextSrc;
				
				
				rollOverLinks[i].onmouseover = function ()
				{
					this.img.src = this.hoverSrc;
					if(this.parentNode.parentNode.nextSibling){
						var neighbor = this.parentNode.parentNode.nextSibling.firstChild.firstChild;
						if(neighbor.img.src.lastIndexOf("_on")==-1){
							neighbor.img.src = neighbor.img.nextSrc;
						}
					}
				}
				
				rollOverLinks[i].onmouseout = function ()
				{
					this.img.src = this.imgSrc;
					if(this.parentNode.parentNode.nextSibling){
						var neighbor = this.parentNode.parentNode.nextSibling.firstChild.firstChild;					
					    if(neighbor.img.src.lastIndexOf("_on")==-1){
							neighbor.img.src = neighbor.img.imgSrc;
						}
					}
				}
			}else if (rollOverLinks[i].className == "imgRollOver" || rollOverLinks[i].className == "imgRollOverLive"){

				var	onex = rollOverLinks[i].className == "imgRollOverLive" ? "_h" : "_on";

				var img = rollOverLinks[i];
				var imgSrc = img.src;
				
				var hoverImg = new Image();
				var hoverSrc;
				
				var imgPath = imgSrc.substr( 0, imgSrc.lastIndexOf("_") );
				hoverSrc = imgPath + onex + imgSrc.substr( imgSrc.lastIndexOf(".") );
				
				hoverImg.src = hoverSrc;
				
				rollOverLinks[i].img = img;
				rollOverLinks[i].hoverSrc = hoverSrc;
				rollOverLinks[i].imgSrc = imgSrc;
				
				
				rollOverLinks[i].onmouseover = function ()
				{
					this.img.src = this.hoverSrc;
				}
				
				rollOverLinks[i].onmouseout = function ()
				{
					this.img.src = this.imgSrc;
				}
			}
		}
	}
	
	window.onload = prepareRollOvers;