$('#imageModal').on('shown.bs.modal', function(e) {
  var item = $('#menuImage');
  var itemId = item.data('itemid');
  var url = item.data('url');

  function initCropper(forcePush) {
    var cropper = new Slim(document.getElementById('menuImage'), {
      ratio: item.data('ratio'),
      service: '/settings/edit/images',
      label: 'Click, or drag image here',
      labelLoading: 'Image loading...',
      buttonConfirmLabel: 'Upload',
      buttonConfirmTitle: 'Upload',
      maxFileSize: '20',
      willTransform: addImageWatermark,
      minSize: item.data('minsize'),
      forceSize: item.data('forcesize'),
      push: true,
      instantEdit: !forcePush && (url != '') ? false : true,
      didRemove: function imageRemoved(data) {
        $.post('/settings/edit/images', {'deleteImage' : 'menuItem', 'itemId' : itemId}, function (data) {
            $('.img_menuItem').removeClass('imgExists').addClass('imgPlaceholder');
            $('#menuImg' + itemId).removeClass('glyphicon-camera text-primary').addClass('glyphicon-plus text-muted small');
        });
      },
      didUpload: function(error, data, response) {
        $('.img_menuItem').removeClass('imgPlaceholder').addClass('imgExists');
        $('#menuImg' + itemId).removeClass('glyphicon-plus text-muted small').addClass('glyphicon-camera text-primary');
      },

      meta: {
        imageType: 'menuItem',
        itemId: itemId,
      }
    });

    if (url != '') {
      cropper.load(url, { blockPush:true });
    }
  }

  initCropper();
});