requireJQuery(function()
{
	var classes =
	{
		'.radiobutton': '.radioelements',
		'.checkbox': '.checkboxelements'
	};
	
	$j(function()
	{
		$j.each(classes, function(parentSelector, childSelector)
		{
			if (parentSelector === '.radiobutton')
			{
				var inputs = [];
				
				$j(parentSelector).each(function()
				{
					inputs.push($j(this).find('input:first')[0]);
				});
				
				$j(inputs).click(function()
				{
					// Close all open sibling children.
					$j(this).closest(parentSelector).siblings(parentSelector).find(childSelector).slideUp('slow');
				});
				
				/*$j(parentSelector + ' :radio:first').click(function()
				{
					// Close all open sibling children.
					$j(this).closest(parentSelector).siblings(parentSelector).find(childSelector).slideUp('slow');
				});*/
			}
			
			var childs = $j(childSelector);
			
			var checkedChilds = $j(parentSelector + ' :input:checked').closest(parentSelector).find(childSelector);
			
			// Hide the contents at load. Except for the checked inputs.
			childs.not(checkedChilds).hide();
			
			// On click toggle elements beneath the checkbox/radiobutton.
			childs.each(function()
			{
				var child = $j(this);
				
				// Due a strange, for me unknown bug in IE, it ignores the label tag position
				// as it is inside the HTML document. It thinks there is no label there, only
				// the contents within the label, so we need to make an extra check for IE.
				var input = child.prev();
				
				// The only tag inside the contents is the input, so in IE we already have it,
				// but for good browsers we still need to fetch it from the label contents.
				//if (input.is('label'))
				//{
			//		input = input.find('input');
			//	}
				
				input.click(function()
				{
					if (parentSelector === '.checkbox')
					{
						child.slideToggle('slow');						
					}
					else if (parentSelector === '.radiobutton' && !child.is(':visible'))
					{
						// de rest van de radiobuttons slide up
						child.slideDown('slow');
					}
				});
			});
		});
	});
});