
module.exports = new Class
({
	Extends: Htk.Field
	,Tag: 'htk-button'
	,Properties:
	{
		image:
		{
			type: String
			,set: function (x)
			{
				this._image = x;
				this.img.src = x;
			}
			,get: function ()
			{
				return this._image;
			}
		},
		icon:
		{
			type: String
			,set: function (x)
			{
				this._icon = x;
				this.image = 'image/icon/light/'+ x +'.svg';
			}
			,get: function ()
			{
				return this._icon;
			}
		},
		tip:
		{
			type: String
			,set: function (x)
			{
				this._tip = x;
				x = x ? x : '';
				this.node.title = x;
				this.img.title = x;
				this.renderContent ();
			}
			,get: function ()
			{
				return this._tip;
			}
		},
		showText:
		{
			type: Boolean
			,set: function (x)
			{					
				this._showText = x;
				this.renderContent ();
			}
			,get: function ()
			{
				return this._showText;
			}
		}
	}
	
	,_showText: false
	,_tip: null
	,_image: null
	,_icon: null
	
	,render: function ()
	{
		var node = this.createRoot ('button');
		node.addEventListener ('click', this._onClick.bind (this));
	
		this.img = this.createElement ('img');
		node.appendChild (this.img);
	}
	
	,renderContent: function ()
	{
		if (this._textNode)
			Vn.Node.remove (this._textNode);

		if (this._showText && this.node.title)
		{
			this._textNode = this.createElement ('span');
			this._textNode.appendChild (this.createTextNode (this.node.title));
			this.node.appendChild (this._textNode);
		}
	}

	,_onClick: function (event)
	{
		event.preventDefault ();
		this.emit ('click', this._form, event);
	}
});
