Ext.define("Ext.ux.plugin.Charcount", {
	alias: "plugin.charcount",

	config: {
		textfield: null,
		characterConfig: null,
		textPre: "",
		textPost: "",
		textSeperator: "",
		maxLength: 0,
		warningThreshold: 0,
		lowerThreshold: 0,
		countdown: false,
		hookField: false
	},

	overloader: function(config) {

		var o_clone = {
			textPre: "",
			textPost: "",
			textSeperator: "",
			maxLength: 0,
			countdown: false,
			lowerThreshold: 0,
			warningThreshold: 10,
			hookField: false
		};

		if (Ext.isObject(config)) {

			Ext.apply(o_clone, config);

			var a_text = ["textPre", "textPost", "textSeperator", "hookField"];

			Ext.Array.each(a_text, function(s_key) {
				if (o_clone[s_key]) {
					o_clone[s_key] = ip2.i18n(o_clone[s_key]);
				}
			});
		}
		return o_clone;
	},

	init: function(i_textfield) {

		var i_self = this;
		i_self.textfield = i_textfield;

		var o_clone = i_self.overloader(i_textfield.characterCount);
		Ext.applyIf(i_self, o_clone);

		i_self.maxLength = o_clone.length || Number.MAX_VALUE != i_textfield.maxLength ? i_textfield.maxLength : 0;

		var value = i_textfield.getValue();

		if (i_self.hookField) {

			var o_meta = value.meta;

			var s_current = i_textfield.getLanguage();

			var b_active = i_textfield.getLanguageActive();

			value = b_active ? value.text[s_current] : value["default"];
		}

		i_self.value = value.length;

		if (!i_textfield.rendered) {
			i_textfield.on({
				afterrender: {
					fn: i_self.handleAfterrender,
					scope: i_self
				}
			});
		}
		else {
			i_self.handleAfterrender();
		}
	},

	handleAfterrender: function() {

		var i_self = this;
		var i_textfield = i_self.textfield;

		i_textfield.on({
			change: {
				fn: i_self.updateValue,
				scope: i_self
			}
		});

		i_self.createInfoArea();

		i_self.updateValue();
	},

	updateValue: function() {

		var i_self = this;
		var i_textfield = i_self.textfield;

		var value = i_textfield.getValue();

		if (i_self.hookField) {

			var s_current = i_textfield.getLanguage();
			var b_active = i_textfield.getLanguageActive();

			value = b_active ? value.text[s_current] : value["default"];
		}

		value = value.length;

		var i_span_value = i_self.getInfoArea();

		if (value <= i_self.lowerThreshold) {
			i_span_value.setStyle("color", "#D74B3D");
		}
		else {
			var n_value = i_self.maxLength - value;

			if (n_value <= i_self.warningThreshold) {
				if (n_value <= 0) {
					i_span_value.setStyle("color", "#D74B3D");
				}
				else {
					i_span_value.setStyle("color", "#FC9B47");
				}
			}
			else {
				i_span_value.setStyle("color", "#35AC19");
			}
		}
		i_span_value.update(String(value));
	},

	getInfoArea: function() {

		var i_self = this;
		var i_textfield = i_self.textfield;
		var i_element = i_textfield.getEl();
		return i_element.select(".x-plugin-charcount span.plugin-value", true);
	},

	createInfoArea: function() {

		var i_self = this;

		var i_tpl = new Ext.XTemplate(
			"<tpl for=\".\">",
				"<div class=\"" + Ext.baseCSSPrefix + "plugin-charcount\"" + ">",
					"<tpl if=\"this.isBlank(" + i_self.maxLength + ") == false\">",
						"<tpl if=\"this.isBlank(values.textPre) == false\">",
							"<span class=\"plugin-textPre\">{textPre} </span>",
						"</tpl>",
						"<tpl if=\"values.countdown == false\">",
							"<tpl if=\"this.isLowerThreshold(values.lowerThreshold, values.value) == true\">",
								"<span class=\plugin-value\ style=\"font-weight: 900; color:#D74B3D;\">{value}</span>",
							"</tpl>",
							"<tpl if=\"this.isLowerThreshold(values.lowerThreshold, values.value) == false\">",
								"<span class=\"plugin-value\" style=\"font-weight: 900; color:#35AC19;\">{value}</span>",
							"</tpl>",
						"</tpl>",
						"<tpl if=\"values.countdown == true\">",
							"<tpl if=\"this.isLowerThreshold(values.lowerThreshold, values.value) == true\">",
								"<span class=\"plugin-value\" style=\"font-weight: 900; color:#D74B3D;\">{[this.getValue(values.value, values.maxLength)]}</span>",
							"</tpl>",
							"<tpl if=\"this.isLowerThreshold(values.lowerThreshold, values.value) == false\">",
								"<span class=\"plugin-value\" style=\"font-weight: 900; color:#35AC19;\">{[this.getValue(values.value, values.maxLength)]}</span>",
							"</tpl>",
						"</tpl>",
						"<tpl if=\"this.isBlank(values.textSeperator) == false\">",
							"<span class=\"plugin-textSeperator\"> {textSeperator}</span>",
							"<span class=\"plugin-maxLength\" style=\"font-weight: 900;\"> {maxLength}</span>",
						"</tpl>",
						"<tpl if=\"this.isBlank(values.textPost) == false\">",
							"<span class=\"plugin-textPost\"> {textPost}</span>",
						"</tpl>",
					"</tpl>",
				"</tpl>",
			"</div>",
			{
				getValue: function(value, maxvalue) {
					return maxvalue - value;
				},
				isBlank: function(value) {

					value = value || "";

					return value.length === 0;
				},
				isLowerThreshold: function(lowerThreshold, value) {
					return value <= lowerThreshold;
				}
			}
		);

		var i_textfield = i_self.textfield;
		var i_inputWrap = i_textfield.inputWrap;

		var i_created = Ext.DomHelper.createDom(i_tpl.apply(i_self));

		i_inputWrap.append(i_created);
	}
});
