
Ext.define("Ext.ux.form.field.ThumbnailComboBox", {

	extend: "Ext.form.field.ComboBox",

	alias: [
		"widget.thumbnailcombo",
		"widget.thumbnailcombobox"
	],

	triggers: {
		clear: {
			cls: Ext.baseCSSPrefix + "form-clear-trigger",
			weight: 1,
			handler: "clearValue",
			hidden: true,
			scope: "this"
		},
		picker: {
			weight: 2,
			handler: "onTriggerClick",
			scope: "this"
		}
	},

	config: {
		path: "",
		extension: ""
	},

	listeners: {
		change: {
			fn: function (i_field, value) {
				if (i_field.inputEl) {

					var a_values = Ext.Array.from(value);

					i_field.getTrigger("clear")[Ext.isEmpty(a_values) ? "hide" : "show" ]();
				}
			}
		},
		enable: {
			fn: function (i_field) {

				var s_value = i_field.getValue();

				i_field.getTrigger("clear")[s_value ? "show" : "hide"]();
			},
			buffer: 10
		},
		disable: {
			fn: function (i_field) {
				i_field.getTrigger("clear").hide();
			},
			buffer: 10
		},
		writeablechange: {
			fn: function (i_field, b_readOnly) {

				var s_value = i_field.getValue();
				var b_allowAdd = i_field.getAllowAdd();

				i_field.getTrigger("clear")[b_readOnly || !s_value ? "hide" : "show"]();
			},
			buffer: 10
		},
		autosize: {
			fn: function (i_field) {
				var i_picker = i_field.getPicker();
				i_picker.setWidth(i_field.bodyEl.getWidth());
			},
			buffer: 1
		}
	},

	initComponent: function () {

		var i_cmp = this;
		var o_config = i_cmp.initialConfig;
		var s_path = o_config.path;

		var i_template = Ext.create("Ext.XTemplate", 
			"<tpl for=\".\">",
				"<span style=\"",
					"width: 43px;",
					"height: 37px;",
					"background-image: url(" + s_path + "/{key}.png);",
					"background-size: 35px;",
					"background-position: 1px 2px;",
					"background-repeat: no-repeat;",
					"display: inline-block;",
				"\"></span>",
				"<span style=\"",
					"height: 45px;",
					"position: relative;",
					"top: -13px",
				"\">{name}</span>",
			"</tpl>"
		);

		Ext.apply(i_cmp, {
			height: o_config.imageHeight,
			editable: false,
			listConfig: {
				itemTpl:i_template
			}
		});

		i_cmp.extendListener(i_cmp, "select", function (i_self, i_record) {
			if (i_record) {
				i_cmp.setInputIcon(i_record.get("key"));
			}
		});

		i_cmp.callParent(arguments);

		i_cmp.on({
			afterrender: {
				fn: i_cmp.onAfterRender,
				single: true,
				scope: i_cmp
			}
		});

		return i_cmp;
	},

	initValue: function () {

		var i_cmp = this;

		i_cmp.mixins.field.initValue.call(i_cmp);
	},

	onAfterRender: function () {

		var i_cmp = this;
		var i_el = i_cmp.getEl();
		var i_input = i_cmp.inputEl;
		var s_icon = i_cmp.getValue();

		i_input.setStyle({
			"height": "45px",
			"padding-left": "45px",
			"background-repeat": "no-repeat"
		});

		if (s_icon) {
			i_cmp.setInputIcon(s_icon);
		}

		return i_cmp;
	},

	extendListener: function(xtype, name, newFn) {

		var listener;
		var oldFn;

		if (xtype.listeners && xtype.listeners[name]) {

			listener = xtype.listeners[name];

			// Listener is object made
			if (listener.fn && Ext.isFunction(listener.fn)) {

				oldFn = listener.fn;
			}

			// Listener is shorthand made
			else if (Ext.isFunction(listener)) {

				oldFn = listener;
			}

			if (oldFn) {
				delete xtype.listeners[name];
			}
		}

		if (!xtype.listeners) {
			xtype.listeners = {};
		}

		xtype.listeners[name] = {
			fn: function() {

				//var args = Array.prototype.slice.call(arguments);

				if (oldFn) {

					oldFn.apply(this, arguments);
				}

				if (newFn) {

					newFn.apply(this, arguments);
				}
			}
		};

		return xtype;
	},

	setIcon: function (icon) {

		var i_cmp = this;
		var s_path = i_cmp.path;
		var i_input = i_cmp.inputEl;

		if (Ext.isArray(icon)) {
			icon = icon[0];
		}

		if (Ext.isString(icon) && icon.length) {
			i_input.setStyle({
				"background-image": "url(" + s_path + "/" + icon + ".png)",
				"background-size": "35px",
				"background-position": "4px 4px"
			});
		}

		return i_cmp;
	},

	setInputIcon: function (m_icon) {

		var i_cmp = this;
		var i_input = i_cmp.inputEl;

		if (i_input && i_input.dom) {
			i_cmp.setIcon(m_icon);
		}
		else {

			i_cmp.on({
				afterrender: {
					fn: function() {
						i_cmp.setIcon(m_icon);
					},
					scope: i_cmp,
					single: true
				}
			});
		}

		return i_cmp;
	},

	setValue: function (value) {

		var i_cmp = this;

		i_cmp.callParent(arguments);

		// Set the icon value
		i_cmp.setInputIcon(value);

		return i_cmp;
	}
});
