var hoverButton = new Class({
	initialize: function(options){
		this.options = options; //save our options.
		
		// set the properties for the object
		this.buttonElement = this.options.buttonElement;
		this.offState = this.buttonElement.src;
		this.hoverState = this.offState.replace('_off.', '_hover.');
		this.downState = this.offState.replace('_off.', '_down.');
		
		this.preloadImage([this.hoverState, this.downState]);		
	},
	setState : function(newState) {
		this.buttonElement.src = newState;	
	},
	preloadImage : function(arrImagePaths) {
		var parentObject = this;
		var img = new Asset.images(arrImagePaths, { onComplete: function(){parentObject.addListeners()} });	
	},
	addListeners : function() {
		this.buttonElement.addEvent('mouseover', this.setState.pass(this.hoverState, this));
		this.buttonElement.addEvent('mouseleave', this.setState.pass(this.offState, this));
		this.buttonElement.addEvent('mousedown', this.setState.pass(this.downState, this));
		this.buttonElement.addEvent('mouseup', this.setState.pass(this.offState, this));	
	}
});

var hoverButtonHandler = {
	arrHoverButtons : [],
	
	init : function() {
		var arrButtons = $$('img.hover_button');
	
		for (i=0; i<arrButtons.length; i++) {		
			hoverButtonHandler.arrHoverButtons[i] = new hoverButton({buttonElement: arrButtons[i]});		
		}	
	}
}

window.addEvent('domready', hoverButtonHandler.init);