$(document).ready(()=>{

  const training = $('.training')
  const phone = training.find('.phone')
  const clouds = training.find('.cloud')
  const input = phone.find('.input-field')
  const content = phone.find('.content')
  const firstChild = content.find('.cloud').first()
  
  const delay = 1000
  let timer = 0
  let cloudCount = 0
  
  const people   = training.find('.people')
  const luca     = training.find('.people.luca')
  const sarah    = training.find('.people.sarah')
  const fabio    = training.find('.people.fabio')
  const maria    = training.find('.people.maria')
  const lucia    = training.find('.people.lucia')
  const paolo    = training.find('.people.paolo')
  
  luca.css({'top': '425px','left': '370px'})
  sarah.css({'top': '415px','left': '390px'}).fadeIn(400)
  maria.css({'top': '180px','left': '135px'})
  fabio.css({'top': '150px','left': '110px'})
  lucia.css({'top': '285px','left': '300px'}).fadeIn(700)
  paolo.css({'top': '250px','left': '390px'})
  
  setTimeout(()=>{
    clouds.each((index,elem)=>{
      const el = $(elem)
      timer = index*delay
      
      if(el.hasClass('empty') || el.hasClass('hidden')){
        timer -= delay
      }
      
      if(!el.hasClass('hidden')){
        setTimeout(()=>{
          if(!el.hasClass('empty')){
            $('#notify1')[0].play()
          }
          el.fadeIn(500)
        },timer)
      }
    })
    
    lucia.fadeIn().animate({'top': '345px','left': '250px'},700)
    
  }, delay)
  
  
  input.keypress((event)=> {
    
    if(event.which == 13){
      cloudCount++
      let newCloud = $('<div class="cloud right">' + input.val() + '</div>')
      content.append(newCloud)
      newCloud.fadeIn()
      $('#notify1')[0].play()
      input.val("")

            
      setTimeout(()=>{
        switch(cloudCount){
          case 1:
            
            newCloud = $('<div class="cloud left">Prendisole 192, Shirt 744.</div>')
            content.append(newCloud)
            newCloud.fadeIn(400)

            $('#notify1')[0].play()

          break;
            
        }
      },2000)
      
    }
    
  })
  
  
  $('.next').on('click',()=> {
    window.location = 'monitoring-intern'
  })

})