ObserveJS.bind 'Post.Header', class

loaded: =>
  @on 'click', @element().querySelector('p.browse'), @open
  @on 'click', @element().querySelector('svg.clear'), @remove
  @on 'change', @element().querySelector('input[type=file]'), @submit
  @on 'dragover', @over
  @on 'dragleave', @cancel
  @on 'drop', @drop

  @when 'ObserveJS:XHR:Failed', @failed

  @on 'images:create', @refresh
  @on 'images:destroy', @refresh

  @when 'scroll', @resize

  @maxHeight = parseFloat(window.getComputedStyle(this.element())['height'])

  @resize()

resize:  =>
  if document.querySelector('main').classList.contains('overlayed')
    return

  height = @maxHeight - document.body.scrollTop
  if height < 0
    height = 0

  if height != @maxHeight
    @element().querySelector('nav').classList.add 'hidden'
  else
    @element().querySelector('nav').classList.remove 'hidden'

  @element().style.height = "#{height}px"

show: (el) =>
  @show.container ||= @element().querySelector('div.drop')
  unless el.parentElement?
    @element().querySelector('div.drop').appendChild(el)

  for child in @show.container.children
    child.classList.add 'hidden'

  el.classList.remove('hidden')

hide: (el) =>
  el.classList.add('hidden')

outside: (e, rect) ->
  e.x >= (rect.left + rect.width) ||
  e.x <= rect.left ||
  e.y >= (rect.top + rect.height) ||
  e.y <= rect.top

progress: (e) =>
  return unless e.lengthComputable
  percentComplete = e.loaded / e.total * 100.0;
  progressBar = @element().querySelector('div.status.uploading .progressbar')
  progressBar.firstElementChild.style.width = "#{percentComplete}%";

failed: (e) =>
  errors = JSON.parse(e.response.target.responseText)
  @hide(@template('div.status.uploading'))
  @show(@template('div.error.status'))
  ul = @template('div.error.status').querySelector('ul')
  @on 'click', @element().querySelector('div.error.status button'), @clear
  for error in errors
    ul.insertAdjacentHTML('beforeend', "<li>#{error}</li>")

open: (e) =>
  @element().querySelector('input[type=file]').click()

remove: (e) =>
  xhr = new ObserveJS.XHR(e.currentTarget)
  xhr.request.upload.onprogress = @progress
  xhr.send()
  @show(@template('div.status.uploading'))

over: (e) =>
  e.preventDefault()
  if !@element().classList.contains('image')
    @element().classList.add 'image'
    @show(@template('div.dropping.status'))

cancel: (e) =>
  e.preventDefault()
  rect = @element().getBoundingClientRect()
  if @outside(e, rect)
    @clear(e)

drop: (e) =>
  e.preventDefault()
  if e.dataTransfer.files.length > 0
    @upload(e.dataTransfer.files[0])

submit: (e) =>
  if e.target.files.length > 0
    @upload(e.target.files[0])

  e.target.value = ''

upload: (file) =>
  if !@element().classList.contains('image')
    @element().classList.add 'image'

  @show(@template('div.status.uploading'))
  @template('div.status.uploading').querySelector('.progressbar > span').style.width = '0%';
  xhr = new ObserveJS.XHR(@element())
  xhr.data.set 'image[file]', file
  xhr.request.upload.onprogress = @progress
  xhr.send()

loading: =>
  @element().firstElementChild.appendChild(@template('div.status.uploading'))

clear: (e) =>
  @element().classList.remove 'image'
  for li in @template('div.error.status').querySelectorAll('li')
    li.remove()

  for status of @statuses
    @statuses[status].classList.add 'hidden'

  if @element().style.backgroundImage.length == 0
    @element().querySelector('svg.clear').classList.add('hidden')
  else
    @element().querySelector('svg.clear').classList.remove('hidden')

refresh: (e) =>
  if e.headerURL?
    @element().style.backgroundImage = "url(#{e.headerURL})"
  else
    @element().style.backgroundImage = null

  @clear()