// JavaScript Document
(function() {
	tinymce.PluginManager.add('true_mce_button_slider_class', function( editor, url ) { // id кнопки true_mce_button должен быть везде один и тот же
		editor.addButton( 'true_mce_button_slider_class', { // id кнопки true_mce_button
			icon: ' fa fa-object-ungroup', // мой собственный CSS класс, благодаря которому я задам иконку кнопки
			type: 'menubutton',
			title: 'Add Container Slider', // всплывающая подсказка при наведении
			menu: [ // тут начинается первый выпадающий список
				{ // первый элемент первого выпадающего списка

					text: 'Add Slide Container',
					onclick: function() {
						editor.windowManager.open( {
							title: 'Set the parameters of the Slide Box',
							body: [
								{
									type: 'listbox', // тип listbox = выпадающий список select
									name: 'width_slide_box',
									label: 'Slider width:',
									'values': [ // значения выпадающего списка
										{text: 'Inbox view', value: 'inbox100'}, // лейбл, значение
										{text: 'Full Width', value: 'screen100'},
									]
								},
								
								{
									type: 'listbox', // тип listbox = выпадающий список select
									name: 'arows',
									label: 'Show arrows?',
									'values': [ // значения выпадающего списка
										{text: 'false', value: 'false'}, // лейбл, значение
										{text: 'true', value: 'true'},
									]
								},
								
								{
									type: 'textbox', // тип listbox = выпадающий список select
									name: 'slider_background_color',
									label: 'Background Color',
									value: '#FFFFFF' // значение по умолчанию
								},
								
								{
									type: 'listbox', // тип listbox = выпадающий список select
									name: 'column_mobile',
									label: 'Columns To Show Mobile',
									'values': [ // значения выпадающего списка
										{text: '1', value: '1'}, // лейбл, значение
										{text: '2', value: '2'},
										{text: '3', value: '3'},
										{text: '4', value: '4'},
										{text: '5', value: '5'},
										{text: '6', value: '6'},
										{text: '7', value: '7'},
										{text: '8', value: '8'},
										{text: '9', value: '9'},
										{text: '10', value: '10'},
									]
								},
								
								{
									type: 'listbox', // тип listbox = выпадающий список select
									name: 'column_tablet',
									label: 'Columns To Show Tablet',
									'values': [ // значения выпадающего списка
										{text: '1', value: '1'}, // лейбл, значение
										{text: '2', value: '2'},
										{text: '3', value: '3'},
										{text: '4', value: '4'},
										{text: '5', value: '5'},
										{text: '6', value: '6'},
										{text: '7', value: '7'},
										{text: '8', value: '8'},
										{text: '9', value: '9'},
										{text: '10', value: '10'},
									]
								},
								
								{
									type: 'listbox', // тип listbox = выпадающий список select
									name: 'column_desctop',
									label: 'Columns To Show Desktop',
									'values': [ // значения выпадающего списка
										{text: '1', value: '1'}, // лейбл, значение
										{text: '2', value: '2'},
										{text: '3', value: '3'},
										{text: '4', value: '4'},
										{text: '5', value: '5'},
										{text: '6', value: '6'},
										{text: '7', value: '7'},
										{text: '8', value: '8'},
										{text: '9', value: '9'},
										{text: '10', value: '10'},
									]
								},
								


							],
							onsubmit: function( e ) { // это будет происходить после заполнения полей и нажатии кнопки отправки
								editor.insertContent( '<div class="cg_it_is_slider">[slider_class_cg width_slide_box="' + e.data.width_slide_box + '" column_mobile="' + e.data.column_mobile + '" column_tablet="' + e.data.column_tablet + '" column_desctop="' + e.data.column_desctop + '" arows="' + e.data.arows + '" slider_background_color="' + e.data.slider_background_color + '"]<ul class="slides"><li class="cg_it_item_slide slide">[slide_item_cg]inside content here[/slide_item_cg]</li></ul>[/slider_class_cg]</div><p>&nbsp;</p>');
							}
						});
					},							
							
				},
				
				{ // второй элемент первого выпадающего списка
				
					text: ' + Add Slide',
					onclick: function() {
						editor.insertContent('<li class="cg_it_item_slide slide">[slide_item_cg]inside content here[/slide_item_cg]</li>');
					}
					
				}
				
			]

		});
	});
})();