( function( $, api ) {

	/* === Checkbox Multiple Control === */

	api.controlConstructor['checkbox-multiple'] = api.Control.extend( {
		ready: function() {
			var control = this;

			$( 'input:checkbox', control.container ).change(
				function() {

					// Get all of the checkbox values.
					var checkbox_values = $( 'input[type="checkbox"]:checked', control.container ).map(
						function() {
							return this.value;
						}
					).get();

					// Set the value.
					if ( null === checkbox_values ) {
						control.setting.set( '' );
					} else {
						control.setting.set( checkbox_values );
					}
				}
			);
		}
	} );

	/* === Palette Control === */

	api.controlConstructor['palette'] = api.Control.extend( {
		ready: function() {
			var control = this;

			// Adds a `.selected` class to the label of checked inputs.
			$( 'input:radio:checked', control.container ).parent( 'label' ).addClass( 'selected' );

			$( 'input:radio', control.container ).change(
				function() {

					// Removes the `.selected` class from other labels and adds it to the new one.
					$( 'label.selected', control.container ).removeClass( 'selected' );
					$( this ).parent( 'label' ).addClass( 'selected' );

					control.setting.set( $( this ).val() );
				}
			);
		}
	} );

	/* === Radio Image Control === */

	api.controlConstructor['radio-image'] = api.Control.extend( {
		ready: function() {
			var control = this;

			$( 'input:radio', control.container ).change(
				function() {
					control.setting.set( $( this ).val() );
				}
			);
		}
	} );

	/* === Select Group Control === */

	api.controlConstructor['select-group'] = api.Control.extend( {
		ready: function() {
			var control = this;

			$( 'select', control.container ).change(
				function() {
					control.setting.set( $( this ).val() );
				}
			);
		}
	} );

	/* === Select Multiple Control === */

	api.controlConstructor['select-multiple'] = api.Control.extend( {
		ready: function() {
			var control = this;

			$( 'select', control.container ).change(
				function() {
					var value = $( this ).val();

					if ( null === value ) {
						control.setting.set( '' );
					} else {
						control.setting.set( value );
					}
				}
			);
		}
	} );

} )( jQuery, wp.customize );