$(document).ready(function () {
    $("#insax").click(function () {$(this).prev().trigger('click');});
    $('.upload').change(function (e) {
        var self=this;
  //check filereader and send image to crroper canvas
        if (typeof (FileReader) != "undefined") {
            if (self.files && self.files[0]) {
              var reader = new FileReader();
               reader.onload = function (e) {
                //check filereader and send image to crroper canvas
                  //$("#croper_picpro").children().eq(1).attr("src", e.target.result );
                //   if($("#normalimg").css("display")=="block"){
                //       $("#imageN").attr("src", e.target.result );
                //   }else{
                      if (cropper!=undefined){
                          //  cropme();
                          rescrop(e.target.result);
                      }else{
                         // alert("cropper not set!");
                          
                      }
                //   }
                  //cropme();
                  //send image to crroper canvas
                //   $("#upax"+normalchk).css("visibility","visible");
                  $("#upaxOne").css("visibility","visible");
                  
                  $("#cancleax").css("visibility","visible");
                  
                  $("#insax").css("visibility","hidden");
                 
    // $("#savercroper").val($(self).attr("id"));
               };
               reader.readAsDataURL(self.files[0]);
            }else{
                //alert("عکس را انتخاب کنید");
                clearcancleax();
            }
        }else{
            //alert("مرورگر شما از امکانات HTML5 پشتیبانی نمی نماید.");
        }
    });
    $("#cancleax").click(function(){
        clearcancleax();
        $("#croper_picpro img").attr("src","");
        $("#croper_picpro img").css("background-color","blue");
    });
    function clearcancleax(){
        $("#upaxOne").css("visibility","hidden");
        $("#cancleax").css("visibility","hidden");
        $("#inspic").css("visibility","visible");
        $("#upaxOne").css("cursor","default");
        cropper.destroy();

    }
    $("#upaxOne").click(async function(){
        if($("#image").attr("src")){
            var imagedata =  cropper.getCroppedCanvas({width: width_out,height: height_out}).toDataURL('image/jpeg').replace(/^data:image\/(png|jpeg);base64,/, "") ;
            await setBlobfullONE("upload","image/jpeg",imagedata);
            var formdata=new FormData(frmAX);
            var result=await jqajax(myurl_ins,formdata,"post","loader");
            show_imgcrop(result);
        }
    });
    cropme(uprate,downrate);

});
function setBlobfullONE(id,mime,base64){
    let fileInputElement = document.getElementById(id);
    let data = base64ToBlob(base64, mime);
    var filename=fileInputElement.files[0].name;
    let file = new File([data], filename,{type:mime, lastModified:new Date().getTime()});
    let container = new DataTransfer();
    container.items.add(file);
    fileInputElement.files = container.files;
    return true;
}
function cropme(uprate,downrate){
    const image = document.getElementById('image');
    cropper = new Cropper(image, {
        dragMode: 'move',
        aspectRatio: uprate/downrate,
        viewMode: 3,
        dragMode: 'move',
        autoCropArea: 1,
        restore: false,
        modal: false,
        guides: false,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
    });
    // alert("cropper333");
}
function base64ToBlob(base64, mime){
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];
    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    return new Blob(byteArrays, {type: mime});
}

