$(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.mariaSel')
  const lucia    = training.find('.people.lucia')
  const paolo    = training.find('.people.paoloSel')
  
  luca.css({'top': '425px','left': '370px'}).fadeIn(400)
  sarah.css({'top': '415px','left': '390px'})
  fabio.css({'top': '150px','left': '110px'}).fadeIn(600)
  maria.css({'top': '180px','left': '135px'})
  lucia.css({'top': '345px','left': '250px'}).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)
      }
    })
    
    
    maria.fadeIn().animate({'top': '195px','left': '165px'},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:
            
            maria.animate({'top': '180px','left': '230px'},1000, ()=>{
              maria.animate({'top': '225px','left': '350px'},1500)
            })
            
            newCloud = $('<div class="cloud left">Dammi informazioni sulla nazionalità.</div>')
            content.append(newCloud)
            newCloud.fadeIn(400,()=>{
              offset = newCloud.offset().top - content.offset().top - 20
              firstChild.animate({'margin-top': '-' + offset},400)
            })
            
            $('#notify1')[0].play()
            
            $('.page-title').text('Richiesta informazioni')
      
          break;
            
          case 2:
            newCloud = $('<div class="cloud left">Su cosa desideri informazioni?</div>')
            content.append(newCloud)
            
            newCloud.fadeIn(400,()=>{
              offset = newCloud.offset().top - content.offset().top - 20
              firstChild.animate({'margin-top': '-' + offset},400)
            })
            
            newCloud = $('<div class="cloud empty">' +
                          '<button class="button dotted" onClick="btnClick(this)">Approccio</button>' +
                          '<button class="button dotted" onClick="btnClick(this)">Saluti</button>' +
                          '<button class="button dotted" onClick="btnClick(this)">Da evitare</button>' +
                          '<button class="button dotted" onClick="btnClick(this)">Altro</button>' +
                          '</div>')
            
            content.append(newCloud)
            
            newCloud.fadeIn(400,()=>{
              offset = newCloud.offset().top - content.offset().top - 20
              firstChild.animate({'margin-top': '-' + offset},400)
            })

            $('#notify1')[0].play()
          break;
            
        }
      },2000)
      
    }
    
  })
  
  
  $('.next').on('click',()=> {
    window.location = 'training-push'
  })

}) 
 

function btnClick(event){
  
  const content = $('.training .phone .content')
  const firstChild = content.find('.cloud').first()
  
  newCloud = $('<div class="cloud right">' + $(event).text() + '</div>')
  content.append(newCloud)
  
  newCloud.fadeIn(400,()=>{
    
    offset = newCloud.offset().top - content.offset().top - 20
    firstChild.animate({'margin-top': '-' + offset},400)
    
  })
  
  $('#notify1')[0].play()
  
  setTimeout(()=>{
    
      newCloud = $('<div class="cloud left">Ricordati di non avvicinarti eccessivamente</div>')
      content.append(newCloud)
      newCloud.fadeIn(400,()=>{
        offset = newCloud.offset().top - content.offset().top - 20
        firstChild.animate({'margin-top': '-' + offset},400)
      })
      
      $('#notify1')[0].play()
      
  },2000)
}