// Validate image dimension
$(".cropit-image-input").bind("change", function() {
  var cropperHeight = $(this).closest('.image-cropper').attr("data-height"),
      cropperWidth = $(this).closest('.image-cropper').attr("data-width"),
      cropperExportZoom = $(this).closest('.image-cropper').attr("data-exportZoom"),
      tmp = this.files && this.files[0];

  if (tmp) {
    var img = new Image();

    img.src = window.URL.createObjectURL(tmp);

    img.onload = function() {
      var width = img.naturalWidth,
          height = img.naturalHeight;

      if (width < cropperWidth*cropperExportZoom || height < cropperHeight*cropperExportZoom) {
        alert("For better result please select image with minimum dimension of "+cropperWidth*cropperExportZoom+"x"+cropperHeight*cropperExportZoom+" px");
      }

    }
  }
});

// Initiate Cropper
$('.image-cropper').each(function(index) {
  let elCropper = $(this)
  var cropperHeight = $(this).attr("data-height");
  var cropperWidth = $(this).attr("data-width");
  var cropperExportZoom = $(this).attr("data-exportZoom");
  var cropperSrc = $(this).attr("data-src");
  $(this).cropit({
    width: cropperWidth,
    height: cropperHeight,
    exportZoom: cropperExportZoom,
    smallImage: 'stretch',
    initialZoom: 'image',
    freeMove: true,
    allowDragNDrop: false,
    onImageLoading: function() {
      elCropper.waitMe({effect : 'win8_linear'})
    },
    onImageLoaded: function() {
      if (elCropper.waitMe) {
        elCropper.waitMe('hide')        
      }
    },
    onImageError: function() {
      if (elCropper.waitMe) {
        elCropper.waitMe('hide')        
      }
    }
  });
  if (cropperSrc!='') {
    $(this).cropit('imageSrc', cropperSrc);
  }
});

/* Handle rotation */
$('.rotate-cw-btn').click(function() {
  $(this).closest('.image-cropper').cropit('rotateCW');
});
$('.rotate-ccw-btn').click(function() {
  $(this).closest('.image-cropper').cropit('rotateCCW');
});

/* Handle form submit. Export cropped image before submitting */
$('.btn-image-submit').on('click', function(e) {
  var quality = $('meta[name=compression]').attr('content')
  e.preventDefault();
  var image = $(this).closest('form.image-form').find('.image-cropper').cropit('export', {
    quality: quality
  });
  $(this).closest('form.image-form').find('input[name=image]').val(image);
  $(this).closest('form.image-form').submit();
});

/* Handle form submit. Export cropped image before submitting */
$('.btn-image-submit-extra').on('click', function(e) {
  e.preventDefault();
  var quality = $('meta[name=compression]').attr('content')
  var image1 = $(this).closest('form.image-form').find('.image-cropper.category-1').cropit('export', {
    quality: quality
  });
  var image2 = $(this).closest('form.image-form').find('.image-cropper.category-2').cropit('export', {
    quality: quality
  });
  $(this).closest('form.image-form').find('input[name=image1]').val(image1);
  $(this).closest('form.image-form').find('input[name=image2]').val(image2);
  $(this).closest('form.image-form').submit();
});

$("label[for='cropit-image-input']").on('click', function() {
  $(this).next().trigger('click')
})
// $('.normal').on('click', function(e) {
//   e.preventDefault();
//   alert('clicked');
//   var img = $(this).closest('.image-cropper').find('.cropit-preview-image');
//   Caman('.cropit-preview-image', function() {
//     this.brightness(10);
//     this.contrast(30);
//     this.sepia(60);
//     this.saturation(-30);
//     this.render();
//   });
// });
