var Button = Thunder.Component.extend({			
	init: function(initRootElement, initName, initWidth, initHeight, initDebug) {
		this._super(initRootElement);
			
		//Initialize properties
		this.name = initName;
		this.width = initWidth;
		this.height = initHeight;
		this.debug = initDebug;
		
		//Initialize assets
		this.assetManager.addAsset("gui","btn",null,"BTN",0,0);
				
		//Initialize layers
		this.layerManager.defineSet("GUI");
		
		//start
		this.draw();
	},
	
	handleEvents: function(events) {
		for(var i = 0; i < events.length; i++) {
			if(this.debug) this.trace("BUTTON: " + events[i].name);
			
			switch(events[i].name) {
				case "MOUSEUP":
					this.broadcastEvent("BTN_CLICK");
					break;
				case "MOUSEENTER":					
					$("#" + this.name + "_off").css("display","none");
					$("#" + this.name + "_on").css("display","block");
					break;
				case "MOUSELEAVE":					
					$("#" + this.name + "_off").css("display","block");
					$("#" + this.name + "_on").css("display","none");
					break;
			}
		}
	},
	
	handleCustomization: function(assetList) {
		for(var i = 0, ii = assetList.length; i < ii; i++) {
			var asset = assetList[i];			
						
			switch (asset.type) {	
				case "btn":		
					new Thunder.EventMap(asset.container,asset,this.eventQueue);
					asset.container.append("<img style='width:" + this.width + "px; height:" + this.height + "px;' src='/image/btn/btn_" + this.name.toLowerCase() + "_off.png' id='" + this.name + "_off' class='btn'/>");
					asset.container.append("<img style='width:" + this.width + "px; height:" + this.height + "px;' src='/image/btn/btn_" + this.name.toLowerCase() + "_on.png' id='" + this.name + "_on' class='btn'/>");
					break;
			}
		}
	},
	
	draw: function() {
		var assets = this.assetManager.getAssets("gui");
		this.layerManager.layOut(assets,"GUI",0);
		
		//set initial button state
		$("#" + this.name + "_off").css("display","block");
	},
	
	getName: function() {
		return this.name;	
	}
});