<script type="text/javascript">

jQuery(function($) {
	
	// set the default form error handler
	$.fn.form.setErrorHandler('default', function(errors) {
		var form = $(this);
		
		// remove the error messages
		form.find('.Widget div.Error').remove();
		
		// foreach error, insert them
		$.each(errors, function(errorIndex, error) {
			// fields with the same name represent radio and checkboxes
			var fieldsWithSameName = form.find('[name="' + error.field.attr('name') + '"]');
			
			// put a error message after the widget title, but do it only once for each widget
			if (fieldsWithSameName.index(error.field) == fieldsWithSameName.length - 1) {
				error.field.closest('.Widget').find('label:first').after('<div class="Error">' + error.message + '</div>');
			}
		});
		
		// focus the first error field
		errors[0].field.focus();
		
		// and alert the first error message
		alert(errors[0].message);
	});
	
	// initialize the form validator
	$('#form-{$form.id}').form().init({
			errorClass : 'Required'
		});
	
	// language pack the error messages
	$('#form-{$form.id}').form().setErrorMessage('required', "{$langvars.errorRequired}");
	
	// "Other" fields must not be empty if their corresponding
	// radio button is checked
	$('#form-{$form.id} :input.Other').form().setDependency(function(field) {
		if ($(this).siblings(':radio:checked, :checkbox:checked').length && $.trim($(this).val()) == '') {
			return false;
		}
		
		return true;
	}, "{$langvars.errorRequiredOther}");
	
});

</script>

<div class="Module_Form">
	<form id="form-{$form.id}" action="{$action}" method="post" enctype="multipart/form-data">
		<div class="Name">{$form.name}</div>
			
		{if $form.description}
			<p class="Description">{$form.description}</p>
		{/if}
		
		<fieldset>
			{if $errorMessage}
				<p class="Message Error">{$errorMessage}</p>
			{/if}
			
			{if $successMessage}
				<p class="Message Success">{$successMessage}</p>
			{/if}
			
			{foreach from=$widgets item=widget}
				<div class="Widget {$widget.className}{if $widget.is_required} NotBlank{/if}">
					<label for="Widget_{$widget.id}">{$widget.name} {if $widget.is_required}<span class="Required">*</span>{/if}</label>
					
					{if $widget.errors}
						<ul class="Errors">
							{foreach from=$widget.errors item=error}
								<li>{$error}</li>
							{/foreach}
						</ul>
					{/if}
					
					{if $widget.description}
						<p class="Description">{$widget.description}</p>
					{/if}
					
					{$widget.template}
				</div>
			{/foreach}
			
			<div class="Buttons">
				<button type="submit">{$form.submit_button_text}</button>
			</div>
		</fieldset>
	</form>
</div>