     $('#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')


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


class 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
      
      # set image size limit
      innerWidth  = window.innerWidth  || document.documentElement.clientWidth
      innerHeight = window.innerHeight || document.documentElement.clientHeight
