{extends file=$element.methods->getTemplatePath('general')}

{block name=input append}
	<input type="text"
		{if $element.style.CSSClass}
			class="inputElement {$element.style.CSSClass} {if $element.disabled}autocomplete{/if} {$element.style.extraCSSClass} removeIeClearButton"
		{/if}
		name="{$element.name}[title]"
		id="{$element.displayID}"
		value="{$element.displayValue}"

		{if $element.disabled}
			disabled="disabled"
		{/if}

		style="
			{if $element.style.height} height:{$element.style.height}px;{/if}
			{if $element.style.width} width:{$element.style.width}px;{/if}
		"

		{if $element.placeholder}
			placeholder="{$element.placeholder}"
		{/if}
	/>

	{if !$element.disabled && !$element.settings.codeInputId}
		<input type="hidden"
			name="{$element.name}[id]"
			id="{$element.id}"
			value="{$element.value}"
		/>
	{/if}
{/block}

<script type="text/javascript">
	{block name=script append}
		{if !$element.disabled}
			{if $element.hasValidator}
				_inputValidator.createOnLoad('{$element.displayID}', '{$element.validatorType}', {$element.validatorParams|@json_encode});
			{/if}

			window['smarty_workaround_for_formFieldAutocomplete_{$element.id}'] = function() {
				window['formFieldAutocomplete_{$element.id}'] = _inputAutocomplete.create(
					{ value:"{$element.displayID}", code:"{if $element.settings.codeInputId}{$element.settings.codeInputId}{else}{$element.id}{/if}" }, "{$element.url}", {
						cacheData:true, minWidth: 280
						{if $element.style.minimumTextLength}
							, requestTrigger: {
								minimumLength: {$element.style.minimumTextLength},
								delayOnAbort: 2,
								delayAfterKey: 4
							}
						{/if}
						{if $element.style.showAdvancedSearch}
							, buttons: [
								{
									'class': 'advancedSearch',
									click: function() {
										this.hide();
										var ifralert = new _alertIframe({ 'class': 'advancedSearch' });
										ifralert
											.render()
											.attach($$('body').first())
											.setOverlay(new _overlay({ animate: true, 'class': 'alertIframe' }))
											.setWidth(900)
											.setHeight(500)
											.setWidth('content')
											.setHeight('content')
											.setParams({
												filters:{ {block name=advancedSearchParams}{/block} }
											})
											.onLoad(function(ifralert, iframe, ifrdoc) {
												ifrdoc.observe('listing:select', function(evt) {
													this.close();
													ifralert.hide();

													this.handle_select({
														code: evt.memo.id,
														value: evt.memo.name
													}, null, 'listing:select');
												}.bind(this));
											}.bind(this))
											.setTitle('. . .')
											.loadUrl('{$element.advancedSearchUrl}')
											.show();
									}
								},
							]
						{/if}

						{if $element.finalExtraFilters}
							, extraData: {$element.finalExtraFilters}
						{/if}

						{if $element.onSelect || $element.onChange}
							, onSelect: function(eventName, selectedItem, event) {
								{if $element.onSelect}
									{$element.onSelect}
								{/if}
								{if $element.onChange}
									{$element.onChange}
								{/if}
							 }
						{/if}

						{if !$element.clearOnCancel || $element.onCancel || $element.onChange}
							, onClear : function(eventName, selectedItem, event) {
								{if $element.onCancel}
									{$element.onCancel}
								{/if}
								{if $element.onChange}
									{$element.onChange}
								{/if}
								{if !$element.clearOnCancel}
									if (eventName=='icon') {	{** ignore the custom handler when the event was triggered by the icon being clicked **}
										return false;
									}

									if (selectedItem===null) {	{** user has written something manually that isn't in the autocomlpete list, don't do the normal handling, but clear the 'code' field **}
										this.setValue({ value:this.getValue(), code:'' });
										return true;
									}
								{/if}
							}
						{/if}

						{if $element.onPostSelect || $element.clearOnSelect}
							, onPostSelect: function(eventName, selectedItem, event) {
								{$element.onPostSelect}
								{if $element.clearOnSelect}
									this.clearValue();
								{/if}
							}
						{/if}

						{if $element.onPostCancel}
							, onPostClear: function(eventName, selectedItem, event) {
								{$element.onPostCancel}
							}
						{/if}

						{if $element.maxHeight}
							, maxHeight : {$element.maxHeight}
						{/if}
					});
			};

			if (MVC) {
				MVC.scheduleOnLoad(function() {
					window['smarty_workaround_for_formFieldAutocomplete_{$element.id}']();
				});
			}
			else {
				window['smarty_workaround_for_formFieldAutocomplete_{$element.id}']();
			}

		{/if}
	{/block}
</script>
