$(document).ready(function()
{
	$('form.interactive').each(function()
	{
		var $form = $(this);
		var $interactiveInfo = $('<div class="interactive_info"><div class="header">Virhe</div><div class="info"></div></div>');
		var addColspan = 1;
		$form.find('tr:not(.ignore)').each(function()
		{
			$(this).find('td').each(function() { $(this).css('width', $(this).width()+'px') })
			var $notices = $(this).find('td:has(input), td:has(textarea), td:has(select)');
			$notices.after('<td class="notice"><div class="container"></div></td>');
			addColspan = $notices.size();
		});
		$form.find('tr.ignore').each(function()
		{
			var $td = $(this).find('> td:last');
			var colspan = parseInt($td.attr('colSpan'));
			if (!colspan) colspan = 1;
			colspan += addColspan;
			$td.attr('colSpan', colspan);
		});

		$form.find('tr:has(.notice) input, tr:has(.notice) textarea, tr:has(.notice) select').blur(function()
		{
			var $elem = $(this);
			var $notice = $elem.parent().next().find('.container');
			var name = $elem.attr('name');
			var value = $elem.val();
			if (value != '')
			{
				var req = {};
				req[name] = value;
				if (name == 'password2')
					req['password'] = $('form.interactive input[@name="password"]').val();
				$.post($form.attr('action')+'/check', req, function(data)
				{
					if (data.valid || data.errors[name] == undefined)
					{
						$notice.html('<img src="/images/accept.png" />');
					}
					else
					{
						var errors = '<ul>';
						for (var error in data.errors[name])
						{
							errors += '<li>'+data.errors[name][error]+'</li>';
						}
						errors += '</ul>';
						$notice[0].errors = errors;
						var $img = $('<img class="error" src="/images/exclamation.png" />').hover(function()
						{
							$interactiveInfo.appendTo($(this).parent()).find('.info').html($(this).parent()[0].errors).end().show();
						}, function()
						{
							$interactiveInfo.hide();
						});
						$notice.html($img);
						$interactiveInfo.appendTo($notice).find('.info').html(errors).end().show();
					}
				}, 'json');
			}
			else
				$notice.html('');
		});
	
		$form.submit(function()
		{
			var req = {};
			for (var i = 0; i < this.elements.length; i++)
			{
				var $elem = $(this.elements[i]);
				var name = $elem.attr('name');
				if (name)
				{
					var type = $elem.attr('type');
					var value = $elem.val();
					if ((type != 'checkbox' && type != 'radio') || $elem.attr('checked'))
						req[name] = value;
				}
			}
			$.post($form.attr('action')+'/check/submit', req, function(data)
			{
				if (data.valid)
				{
					$form.unbind('submit');
					$form.submit();
				}
				else
				{
					var first = true;
					$('.notice .container').html('<img src="/images/accept.png" />');
					for (var field in data.errors)
					{
						var $notice = $form.find('[@name="'+field+'"]').parent().next().find('.container');
						var errors = '<ul>';
						for (i = 0; i < data.errors[field].length; i++)
						{
							errors += '<li>'+data.errors[field][i]+'</li>';
						}
						errors += '</ul>';
						$notice[0].errors = errors;
						var $img = $('<img class="error" src="/images/exclamation.png" />').hover(function()
						{
							$interactiveInfo.appendTo($(this).parent()).find('.info').html($(this).parent()[0].errors).end().show();
						}, function()
						{
							$interactiveInfo.hide();
						});
						$notice.html($img);
						if (first)
						{
							$interactiveInfo.appendTo($notice).find('.info').html(errors).end().show();
							first = false;
						}
					}
				}
			}, 'json');
			return false;
		});
		
		$form.find('input[@type="reset"]').click(function()
		{
			$interactiveInfo.hide();
			$form.find('.notice .container').html('');
			return true;
		});
	});
})