jQuery.fn.customInput = function(){
	_$(this).each(function(i){	
	
		var input = _$(this);
		
		// get the associated label using the input's id
		var label = _$('label[for='+input.attr('id')+']');
		
		// find all inputs in this set using the shared name attribute
		var allInputs = _$('input[name='+input.attr('name')+']');
		
		// necessary for browsers that don't support the :hover pseudo class on labels
		label.hover(
			function(){ _$(this).addClass('hover'); },
			function(){ _$(this).removeClass('hover'); }
		);
		
		/* jQuery lets you create and bind any custom event (ours is called '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(){
						_$('label[for='+_$(this).attr('id')+']').removeClass('checked');
					});		
				};
				label.addClass('checked');
			}
			else { label.removeClass('checked'); }
									
		})
		.trigger('updateState')
		.click(function(){ 
			_$(this).trigger('updateState'); 
		})
		.bind('focus',function(){ label.addClass('focus'); })
		.bind('blur', function(){ label.removeClass('focus'); });
	});
};