/**
 * Original Source: Book: DHTML Utopia: Modern Web Design Using JavaScript & DOM
 * Also: http://www.sitepoint.com/article/dhtml-utopia-modern-web-design/2
 */

/**
 * Automagically set up rollover event handlers for all IMGs within links with the rollover class
 *
 * This is executed once after page load
 *
 * @todo preload rollover images?
 */
function setupRollovers()
{
	if(!document.getElementsByTagName)
	{ // We are NOT in a DOM-supporting browser:
		return;
	}

	// Get ALL the links in the current document:
	var all_links = document.getElementsByTagName('a');

	// Go through all the links:
	for(var i = 0; i < all_links.length; i++)
	{
		var link = all_links[i];

		if(link.className && (' ' + link.className + ' ').indexOf(' rollover ') != -1)
		{ // The link has the rollover class (among potentially other classes):
			if( link.childNodes &&
					link.childNodes[0].nodeName.toLowerCase() == 'img')
			{ // There is an image within the link,
				// Set up event handlers:
				link.onmouseover = mouseover;
				link.onmouseout = mouseout;
			}
		}
	}
}


/**
 * caters for the differences between Internet Explorer and fully DOM-supporting browsers
 */
function findTarget(e)
{
 var target;

 if (window.event && window.event.srcElement)
   target = window.event.srcElement;
 else if (e && e.target)
   target = e.target;
 if (!target)
   return null;

 while (target != document.body &&
     target.nodeName.toLowerCase() != 'a')
   target = target.parentNode;

 if (target.nodeName.toLowerCase() != 'a')
   return null;

 return target;
}


/**
 * MouseOver event handler
 */
function mouseover(e)
{
 var target = findTarget(e);
 if (!target) return;

 // the only child node of the a-tag in target will be an img-tag
 var img_tag = target.childNodes[0];

 // Take the "src", which names an image called "something.ext",
 // Make it point to "something_over.ext"
 img_tag.src = img_tag.src.replace(/(\.[^.]+)$/, '_over$1');
}


/**
 * MouseOut event handler
 */
function mouseout(e)
{
 var target = findTarget(e);
 if (!target) return;

 // the only child node of the a-tag in target will be an img-tag
 var img_tag = target.childNodes[0];

 // Take the "src", which names an image as "something_over.ext",
 // Make it point to "something.ext"
 img_tag.src = img_tag.src.replace(/_over(\.[^.]+)$/, '$1');
}


/**
 * When the page loads, set up the rollovers
 */
addEvent( window, 'load', setupRollovers, false );