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

(function ($) {
	'use strict';

	$(function () {
		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',
			'',
			'',
			''
		];

		$(document).on('click', '.dashicons-picker', function (e) {
			var button = $(this),
				offsetTop = $(e.currentTarget).offset().top,
				offsetLeft = $(e.currentTarget).offset().left;
			createPopup(button, offsetTop, offsetLeft);
		});

		$(document).on('click', '.icon-select', function () {
			var $this = $(this),
				icon_key = $this.attr('data-icon-key'),
				group_id = parseInt($this.attr('data-group-id')),
				span = $this.find('span').attr('class');

			var $wrapper = $(".ur-selected-item.ur-item-active"),
				$field_settings = $(".ur-tab-contents").find("#ur-tab-field-options .ur-general-setting-captcha");

			if ( $wrapper.find(".ur-general-setting-block").hasClass("ur-general-setting-captcha") && $field_settings.length > 0 ) {
				var icon_group = $wrapper.find(".ur-general-setting-captcha .ur-general-setting-image-captcha-options ul.ur-options-list").find('li.ur-custom-captcha[data-group="'+group_id+'"]'),
					icon_group_setting = $field_settings.find(".ur-general-setting-image-captcha-options ul.ur-options-list").find('li.ur-custom-captcha[data-group="'+group_id+'"]');
				icon_group.find(".icon-wrap").find('input:hidden[name="ur_general_setting[captcha_image]['+group_id+']['+icon_key+']"]').val(span);
				icon_group_setting.find(".icon-wrap").find('input:hidden[name="ur_general_setting[captcha_image]['+group_id+']['+icon_key+']"]').val(span);
				icon_group.find(".icon-wrap").find('input:hidden[name="ur_general_setting[captcha_image]['+group_id+']['+icon_key+']"]').siblings('span').attr('class', span);
				icon_group_setting.find(".icon-wrap").find('input:hidden[name="ur_general_setting[captcha_image]['+group_id+']['+icon_key+']"]').siblings('span').attr('class', span);
			}

		});

		function createPopup(button, offsetTop, offsetLeft) {
			var target = $(button.data('target')),
				preview = $(button.data('preview')),
				icon_key = button.attr('data-icon-key'),
				group_id = button.attr('data-group-id'),
				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] +
							'" class="icon-select" data-icon-key="' +
							icon_key +
							'" data-group-id="'+group_id+'"><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);
				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');
		}
	});
})(jQuery);
