/**
 * Dashicons Picker
 *
 * Based on: https://github.com/bradvin/dashicons-picker/
 */

 ( function ( $ ) {
	'use strict';
	/**
	 *
	 * @returns {void}
	 */
	$.fn.dashiconsPicker = function () {

		/**
		 * Dashicons, in CSS order
		 *
		 * @type Array
		 */
		var icons = [
			'menu',
			'admin-site',
			'dashboard',
			'admin-media',
			'admin-page',
			'admin-comments',
			'admin-appearance',
			'admin-plugins',
			'admin-users',
			'admin-tools',
			'admin-settings',
			'admin-network',
			'admin-generic',
			'admin-home',
			'admin-collapse',
			'filter',
			'admin-customizer',
			'admin-multisite',
			'admin-links',
			'format-links',
			'admin-post',
			'format-standard',
			'format-image',
			'format-gallery',
			'format-audio',
			'format-video',
			'format-chat',
			'format-status',
			'format-aside',
			'format-quote',
			'welcome-write-blog',
			'welcome-edit-page',
			'welcome-add-page',
			'welcome-view-site',
			'welcome-widgets-menus',
			'welcome-comments',
			'welcome-learn-more',
			'image-crop',
			'image-rotate',
			'image-rotate-left',
			'image-rotate-right',
			'image-flip-vertical',
			'image-flip-horizontal',
			'image-filter',
			'undo',
			'redo',
			'editor-bold',
			'editor-italic',
			'editor-ul',
			'editor-ol',
			'editor-quote',
			'editor-alignleft',
			'editor-aligncenter',
			'editor-alignright',
			'editor-insertmore',
			'editor-spellcheck',
			'editor-distractionfree',
			'editor-expand',
			'editor-contract',
			'editor-kitchensink',
			'editor-underline',
			'editor-justify',
			'editor-textcolor',
			'editor-paste-word',
			'editor-paste-text',
			'editor-removeformatting',
			'editor-video',
			'editor-customchar',
			'editor-outdent',
			'editor-indent',
			'editor-help',
			'editor-strikethrough',
			'editor-unlink',
			'editor-rtl',
			'editor-break',
			'editor-code',
			'editor-paragraph',
			'editor-table',
			'align-left',
			'align-right',
			'align-center',
			'align-none',
			'lock',
			'unlock',
			'calendar',
			'calendar-alt',
			'visibility',
			'hidden',
			'post-status',
			'edit',
			'post-trash',
			'trash',
			'sticky',
			'external',
			'arrow-up',
			'arrow-down',
			'arrow-left',
			'arrow-right',
			'arrow-up-alt',
			'arrow-down-alt',
			'arrow-left-alt',
			'arrow-right-alt',
			'arrow-up-alt2',
			'arrow-down-alt2',
			'arrow-left-alt2',
			'arrow-right-alt2',
			'leftright',
			'sort',
			'randomize',
			'list-view',
			'excerpt-view',
			'grid-view',
			'hammer',
			'art',
			'migrate',
			'performance',
			'universal-access',
			'universal-access-alt',
			'tickets',
			'nametag',
			'clipboard',
			'heart',
			'megaphone',
			'schedule',
			'wordpress',
			'wordpress-alt',
			'pressthis',
			'update',
			'screenoptions',
			'cart',
			'feedback',
			'cloud',
			'translation',
			'tag',
			'category',
			'archive',
			'tagcloud',
			'text',
			'media-archive',
			'media-audio',
			'media-code',
			'media-default',
			'media-document',
			'media-interactive',
			'media-spreadsheet',
			'media-text',
			'media-video',
			'playlist-audio',
			'playlist-video',
			'controls-play',
			'controls-pause',
			'controls-forward',
			'controls-skipforward',
			'controls-back',
			'controls-skipback',
			'controls-repeat',
			'controls-volumeon',
			'controls-volumeoff',
			'yes',
			'no',
			'no-alt',
			'plus',
			'plus-alt',
			'plus-alt2',
			'minus',
			'dismiss',
			'marker',
			'star-filled',
			'star-half',
			'star-empty',
			'flag',
			'info',
			'warning',
			'share',
			'share1',
			'share-alt',
			'share-alt2',
			'twitter',
			'rss',
			'email',
			'email-alt',
			'facebook',
			'facebook-alt',
			'networking',
			'googleplus',
			'location',
			'location-alt',
			'camera',
			'images-alt',
			'images-alt2',
			'video-alt',
			'video-alt2',
			'video-alt3',
			'vault',
			'shield',
			'shield-alt',
			'sos',
			'search',
			'slides',
			'analytics',
			'chart-pie',
			'chart-bar',
			'chart-line',
			'chart-area',
			'groups',
			'businessman',
			'id',
			'id-alt',
			'products',
			'awards',
			'forms',
			'testimonial',
			'portfolio',
			'book',
			'book-alt',
			'download',
			'upload',
			'backup',
			'clock',
			'lightbulb',
			'microphone',
			'desktop',
			'tablet',
			'smartphone',
			'phone',
			'smiley',
			'index-card',
			'carrot',
			'building',
			'store',
			'album',
			'palmtree',
			'tickets-alt',
			'money',
			'thumbs-up',
			'thumbs-down',
			'layout',
			'align-pull-left',
			'align-pull-right',
			'block-default',
			'cloud-saved',
			'cloud-upload',
			'columns',
			'cover-image',
			'embed-audio',
			'embed-generic',
			'embed-photo',
			'embed-post',
			'embed-video',
			'exit',
			'html',
			'info-outline',
			'insert-after',
			'insert-before',
			'insert',
			'remove',
			'shortcode',
			'table-col-after',
			'table-col-before',
			'table-col-delete',
			'table-row-after',
			'table-row-before',
			'table-row-delete',
			'saved',
			'amazon',
			'google',
			'linkedin',
			'pinterest',
			'podio',
			'reddit',
			'spotify',
			'twitch',
			'whatsapp',
			'xing',
			'youtube',
			'database-add',
			'database-export',
			'database-import',
			'database-remove',
			'database-view',
			'database',
			'bell',
			'airplane',
			'car',
			'calculator',
			'ames',
			'printer',
			'beer',
			'coffee',
			'drumstick',
			'food',
			'bank',
			'hourglass',
			'money-alt',
			'open-folder',
			'pdf',
			'pets',
			'privacy',
			'superhero',
			'superhero-alt',
			'edit-page',
			'fullscreen-alt',
			'fullscreen-exit-alt'
		];

		return this.each( function () {

			var button = $( this ),
				offsetTop,
				offsetLeft;

			button.on( 'click.dashiconsPicker', function ( e ) {
				offsetTop = $( e.currentTarget ).offset().top;
				offsetLeft = $( e.currentTarget ).offset().left;
				createPopup( button );
			} );

			function createPopup( button ) {

				var target = $( '#menu_icon' ),
					preview = $( button.data( 'preview' ) ),
					popup  = $( '<div class="dashicon-picker-container">' +
						'<div class="dashicon-picker-control"></div>' +
						'<ul class="dashicon-picker-list"></ul>' +
					'</div>' ).css( {
						'top':  offsetTop,
						'left': offsetLeft
					} ),
					list = popup.find( '.dashicon-picker-list' );

				for ( var i in icons ) {
					if ( icons.hasOwnProperty(i) ) {
						list.append('<li data-icon="' + icons[i] + '"><a href="#" title="' + icons[i] + '"><span class="dashicons dashicons-' + icons[i] + '"></span></a></li>');
					}
				}

				$( 'a', list ).on( 'click', function ( e ) {
					e.preventDefault();
					var title = $( this ).attr( 'title' );
					target.val( 'dashicons-' + title ).change();
					preview
						.prop('class', 'dashicons')
						.addClass( 'dashicons-' + title );
					removePopup();
				} );

				var control = popup.find( '.dashicon-picker-control' );

				control.html( '<a data-direction="back" href="#">' +
					'<span class="dashicons dashicons-arrow-left-alt2"></span></a>' +
					'<input type="text" class="" placeholder="Search" />' +
					'<a data-direction="forward" href="#"><span class="dashicons dashicons-arrow-right-alt2"></span></a>'
				);

				$( 'a', control ).on( 'click', function ( e ) {
					e.preventDefault();
					if ( $( this ).data( 'direction' ) === 'back' ) {
						$( 'li:gt(' + ( icons.length - 26 ) + ')', list ).prependTo( list );
					} else {
						$( 'li:lt(25)', list ).appendTo( list );
					}
				} );

				popup.appendTo( 'body' ).show();

				$( 'input', control ).on( 'keyup', function ( e ) {
					var search = $( this ).val();
					if ( search === '' ) {
						$( 'li:lt(25)', list ).show();
					} else {
						$( 'li', list ).each( function () {
							if ( $( this ).data( 'icon' ).toLowerCase().indexOf( search.toLowerCase() ) !== -1 ) {
								$( this ).show();
							} else {
								$( this ).hide();
							}
						} );
					}
				} );

				$( document ).on( 'mouseup.dashicons-picker', function ( e ) {
					if ( ! popup.is( e.target ) && popup.has( e.target ).length === 0 ) {
						removePopup();
					}
				} );
			}

			function removePopup() {
				$( '.dashicon-picker-container' ).remove();
				$( document ).off( '.dashicons-picker' );
			}
		} );
	};

	$( function () {
		$( '.dashicons-picker' ).dashiconsPicker();
	} );

}( jQuery ) );