var bg = (function(){

  var bg = {}
  var transitioning = false
  bg.el = document.getElementById("bg")
  
  bg.change = function(picture){
    bg.picture = picture
    
    var img = new Image ()
    img.src = picture.url
    
    transitioning = true
    if (transitioning) {
      bg.update()
      return
    }
    oktween.add({
      obj: bg.el.style,
      from: { opacity: 1 },
      to: { opacity: 0 },
      easing: "circ_in",
      duration: 200,
      finished: function(){
        bg.update()
      }
    }).then({
      delay: 500,
      to: { opacity: 1 },
      easing: "circ_in",
      duration: 200,
      finished: function(){
        transitioning = false
      }
    })
  }
  bg.update = function(){
    bg.el.style.backgroundImage = "url(" + bg.picture.url + ")"
    bg.el.className = bg.picture.tile ? "tile" : ""
  }
  return bg
  
})()