lightbox2/coffee/lightbox.coffee

###
Lightbox v2.51
by Lokesh Dhakar - http://www.lokeshdhakar.com

For more information, visit:
http://lokeshdhakar.com/projects/lightbox2/

Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
- free for use in both personal and commercial projects
- attribution requires leaving author name, author link, and the license info intact

Thanks
- Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.


Table of Contents
=================
LightboxOptions

Lightbox
- constructor
- init
- enable
- build
- start
- changeImage
- sizeContainer
- showImage
- updateNav
- updateDetails
- preloadNeigbhoringImages
- enableKeyboardNav
- disableKeyboardNav
- keyboardAction
- end

options = new LightboxOptions
lightbox = new Lightbox options

###

# Use local alias
$ = jQuery

class LightboxOptions
  constructor: ->
    @fileLoadingImage = 'images/loading.gif'
    @fileCloseImage = 'images/close.png'
    @resizeDuration = 700
    @fadeDuration = 500
    @labelImage = "Image" # Change to localize to non-english language
    @labelOf = "of"


class Lightbox
  constructor: (@options) ->
    @album = []
    @currentImageIndex = undefined
    @init()


  init: ->
    @enable()
    @build()


  # Loop through anchors and areamaps looking for rel attributes that contain 'lightbox'
  # On clicking these, start lightbox.
  enable: ->
    $('body').on 'click', 'a[rel^=lightbox], area[rel^=lightbox]', (e) =>
      @start $(e.currentTarget)
      false


  # Build html for the lightbox and the overlay.
  # Attach event handlers to the new DOM elements. click click click
  build: ->
    $("<div id='lightboxOverlay'></div><div id='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' ><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'><img src='" + @options.fileLoadingImage + "'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'><img src='" + @options.fileCloseImage + "'></a></div></div></div></div>").appendTo($('body'));

    # Attach event handlers to the newly minted DOM elements
    $('#lightboxOverlay')
      .hide()
      .on 'click', (e) =>
        @end()
        return false

    $lightbox = $('#lightbox')

    $lightbox
      .hide()
      .on 'click', (e) =>
        if $(e.target).attr('id') == 'lightbox' then @end()
        return false

    $lightbox.find('.lb-outerContainer').on 'click', (e) =>
      if $(e.target).attr('id') == 'lightbox' then @end()
      return false

    $lightbox.find('.lb-prev').on 'click', (e) =>
      @changeImage @currentImageIndex - 1
      return false

    $lightbox.find('.lb-next').on 'click', (e) =>
      @changeImage @currentImageIndex + 1
      return false

    $lightbox.find('.lb-loader, .lb-close').on 'click', (e) =>
      @end()
      return false

    return

  # Show overlay and lightbox. If the image is part of a set, add siblings to album array.
  start: ($link) ->
    $(window).on "resize", @sizeOverlay

    $('select, object, embed').css visibility: "hidden"
    $('#lightboxOverlay')
      .width( $(document).width())
      .height( $(document).height() )
      .fadeIn( @options.fadeDuration )

    @album = []
    imageNumber = 0

    if $link.attr('rel') == 'lightbox'
      # If image is not part of a set
      @album.push link: $link.attr('href'), title: $link.attr('title')
    else
      # Image is part of a set
      for a, i in $( $link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]')
        @album.push link: $(a).attr('href'), title: $(a).attr('title')
        if $(a).attr('href') == $link.attr('href')
          imageNumber = i

    # Position lightbox
    $window = $(window)
    top = $window.scrollTop() + $window.height()/10
    left = $window.scrollLeft()
    $lightbox = $('#lightbox')
    $lightbox
      .css
        top: top + 'px'
        left: left + 'px'
      .fadeIn( @options.fadeDuration)

    @changeImage(imageNumber)
    return


  # Hide most UI elements in preparation for the animated resizing of the lightbox.
  changeImage: (imageNumber) ->

    @disableKeyboardNav()
    $lightbox = $('#lightbox')
    $image = $lightbox.find('.lb-image')

    @sizeOverlay()
    $('#lightboxOverlay').fadeIn( @options.fadeDuration )

    $('.loader').fadeIn 'slow'
    $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide()

    $lightbox.find('.lb-outerContainer').addClass 'animating'

    # When image to show is preloaded, we send the width and height to sizeContainer()
    preloader = new Image
    preloader.onload = () =>
      $image.attr 'src', @album[imageNumber].link
      # Bug fix by Andy Scott
      $image.width = preloader.width
      $image.height = preloader.height
      # End of bug fix
      @sizeContainer preloader.width, preloader.height

    preloader.src = @album[imageNumber].link
    @currentImageIndex = imageNumber
    return


  # Stretch overlay to fit the document
  sizeOverlay: () ->
    $('#lightboxOverlay')
      .width( $(document).width())
      .height( $(document).height() )


  # Animate the size of the lightbox to fit the image we are showing
  sizeContainer: (imageWidth, imageHeight) ->
    $lightbox = $('#lightbox')

    $outerContainer = $lightbox.find('.lb-outerContainer')
    oldWidth = $outerContainer.outerWidth()
    oldHeight = $outerContainer.outerHeight()

    $container = $lightbox.find('.lb-container')
    containerTopPadding = parseInt $container.css('padding-top'), 10
    containerRightPadding = parseInt $container.css('padding-right'), 10
    containerBottomPadding = parseInt $container.css('padding-bottom'), 10
    containerLeftPadding = parseInt $container.css('padding-left'), 10

    newWidth = imageWidth + containerLeftPadding + containerRightPadding
    newHeight = imageHeight + containerTopPadding + containerBottomPadding

    # Animate just the width, just the height, or both, depending on what is different
    if newWidth != oldWidth && newHeight != oldHeight
      $outerContainer.animate
        width: newWidth,
        height: newHeight
      , @options.resizeDuration, 'swing'
    else if newWidth != oldWidth
      $outerContainer.animate
        width: newWidth
      , @options.resizeDuration, 'swing'
    else if newHeight != oldHeight
      $outerContainer.animate
        height: newHeight
      , @options.resizeDuration, 'swing'

    # Wait for resize animation to finsh before showing the image
    setTimeout =>
      $lightbox.find('.lb-dataContainer').width(newWidth)
      $lightbox.find('.lb-prevLink').height(newHeight)
      $lightbox.find('.lb-nextLink').height(newHeight)
      @showImage()
      return
    , @options.resizeDuration

    return


  # Display the image and it's details and begin preload neighboring images.
  showImage: ->
    $lightbox = $('#lightbox')
    $lightbox.find('.lb-loader').hide()
    $lightbox.find('.lb-image').fadeIn 'slow'

    @updateNav()
    @updateDetails()
    @preloadNeighboringImages()
    @enableKeyboardNav()

    return


  # Display previous and next navigation if appropriate.
  updateNav: ->
    $lightbox = $('#lightbox')
    $lightbox.find('.lb-nav').show()
    if @currentImageIndex > 0 then $lightbox.find('.lb-prev').show();
    if @currentImageIndex < @album.length - 1 then $lightbox.find('.lb-next').show();
    return

  # Display caption, image number, and closing button.
  updateDetails: ->
    $lightbox = $('#lightbox')

    if typeof @album[@currentImageIndex].title != 'undefined' && @album[@currentImageIndex].title != ""
      $lightbox.find('.lb-caption')
        .html( @album[@currentImageIndex].title)
        .fadeIn('fast')

    if @album.length > 1
      $lightbox.find('.lb-number')
        .html( @options.labelImage + ' ' + (@currentImageIndex + 1) + ' ' + @options.labelOf + '  ' + @album.length)
        .fadeIn('fast')
    else
      $lightbox.find('.lb-number').hide()

    $lightbox.find('.lb-outerContainer').removeClass 'animating'

    $lightbox.find('.lb-dataContainer')
      .fadeIn @resizeDuration, () =>
        @sizeOverlay()
    return


  # Preload previos and next images in set.
  preloadNeighboringImages: ->
   if @album.length > @currentImageIndex + 1
      preloadNext = new Image
      preloadNext.src = @album[@currentImageIndex + 1].link

    if @currentImageIndex > 0
      preloadPrev = new Image
      preloadPrev.src = @album[@currentImageIndex - 1].link
    return


  enableKeyboardNav: ->
    $(document).on 'keyup.keyboard', $.proxy( @keyboardAction, this)
    return


  disableKeyboardNav: ->
    $(document).off '.keyboard'
    return


  keyboardAction: (event) ->
    KEYCODE_ESC = 27
    KEYCODE_LEFTARROW = 37
    KEYCODE_RIGHTARROW = 39

    keycode = event.keyCode
    key = String.fromCharCode(keycode).toLowerCase()

    if keycode == KEYCODE_ESC || key.match(/x|o|c/)
      @end()
    else if key == 'p' || keycode == KEYCODE_LEFTARROW
      if @currentImageIndex != 0
          @changeImage @currentImageIndex - 1
    else if key == 'n' || keycode == KEYCODE_RIGHTARROW
      if @currentImageIndex != @album.length - 1
          @changeImage @currentImageIndex + 1
    return


  # Closing time. :-(
  end: ->
    @disableKeyboardNav()
    $(window).off "resize", @sizeOverlay
    $('#lightbox').fadeOut @options.fadeDuration
    $('#lightboxOverlay').fadeOut @options.fadeDuration
    $('select, object, embed').css visibility: "visible"


$ ->
  options = new LightboxOptions
  lightbox = new Lightbox options