Button = new Class({ 
	Implements: [Options],

	options: {
		textfile: 'images/berlin.png', //font file
		width: 32,//width of characters in pixels
		height:32//height of characters in pixels
		//rows:16,
		//cols:16
	},
	initialize: function(options){
		this.setOptions(options);
		this.buttons = new Array();
		window.addEvent('domready', function() {}.bind(this));
	},
	drawButton: function(id,style){
		ctx.fillStyle = style;
		ctx.fillRect(this.buttons[id].x,this.buttons[id].y,this.buttons[id].w,this.buttons[id].h);
		if(ctx.drawText)
			ctx.drawText(this.buttons[id].text,this.buttons[id].x+1,this.buttons[id].y+4,20);
		ctx.fillStyle = '#000000';
	},
	newButton: function(x,y,w,h,text,onclick,buttonStyle,hoverStyle){
		id = this.buttons.length;
		this.buttons[id] = {'x':x,'y':y,'w':w,'h':h,'onclick':onclick,'hoverStyle':hoverStyle,'buttonStyle':buttonStyle,'id':id,'hover':false,'text':text};
		this.drawButton(id,this.buttons[id].buttonStyle);
	},
	checkButtons: function(x,y){
		for(i=0;i<this.buttons.length;i++){
			button = this.buttons[i];
			if(x >= button.x && y >= button.y && 
				x <= button.x + button.w && y <= button.y + button.h){
				$('mcanvas').style.cursor = 'pointer';
				if(this.currentButton != button.id){
					this.currentButton = button.id;
					this.drawButton(button.id,button.hoverStyle);
					button.hover = true;
				}
			}else if(button.hover == true && this.currentButton == button.id){
				$('mcanvas').style.cursor = 'auto';
				this.drawButton(i,button.buttonStyle);
				button.hover = false;
				if(this.currentButton == button.id)
					this.currentButton = -1;
			}
		}
	},
	clickButton: function(){
		if(this.currentButton > -1){
			this.buttons[this.currentButton].onclick();
		}
	}
});
Button = new Button();