ismobile = /android|blackberry|iphone|opera mini|iemobile/i.test navigator.userAgent

# -- config --

debug = true
numstars = if ismobile then 10 else 60
min_star_size = 4
max_star_size = 12
poll_exchange_interval = 3
poll_marketcap_interval = 60

# -- utility --

rand = (lbnd, ubnd) -> Math.round((Math.random() * (ubnd - lbnd)) + lbnd)

# -- create stars in background --

stars = for _ in [1..numstars]
  x = rand 0, 100
  y = rand 0, 100
  size = rand min_star_size, max_star_size
  red = green = rand 180, 255
  star = document.createElement 'div'
  star.distance = rand 10, 100
  star.style.right = x + '%'
  star.style.top = y + '%'
  star.style.width = size + 'px'
  star.style.height = size + 'px'
  star.style.borderRadius = size / 2 + 'px'
  star.style.backgroundColor = "rgb(#{red}, #{green}, 255)"
  document.getElementById('stars').appendChild star
  star

# -- state transitions --
#
# there are 3 states: cruising, excited and fullham

spaceship = document.getElementById 'spaceship'

star_heights = (star.style.height for star in stars)

warp = ->
  # first stretch stars to create accelerating feel
  for star in stars
    Velocity star,
        {width: "#{star.distance * 0.35}%"},
        {
            duration: 1000, easing: 'ease-in',
            complete: -> document.body.className = 'excited'
        }

  # then shift
  for star in stars
    Velocity star, {marginRight: "#{star.distance * 0.7}%"}, {duration: 400}
    Velocity star, 'reverse', {duration: 1000}

  # while stars shift, the spaceship goes back a little bit, then launches
  # speedily to the right and gradually moves back to the center
  Velocity spaceship, {left: '-=20%'}, {duration: 1000}
  Velocity spaceship, {left: '+=45%'}, {duration: 400}
  Velocity spaceship, {left: '-=25%'}, {duration: 1300}

unwarp = ->
  # unstretch stars
  for star, i in stars
    Velocity star,
      {width: star_heights[i]},
      {
        duration: 1000, easing: 'ease-in',
        complete: -> document.body.className = 'cruising'
      }

transitions =
  cruising_excited: warp
  excited_cruising: unwarp

curstate = document.body.className

set_state = (newstate) ->
  if newstate != curstate
    console.log 'set state from', curstate, 'to', newstate
    transitions[curstate + '_' + newstate]?()
    curstate = newstate

if debug
  document.addEventListener 'keypress', (e) ->
    switch String.fromCharCode e.charCode
      when 'c' then set_state 'cruising'
      when 'e' then set_state 'excited'
      when 's' then set_state 'static'

  document.addEventListener 'click', (e) ->
    if document.body.className == 'cruising'
      set_state 'excited'
    else
      set_state 'cruising'

# -- polling --

do ->
  exchange = 'btce' # TODO: get from select box
  currency_signs =
    USD: '$'

  price = document.getElementById 'price'
  cap = document.getElementById 'cap'

  poll = (url, cb) ->
    xhr = new XMLHttpRequest
    xhr.onreadystatechange = ->
        if xhr.readyState == 4 and xhr.status == 200
            cb JSON.parse xhr.responseText
    xhr.open 'GET', url, true
    xhr.send()

  poll_exchange = ->
    poll 'poll/' + exchange, (d) ->
      price.innerHTML = currency_signs[d.currency] + d.last #.toFixed 2
      # TODO: set state depending on price changes (maybe best determine this
      # on server)

  poll_marketcap = ->
    poll 'poll/coinmarketcap', (d) ->
      cap.innerHTML = currency_signs[d.currency] + d.last
      # TODO: maybe some animation if it changes?

  # XXX: disabled polling for debugging
  poll_exchange()
  poll_marketcap()

  setInterval poll_exchange, poll_exchange_interval * 1000
  setInterval poll_marketcap, poll_marketcap_interval * 1000
