var magicButton = Class.create();

	//defining the rest of the class implementation
	magicButton.prototype = {
	
	  initialize: function(button_id) {
	    this.button = $(button_id);
		
		// We should pre-load the various state images here
		this.normalState = this.button.readAttribute("src");
		
		// Parse the filename
		var pos1 = this.normalState.lastIndexOf('/') + 1;
		var pos2 = this.normalState.lastIndexOf('.');
		
		var imgNameRoot = this.normalState.substring(pos1, pos2);
		var urlRoot = this.normalState.substring(0, pos1);
		var ext = this.normalState.substring(pos2, this.normalState.length);
		
		// State images are defined here
		this.hoverState = urlRoot + '/' + imgNameRoot + '_over' + ext;
		this.clickedState = urlRoot + '/' + imgNameRoot + '_down' + ext;
		
    this.button.onmouseup = this.swapToNormalState.bindAsEventListener(this);
		this.button.onmousedown = this.swapToClickedState.bindAsEventListener(this);
		this.button.onmouseover = this.swapToHoverState.bindAsEventListener(this);
		this.button.onmouseout = this.swapToNormalState.bindAsEventListener(this);
	  },
	  
	  	swapToClickedState: function(evt) {
			this.button.setAttribute("src", this.clickedState);
		},
		
		swapToNormalState: function(evt) {
			this.button.setAttribute("src", this.normalState);
		},
		
		swapToHoverState: function(evt) {
			this.button.setAttribute("src", this.hoverState);
		}
	};
		 	
		function makeMagicButtons() {
		   if(!document.getElementsByTagName) return false;
		   var buttons = $$('.image');
		   
		   for (var i=0; i < buttons.length; i++) {
				new magicButton(buttons[i]);
		   }
		
			 buttons = $$('.image_button');
		   
		   for (var i=0; i < buttons.length; i++) {
				new magicButton(buttons[i]);
		   }
		}
	
		Event.observe(window, 'load', function() {
 			makeMagicButtons();
		});