(function($) {
	$(document).ready(function() {
		$('a.btn-dialog-react').click(function() {
			$.get($(this).attr('href'), function(data) {
				var jDialog = $('div#article-react', data);
				
				jDialog.dialog({
					modal: true,
					overlay: {
						backgroundColor: 'black',
						opacity: 0.6
					},
					title: 'Reageren',
					height: 'auto',
					width: '420px'
				})
				
				bindSubmit(jDialog.find('form#form-react'));
				
				if (!$.browser.msie) {
					$('.ui-dialog').css({
						overflow: 'visible',
						minHeight: '200px'
					});
					
					$('.dialogs').css({
						height: 'auto',
						width: 'auto'
					});
				}
			});
			
			return false;
		});
		
		var bindSubmit = function (jForm) {
			jForm.submit(function() {
				var self = this;
				$(this).find(':submit, :image').attr('disabled', true);
				
				$.post($(self).attr('action'), $(self).serialize(), function(data) {
					var form = $('form#form-react', data);
					if (form.length > 0) {
						// replace this form with the newly loaded form.
						$(self).replaceWith(form);
						bindSubmit(form);
					}
					else {
						$('div#article-react').dialog('close');
						var html = $('<div>');
						html[0].innerHTML = data;
						$('div#article-reactions').html(html);
						
						window.location.href += '#article-reactions';
					}
					
					$(self).find(':submit, :image').attr('disabled', false);
				});
				
				return false;
			});
		}
	});
})(jQuery);