{function name=formField_container_formFilters_renderInputLabel element=null}
	{if $element->getTooltip()}
		<var class="icon-info" tooltip="{$element->getTooltip()}"></var>
	{/if}

	{$element->getLabel()}
{/function}
{function name=formField_container_formFilters_renderInputElement element=null}
	{$element->render(null, $form.element)}
{/function}

{function name=drawTbodyContents trElements=[]}
	{foreach $trElements as $childs}
		<tr>
			{foreach $childs as $element}
				{if $element}
					<td
						{if $form['style']['labelWidth']}
							style="width:{$form['style']['labelWidth']}%;"
						{/if}
						>
						<div class='label'>
							{formField_container_formFilters_renderInputLabel element=$element}
						</div>

						<div class='inputElement'>
							{formField_container_formFilters_renderInputElement element=$element}
						</div>
					</td>
				{else}
					<td>&nbsp;</td>
				{/if}
			{/foreach}
		</tr>
	{/foreach}
{/function}

<div class="formFilters-container" style="{if $form.methods->getCollapsed()}display: none; {/if}">
	<form name="{$form['name']}"
		id="{$form['id']}"
		class="{$form['class']} {if $form['style']['showReset']}has-resetButton{/if}"
		enctype="multipart/form-data"
		method="{$form['method']}"
		action="{$form['action']}"
		{if $form['style']['showReset']}
			onReset='$(this).fire("form:doReset", { source: "form:onReset", form: this }); return false;'
		{/if}
		onSubmit='$(this).fire("form:doSubmit", { source: "form:onSubmit", form: this }); return false;'
		>
		{if !$form.jsCallback && $form.jsParams}
			{foreach $form.jsParams as $key=>$value}
				<input type='hidden' name="{$key}" value="{$value}" />
			{/foreach}
		{/if}
		
		{*** draw all containers first ***}
		<table class="filters columns-{$form['settings']['columns']}">
			{if $form['nonDefaultGroups']}
				<tbody class="title">
					<tr>
						<td colspan="{$form['settings']['columns']}">
							<div class="title">{$_LANG['filters']}</div>
							<div class="border-bottom"></div>
						</td>
					</tr>
				</tbody>
			{/if}

			<tbody class="default content group-default">
				{drawTbodyContents trElements=$form['groupedChilds']['default']}
			</tbody>
			
			
			{** draw advanced filter groups **}
			{foreach $form['nonDefaultGroups'] as $ndg} 
				<tbody class="title advanced group-{$ndg}">
					<tr>
						<td colspan="{$form['settings']['columns']}">
							<div class="title"
								onClick='$(this).up("form").fire("form:toggleAdvancedFilters", { source: "button", button: this, groupId:"{$ndg}" });'
							>
								<input type="hidden"
									name="_formField[container][{$form.id}][{$ndg}]"
									id="_formField_container__{$form.id}__{$ndg}_"
									value="{$form['expandFilters'][$ndg]}" />

								<button type="button" class="advancedFilters"
									tooltip="{$_LANG["filter_groups_{$ndg}"]}"
								></button>
								{$_LANG["filter_groups_{$ndg}"]}
							</div>
							<div class="border-bottom"></div>
						</td>
					</tr>
				</tbody>

				<tbody class="advanced content group-{$ndg}">
					<tr class="border-top">
						<td colspan="{$form['settings']['columns']}">
							<div class="border-top"></div>
						</td>
					</tr>

					{drawTbodyContents trElements=$form['groupedChilds'][$ndg]}
				</tbody>
			{/foreach}

			<tbody class="buttons">
				<tr>
					<td colspan="{$form['settings']['columns']}" align="right" class="buttons">
						{foreach $form.hiddenChilds as $element}
							{$element->render(null, $form.element)}
						{/foreach}
						
						{if $form['style']['showReset']}
							<button class="button-reset" type="reset" onClick="$(this).up('form').reset(); return false;" class="submit">{$_LANG['reset']}</button>
						{/if}
						<button type="submit" class="submit">
							<var class="icon-search" ></var>
							{$_LANG['search']}
						</button>
					</td>
				</tr>
			</tbody>
		</table>

		<script type="text/javascript">
		MVC.scheduleOnLoad(function() {
			$('{$form.id}').observe("form:doSubmit", function(event) {
				var form = $('{$form.id}');

				{** this is used to force FF to lose and reset focus on form submit **}
				FormField.reFocus();

				{** this is a workaround for IE, because on submit it will move the focus on the submit button, but it will do this after the submit event has finished.. **}
				setTimeout(function(event) {
					var parameters = {$form.jsParams|json_encode};
					if (Object.isArray(parameters)) {
						parameters = { };
					}
					
					if (event.memo.parameters) {
						for(var i in event.memo.parameters){
							if(!Object.isFunction(i)){
								parameters[i] = event.memo.parameters[i];
							}
						}
					}

					$(form).fire("form:submit", parameters);

					{if $form.jsCallback}
						{** add the serialized data to the parameters list **}
						var serializedForm = $(form).serialize(true);
						for(var i in serializedForm){
							if(!Object.isFunction(i)){
								parameters[i] = serializedForm[i];
							}
						}

						{$form.jsCallback}(parameters, form);
					{/if}
				}.bind(null, event), 1);
			});

			$('{$form.id}').observe("form:doReset", function(event) {
				var form = $('{$form.id}');

				var parameters = {$form.jsParams|json_encode};
				if(Object.isArray(parameters)){
					parameters = { };
				}
				$(this).fire("form:reset", parameters);
				{if $form.jsCallbackOnReset}
					{** add the serialized data to the parameters list **}
					var serializedForm = $(this).serialize(true);
					for(var i in serializedForm){
						if(!Object.isFunction(i)){
							parameters[i] = serializedForm[i];
						}
					}

					{$form.jsCallbackOnReset}(parameters, this);
				{else}
					window.location = MVC.appUrl(MVC.CURRENT_MODULE, MVC.CURRENT_ACTION, { "listing[reset]":1 });
				{/if}
			});

			{*** focus the first element in the form if requested ***}
			{if $form['settings']['focus'] || $form['nonDefaultGroups']}
				setTimeout(function(){
					{if $form['settings']['focus']}
						var fld = null;
						if ($('{$form['id']}')){
							{if !$form.methods->getCollapsed()}
								if(MVC){
									MVC.scheduleOnLoad(function(){
										FormField.setFocus("{$form.id}");
									});
								}else if($){
									document.observe("dom:loaded", function() {
										FormField.setFocus("{$form.id}");
									});
								}
							{/if}
						}
					{/if}

					{*** show/hide the advanced filters ***}
					{if $form['nonDefaultGroups']}
						var listing = MVC.listing.getListing({ 'filters.form': $('{$form['id']}') });
						
						{foreach $form['nonDefaultGroups'] as $ndg}
							{if $form['expandFilters'][{$ndg}]}
								listing.filters.showFiltersGroup('{$ndg}');
							{else}
								listing.filters.hideFiltersGroup('{$ndg}');
							{/if}
						{/foreach}
					{/if}
				}, 50);
			{/if}
		});

		</script>
		
		{foreach $form.childs as $element}
			{$class=$element|get_class|replace:'\\':'/'}
			{if $class=='Engine/Form/Input/Checkboxes'}
				<script type="text/javascript">
					MVC.scheduleOnLoad(function() {	
						$('{$element->getID()}').up('.inputElement').on('change', function(event, element) {
							var form = element.up('form.formFilters');
							var invalidCheckboxesGroups = (form.readAttribute('data-invalid-checkboxes')?form.readAttribute('data-invalid-checkboxes'):0);
							
							// get submit buttom
							var submitBtn = form.down('[type="submit"]');
							var container = this;
							
							if (container.select('input[type="checkbox"]:checked').length!=0 && container.down('label.input-invalid')) {
								container.select('label').each(function(element) {
									element.removeClassName('input-invalid');
								});
								invalidCheckboxesGroups--;
							}
							else if (container.select('input[type="checkbox"]:checked').length==0 && !container.down('label.input-invalid')) {
								container.select('label').each(function(element) {
									element.addClassName('input-invalid');
								});
								invalidCheckboxesGroups++;
							}
							
							if (invalidCheckboxesGroups == 0) {
								submitBtn.enable();
							}
							else {
								submitBtn.disable();
							}
							
							form.writeAttribute('data-invalid-checkboxes', invalidCheckboxesGroups);
						});
					});	
				</script>
			{/if}
		{/foreach}
					
		{if $form.methods->hasButtons()}
			<div class="center">
				{$form.methods->renderButtons()}
			</div>
		{/if}
	</form>
</div>
