<form name="{$form.name}"
	id="{$form.id}"
	class="form AJAX"
	enctype="{$form.encType}"
	onSubmit="$(this).fire('form:submit'); return false;"
	method="AJAX"
	action="{$form.action}"
	>

	{if $form.methods->getMessages()}
		<div class='messageDivContainer'>
			{$form.methods->getMessages()->Draw()}
		</div>
	{/if}

	{foreach from=$form.childs item=container}
		{$container->render(null, $form.element)}
	{/foreach}

	{foreach from=$form.childs item=element}
		{if !$element->isContainer() && $element->getInvisible()}
			{$element->render()}
		{/if}
	{/foreach}

	{if $form.methods->hasButtons()}
		<div class="center">
			{$form.methods->renderButtons()}
		</div>
	{/if}

	{if $form.settings['focus']}
		<script type="text/javascript">
			if(MVC){
				MVC.scheduleOnLoad(function(){
					FormField.setFocus("{$form.id}");
				});
			}else if($){
				document.observe("dom:loaded", function() {
					FormField.setFocus("{$form.id}");
				});
			}
		</script>
	{/if}

	<script type="text/javascript">
		$('{$form.id}').observe('form:submit', function(evt){
			var parameters = {$form.jsParams|json_encode};
			if(Object.isArray(parameters)){
				parameters = { };
			}

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

			// display the loadingMask
			var loadingMask = new DCsLoadingMask({
				className: 'AJAX-loading-background',
				boxClassName: 'AJAX-loading-message',
				opacity: 0.50
			});
			loadingMask.show($('{$form.id}'), { boxDelay:500, 'zIndex': 11000 });

			$('{$form.id}').addClassName('loading');

			// perform the ajax request
			new Ajax.Request('{$form.action}', {
				method: '{$form.method}',
				evalScripts: true,
				parameters : parameters,
				onSuccess: function(response) {
					try{
						if(response && response.headerJSON && response.headerJSON.status=='OK'){
							// request succeeded
							{$form.jsCallback}('ok', $('{$form.id}').up(), response.headerJSON, response, parameters);
						}else{
							// request did not return expected data for some reason...
							{$form.jsCallback}('failed', $('{$form.id}').up(), { }, response, parameters);
						}
					}catch(ex){
						alert(ex);
					}

					loadingMask.destroy();
					$('{$form.id}').removeClassName('loading');
				},
				onFailure: function(response) {
					try{
						// request failed, usually 404 or internal server errors
						{$form.jsCallback}('failed', $('{$form.id}').up(), { }, response, parameters);
					}catch(ex){
						alert(ex);
					}

					loadingMask.destroy();
					$('{$form.id}').removeClassName('loading');
				}
			});
		});
	</script>

</form>
