<inp2:adm_SetPopupSize width="750" height="620"/>
<inp2:m_include t="incs/header"/>

<inp2:m_Get name="section" result_to_var="section"/>
<inp2:m_RenderElement name="combined_header" prefix="cf" section="$section" perm_event="cf:OnLoad" title_preset="custom_fields_edit"/>

<!-- ToolBar -->
<table class="toolbar" height="30" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
	<tr>
  	<td>
  		<script type="text/javascript">
				a_toolbar = new ToolBar();
				a_toolbar.AddButton( new ToolBarButton('select', '<inp2:m_phrase label="la_ToolTip_Save" escape="1"/>', function() {
							submit_event('cf','<inp2:cf_SaveEvent/>');
						}
					) );
				a_toolbar.AddButton( new ToolBarButton('cancel', '<inp2:m_phrase label="la_ToolTip_Cancel" escape="1"/>', function() {
							submit_event('cf','OnCancelEdit');
						}
				 ) );

				a_toolbar.AddButton( new ToolBarSeparator('sep1') );

				a_toolbar.AddButton( new ToolBarButton('prev', '<inp2:m_phrase label="la_ToolTip_Prev" escape="1"/>', function() {
							go_to_id('cf', '<inp2:cf_PrevId/>');
						}
				 ) );
				a_toolbar.AddButton( new ToolBarButton('next', '<inp2:m_phrase label="la_ToolTip_Next" escape="1"/>', function() {
							go_to_id('cf', '<inp2:cf_NextId/>');
						}
				 ) );


				a_toolbar.Render();

				<inp2:m_if check="cf_IsSingle" >
					a_toolbar.HideButton('prev');
					a_toolbar.HideButton('next');
					a_toolbar.HideButton('sep1');
				<inp2:m_else/>
					<inp2:m_if check="cf_IsLast" >
						a_toolbar.DisableButton('next');
					</inp2:m_if>
					<inp2:m_if check="cf_IsFirst" >
						a_toolbar.DisableButton('prev');
					</inp2:m_if>
				</inp2:m_if>
			</script>
		</td>
	</tr>
</tbody>
</table>

<inp2:m_RenderElement name="inp_edit_hidden" prefix="cf" field="Type" db="db"/>

<inp2:cf_SaveWarning name="grid_save_warning"/>
<inp2:cf_ErrorWarning name="form_error_warning"/>

<div id="scroll_container">
	<table class="edit-form">
		<inp2:m_RenderElement name="subsection" title="!la_section_General!"/>
			<inp2:m_RenderElement name="inp_id_label" prefix="cf" field="CustomFieldId" title="!la_prompt_FieldId!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="FieldName" title="!la_prompt_FieldName!" size="40"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="FieldLabel" title="!la_prompt_FieldLabel!" size="40"/>
			<inp2:m_RenderElement name="inp_edit_checkbox" prefix="cf" field="MultiLingual" title="!la_fld_MultiLingual!"/>

		<inp2:m_RenderElement name="subsection" title="!la_tab_AdminUI!"/>
			<inp2:m_RenderElement name="inp_edit_checkbox" prefix="cf" field="OnGeneralTab" title="!la_prompt_showgeneraltab!"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="Heading" title="!la_prompt_heading!" size="40"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="Prompt" title="!la_prompt_FieldPrompt!" size="40"/>
			<inp2:m_RenderElement name="inp_edit_options" prefix="cf" field="ElementType" title="!la_prompt_InputType!" size="20" has_empty="1" onchange="update_layout();"/>

			<inp2:m_if check="cf_Field" name="ElementType" equals_to="select|multiselect|radio" db="db" inverse="inverse">
				<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="ValueList" title="!la_prompt_valuelist!" size="40"/>
			</inp2:m_if>

			<inp2:m_RenderElement name="inp_edit_checkbox" prefix="cf" field="IsRequired" title="la_fld_IsRequired"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="DefaultValue" title="la_prompt_Default"/>
			<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="DisplayOrder" title="!la_field_displayorder!" size="10"/>

			<inp2:m_if check="m_IsDebugMode">
				<inp2:m_RenderElement name="inp_edit_checkbox" prefix="cf" field="IsSystem" title="!la_fld_IsSystem!"/>
			</inp2:m_if>

		<inp2:m_if check="cf_Field" name="ElementType" equals_to="select|multiselect|radio" db="db">
			<inp2:m_RenderElement name="subsection" title="la_section_Values"/>
				<inp2:m_RenderElement name="inp_edit_checkbox" prefix="cf" field="SortValues" title="la_fld_SortValues"/>

				<inp2:m_RenderElement name="inp_edit_hidden" prefix="cf" field="OptionKey"/>
				<inp2:m_RenderElement name="inp_edit_box" prefix="cf" field="OptionTitle" title="la_fld_OptionTitle" size="60"/>
				<inp2:m_RenderElement name="inp_edit_minput" prefix="cf" field="Options" title="la_fld_Options" format="#OptionTitle# (#OptionKey#)" style="width: 400px; height: 200px;"/>
		</inp2:m_if>

		<inp2:m_RenderElement name="inp_edit_filler"/>
	</table>
</div>

<inp2:m_if check="cf_Field" name="ElementType" equals_to="select|multiselect|radio" db="db">
	<script type="text/javascript">
		Options.registerControl('OptionKey', 'text', false);
		Options.registerControl('OptionTitle', 'text', true);
		Options.LoadValues();

		Options.getControlValue = function ($field) {
			var $value = this.getControl($field).value;

			if ($field == 'OptionKey' && !$value) {
				$options = this.getControl(this.FieldName, 'minput').options;

				if ($options.length) {
					var $i = 0;
					var $max_option_key = 0;
					while ($i < $options.length) {
						if (parseInt(this.Records[ $options[$i].value ]['OptionKey']) > $max_option_key) {
							$max_option_key = parseInt(this.Records[ $options[$i].value ]['OptionKey']);
						}

						$i++;
					}

					return $max_option_key + 1;
				}

				// when no this will be 1st record in list use 1
				return 1;
			}


			return $value;
		}

		Options.compareRecords = function($record_a, $record_b) {
			// compare by option title only, it's id doesn't matter
			return $record_a['OptionTitle'].toLowerCase() == $record_b['OptionTitle'].toLowerCase();
		}
	</script>
</inp2:m_if>

<script type="text/javascript">
	function update_layout() {
		var $last_element_type = '<inp2:cf_Field name="ElementType" db="db" js_escape="1"/>';
		var $element_type = document.getElementById('<inp2:cf_InputName name="ElementType" js_escape="1"/>').value;

		// value is changed from ml supported to normal or otherwise
		if (canHaveMultipleValues($last_element_type) != canHaveMultipleValues($element_type)) {
			submit_event('cf', 'OnPreSave');
		}
	}

	function canHaveMultipleValues($element_type) {
		var $element_types = ['select', 'multiselect', 'radio'];

		return $element_types.indexOf($element_type) != -1;
	}
</script>

<inp2:m_include t="incs/footer"/>
