var HoverButton = Class.create();
HoverButton.prototype =
{
	initialize: function(button)
	{
		button.observe('mouseover', this.mouseOver.bindAsEventListener(this));
		button.observe('mouseout', this.mouseOut.bindAsEventListener(this));
		button.observe('mousedown', this.mouseDown.bindAsEventListener(this));
		button.observe('mouseup', this.mouseUp.bindAsEventListener(this));

		this.imageElementHeight = parseInt(button.getHeight());
	},

	mouseOver: function(event)
	{
		event.element().setStyle( { backgroundPosition: "0px -" + this.imageElementHeight + "px" } );
	},

	mouseOut: function(event)
	{
		event.element().setStyle( { backgroundPosition: "0px 0px" } );
	},

	mouseDown: function(event)
	{
		event.element().setStyle( { backgroundPosition: "0px -" + this.imageElementHeight * 2 + "px" } );
	},

	mouseUp: function(event)
	{
		this.mouseOver(event);
	}
}

var Menu = Class.create();
Menu.prototype = {
	initialize: function()
	{
		var hoverButtons = $$('.hover_button');
		for(var i = 0; i < hoverButtons.length; i++)
		{
			var button = new HoverButton(hoverButtons[i]);
		}
	}
}

Event.observe(window, 'load', function() {
	var menu = new Menu();
});