/**
 * MLNUI Button
 * MLNUI 按钮控件
 * Powered By CandySunPlus (c) 2011 MLN STUDIO
 */
$.MLNUI.Button = $.Class({
	option: {
		"width": 65,
		"height": 25,
		"cornerRadius": 5,
		"beginLineColor": [166, 206, 235],
		"beginColor": [129, 185, 227],
		"endColor": [100, 165, 217],
		"endLineColor": [81, 146, 198],
		"overBeginColor": [166, 206, 235],
		"overEndColor": [129, 185, 227],
		"color": "#FFF",
		"overColor": "#FF0",
		"shadowOffset": {
			'x': 0,
			'y': 0
		},
		"shadow": 3,
		"text": "Button",
		"dom": "body",
		"float": "right"
	},
	isDraw: false,
	init: function(options) {
		this.options = $.extend({}, this.option, options);
		this.initButton();
	},
	drawButton: function() {
		var options = this.options;
		_canvasEl = $(this.domEl).find(".ui_button_canvas").get(0);
		_buttonEl = $(this.domEl).find(".ui_button").get(0);
		$(_buttonEl).css("color", options.color);
		if (typeof window.G_vmlCanvasManager != 'undefined') {
			_canvasEl = window.G_vmlCanvasManager.initElement(_canvasEl);
		}
		var ctx = _canvasEl.getContext("2d");
		ctx.clearRect(0, 0, options.width, options.height);
		$.MLNUI.roundedRectLinear(ctx, 0, 0, options.width, options.height, options.cornerRadius, options.beginLineColor, options.endLineColor);
		$.MLNUI.roundedRectLinear(ctx, 0, 1, options.width, options.height - 2, options.cornerRadius, options.beginColor, options.endColor);
		ctx.fillStyle = 'rgba(' + options.endLineColor.join(',') + ', 0.3)';
		ctx.beginPath();
		ctx.moveTo(0, options.height - 6);
		ctx.lineTo(0, options.height - 6 - options.cornerRadius);
		ctx.quadraticCurveTo(0, options.height, 0 + options.cornerRadius, options.height);
		ctx.lineTo(options.width - options.cornerRadius, options.height);
		ctx.quadraticCurveTo(options.width, options.height, options.width, options.height - options.cornerRadius);
		ctx.lineTo(options.width, options.height - 6);
		ctx.lineTo(0, options.height - 6);
		ctx.fill();
	},
	drawButtonOver: function() {
		var options = this.options;
		_canvasEl = $(this.domEl).find(".ui_button_canvas").get(0);
		_buttonEl = $(this.domEl).find(".ui_button").get(0);
		$(_buttonEl).css("color", options.overColor);
		var ctx = _canvasEl.getContext("2d");
		if (this.idDraw) {
			ctx.restore()
		} else {
			this.isDraw = true;
			ctx.clearRect(0, 0, options.width, options.height);
			$.MLNUI.roundedRectLinear(ctx, 0, 0, options.width, options.height, options.cornerRadius, options.beginLineColor, options.endLineColor);
			$.MLNUI.roundedRectLinear(ctx, 0, 1, options.width, options.height - 2, options.cornerRadius, options.overBeginColor, options.overEndColor);
			ctx.fillStyle = 'rgba(' + options.endLineColor.join(',') + ', 0.3)';
			ctx.beginPath();
			ctx.moveTo(0, options.height - 6);
			ctx.lineTo(0, options.height - 6 - options.cornerRadius);
			ctx.quadraticCurveTo(0, options.height, 0 + options.cornerRadius, options.height);
			ctx.lineTo(options.width - options.cornerRadius, options.height);
			ctx.quadraticCurveTo(options.width, options.height, options.width, options.height - options.cornerRadius);
			ctx.lineTo(options.width, options.height - 6);
			ctx.lineTo(0, options.height - 6);
			ctx.fill();
			ctx.save();
		}
	},
	insertHTML: function() {
		var options = this.options;
		var _this = this;
		var _domEl = document.createElement("div");
		var _buttonEl = document.createElement("span");
		var _canvasEl = document.createElement("canvas");
		$(options.dom).append(_domEl);
		$(_domEl).append([_buttonEl, _canvasEl]).css({
			"line-height": options.height + "px",
			"height": options.height + "px",
			"width": options.width + "px",
			"float": options.float,
			"margin": "0 2px"
		});
		this.domEl = _domEl;
		$(_canvasEl).attr({
			"width": options.width,
			"height": options.height
		}).css({
			"z-index": 2
		}).addClass("ui_button_canvas");
		$(_buttonEl).css({
			"position": "absolute",
			"display": "block",
			"line-height": options.height + "px",
			"height": options.height + "px",
			"width": options.width + "px",
			"z-index": 3,
			"cursor": "pointer",
			"text-align": "center"
		}).text(options.text).addClass("ui_button").hover(function() {
			_this.drawButtonOver()
		}, function() {
			_this.drawButton()
		})
		if ($.isFunction(this.options.func)) {
			$(_buttonEl).click(function(e) {
				_this.options.func.call();
			});
		}
	},
	initButton: function() {
		this.insertHTML();
		this.drawButton();
	}
});