‘use strict’

# Simple “zooming lightbox” that doesn’t suck. # # Basic usage: # $(‘.body img’).picture_zoomer() # # // Faster animation # $(‘.body img’).picture_zoomer(200) # # // Don’t animate # $(‘.body img’).picture_zoomer(0) # # The url for the large version is either ‘data-large’, or the image src jQuery.fn.picture_zoomer = (speed=400) ->

$(this).on 'click', (e) ->
  e.preventDefault()
  if $(this).is('img')
    zoom $(this), speed
  else
    zoom $(this).find('img'), speed

get_scroll = -> document.documentElement.scrollTop or document.body.scrollTop

zoom = (img, speed) ->

large = $(new Image())
large.attr 'src', (img.attr('data-large') or img.attr('src'))
offset = img.offset()

large.on 'load', ->
  width = large.prop 'width'
  height = large.prop 'height'

  # Don't make it larger than the window
  w_width = $(window).width() - 25
  w_height = $(window).height() - 25
  if width > w_width
    height = height / (width / w_width)
    width = w_width
  if height > w_height
    width = width / (height / w_height)
    height = w_height

  large.css
    width: img.width()
    height: img.height()
    left: offset.left
    top: offset.top
    position: 'absolute'
    'box-shadow': '0 0 8px rgba(0, 0, 0, .3)'
    'z-index': 5000
  $(document.body).append large

  large.animate {
    width: width
    height: height
    left: ($(window).width() - width) / 2
    top: ($(window).height() + $('#menu').height() - height) / 2 + get_scroll()
  }, {
    duration: speed
  }

  # Close
  close = ->
    large.animate {
      width: img.width()
      height: img.height()
      left: offset.left
      top: offset.top
    }, {
      duration: speed
      complete: -> large.remove()
    }
  $(document.body).one 'click', close
  $(document).on 'keydown.photo_viewer', (e) ->
    return unless e.keyCode is 27 # Esc
    close()
    $(document).off 'keydown.photo_viewer'