;/**
 * LifterLMS Settings Pages UI / UX
 *
 * @since    3.7.3
 * @version  3.18.0
 */( function( $, undefined ) {

	window.llms                = window.llms || {};
	window.llms.admin_settings = function() {

		this.file_frame = null;

		/**
		 * Initialize
		 *
		 * @return   void
		 * @since    3.7.3
		 * @version  3.18.0
		 */
		this.init = function() {
			this.bind();
			this.bind_conditionals();
		};

		/**
		 * Bind DOM events
		 *
		 * @return   void
		 * @since    3.7.3
		 * @version  3.17.5
		 */
		this.bind = function() {

			var self = this;

			if ( $( '.llms-image-field-upload' ).length ) {
				$( '.llms-image-field-upload' ).on( 'click', function( e ) {
					e.preventDefault();
					self.image_upload_click( $( this ), e );
				} );

				$( '.llms-image-field-remove' ).on( 'click', function( e ) {
					e.preventDefault();
					self.update_image( $( this ), '', '' );
				} );
			}

			if ( $( '.llms-gateway-table' ).length ) {
				$( '.llms-gateway-table tbody' ).sortable( {
					axis: 'y',
					cursor: 'move',
					items: 'tr',
					// containment: 'parent',
					handle: 'td.sort',
					helper: function( event, ui ) {
						ui.children().each( function() {
							$( this ).width( $( this ).width() );
						} );
						// ui.css( 'left', '0' );
						return ui;
					},
					update: function( event, ui ) {
						$( this ).find( 'td.sort input' ).each( function( i ) {
							$( this ).val( i );
						} );
					}
				} );
			}

		};

		/**
		 * Allow checkboxes to conditionally display other settings
		 *
		 * @return   void
		 * @since    3.18.0
		 * @version  3.18.0
		 */
		this.bind_conditionals = function() {

			$( '.llms-conditional-controller' ).each( function() {

				$( this ).on( 'change', function() {


					if ( 'checkbox' === $( this ).attr( 'type' ) ) {
						var $controls = $( $( this ).attr( 'data-controls' ) ).closest( 'tr' );

						if ( $( this ).is( ':checked' ) ) {
							$controls.show();
						} else {
							$controls.hide();
						}

						return;
					}
					if ( 'select' !== $( this ).prop( 'tagName' ).toLowerCase() ) {
						return;
					}
					$( this ).find( 'option' ).each( function() {
						var val = $( this ).val();
						if ( ! val ) {
							return true;
						}

						var $controls_for_option = $( $( this ).parent().attr( 'data-controls-' + $.escapeSelector( val ) ) ).closest( 'tr' );

						if ( $( this ).is( ':selected' ) ) {
							$controls_for_option.show();
						} else {
							$controls_for_option.hide();
						}
					} );


				} ).trigger( 'change' );

			} );

		};

		/**
		 * Click event for image upload fields
		 *
		 * @param    obj   $btn  jQuery object for clicked button
		 * @param    obj   e     JS event object
		 * @return   void
		 * @since    3.7.3
		 * @version  3.7.3
		 */
		this.image_upload_click = function( $btn, e ) {

			var self  = this,
				frame = null;

			if ( ! frame ) {
				var title       = $btn.attr( 'data-frame-title' ) || LLMS.l10n.translate( 'Select an Image' ),
					button_text = $btn.attr( 'data-frame-button' ) || LLMS.l10n.translate( 'Select Image' );
				frame           = wp.media.frames.file_frame = wp.media({
					title: title,
					button: {
						text: button_text,
					},
					multiple: false	// Set to true to allow multiple files to be selected
				});
			}

			frame.on( 'select', function() {

				// We set multiple to false so only get one image from the uploader
				var attachment = frame.state().get( 'selection' ).first().toJSON();

				self.update_image( $btn, attachment.id, attachment.url );

			});

			frame.open();

		};

		/**
		 * Update the DOM with a selected image
		 *
		 * @param    obj      $btn  jQuery object of the clicked button
		 * @param    int      id    WP Attachment ID of the image
		 * @param    string   src   <img> src of the selected image
		 * @return   void
		 * @since    3.7.3
		 * @version  3.7.3
		 */
		this.update_image = function( $btn, id, src ) {

			var $input   = $( '#' + $btn.attr( 'data-id' ) ),
				$preview = $btn.prevAll( 'img.llms-image-field-preview' )
				$remove  = $btn.hasClass( 'llms-image-field-remove' ) ? $btn : $btn.next( 'input.llms-image-field-remove' );

			$input.val( id );
			$preview.attr( 'src', src );

			if ( '' !== id ) {
				$remove.removeClass( 'hidden' );
			} else {
				$remove.addClass( 'hidden' );
			}

		}

		// go
		this.init();

	};

	var a = new window.llms.admin_settings();

} )( jQuery );