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