Ext.define('Ext.ux.stackorganizer.column.Specification', {

	extend: 'Ext.grid.column.Column',

	alias: ['widget.stackspecificationcolumn'],

	config: {
		stack: false
	},

	initComponent: function () {

		var i_cmp = this;

		Ext.apply(i_cmp, {
			renderer: function (s_value, o_meta, i_record, n_row, n_col, i_store, i_view) {

				var s_id = i_record.internalId;
				var o_properties = i_record.get('properties');
				var o_id;
				var o_name;
				var o_text;
				var s_toplink = '';

				o_id = {
					label: ip2.i18n({
						da: 'ID',
						en: 'ID'
					}),
					value: i_record.get('ptype') + ' / ' + i_record.get('pagetoken')
				};

				o_name = {
					label: ip2.i18n({
						da: 'Navn',
						en: 'Name'
					}),
					value: o_properties.name || o_properties.title || ''
				};

				o_text = {
					label: ip2.i18n({
						da: 'Tekst',
						en: 'Text'
					}),
					value: o_properties.description || ''
				};

				// If the config option "isStack" is true
				// This column is wrongly named since it is in fact bound up on the field "toplink"
				// which delivers a boolean, and is the interactive part of the specifications (checkbox)
				// Toplink checkbox is only rendered if this config option is true
				var b_stack = i_cmp.getIsStack();

				if (b_stack) {

					if (b_value == 'true') {
						b_value = true;
					}
					if (b_value == 'false' || !b_value || b_value == null) {
						b_value = false;
					}

					var o_toplink = {
						label: ip2.i18n({
							da: 'Toplink',
							en: 'Toplink'
						}),
						value: (b_value ? 'CHECKED' : '')
					};
					s_toplink = new Ext.XTemplate('<div class=x-ux-stack-cell-toplink">',
						'<div class=x-ux-stack-label">' + o_toplink.label + ': </div>',
						'<div class=x-ux-stack-value">',
							'<input id=x-ux-stack/' + s_id + '.toplink" type="checkbox" ' + o_toplink.value + ' />',
						'</div>',
					'</div>').html;
				}

				// Create the final HTML output by using XTemplate
				var s_output = new Ext.XTemplate('<table>',
					'<tr><td valign="middle">',
						'<div id=x-ux-stack-record-' + i_record.internalId + '" class=x-ux-stack-cell">',
							'<div class=x-ux-stack-cell-id">',
								'<div class=x-ux-stack-label">' + o_id.label + ': </div>',
								'<div class="x-ux-stack-value">' + o_id.value + '</div>',
							'</div>',
							'<div class=x-ux-stack-cell-name">',
								'<div class=x-ux-stack-label">' + o_name.label + ': </div>',
								'<div class="x-ux-stack-value">' + o_name.value + '</div>',
							'</div>',
							'<div class=x-ux-stack-cell-text">',
								'<div class=x-ux-stack-label">' + o_text.label + ': </div>',
								'<div class=x-ux-stack-value">' + o_text.value + '</div>',
							'</div>',
							s_toplink,
						'</div>',
					'</td></tr>',
				'</table>').html;

				// Run through the specifications render if the config settings "isStack" is true
				// to check or uncheck the checkbox again after render
				if (b_stack) {
					i_cmp.onSpecificationsRender(i_view);
				}

				return s_output;
			}
		});

		i_cmp.callParent();

		return i_cmp;
	},
	onSpecificationsRender: function (i_view) {

		var i_cmp = this;
		var i_store = i_view.up().getStore();
		var i_el = i_view.getEl();
		var a_input;

		// Move to back of stack so we know cell has been rendered
		setTimeout(function () {

			// Query out all input fields in .x-ux-stack-cell
			a_input = i_el.query('.x-ux-stack-cell input');

			Ext.Array.each(a_input, function (i_input) {

				i_input.addEventListener("change", function(o_event) {
					var i_self = this;
					var a_ref = i_self.id.split('/').pop().split('.'); // ex. "record-332.properties.toplink"
					var s_id = a_ref[0]; // the id of the record node
					var s_key = a_ref[1]; // the name of the property to get from the record
					var i_record = i_store.getNodeById(s_id);
					var b_checked = i_self.checked;

					o_event.stopPropagation();

					if (i_record) {

						var data = i_record.get(s_key);

						if (data != null) {
							if (!b_checked) {
								b_checked = '';
							}
							i_record.set(s_key, b_checked);
						}
					}
				});
			});
		}, 4);

		return i_cmp;
	}
});
