/*-------------------------------------------------------------------- 
 * jQuery plugin: customInput()
 * by Maggie Wachs and Scott Jehl, http://www.filamentgroup.com
 * Copyright (c) 2009 Filament Group
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 * Article: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/  
 * Usage example below (see comment "Run the script...").
--------------------------------------------------------------------*/


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 ('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'); });
	});
};