<ul class="menu js-thumbs">
  
</ul>

<div class="gallery">
  <div class="gallery__info">
    
  </div>
  
  <div class="gallery__theme js-theme-bg">
    <span class="js-theme">
      <img>
    </span>
  </div>
  <div class="gallery__large">
    <img class="js-image loading" id="main">
    <div class="gallery__credit">Photo by   <span class="js-credit"></span></div>
    </div>
    
  </div>
  

$layout-menu-x = 150px
$bg = #111

*
  box-sizing: border-box

body, html
  width: 100%
  height: 100%
  background: $bg
  padding: 0
  margin: 0
  font-family: 'arial'

.menu
  position: absolute
  top: 0
  left: 0
  width: $layout-menu-x
  height: 100%
  background: $bg
  background: #111
  overflow: scroll
  list-style: none
  padding: 20px 0
  margin: 0
  text-align: center
  z-index: 1
  
  li
    display: inline-block
    margin-bottom: 20px
    opacity: 0.3
    transition: opacity 400ms
    cursor: pointer
    
    &:hover
      opacity: 1
      transition: opacity 200ms
    
    &:last-child
      margin-bottom: 0
    
    &.active
      opacity: 1
      cursor: default
  
  img
    max-width: 80%
    max-height: 140px
    
.gallery
  position: absolute
  left: $layout-menu-x
  right: 0
  top: 0
  bottom: 0
  margin: auto
  
.gallery__theme
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  margin: auto
  opacity: 0.5
  overflow: hidden
  transition: opacity 400ms
  
  &.loading
    opacity: 0
  
  span
    display: block
    position: absolute
    top: -20px
    right: -20px
    bottom: -20px
    left: -20px
    background-size: cover
    opacity: 0.6
    
    &.loading img
      opacity: 0.1
    
    img
      display: block
      top: -10px
      right: -10px // Avoid blur underlap.
      bottom: -10px
      left: -10px
      margin: auto
      min-width: 110%
      background-blend-mode: multiply
      min-height: 110%
      mix-blend-mode: multiply
      filter: blur(5px)

.gallery__credit
  position: absolute
  right: 0
  bottom: 0
  padding: 20px 30px
  color: #fff
  font-size: 12px
  opacity: 0.3
  transition: opacity 0.6s
  
  a
    color: #fff
    text-decoration: underline

.gallery__info
  position: absolute
  right: 30px
  top: 30px
  color: white
  font-size: 13px
  
.gallery__large
  img
    position: absolute
    display: block
    top: 0
    right: 0
    bottom: 0
    left: 0
    margin: auto
    max-width: 80%
    max-height: 80%
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5)
    transition: opacity 0.4s
    
    &.loading
      opacity: 0
      
      + .gallery__credit
        opacity: 0
      
    

URL_DATA = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/unsplash-photos.json'
URL_BASE = 'https://images.unsplash.com/photo-'
URL_EXT_LG = '?w=1000'
URL_EXT_TH = '?w=300'
TRANSITION_DUR = 400

images = null

$thumbs = null
$mainImage = null
$themeImage = null
$themeBg = null
$user = null

renderThumbs = ->
  for val in images
    url = val.urls.small
    $thumbs.append '<li><img src="' + url + '"></li>'
    
  $thumbs.find('img').on('click', ->
    if $(this).parent().hasClass 'active' then return
    setImage($(this).parent().index())
  )
    
setImage = (i = 0) ->
  image = images[i]
  loadMainImage image
  loadThemeImage image
  updateThumbs i
  updateCredit image.user
  $themeBg.css('background', image.color)

updateThumbs = (i) ->
  $thumbs.children().removeClass 'active'
  $thumbs.children().eq(i).addClass 'active'
  
updateCredit = (user) ->
  setTimeout ->
    $user.html """<a href="#{user.links.html}" target="_blank">#{user.name}</a>"""
  , TRANSITION_DUR, user
 
loadThemeImage = (image) ->
  $themeImage.css('backgroundColor',  image.color)
  $themeImage.addClass 'loading'
  setTimeout ->
    $themeImage.children('img').attr('src', image.urls.regular)
    setTimeout ->
      $themeImage.removeClass 'loading'
    , TRANSITION_DUR
  , TRANSITION_DUR, image
  
loadMainImage = (image) ->
  $mainImage.addClass 'loading'
  setTimeout ->
    $mainImage.attr 'src', image.urls.regular
    $mainImage.on 'load', ->
      setTimeout ->
        $mainImage.removeClass 'loading'
      , TRANSITION_DUR
   , TRANSITION_DUR

init = ->
  $thumbs = $('.js-thumbs')
  $mainImage = $('.js-image')
  $themeImage = $('.js-theme')
  $themeBg = $('.js-theme-bg')
  $user = $('.js-credit')
  
  $.getJSON URL_DATA, (data) ->
    images = data
    renderThumbs()
    setImage()
  
$(document).ready ->
  init()