/*-------------------------------------------------------------------- 
 * Article: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/  
--------------------------------------------------------------------*/


jQuery.fn.customInput = function(){
	$J(this).each(function(i){	
	    	    
		var input = $J(this);
		
		// get the associated label using the input's id
		var label = $J('label[for='+input.attr('id')+']');
		
		// find all inputs in this set using the shared name attribute
		var allInputs = $J('input[name='+input.attr('name')+']');
		
		// necessary for browsers that don't support the :hover pseudo class on labels
		label.hover(
			function(){ $J(this).addClass('hover'); },
			function(){ $J(this).removeClass('hover'); }
		);
		
		/* jQuery lets you create and bind any custom event ('updateState').
			We trigger this event twice:
				1. when the script is run on DOM ready so that it 
					picks up any inputs checked by default, and 
				2. when the input is clicked via its label */
						
		input.bind('updateState', function(){	
			if (input.is(':checked')) {
				if (input.is(':radio')) {				
					allInputs.each(function(){
						$J('label[for='+$J(this).attr('id')+']').removeClass('checked');
					});		
				};
				label.addClass('checked');
			}
			else { label.removeClass('checked'); }
			
			
			//ie8 fix for change event
    		$J(this).trigger('updateChange');
												
		})
		.trigger('updateState')
		.click(function(){ 
		    $J(this).blur();
			$J(this).trigger('updateState'); 
		})
		.bind('focus',function(){ label.addClass('focus'); })
		.bind('blur', function(){ label.removeClass('focus'); });
	});
};