/*****************************************************************************
* Are you tried of writing onmouseover= and onmouseout= for hover states?
* 
* How to use: Include Prototype 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
* 
*****************************************************************************/

document.observe("dom:loaded", function() {
	$$('.will_hover').each(function(el, index) {
		Event.observe(el, 'mouseover', wh_over);
		Event.observe(el, 'mouseout', wh_out);
	});
});

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

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