require('./style.scss');
var Component = require('vn/component');

module.exports = new Class({
	Tag: 'htk-loader'
	,Extends: Component
	,Properties: {
		form: {
			type: Db.Form
			,set: function(x) {
				this.link({_form: x}, {'status-changed': this.onFormChange});
				this.onFormChange();
			}
			,get: function() {
				return this._form;
			}
		}
	}

	,initialize: function(props) {
		Component.prototype.initialize.call(this, props);
		this.createRoot('div');

		var div = this.createElement('div');
		div.className = 'spinner';

		var spinner = new Htk.Spinner();
		div.appendChild(spinner.node);

		var childs = this.createElement('div');

		this.spinner = spinner;
		this.div = div;
		this.childs = childs;
		this.isLoading = true;
		this.stop();
	}

	,appendChild: function(child) {
		this.childs.appendChild(child);
	}

	,stop: function() {
		if (!this.isLoading)
			return;

		this.isLoading = false;
		this.spinner.stop();
		Vn.Node.removeChilds(this.node);
		this.node.appendChild(this.childs);
	}

	,start: function() {
		if (this.isLoading)
			return;

		this.isLoading = true;
		this.spinner.start();
		Vn.Node.removeChilds(this.node);
		this.node.appendChild(this.div);
	}

	,onFormChange: function() {
		if (this._form.ready)
			this.stop();
		else
			this.start();
	}
});