scrivito.on 'content', (content) ->
  return unless scrivito.in_editable_view()
  $(content).find(  '''
      img[data-scrivito-field-type=binary]:not([data-editor]),
      [data-editor~=image]
    ''').each -> setup_edit_btn $(this)

setup_edit_btn = (element) ->
  scrivito.editors._setup_binary_button_container(element, 'scrivito-editor-image-button-container')

  if element.scrivito('content')
    $("<a href='#' class='edit-image editing-button'>
       <i class='editing-icon editing-icon-edit'></i></a>")
      .insertBefore(element)
      .click (event) ->
        event.preventDefault()
        open_image_editing_dialog(element)

open_image_editing_dialog = (element) ->
  content = $("<div class='image_kit_start' />")
  dialog = scrivito.dialog(content, open_image_editing_dialog_options())
  setup_image_kit_container(element, dialog)

open_image_editing_dialog_options = ->
  dialog_options =
    color: "dark"
    confirm:
      title: "Confirm"
      color: "green"
    cancel:
      title: "Cancel"
      color: "lightgrey"

scrivito_imgly_asset_path_resolver = (path) ->
  <%= ScrivitoEditors::Engine.imgly_assets { |file| image_path(file) }.to_json %>[path]

setup_image_kit = (image, container) ->
  new ImglyKit(
    renderer: "canvas"
    assetsUrl: "imgly_sdk"
    image: image
    versionCheck: false
    container: container[0]
    ui:
      enabled: true
      assetPathResolver: scrivito_imgly_asset_path_resolver
  )

setup_image_kit_container = (element, dialog) ->
  container = $(".image_kit_start")
  image = new Image()
  url = element.scrivito("content").url

  #Order is important for CORS problem in browsers http://stackoverflow.com/a/18422548
  image.crossOrigin = "Anonymous"
  image.src = url

  #S3 compatible (as of 2015-10) workaround to prevent crossOrigin warnings in chrome and safari
  fallbackUrl = url
  if url.indexOf("?") < 0
    fallbackUrl = url + "?=" + new Date().getTime()
  else
    fallbackUrl = url + "&=" + new Date().getTime()

  image.onerror = ->
    if image.src is fallbackUrl
      $("""
      <div style='padding:20px'>
        <h1>We're sorry,</h1>
        <p>Scrivito can't edit this image in your browser. What now?</p>
        <ul>
          <li>Check for browser updates</li>
          <li>Try using a different browser</li>
          <li>Contact us at
            <a href="https://scrivito.com/support" target="_blank">https://scrivito.com/support</a>
          </li>
        </ul>
      </div>
      """).appendTo(container)
    else
      console.info("Scrivito detected a probable CORS browser cache mismatch, trying uncached load")
      image.src = fallbackUrl

  image.onload = ->
    kit = setup_image_kit(image, container)
    kit.ui.selectOperations(except: "stickers")
    kit.run()
    dialog.when_closed.then(=> save_edited_image(element, kit))

save_edited_image = (element, kit) ->
  kit.render("blob", "image/jpeg").then (blob) ->
    element.scrivito "save",
      scrivito.upload_binary
        blob: blob
        filename: element.scrivito("content").filename
    .then -> element.scrivito("reload")