(function($, undefined){ 		
jQuery(document).ready(function(){
// JavaScript Document


(function() {
	
$(window).on('load', function(){

		$('#content_ifr').contents().on('click','.edit_X3', function () {
			$(this).parent().parent().html('<div class="myeditor_X"><div class="add_before_slide_X"><i class="fa fa-outdent"></i> add before block</div><div class="add_end_slide_X"><i class="fa fa-indent"></i> add after block</div><div class="delete_slide_X"><i class="fa fa-trash"></i> delete</div><div class="edit_X edit_X3"><i class="fa fa-eraser"></i> clear</div></div><div class="invisible_shortcode">[slide_item_cg]</div><p class="delete-demo">inside content here</p><div class="invisible_shortcode">[/slide_item_cg]</div>')
		});
		
		$('#content_ifr').contents().on('click','.add_before_X', function () {
			var my_click = $(this).parent().parent()
			my_click.find('.slides').prepend('<li class="cg_it_item_slide slide"><div class="myeditor_X"><div class="add_before_slide_X"><i class="fa fa-outdent"></i> add before block</div><div class="add_end_slide_X"><i class="fa fa-indent"></i> add after block</div><div class="delete_slide_X"><i class="fa fa-trash"></i> delete</div><div class="edit_X edit_X3"><i class="fa fa-eraser"></i> clear</div></div><div class="invisible_shortcode">[slide_item_cg]</div><p class="delete-demo">inside content here</p><div class="invisible_shortcode">[/slide_item_cg]</div></li>');
		});
		
		$('#content_ifr').contents().on('click','.add_after_X', function () {
			var my_click = $(this).parent().parent()
			my_click.find('.slides').append('<li class="cg_it_item_slide slide"><div class="myeditor_X"><div class="add_before_slide_X"><i class="fa fa-outdent"></i> add before block</div><div class="add_end_slide_X"><i class="fa fa-indent"></i> add after block</div><div class="delete_slide_X"><i class="fa fa-trash"></i> delete</div><div class="edit_X edit_X3"><i class="fa fa-eraser"></i> clear</div></div><div class="invisible_shortcode">[slide_item_cg]</div><p class="delete-demo">inside content here</p><div class="invisible_shortcode">[/slide_item_cg]</div></li>');
		});
		
		$('#content_ifr').contents().on('click','.add_end_slide_X', function () {
			var my_click = $(this).parent().parent()
			my_click.find('.invisible_shortcode').last().before('<p class="delete-demo">inside content here</p>');
		});	
		
		$('#content_ifr').contents().on('click','.add_before_slide_X', function () {
			var my_click = $(this).parent().parent()
			my_click.find('.invisible_shortcode').first().after('<p class="delete-demo">inside content here</p>');
		});
		
		//new wersion
		$('#content_ifr').contents().on('click','.delete_X', function () {
			$(this).parent().parent().prev().remove();
			$(this).parent().parent().remove();
		});	
		//delete slide
		$('#content_ifr').contents().on('click','.delete_slide_X', function () {
			$(this).parent().parent().remove();
		});	

		
		$('#content_ifr').contents().on('click','.cg_it_is_slider .edit_X2', function () {
						var my_click = $(this).parent().parent()
						
						tinyMCE.activeEditor.windowManager.open( {
							title: 'Set the parameters of the Slide Box',
							body: [
								
								{
									type   : 'container',
									name   : 'width_slide_box',
									label  : 'Slider width',
									html   : '<select name="width_slide_box" id="width_slide_box" style="width:100%;"><option value="inbox100">Inbox view</option><option value="screen100">Full Width</option><option value="fullgrid">Full+Grid</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'arows',
									label  : 'Show arrows?',
									html   : '<select name="arows" id="arows" style="width:100%;"><option value="false">false</option><option value="true">true</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'slider_background_color',
									label  : 'Background Color',
									html   : '<input id="slider_background_color" name="slider_background_color" type="color" style="height:30px; width:30%" value="'+my_click.find('.invisible_shortcode').html().split('"')[11]+'" />'
								},
								
								{
									type   : 'container',
									name   : 'slider_background_image',
									label  : 'Background Image',
									html   : '<div id="img_preview" style="width:100px; height:100px; margin-bottom:10px; background-image:url('+my_click.find('.invisible_shortcode').html().split('"')[13]+'); background-size:cover; border:1px solid #000; background-color:#fff;"></div><input id="slider_background_image" name="slider_background_image" type="text" style="height:30px; width:100%" value="'+my_click.find('.invisible_shortcode').html().split('"')[13]+'" />'
								},
								
									{
										type   : 'buttongroup',
										name   : 'buttongroup_image_id',
										label  : ' ',
										items  : [
											{ text: ' Select Image ', value: 'select', classes: 'primary', style: 'padding:0 10px; margin-right:5px;',
												onclick: function() { 
													var send_attachment_bkp = wp.media.editor.send.attachment;
													var button = $('#audio-url');
													wp.media.editor.send.attachment = function(props, attachment) {
														$(button).val(attachment.id);
														//$('body').hide();
														//alert(attachment.id+' - '+attachment.url+' - ' +button.html() ); 
														$('#slider_background_image').val(attachment.url)
														$('#img_preview').attr('style', 'width:100px; height:100px; margin-bottom:10px; background-image:url('+attachment.url+'); background-size:cover; border:1px solid #000; background-color:#fff;')
														//$('#background_image_td').val(attachment.id)
														wp.media.editor.send.attachment = send_attachment_bkp;
													}
													wp.media.editor.open(button);
													return false;
												 },
											},
											{ text: 'Delete Image', value: 'delete',
												onclick: function() { 
													$('#slider_background_image').val('none')
													$('#img_preview').attr('style', 'width:100px; height:100px; margin-bottom:10px; background-image:url(none); background-size:cover; border:1px solid #000; background-color:#fff;')
													return false;
												 },
											}
										]
									},
								
								{
									type   : 'container',
									name   : 'column_mobile',
									label  : 'Columns To Show Mobile',
									html   : '<select name="column_mobile" id="column_mobile" style="width:100%;"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>'
								},

								{
									type   : 'container',
									name   : 'column_tablet',
									label  : 'Columns To Show Tablet',
									html   : '<select name="column_tablet" id="column_tablet" style="width:100%;"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'column_desctop',
									label  : 'Columns To Show Desktop',
									html   : '<select name="column_desctop" id="column_desctop" style="width:100%;"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'margin_slide',
									label  : 'Margin Slide top/bottom (px)',
									html   : '<input id="margin_slide" name="margin_slide" type="number" style="height:30px; width:100%" value="'+my_click.find('.invisible_shortcode').html().split('"')[15]+'" />'
								},
								
								{
									type   : 'container',
									name   : 'padding_slide',
									label  : 'Padding Slide top/bottom (px)',
									html   : '<input id="padding_slide" name="padding_slide" type="number" style="height:30px; width:100%" value="'+my_click.find('.invisible_shortcode').html().split('"')[17]+'" />'
								},


							],
							onsubmit: function( e ) { // это будет происходить после заполнения полей и нажатии кнопки отправки
							
							var width_slide_box = $('select#width_slide_box').val()
							var arows = $('select#arows').val()
							var slider_background_color = $('input#slider_background_color').val()
							var slider_background_image = $('input#slider_background_image').val()
							var column_mobile = $('select#column_mobile').val()
							var column_tablet = $('select#column_tablet').val()
							var column_desctop = $('select#column_desctop').val()
							var margin_slide = $('input#margin_slide').val()
							var padding_slide = $('input#padding_slide').val()
							
							var id_this_td = my_click.attr('id')
							
							var current_style = '<style><!--';
								/**/
								current_style = current_style + '#'+id_this_td+'  { background-color: '+slider_background_color+'; background-image:url(\''+slider_background_image+'\'); background-size:cover; padding:'+padding_slide+'px 0; margin:'+margin_slide+'px 0; }';
								/**/
							current_style = current_style + '--></style>';
							
							my_click.prev().remove()
							my_click.before(current_style)
							
							
							my_click.attr('class', 'cg_it_is_slider width_admin_'+column_desctop)
							my_click.find('.invisible_shortcode.prima_option').html('[slider_class_cg width_slide_box="' + width_slide_box + '" column_mobile="' + column_mobile + '" column_tablet="' + column_tablet + '" column_desctop="' + column_desctop + '" arows="' + arows + '" slider_background_color="' + slider_background_color + '" slider_background_image="' + slider_background_image + '" margin_slide="' + margin_slide + '" padding_slide="' + padding_slide + '" ]')
							
							}
						});
						
						$('#iconner').on('click','i', function () {
							$('#iconner i').removeClass('selected')
							$(this).addClass('selected')
						});
						
						$('#slider_background_image').change(function() {
							$('#img_preview').attr('style', 'width:100px; height:100px; margin-bottom:10px; background-image:url('+$(this).val()+'); background-size:cover; border:1px solid #000; background-color:#fff;')
						});
						
						$('select#width_slide_box [value="'+my_click.find('.invisible_shortcode').html().split('"')[1]+'"]').attr("selected", "");
						$('select#arows [value="'+my_click.find('.invisible_shortcode').html().split('"')[9]+'"]').attr("selected", "");
						
						$('select#column_mobile [value="'+my_click.find('.invisible_shortcode').html().split('"')[3]+'"]').attr("selected", "");
						$('select#column_tablet [value="'+my_click.find('.invisible_shortcode').html().split('"')[5]+'"]').attr("selected", "");
						$('select#column_desctop [value="'+my_click.find('.invisible_shortcode').html().split('"')[7]+'"]').attr("selected", "");
						
						$('.mce-container.mce-panel.mce-foot').css({'position' : 'fixed', 'left' : 'auto', 'top' : 'auto'})
						//alert(my_click.find('.invisible_shortcode').html())
						//alert(my_click.find('.invisible_shortcode').html().split('"')[19])
						
						//my_click.find("select#column_desctop [value='"+my_click.find('.invisible_shortcode').html().split('"')[7]+"']").attr("selected", "selected");
						//my_click.find("select#column_desctop").hide()

					
		});
		
		

})
	
	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   : 'container',
									name   : 'width_slide_box',
									label  : 'Slider width',
									html   : '<select name="width_slide_box" id="width_slide_box" style="width:100%;"><option value="inbox100" selected="selected">Inbox view</option><option value="screen100">Full Width</option><option value="fullgrid">Full+Grid</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'arows',
									label  : 'Show arrows?',
									html   : '<select name="arows" id="arows" style="width:100%;"><option value="false" selected="selected">false</option><option value="true">true</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'slider_background_color',
									label  : 'Background Color',
									html   : '<input id="slider_background_color" name="slider_background_color" type="color" style="height:30px; width:100%" value="#ffffff" />'
								},
								
								{
									type   : 'container',
									name   : 'slider_background_image',
									label  : 'Background Image',
									html   : '<div id="img_preview" style="width:100px; height:100px; margin-bottom:10px; background-image:url(none); background-size:cover; border:1px solid #000; background-color:#fff;"></div><input id="slider_background_image" name="slider_background_image" type="text" style="height:30px; width:100%" value="none" />'
								},
								
									{
										type   : 'buttongroup',
										name   : 'buttongroup_image_id',
										label  : ' ',
										items  : [
											{ text: ' Select Image ', value: 'select', classes: 'primary', style: 'padding:0 10px; margin-right:5px;',
												onclick: function() { 
													var send_attachment_bkp = wp.media.editor.send.attachment;
													var button = $('#audio-url');
													wp.media.editor.send.attachment = function(props, attachment) {
														$(button).val(attachment.id);
														//$('body').hide();
														//alert(attachment.id+' - '+attachment.url+' - ' +button.html() ); 
														$('#slider_background_image').val(attachment.url)
														$('#img_preview').attr('style', 'width:100px; height:100px; margin-bottom:10px; background-image:url('+attachment.url+'); background-size:cover; border:1px solid #000; background-color:#fff;')
														//$('#background_image_td').val(attachment.id)
														wp.media.editor.send.attachment = send_attachment_bkp;
													}
													wp.media.editor.open(button);
													return false;
												 },
											},
											{ text: 'Delete Image', value: 'delete',
												onclick: function() { 
													$('#slider_background_image').val('none')
													$('#img_preview').attr('style', 'width:100px; height:100px; margin-bottom:10px; background-image:url(none); background-size:cover; border:1px solid #000; background-color:#fff;')
													return false;
												 },
											}
										]
									},
								
								{
									type   : 'container',
									name   : 'column_mobile',
									label  : 'Columns To Show Mobile',
									html   : '<select name="column_mobile" id="column_mobile" style="width:100%;"><option value="1" selected="selected">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>'
								},

								{
									type   : 'container',
									name   : 'column_tablet',
									label  : 'Columns To Show Tablet',
									html   : '<select name="column_tablet" id="column_tablet" style="width:100%;"><option value="1">1</option><option value="2" selected="selected">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'column_desctop',
									label  : 'Columns To Show Desktop',
									html   : '<select name="column_desctop" id="column_desctop" style="width:100%;"><option value="1">1</option><option value="2">2</option><option value="3" selected="selected">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select>'
								},
								
								{
									type   : 'container',
									name   : 'margin_slide',
									label  : 'Margin Slide top/bottom (px)',
									html   : '<input id="margin_slide" name="margin_slide" type="number" style="height:30px; width:100%" value="0" />'
								},
								
								{
									type   : 'container',
									name   : 'padding_slide',
									label  : 'Padding Slide top/bottom (px)',
									html   : '<input id="padding_slide" name="padding_slide" type="number" style="height:30px; width:100%" value="50" />'
								},
								


							],
							onsubmit: function( e ) { // это будет происходить после заполнения полей и нажатии кнопки отправки
							
							var width_slide_box = $('select#width_slide_box').val()
							var arows = $('select#arows').val()
							var slider_background_color = $('input#slider_background_color').val()
							var slider_background_image = $('input#slider_background_image').val()
							var column_mobile = $('select#column_mobile').val()
							var column_tablet = $('select#column_tablet').val()
							var column_desctop = $('select#column_desctop').val()
							var margin_slide = $('input#margin_slide').val()
							var padding_slide = $('input#padding_slide').val()
							
							var id_this_td = 'unique_style_' + ( Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000 )
							
							var current_style = '<style><!--';
								/**/
								current_style = current_style + '#'+id_this_td+'  { background-color: '+slider_background_color+'; background-image:url(\''+slider_background_image+'\'); background-size:cover; padding:'+padding_slide+'px 0; margin:'+margin_slide+'px 0; }';
								/**/
							current_style = current_style + '--></style>';
							
							var slidetemplate = '<li class="cg_it_item_slide slide"><div class="myeditor_X"><div class="add_before_slide_X"><i class="fa fa-outdent"></i> add before block</div><div class="add_end_slide_X"><i class="fa fa-indent"></i> add after block</div><div class="delete_slide_X"><i class="fa fa-trash"></i> delete</div><div class="edit_X edit_X3"><i class="fa fa-eraser"></i> clear</div></div><div class="invisible_shortcode">[slide_item_cg]</div><p class="delete-demo">inside content here</p><div class="invisible_shortcode">[/slide_item_cg]</div></li>'
							var nabor_slide = ''
							for ( i = 0; i < column_desctop; i++ ) {
							  nabor_slide = nabor_slide + slidetemplate
							}
								editor.insertContent( current_style+'<div id="'+id_this_td+'" class="cg_it_is_slider width_admin_'+column_desctop+'"><div class="myeditor_X"><div class="add_before_X"><i class="fa fa-outdent"></i> add before</div><div class="add_after_X"><i class="fa fa-indent"></i> add after</div><div class="delete_X"><i class="fa fa-trash"></i> delete</div><div class="edit_X edit_X2"><i class="fa fa-pencil-square-o"></i> edit</div></div><div class="invisible_shortcode prima_option">[slider_class_cg width_slide_box="' + width_slide_box + '" column_mobile="' + column_mobile + '" column_tablet="' + column_tablet + '" column_desctop="' + column_desctop + '" arows="' + arows + '" slider_background_color="' + slider_background_color + '" slider_background_image="' + slider_background_image + '" margin_slide="' + margin_slide + '" padding_slide="' + padding_slide + '" ]</div><ul class="slides">'+nabor_slide+'</ul><div class="invisible_shortcode">[/slider_class_cg]</div></div><p>&nbsp;</p>');
							}
						});
						
						$('#iconner').on('click','i', function () {
							$('#iconner i').removeClass('selected')
							$(this).addClass('selected')
						});
						
						$('#slider_background_image').change(function() {
							$('#img_preview').attr('style', 'width:100px; height:100px; margin-bottom:10px; background-image:url('+$(this).val()+'); background-size:cover; border:1px solid #000; background-color:#fff;')
						});
						
						$('.mce-container.mce-panel.mce-foot').css({'position' : 'fixed', 'left' : 'auto', 'top' : 'auto'})
						
					},							
							
				},
				
				{ // второй элемент первого выпадающего списка
				
					text: ' + Add Slide',
					onclick: function() {
						
						editor.insertContent('<li class="cg_it_item_slide slide"><div class="myeditor_X"><div class="add_before_slide_X"><i class="fa fa-outdent"></i> add before block</div><div class="add_end_slide_X"><i class="fa fa-indent"></i> add after block</div><div class="delete_slide_X"><i class="fa fa-trash"></i> delete</div><div class="edit_X edit_X3"><i class="fa fa-eraser"></i> clear</div></div><div class="invisible_shortcode">[slide_item_cg]</div><p class="delete-demo">inside content here</p><div class="invisible_shortcode">[/slide_item_cg]</div></li>');
					}
					
				}
				
			]

		});
	});
	
	
})();

});
} )( jQuery );