Packery = require('packery')

jQuery(document).ready(() ->
  jQuery("#masonryslide-container").hide()
)

jQuery(document).on('click', '#pack', () ->
  container = jQuery("#masonryslide-container")
  container.show()
  jQuery("#masonryslide").width(container.width() - 100)
  jQuery("#masonryslide").height(container.height() - 300)

  promise = Promise.resolve()
  slide = document.getElementById('masonryslide')
  grid = new Packery(slide, {
    itemSelector: "img"
    percentPosition: true
    columnWidth: 100
  })
  for file in document.getElementById('masonryslide-files').files
    img = document.createElement("img")
    img.classList.add("obj")
    img.file = file
    jQuery("#masonryslide")[0].append(img)

    fr = new FileReader()
    fr.onload = ((aImg) ->
      (e) ->
        aImg.src = e.target.result
        if jQuery(aImg).width() > jQuery("#masonryslide").width()
          jQuery(aImg).width("100%")
        grid.layout()
        resolve()
    )(img)
    fr.readAsDataURL(file)

  promise.then(() ->
    items = jQuery(slide).find('img').draggable()
    grid.bindUIDraggableEvents(items)
  )
)

jQuery("#pngdownload").click(() ->
  canvas = document.getElementById("masonryslide")
  document.location.href = canvas.toDataUrl("image/png")
)