var NodeBuilder = require ('./node-builder');

var nativeEvents = {
	 'click'     : 1
	,'mousedown' : 1
	,'focusout'  : 1
};

module.exports = new Class
({
	Extends: NodeBuilder
	,Properties:
	{
		/**
		 * Main HTML node that represents the widget
		 */
		node:
		{
			type: Object
			,get: function ()
			{
				this.renderBase ();
				return this._node;
			}
		},
		/**
		 * CSS classes to be appendend to the node classes.
		 */
		class:
		{
			type: String
			,set: function (x)
			{
				this._cssClass = x;
				this._refreshClass ();
			}
			,get: function ()
			{
				return this._node.className;
			}
		}
	}

	,_node: null
	
	,initialize: function (props)
	{
		this.doc = document;
		this.renderBase ();
		this.parent (props);
	}
	
	,on: function (id, callback, instance)
	{
		if (nativeEvents[id])
			this.node.addEventListener (id,
				callback.bind (instance, this));
		else
			this.parent (id, callback, instance);
	}
	
	,createRoot: function (tagName)
	{
		return this._node = this.createElement (tagName);
	}
	
	,renderBase: function ()
	{
		if (this._node)
			return;

		this.render ();
		this._refreshClass ();
	}

	,_refreshClass: function ()
	{
		if (this._node && this._cssClass)
			this._node.className = this._cssClass +' '+ this._node.className;
	}
	
	,remove: function ()
	{
		Vn.Node.remove (this._node);
	}
});