Ext.define("Ext.ux.form.field.Search", {
	extend: "Ext.form.field.Text",
	alias: "widget.searchfield",

	triggers: {
		clear: {
			weight: 0,
			cls: Ext.baseCSSPrefix + "form-clear-trigger",
			hidden: true,
			handler: "onClearClick",
			scope: "this"
		},
		search: {
			weight: 1,
			cls: Ext.baseCSSPrefix + "form-search-trigger",
			handler: "onSearchClick",
			scope: "this"
		}
	},

	config: {
		allowSort: true,
		store: null,
		grid: null,
		paramName: "search",
		hasSearch: false
	},

	listeners: {
		afterrender: {
			fn: function(i_field) {

				var value = i_field.getValue();
				i_field.fireEvent("change", i_field, value);
			}
		},
		specialkey: {
			fn: function(i_field, i_event) {

				var i_self = this;

				if (i_event.getKey() == i_event.ENTER) {
					i_self.onSearchClick();
				}
			}
		},
		change: {
			fn: function(i_field, value) {

				var i_self = this;

				if (value) {
					i_self.getTrigger("clear").show();
				}
				else {
					i_self.getTrigger("clear").hide();
				}
			}
		}
	},

	initComponent: function() {

		var i_self = this;

		i_self.emptyText = ip2.i18n({
			da: "Søg",
			en: "Search"
		});

		var i_store = i_self.getStore();

		i_self.callParent(arguments);

		// We"re going to use filtering
		i_store.setRemoteFilter(true);
	},

	onClearClick: function() {

		var i_self = this;
		var i_grid = i_self.getGrid() || i_self.up("gridpanel");
		var i_store = i_self.getStore();

		if (i_grid) {

			var i_gridStore = i_grid.getStore();

			if (i_gridStore.getId() != i_store.getId()) {

				i_store = i_grid.getStore();
				i_self.setStore(i_store);
			}
		}

		var i_proxy = i_store.getProxy();
		var o_extraParams = i_proxy.getExtraParams();
		var o_sorters = i_store.getSorters();

		i_self.setValue("");
		i_self.getTrigger("clear").hide();

		delete o_extraParams[i_self.getParamName()];

		if (i_store.isTreeStore) {
			var i_tree = i_store.ownerTree;

			var i_view = i_tree.getView();

			if (i_view.body.dom) {
				i_view.body.translate(0, 0, 0);
			}

			if (i_view.bufferedRenderer) {
				i_view.bufferedRenderer.onStoreClear();
			}


		}
		if (i_store.clearAndLoad) {
			i_store.clearAndLoad({
				callback: function() {
					if (i_self.getAllowSort()) {
						i_store.fireEvent("sort", i_store, o_sorters.getRange());
					}
				}
			});
		}
		else {
			i_store.load({
				callback: function() {
					if (i_self.getAllowSort()) {
						i_store.fireEvent("sort", i_store, o_sorters.getRange());
					}
				}
			});
		}

		i_self.fireEvent("clear", i_self);
	},

	onSearchClick: function() {

		var i_self = this;
		var i_grid = i_self.getGrid() || i_self.up("gridpanel");
		var i_store = i_self.getStore();

		if (i_grid) {

			var i_gridStore = i_grid.getStore();

			if (i_gridStore.getId() != i_store.getId()) {

				i_store = i_grid.getStore();
				i_self.setStore(i_store);
			}
		}

		var i_proxy = i_store.getProxy();
		var o_extraParams = i_proxy.getExtraParams();
		var o_sorters = i_store.getSorters();
		var value = i_self.getValue();

		var s_param = i_self.getParamName();

		if (value.length > 0) {
			o_extraParams[s_param] = value;
			i_self.getTrigger("clear").show();
		}
		else {
			delete o_extraParams[s_param];
			i_self.getTrigger("clear").hide();
		}

		if (i_store.isTreeStore) {
			var i_tree = i_store.ownerTree;

			var i_view = i_tree.getView();

			if (i_view.body.dom) {
				i_view.body.translate(0, 0, 0);
			}

			if (i_view.bufferedRenderer) {
				i_view.bufferedRenderer.onStoreClear();
			}
		}

		if (i_store.clearAndLoad) {
			i_store.clearAndLoad({
				callback: function() {
					if (i_self.getAllowSort()) {
						i_store.fireEvent("sort", i_store, o_sorters.getRange());
					}
				}
			});
		}
		else {
			i_store.load({
				callback: function() {
					if (i_self.getAllowSort()) {
						i_store.fireEvent("sort", i_store, o_sorters.getRange());
					}
				}
			});
		}

		i_self.fireEvent("search", i_self);
	},

	getWhere: function() {
		return "";
	}
});
