/* global jQuery, wp, mairieAfficheInfoReglages */
( function ( $ ) {
	'use strict';

	$( function () {
		/**
		 * Branche un sélecteur d'image de la médiathèque.
		 *
		 * @param {string} bouton  Sélecteur du bouton d'ouverture.
		 * @param {string} defaut  Sélecteur du bouton « fond fourni ».
		 * @param {string} champ   Sélecteur du champ caché.
		 * @param {string} apercu  Sélecteur de l'aperçu.
		 * @param {string} urlBase URL du fond fourni.
		 */
		function selecteur( bouton, defaut, champ, apercu, urlBase ) {
			var cadre,
				$id     = $( champ ),
				$apercu = $( apercu );

			if ( ! $id.length ) {
				return;
			}

			$( bouton ).on( 'click', function ( e ) {
				e.preventDefault();

				if ( cadre ) {
					cadre.open();
					return;
				}

				cadre = wp.media( {
					title: mairieAfficheInfoReglages.titreMedia,
					button: { text: mairieAfficheInfoReglages.boutonMedia },
					library: { type: [ 'image/png', 'image/jpeg' ] },
					multiple: false
				} );

				cadre.on( 'select', function () {
					var piece = cadre.state().get( 'selection' ).first().toJSON(),
						url   = ( piece.sizes && piece.sizes.medium ) ? piece.sizes.medium.url : piece.url;

					$id.val( piece.id );
					$apercu.attr( 'src', url );
				} );

				cadre.open();
			} );

			$( defaut ).on( 'click', function ( e ) {
				e.preventDefault();
				$id.val( 0 );
				$apercu.attr( 'src', urlBase );
			} );
		}

		selecteur(
			'#mai-choisir-fond', '#mai-fond-defaut', '#mai-fond-id', '#mai-fond-apercu',
			mairieAfficheInfoReglages.fondDefaut
		);

		selecteur(
			'#mai-conseil-choisir-fond', '#mai-conseil-fond-defaut', '#mai-conseil-fond-id', '#mai-conseil-fond-apercu',
			mairieAfficheInfoReglages.fondConseilDefaut
		);
	} );
}( jQuery ) );
