Ext.define('Ext.ux.form.field.plugin.SuffixLabel', {

	alias: ['plugin.suffixlabel'],

	extend: 'Ext.AbstractPlugin',

	statics: {
		textAttr: (function () {

			// first time initialization of closure
			var span = document.createElement('span');
			span.style.position = 'absolute';
			span.style.visibility = 'hidden';
			span.style.height = 'auto';
			span.style.width = 'auto';
			var s = document.getElementsByTagName('body')[0].appendChild(span);

			return {
				pixWidth: function(t, cn) {
					span.className = cn;
					span.innerHTML = t;
					return span.clientWidth;
				}
			};
		})(),
		fn: {
			setWidth: function (n_width) {

				var i_component = this,
					i_suffixCmp = i_component.getSuffixLabel();

				i_suffixCmp.setWidth(n_width);

				i_component.syncSuffixLabel();

				return i_component;
			},
			hide: function () {

				this.getSuffixLabel().hide();

				return this;
			},
			show: function () {

				this.getSuffixLabel().show();

				return this;
			},
			getSuffixLabel: function () {

				var i_component = this,
					i_suffixCmp = Ext.getCmp('suffixlabel-' + i_component.id);

				return i_suffixCmp;
			},
			getSuffixLabelText: function () {

				return this.suffixLabelText;
			},
			setSuffixLabelText: function (s_label) {

				var i_component = this,
					i_suffixCmp = i_component.getSuffixLabel(),
					i_label = i_suffixCmp.down('[name=labeltext]');

				i_component.suffixLabelText = s_label;

				i_label.update(s_label);

				i_component.syncSuffixLabel();

				return i_component;
			},
			syncSuffixLabel: function () {

				var i_component = this,
					s_label = i_component.getSuffixLabelText(),
					i_suffixCmp = i_component.getSuffixLabel(),
					i_field = i_suffixCmp.down('[name=fieldcontainer]'),
					i_label = i_suffixCmp.down('[name=labelcontainer]'),
					n_fullWidth = i_suffixCmp.getWidth(),
					n_labelWidth = Ext.ux.form.field.plugin.SuffixLabel.textAttr.pixWidth(s_label, 'x-panel-body') + 8,
					n_fieldWidth,
					n_fieldHeight = i_field.getHeight() - 3;

				// If we have a fixed suffix width set - then we use that one!
				if (i_component.suffixWidth) {
					n_labelWidth = i_component.suffixWidth + 15;
				}

				n_fieldWidth = n_fullWidth - n_labelWidth;

				if (i_component.suffixHeight) {
					n_fieldHeight = i_component.suffixHeight;
				}

				// Remember the margin of the label
				i_field.setWidth(n_fieldWidth);
				i_label.setWidth(n_labelWidth);
				i_label.setHeight(n_fieldHeight);
				i_component.setSize(n_fieldWidth);				
			}
		}
	},

	constructor: function(o_settings) {
			
		var i_plugin = this,
			i_component = o_settings.cmp,
			s_label = o_settings.label,
			s_type = o_settings.type || 'text';

		i_plugin.label = s_label;
		i_plugin.type = s_type;
	},

	init: function (i_component) {

		var i_plugin = this,
			s_label = i_plugin.label,
			s_type = i_plugin.type;

		i_plugin.pluginId = 'suffixlabel';

		Ext.Object.merge(i_component, Ext.ux.form.field.plugin.SuffixLabel.fn);

		i_plugin.initField(i_component, s_label, s_type);
	},

	buildField: function (i_component, s_label, s_type) {

		var i_plugin = this,
			i_parent = i_component.up(),
			i_wrapper,
			n_index = i_parent.items.indexOf(i_component);

		var a_extend = ['layout', 'anchor', 'width', 'minWidth'];

		var s_padding = s_type == 'text' ? '3px 0 0 5px' : '0 0 0 15px';

		i_component.suffixType = s_type;

		i_wrapper = {
			xtype: 'fieldcontainer',
			id: 'suffixlabel-' + i_component.id,
			listeners: {
				'afterrender': {
					fn: function () {

						var i_suffixLabel = i_component.getSuffixLabel(),
							i_label = i_suffixLabel.down('[name=labeltext]');

						Ext.apply(i_component, {
							minWidth: 0
						});

						i_label.addClass('x-form-item-label-suffix');

						i_component.setSuffixLabelText(s_label);
					},
					single: true
				},
				'resize': {
					fn: function () {
						i_component.syncSuffixLabel();
					}
				}
			},
			items: [
				{
					xtype: 'panel',
					layout: 'hbox',
					align: 'stretch',
					border: false,
					anchor: '100%',
					defaults: {
						border: false,
						layout: 'anchor',
						xtype: 'panel'
					},
					items: [
						{
							name: 'fieldcontainer'
						},
						{
							name: 'labelcontainer',
							items: [
								{
									name: 'labeltext',
									border: false,
									padding: s_padding
								}
							]
						}
					]
				}
			]
		};

		Ext.Array.each(a_extend, function(s_prop) {

			var o_config = i_component.initialConfig;

			if (o_config[s_prop]) {
				i_wrapper[s_prop] = o_config[s_prop];
			}
		});

		i_wrapper = i_parent.insert(n_index, i_wrapper);

		i_wrapper.down('[name=fieldcontainer]').add(i_component);

		return i_plugin;
	},

	initField: function (i_component, s_label, s_type) {

		var i_plugin = this,
			i_parent = i_component.up();

		if (!i_parent) {
			i_component.on({
				'afterrender': {
					fn: function (i_self) {
						i_plugin.buildField(i_self, s_label, s_type);
					},
					single: true
				}
			});
		}
		else {
			i_plugin.buildField(i_component, s_label, s_type);
		}

		return i_plugin;
	}
});
