{% block body %}
<link rel="stylesheet" type="text/css" href="/bundles/webkuldam/css/bootstrap.min.css">

<div style="height:5vh;margin:5px;">
	<button class="btn btn-success" id="save">Save & Exit</button>
	<br /><br />
	<input type="hidden" name="code" class = "code" value= "{{ code }}">
	<input type="hidden" name="filePath" class = "filePath" value= "{{ filePath }}">
	<img style="display:none;" id="testImage" alt="" src="{{ url }}"/>
</div>

<iframe id="myFrame" style="width:100%;height:90vh;border:0;" src="/webkul/dam/media/editor"></iframe>

<script {% if nounce == true %} nonce="{{ js_wk_nonce() }}" {% endif %} type="text/javascript">
	
	$(document).ready(function(){
		$("#myFrame").on('load', function(){
			var testimage = document.getElementById('testImage');
			open_image(testimage);
		});
		$("#save").click(function(){
			my_save();
		});
		$("#testImage").click(function(){
			open_image(this);
		});
	});

	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,
	        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;
	}
</script>
{% endblock %}