```coffeescript
class @Overlay
  constructor: (selector, options) ->
    @selector = selector
    @options = options
    self = this
    @overlay = $("<div class='overlay'></div>")

    $(@selector).click (event) ->
      event.preventDefault()
      self.open(this)

    $(document).on 'keyup', (event) ->
      return unless event.which == 27
      self.close()


  open: (target) ->
    overlayContent = $(target).find('.js-overlay').remove()

    @overlay.append(overlayContent)
    $('body').append(@overlay)

    maxWidth = $(window).width() - 20
    maxHeight = $(window).height() - 20

    commentWidth = 309
    maxPhotoWidth = 1024
    maxPhotoHeight = 768
    totalWidth = maxPhotoWidth + commentWidth

    if totalWidth > maxWidth
      width = maxWidth
    else
      width = totalWidth

    if maxPhotoHeight > maxHeight
      height = maxHeight
    else
      height = maxPhotoHeight

    heightRatio = height / maxPhotoHeight
    widthRatio = width / maxPhotoWidth

    if heightRatio > widthRatio
      height = maxPhotoHeight * widthRatio
    else if widthRatio > heightRatio
      width = (maxPhotoWidth * heightRatio) + commentWidth

    margin = (maxWidth - width) / 2

    top = window.scrollY + 10

    @overlay.css('left', margin)
    @overlay.css('top', top)
    @overlay.width(width)
    @overlay.height(height)

    $('body').addClass('scroll-lock')

    overlayContent.show()

  close: ->
    @overlay.hide()
    $('body').removeClass('scroll-lock')
```

Allow overlay to be opened multiple times
user
```coffeescript
class @Overlay
  constructor: (selector, options) ->
    @selector = selector
    @options = options
    self = this
    @overlay = $("<div class='overlay'></div>")
    $('body').append(@overlay)

    $(@selector).click (event) ->
      event.preventDefault()
      self.open(this)

    $(document).on 'keyup', (event) ->
      return unless event.which == 27
      self.close()


  open: (target) ->
    overlayContent = $(target).find('.js-overlay').clone()

    @overlay.append(overlayContent)

    maxWidth = $(window).width() - 20
    maxHeight = $(window).height() - 20

    commentWidth = 309
    maxPhotoWidth = 1024
    maxPhotoHeight = 768
    totalWidth = maxPhotoWidth + commentWidth

    if totalWidth > maxWidth
      width = maxWidth
    else
      width = totalWidth

    if maxPhotoHeight > maxHeight
      height = maxHeight
    else
      height = maxPhotoHeight

    heightRatio = height / maxPhotoHeight
    widthRatio = width / maxPhotoWidth

    if heightRatio > widthRatio
      height = maxPhotoHeight * widthRatio
    else if widthRatio > heightRatio
      width = (maxPhotoWidth * heightRatio) + commentWidth

    margin = (maxWidth - width) / 2

    top = window.scrollY + 10

    @overlay.css('left', margin)
    @overlay.css('top', top)
    @overlay.width(width)
    @overlay.height(height)
    @overlay.show()

    $('body').addClass('scroll-lock')

    overlayContent.show()

  close: ->
    @overlay.empty().hide()
    $('body').removeClass('scroll-lock')
```
assistant