%gallery-caption
  +absolute(bottom 4rem left 50%)
  transform: translate(-50%,0%)
  font-size: 12px
  +breakpoint($mobile)
    font-size: 14px
  color: rgba(white,0)
  padding: 1.25em 1.5em
  transition: all .2s ease
  font-weight: 600
  // min-width: 10rem
  // width: 50%
  // max-width: calc(100% - 6rem)

  line-height: 1.25
  text-align: center
  box-sizing: border-box
  pointer-events: none

  &:before, &:after
    content: ''
    +absolute(top right left bottom)
    background: rgba(black,1)
    width: 100%
    height: 100%
    transition: all .3s ease 0s
    z-index: -1

  &:before
    top: auto
    height: 3px
    transform: scale(0,1)
    transform-origin: bottom left
    transition-delay: .6s

  &:after
    transform: scale(1,0)
    transform-origin: bottom
    transition-delay: .3s


  &.visible
    color: rgba(white,1)
    text-shadow: 0 0 1px rgba(black,.2)
    transition: all .3s ease .3s
    &:before
      transform: scale(1,1)
      transition-delay: 0s
    &:after
      transform: scale(1,1)

  &:empty
    display: none

$corner: 1rem

%image-border
  +relative
  &:before, &:after
    content: ''
    +absolute(top right left bottom)
    border: 0 solid rgba(black,.1)
    transition: all .2s
    will-change: border
    z-index: 10

  &.active
    &:before
      border-width: .5rem
    &:after
      border-width: 2px
  
  &:after
    margin: $corner
    border: 2px solid rgba(white,.5)
    clip-path: polygon(0 calc(100% - #{$corner}), 0 100%, $corner 100%, $corner 0, 0 0, 0 $corner, 100% $corner, 100% 0, calc(100% - #{$corner}) 0, calc(100% - #{$corner}) 100%, 100% 100%, 100% calc(100% - #{$corner}))

  &:hover
    &:after
      transform: scale(.9)
      border-color: rgba(white,1)

%caption-outside
  background-color: black
  color: white
  padding: .75em 1em
  display: inline-block
  text-align: left


%gallery-grid
  +sans-serif-font
  width: 100%
  display: grid
  grid-template-rows: flow
  grid-auto-flow: dense

  +breakpoint(max-width $mobile - 1px)
    grid-template-columns: repeat(2, 1fr)
  +breakpoint($mobile $desktop - 1px)
    grid-template-columns: repeat(3, 1fr)
  +breakpoint($desktop $laptop - px)
    grid-template-columns: repeat(4, 1fr)
  +breakpoint($laptop $screen - 1px)
    grid-template-columns: repeat(5, 1fr)  
  +breakpoint($screen)
    grid-template-columns: repeat(6, 1fr)  
%gallery-item
  +relative
  background-color: rgba(black,.5)
  overflow: hidden
  
  img, a
    display: block

  &.vertical
    grid-row: span 2

  &.horizontal
    grid-column: span 2
    
.gallery
  @extend %gallery-grid


.gallery-item
  @extend %gallery-item
  
  a
    display: block
    @extend %image-border

    .lazy-images &.image-lazyloaded, html:not(.lazy-images) &
      @extend %image-border.active


.gallery-caption

  html:not(.touchevents) &
    @extend %gallery-caption

  
  .gallery-item:hover &
    @extend %gallery-caption.visible

  [class*=list] &, .gallery-size-thumbnail &
    display: none

initPhotoSwipeFromDOM = (gallerySelector) ->
  # parse slide data (url, title, size ...) from DOM elements 
  # (children of gallerySelector)

  parseThumbnailElements = (el) ->
    thumbElements = el.childNodes
    numNodes = thumbElements.length
    items = []
    figureEl = undefined
    linkEl = undefined
    size = undefined
    item = undefined
    i = 0
    while i < numNodes
      figureEl = thumbElements[i]
      # <figure> element
      # include only element nodes 
      if figureEl.nodeType != 1
        i++
        continue
      linkEl = figureEl.children[0]
      # <a> element
      size = linkEl.getAttribute('data-size').split('x')
      # create slide object
      item =
        src: linkEl.getAttribute('href')
        w: parseInt(size[0], 10)
        h: parseInt(size[1], 10)
      if figureEl.children.length > 1
        # <figcaption> content
        item.title = figureEl.children[1].innerHTML
      if linkEl.children.length > 0
        # <img> thumbnail element, retrieving thumbnail url
        item.msrc = linkEl.children[0].getAttribute('src')
      item.el = figureEl
      # save link to element for getThumbBoundsFn
      items.push item
      i++
    items

  # find nearest parent element

  closest = (el, fn) ->
    el and (if fn(el) then el else closest(el.parentNode, fn))

  # triggers when user clicks on thumbnail

  onThumbnailsClick = (e) ->
    e = e or window.event
    if e.preventDefault then e.preventDefault() else (e.returnValue = false)
    eTarget = e.target or e.srcElement
    # find root element of slide
    clickedListItem = closest(eTarget, (el) ->
      el.tagName and el.tagName.toUpperCase() == 'FIGURE'
    )
    if !clickedListItem
      return
    # find index of clicked item by looping through all child nodes
    # alternatively, you may define index via data- attribute
    clickedGallery = clickedListItem.parentNode
    childNodes = clickedListItem.parentNode.childNodes
    numChildNodes = childNodes.length
    nodeIndex = 0
    index = undefined
    i = 0
    while i < numChildNodes
      if childNodes[i].nodeType != 1
        i++
        continue
      if childNodes[i] == clickedListItem
        index = nodeIndex
        break
      nodeIndex++
      i++
    if index >= 0
      # open PhotoSwipe if valid index found
      openPhotoSwipe index, clickedGallery
    false

  # parse picture index and gallery index from URL (#&pid=1&gid=2)

  photoswipeParseHash = ->
    hash = window.location.hash.substring(1)
    params = {}
    if hash.length < 5
      return params
    vars = hash.split('&')
    i = 0
    while i < vars.length
      if !vars[i]
        i++
        continue
      pair = vars[i].split('=')
      if pair.length < 2
        i++
        continue
      params[pair[0]] = pair[1]
      i++
    if params.gid
      params.gid = parseInt(params.gid, 10)
    params

  openPhotoSwipe = (index, galleryElement, disableAnimation, fromURL) ->
    pswpElement = document.querySelectorAll('.pswp')[0]
    gallery = undefined
    options = undefined
    items = undefined
    items = parseThumbnailElements(galleryElement)
    # define options (if needed)
    options =
      galleryUID: galleryElement.getAttribute('data-pswp-uid')
      getThumbBoundsFn: (index) ->
        # See Options -> getThumbBoundsFn section of documentation for more info
        thumbnail = items[index].el.getElementsByTagName('img')[0]
        pageYScroll = window.pageYOffset or document.documentElement.scrollTop
        rect = thumbnail.getBoundingClientRect()
        {
          x: rect.left
          y: rect.top + pageYScroll
          w: rect.width
        }
    # PhotoSwipe opened from URL
    if fromURL
      if options.galleryPIDs
        # parse real index when custom PIDs are used 
        # http://photoswipe.com/documentation/faq.html#custom-pid-in-url
        j = 0
        while j < items.length
          if items[j].pid == index
            options.index = j
            break
          j++
      else
        # in URL indexes start from 1
        options.index = parseInt(index, 10) - 1
    else
      options.index = parseInt(index, 10)
    # exit if index not found
    if isNaN(options.index)
      return
    if disableAnimation
      options.showAnimationDuration = 0
    # Pass data to PhotoSwipe and initialize it
    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options)
    gallery.init()
    return

  # loop through all gallery elements and bind events
  galleryElements = document.querySelectorAll(gallerySelector)
  i = 0
  l = galleryElements.length
  while i < l
    galleryElements[i].setAttribute 'data-pswp-uid', i + 1
    galleryElements[i].onclick = onThumbnailsClick
    i++
  # Parse URL and open gallery if it contains #&pid=3&gid=1
  hashData = photoswipeParseHash()
  if hashData.pid and hashData.gid
    openPhotoSwipe hashData.pid, galleryElements[hashData.gid - 1], true, true
  return

# execute above function
initPhotoSwipeFromDOM '.gallery'

# ---
# generated by js2coffee 2.2.0