_form.html.slim

= simple_form_for [ :backend, resource ] do |f|
  = f.input :name_ca, required: true
  = f.input :name_es, required: true
  = f.input :description_ca, as: :text
  = f.input :description_es, as: :text

  #illustration
    = f.input :image
    = f.hidden_field :image_cache
    - if resource.image?
      = f.hidden_field :thumbnail_coordinates
      = image_tag(resource.image.url, id: 'image') if resource.image?

      #thumb_container
        = image_tag resource.image.url, id: 'thumb'

  = f.association :category, collection: Category.all
  = f.submit

javascript:
  var jcrop_api;
  function showPreview(coords)
  {
    var image = $('#image');
    var thumb_container = $('#thumb_container');

    var rx = thumb_container.width() / coords.w;
    var ry = thumb_container.height() / coords.h;

    $('#thumb').css({
      width: Math.round(rx * image.width()) + 'px',
      height: Math.round(ry * image.height()) + 'px',
      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
      marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
  };

  function update_form(coords) {
    var json = JSON.stringify(coords);
    var thumb_input = $('#illustration_thumbnail_coordinates')

    thumb_input[0].value = json;
    showPreview(coords);
  }

-if resource.thumbnail_coordinates.blank?
  javascript:
    $(function(){
      $('#image').Jcrop({
        onChange: update_form,
        onSelect: update_form,
        aspectRatio: 1
      });
    });
-else
  javascript:
    $(function(){
      $('#image').Jcrop({
        onChange: update_form,
        onSelect: update_form,
        aspectRatio: 1
      },function(){
        this.setSelect([#{select_current_coordinates(resource.thumbnail_coordinates)}]);
        showPreview(#{resource.thumbnail_coordinates.to_json.html_safe});
      });
    });