d = document
counter = 1
anchor = d.getElementById('anchor')
target = d.getElementById('target')

removeCurrentField = (counter) ->
  temp_counter = counter - 1
  closeButton = d.getElementById('img-close-' + temp_counter)

  closeButton.onclick = ->
    d.getElementById('img-data-' + temp_counter).remove()
    return

  return

showPreviewImage = ->
  temp_counter = counter - 1
  fileField = d.getElementById('img-file-' + temp_counter)
  imgPreview = d.getElementById('img-test-' + temp_counter)
  nameField = d.getElementById('img-name-' + temp_counter)
  file = fileField.files[0]
  reader = new FileReader
  data = d.getElementById('img-data-' + temp_counter)
  nameField.value = file.name
  data.classList.remove 'hidden'
  fileField.classList.add 'hidden'
  nameField.classList.remove 'hidden'
  reader.addEventListener 'load', ->
    imgPreview.src = reader.result
    return
  reader.readAsDataURL file
  return

createNextField = ->
  counter++
  target.setAttribute 'for', 'img-file-' + counter
  anchor.insertAdjacentHTML 'beforeend', createImgDataStructure(counter)
  removeCurrentField counter
  showPreviewImage()
  return

createImgDataStructure = (counter) ->
  '<div class="hidden img-preview" id="img-data-' + counter + '"><input id="img-file-' + counter + '" name="storage_reference[]" type="file"><img class ="img-attachment" id="img-test-' + counter + '"><input class="img-name" id="img-name-' + counter + '" type="text"><span class="glyphicon glyphicon-remove img-close" id="img-close-' + counter + '" aria-hidden="true"></span></div>'

anchor.addEventListener 'change', createNextField

# ---
# generated by js2coffee 2.2.0