console.log("---------------inside image_editor.js--------------");
const edit_image_button = document.getElementById('edit_image');
const image_id_field = document.getElementById('image_id');
const media_editor = document.getElementById('media_editor');

edit_image_button.addEventListener('click', () => {
	const image_id = image_id_field.value;

	//PLGNTLS_ajax("postid", image_id, 'image-editor')
	const data_obj = {
		'postid': image_id,
	};
	PLGNTLS_ajax(data_obj, 'image_editor_PLGNTLS')
	.then((response) => response.json())
	.then((data) => {
		console.log("data: ");
		console.log(data);
		media_editor.innerHTML = data.data.html;
	})
	.catch((error) => {
		console.log("error: ");
		console.log(error);
	});
});

/*
open: function (e, t, i) {                   // t: nonce
	this._view = i;                            // div: #media-editor-114
	var a = c('#image-editor-' + e),           // e: image id
	o = c('#media-head-' + e),
	r = c('#imgedit-open-btn-' + e),
	s = r.siblings('.spinner');
	if (!r.hasClass('button-activated')) return s.addClass('is-active'),
	c.ajax({
		url: ajaxurl,
		type: 'post',
		data: {
			action: 'image-editor',
			_ajax_nonce: t,
			postid: e,
			do : 'open'},
			beforeSend: function () {
				r.addClass('button-activated')
			}
		}).done(
			function (t) {
				var i;
				'-1' === t &&
				(
					i = n('Could not load the preview image.'),
					a.html(
						'<div class="notice notice-error" tabindex="-1" role="alert"><p>' + i + '</p></div>'
					)
				),
				t.data &&
				t.data.html &&
				a.html(t.data.html),
				o.fadeOut(
					'fast',
					function () {
						a.fadeIn(
							'fast',
							function () {
								i &&
								c(document).trigger('image-editor-ui-ready')
							}
						),
						r.removeClass('button-activated'),
						s.removeClass('is-active')
					}
				),
				l.init(e)
			}
		) },
		imgLoaded: function (t) {
			var i = c('#image-preview-' + t),
			e = c('#imgedit-crop-' + t);
			void 0 === this.hold.sizer &&
			this.init(t),
			this.initCrop(t, i, e),
			this.setCropSelection(
				t,
				{
					x1: 0,
					y1: 0,
					x2: 0,
					y2: 0,
					width: i.innerWidth(),
					height: i.innerHeight()
				}
			),
			this.toggleEditor(t, 0, !0)
		},
		focusManager: function () {
			setTimeout(
				function () {
					var t = c('.notice[role="alert"]');
					(t = t.length ? t : c('.imgedit-wrap').find(':tabbable:first')).attr('tabindex', '-1').trigger('focus')
				},
				100
			)
		},
		initCrop: function (a, t, i) {
			var o = this,
			r = c('#imgedit-sel-width-' + a),
			s = c('#imgedit-sel-height-' + a),
			n = c('#imgedit-start-x-' + a),
			d = c('#imgedit-start-y-' + a),
			t = c(t);
			t.data('imgAreaSelect') ||
			(
				o.iasapi = t.imgAreaSelect({
					parent: i,
					instance: !0,
					handles: !0,
					keys: !0,
					minWidth: 3,
					minHeight: 3,
					onInit: function (t) {
						c(t).next().css('position', 'absolute').nextAll('.imgareaselect-outer').css('position', 'absolute'),
						i.children().on(
							'mousedown, touchstart',
							function (t) {
								var i,
								e = !1;
								t.shiftKey &&
								(
									t = o.iasapi.getSelection(),
									i = o.getSelRatio(a),
									e = t &&
									t.width &&
									t.height ? t.width + ':' + t.height : i
								),
								o.iasapi.setOptions({
									aspectRatio: e
								})
							}
						)
					},
					onSelectStart: function () {
						l.setDisabled(c('#imgedit-crop-sel-' + a), 1),
						l.setDisabled(c('.imgedit-crop-clear'), 1),
						l.setDisabled(c('.imgedit-crop-apply'), 1)
					},
					onSelectEnd: function (t, i) {
						l.setCropSelection(a, i),
						c('#imgedit-crop > *').is(':visible') ||
						l.toggleControls(c('.imgedit-crop.button'))
					},
					onSelectChange: function (t, i) {
						var e = l.hold.sizer;
						r.val(l.round(i.width / e)),
						s.val(l.round(i.height / e)),
						n.val(l.round(i.x1 / e)),
						d.val(l.round(i.y1 / e))
					}
				})
			)
		},
		setCropSelection: function (t, i) {
			if (!(i = i || 0) || i.width < 3 && i.height < 3) return this.setDisabled(c('.imgedit-crop', '#imgedit-panel-' + t), 1),
			this.setDisabled(c('#imgedit-crop-sel-' + t), 1),
			c('#imgedit-sel-width-' + t).val(''),
			c('#imgedit-sel-height-' + t).val(''),
			c('#imgedit-start-x-' + t).val('0'),
			c('#imgedit-start-y-' + t).val('0'),
			c('#imgedit-selection-' + t).val(''),
			!1;
			i = {
				x: i.x1,
				y: i.y1,
				w: i.width,
				h: i.height
			},
			this.setDisabled(c('.imgedit-crop', '#imgedit-panel-' + t), 1),
			c('#imgedit-selection-' + t).val(JSON.stringify(i))
		},
		close: function (t, i) {
			if ((i = i || !1) && this.notsaved(t)) return !1;
			this.iasapi = {},
			this.hold = {},
			this._view ? this._view.back() : c('#image-editor-' + t).fadeOut(
				'fast',
				function () {
					c('#media-head-' + t).fadeIn(
						'fast',
						function () {
							c('#imgedit-open-btn-' + t).trigger('focus')
						}
					),
					c(this).empty()
				}
			)
		},
		notsaved: function (t) {
			var i = c('#imgedit-history-' + t).val(),
			i = '' !== i ? JSON.parse(i) : [];
			return this.intval(c('#imgedit-undone-' + t).val()) < i.length &&
			!confirm(c('#imgedit-leaving-' + t).text())
		},
		addStep: function (t, i, e) {
			for (
				var a = this,
				o = c('#imgedit-history-' + i),
				r = '' !== o.val() ? JSON.parse(o.val()) : [],
				s = c('#imgedit-undone-' + i),
				n = a.intval(s.val());
				0 < n;
			) r.pop(),
			n--;
			s.val(0),
			r.push(t),
			o.val(JSON.stringify(r)),
			a.refreshEditor(
				i,
				e,
				function () {
					a.setDisabled(c('#image-undo-' + i), !0),
					a.setDisabled(c('#image-redo-' + i), !1)
				}
			)
		},
		rotate: function (t, i, e, a) {
			if (c(a).hasClass('disabled')) return !1;
			this.closePopup(a),
			this.addStep({
				r: {
					r: t,
					fw: this.hold.h,
					fh: this.hold.w
				}
			}, i, e)
		},
		flip: function (t, i, e, a) {
			if (c(a).hasClass('disabled')) return !1;
			this.closePopup(a),
			this.addStep({
				f: {
					f: t,
					fw: this.hold.w,
					fh: this.hold.h
				}
			}, i, e)
		},
		crop: function (t, i, e) {
			var a = c('#imgedit-selection-' + t).val(),
			o = this.intval(c('#imgedit-sel-width-' + t).val()),
			r = this.intval(c('#imgedit-sel-height-' + t).val());
			if (c(e).hasClass('disabled') || '' === a) return !1;
			0 < (a = JSON.parse(a)).w &&
			0 < a.h &&
			0 < o &&
			0 < r &&
			(a.fw = o, a.fh = r, this.addStep({
				c: a
			}, t, i)),
			c('#imgedit-sel-width-' + t).val(''),
			c('#imgedit-sel-height-' + t).val(''),
			c('#imgedit-start-x-' + t).val('0'),
			c('#imgedit-start-y-' + t).val('0')
		},
		undo: function (i, t) {
			var e = this,
			a = c('#image-undo-' + i),
			o = c('#imgedit-undone-' + i),
			r = e.intval(o.val()) + 1;
			a.hasClass('disabled') ||
			(
				o.val(r),
				e.refreshEditor(
					i,
					t,
					function () {
						var t = c('#imgedit-history-' + i),
						t = '' !== t.val() ? JSON.parse(t.val()) : [];
						e.setDisabled(c('#image-redo-' + i), !0),
						e.setDisabled(a, r < t.length),
						t.length === r &&
						c('#image-redo-' + i).trigger('focus')
					}
				)
			)
		},
		redo: function (t, i) {
			var e = this,
			a = c('#image-redo-' + t),
			o = c('#imgedit-undone-' + t),
			r = e.intval(o.val()) - 1;
			a.hasClass('disabled') ||
			(
				o.val(r),
				e.refreshEditor(
					t,
					i,
					function () {
						e.setDisabled(c('#image-undo-' + t), !0),
						e.setDisabled(a, 0 < r),
						0 == r &&
						c('#image-undo-' + t).trigger('focus')
					}
				)
			)
		},
		setNumSelection: function (t, i) {
			var e = c('#imgedit-sel-width-' + t),
			a = c('#imgedit-sel-height-' + t),
			o = c('#imgedit-start-x-' + t),
			r = c('#imgedit-start-y-' + t),
			o = this.intval(o.val()),
			r = this.intval(r.val()),
			s = this.intval(e.val()),
			n = this.intval(a.val()),
			d = c('#image-preview-' + t),
			l = d.height(),
			d = d.width(),
			h = this.hold.sizer,
			g = this.iasapi;
			if (!1 !== this.validateNumeric(i)) return s < 1 ? (e.val(''), !1) : n < 1 ? (a.val(''), !1) : void (
				(s && n || o && r) &&
				(i = g.getSelection()) &&
				(
					s = i.x1 + Math.round(s * h),
					n = i.y1 + Math.round(n * h),
					o = o === i.x1 ? i.x1 : Math.round(o * h),
					i = r === i.y1 ? i.y1 : Math.round(r * h),
					d < s &&
					(o = 0, s = d, e.val(Math.round(s / h))),
					l < n &&
					(i = 0, n = l, a.val(Math.round(n / h))),
					g.setSelection(o, i, s, n),
					g.update(),
					this.setCropSelection(t, g.getSelection())
				)
			)
		},
		round: function (t) {
			var i;
			return t = Math.round(t),
			0.6 < this.hold.sizer ? t : '1' === (i = t.toString().slice( - 1)) ? t - 1 : '9' === i ? t + 1 : t
		},
		setRatioSelection: function (t, i, e) {
			var a = this.intval(c('#imgedit-crop-width-' + t).val()),
			o = this.intval(c('#imgedit-crop-height-' + t).val()),
			r = c('#image-preview-' + t).height();
			!1 === this.validateNumeric(e) ? this.iasapi.setOptions({
				aspectRatio: null
			}) : a &&
			o &&
			(
				this.iasapi.setOptions({
					aspectRatio: a + ':' + o
				}),
				e = this.iasapi.getSelection(!0)
			) &&
			(
				r < (a = Math.ceil(e.y1 + (e.x2 - e.x1) / (a / o))) ? (
					a = r,
					o = n(
						'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.'
					),
					c('#imgedit-crop-' + t).prepend(
						'<div class="notice notice-error" tabindex="-1" role="alert"><p>' + o + '</p></div>'
					),
					wp.a11y.speak(o, 'assertive'),
					c(i ? '#imgedit-crop-height-' + t : '#imgedit-crop-width-' + t).val('')
				) : void 0 !== (r = c('#imgedit-crop-' + t).find('.notice-error')) &&
				r.remove(),
				this.iasapi.setSelection(e.x1, e.y1, e.x2, a),
				this.iasapi.update()
			)
		},
		validateNumeric: function (t) {
			if (!1 === this.intval(c(t).val())) return c(t).val(''),
			!1
		}
	}
}(jQuery);


*/