/*****************************************************************************
* Are you tried of writing onmouseover= and onmouseout= for hover states?
* 
* How to use: Include Mootools and this file. Add "will_hover" class to any
* img tag that you want to have a hover state. Name hover state graphics with
* "-hover" at the end of the file name. Like "about.png" and 
* "about-hover.png".
*
* Copyright 2009 - MCM Design Studio
* 
*****************************************************************************/

try {
	window.addEvent('domready', function() {
		$$('.will_hover').each(function(el, index) {
			el.addEvent('mouseover', wh_over);
			el.addEvent('mouseout', wh_out);
		});
	});
} catch(err) {}

function wh_over(event) {
	try {
		var ext = this.src.split('.').reverse().shift();
		this.src = this.src.replace('.' + ext, '-hover.' + ext);
	} catch(err) {}
}

function wh_out(event) {
	try {
		var ext = this.src.split('.').reverse().shift();
		this.src = this.src.replace('-hover.' + ext, '.' + ext);
	} catch(err) {}
}