let spec = {
  worker_id:        '-',
  ip_address:       '-',
  country:          '-',
  start_time:       '-',
  time:             '-',
  assign_status:    '-',
  approval_status:  '-'
}

let worker_specs = Object.create(spec),
    prev_specs   = Object.create(spec)

let divs = {
  worker_id:        document.getElementById('worker_id'),
  ip_address:       document.getElementById('ip_address'),
  country:          document.getElementById('country'),
  time:             document.getElementById('time'),
  assign_status:    document.getElementById('assign_status'),
  approval_status:  document.getElementById('approval_status')
}

let socket = io.connect('/')

socket.on('connection', function(){
  console.log('connected to node server')
})

let opacity = 0.1

socket.on('workerSpecs', function(data){
  Object.assign(prev_specs, worker_specs)
  worker_specs = data
  opacity = 0
})



let display_specs = function(){
  Object.keys(worker_specs).forEach(function(key){
    if(divs[key]){
      divs[key].innerText = worker_specs[key]
      divs[key].style = `opacity: ${opacity}`
    }
  })
  opacity == 1 ? opacity = 0 : opacity += 0.1
}





// ANIMATION ///////////////////////////////////////////////////////////////////

      let frames,
      frames_per_sec = 10,
      current_frame = 0

      function makeAnimation(){
        let now,
        delta = 0,
        last = timeStamp(),
        step = 1/frames_per_sec
        function frame() {
          now = timeStamp()
          delta += Math.min(1, (now - last) / 1000)
          while(delta > step){
            delta -= step
            update(step)
          }
          // render(delta)
          last = now
          requestAnimationFrame(frame)
        }
        requestAnimationFrame(frame)
      }

      //// update state according to framerate
      function update(step){

display_specs()


      }

      //// render as fast as possible
      // function render(delta){
      // }




                  //
                  // let time = (new Date().getTime() - worker_specs.start_time) / 1000
                  // worker_specs.time = time.toString()
                  // Object.keys(worker_specs).forEach( function(key){
                  //   if(divs[key]) while(divs[key].firstChild){divs[key].removeChild(divs[key].firstChild)}
                  //   for(let i = 0; i < worker_specs[key].length; i++){
                  //     let span = document.createElement('span')
                  //     worker_specs[key][i] == prev_specs[key][i] ? span.className = 'char_normal' : span.className = 'char_big'
                  //     span.innerText = worker_specs[key][i]
                  //     if(divs[key]) divs[key].append(span)
                  //   }
                  // })
                  // Object.assign(prev_specs, worker_specs)




      makeAnimation()


      function timeStamp(){return window.performance && window.performance.now ? window.performance.now() : new Date().getTime()}