    /**
	 * will open image on minipaint
	 * 
	 * @param {string|image} image image or image id
	 */

	function open_image(image) {
		if (typeof image == 'string') {
			image = document.getElementById(image);
	    }
	    var Layers = document.getElementById('myFrame').contentWindow.Layers;
	    var name = image.src.replace(/^.*[\\\/]/, '');
	    var new_layer = {
			name: name,
	        type: 'image',
	        data: image,
	        width: image.naturalWidth || image.width,
	        height: image.naturalHeight || image.height,
	        width_original: image.naturalWidth || image.width,
	        height_original: image.naturalHeight || image.height,
	    };
	    Layers.insert(new_layer);
	}
	
	function my_save() {
		var Layers = document.getElementById('myFrame').contentWindow.Layers;
	    var tempCanvas = document.createElement("canvas");
	    var tempCtx = tempCanvas.getContext("2d");
	    var dim = Layers.get_dimensions();
	    tempCanvas.width = dim.width;
	    tempCanvas.height = dim.height;
	    Layers.convert_layers_to_canvas(tempCtx);
		
	    if (is_edge_or_ie() == false) {
			var imageurl = tempCanvas.toDataURL();
			
	        //update image using blob (faster)
	        tempCanvas.toBlob(function (blob) {
				
			}, 'image/png');
	    } else {
			//slow way for IE, Edge
	        var imageurl = tempCanvas.toDataURL();
			
	        alert('Data length: ' + data.length);
	    }
	    var code = $('.code').val();
	    var filePath = $('.filePath').val();
		
		
	    var allData = {
			'url': imageurl,
	        'code': code,
	        'filePath': filePath
	    };
	    $.ajax({
			url: '{{ (path('webkul_media_post')) }}',
	        type: "POST",
	        dataType: "json",
	        data: allData,
	        async: true,
	        success: function (data) {

			}
	    }).then(function (data) {
			
	    });
	    if (confirm("Are you sure you want to navigate away from this page?")) {
			history.go(-1);
	    }
	    return false;
		
	}

	function my_update() {
		var target = document.getElementById('testImage');
		
	    var Layers = document.getElementById('myFrame').contentWindow.Layers;
	    var tempCanvas = document.createElement("canvas");
	    var tempCtx = tempCanvas.getContext("2d");
	    var dim = Layers.get_dimensions();
	    tempCanvas.width = dim.width;
	    tempCanvas.height = dim.height;
	    Layers.convert_layers_to_canvas(tempCtx);
		
	    target.width = dim.width;
	    target.height = dim.height;
	    target.src = tempCanvas.toDataURL();
	}
	
	/**
	 * will auto load image on page load. Uncomment line below to make it work
	 */	
	//if IE 11 or Edge
	function is_edge_or_ie() {
		//ie11
	    if (!(window.ActiveXObject) && "ActiveXObject" in window)
		return true;
	    //edge
	    if (navigator.userAgent.indexOf('Edge/') != -1)
		return true;
	    return false;
	}
	
	function onMyFrameLoad() {
		var testimage = document.getElementById('testImage');
        console.log('testimage : ', testimage);
        open_image(testimage);
	}