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

  const monitoring = $('.monitoring')
  const phone = monitoring.find('.phone')
  const clouds = monitoring.find('.cloud')
  const content = phone.find('.content')
  const action = content.find('.button')
  const firstChild = content.find('.cloud').first()
  
  const delay = 1200
  let timer = 0
  let cloudCount = 0
  
  const people   = monitoring.find('.people')
  const luca     = monitoring.find('.people.luca')
  const sarah    = monitoring.find('.people.sarah')
  const fabio    = monitoring.find('.people.fabio')
  const maria    = monitoring.find('.people.maria')
  const lucia    = monitoring.find('.people.lucia')
  const paolo    = monitoring.find('.people.paolo')
  
  luca.css({'top': '425px','left': '370px'})
  sarah.css({'top': '415px','left': '390px'}).fadeIn()
  maria.css({'top': '180px','left': '135px'})
  fabio.css({'top': '150px','left': '110px'}).fadeIn()
  lucia.css({'top': '340px','left': '250px'}).fadeIn()
  paolo.css({'top': '240px','left': '370px'}).fadeIn()
  
  setTimeout(()=>{
    paolo.fadeOut(800)
  }, delay) 
  
  setTimeout(()=>{
    lucia.fadeOut(800)
  }, delay*2)  
  
  setTimeout(()=>{
    fabio.fadeOut(800)
  }, delay*3)
    
  setTimeout(()=>{
    
      clouds.each((index,elem)=>{
      const el = $(elem)

      if(!el.hasClass('scroll')){
        $('#notify1')[0].play()
        el.fadeIn(500)
      }
    })
  }, delay*6)
  
  
  
  action.on('click', (e)=>{
    
    const elem = $(e.currentTarget)
    const show = $('#' + elem.data('cloud'))
    let offset = 0

    $('#notify1')[0].play()
    
    show.fadeIn(400,()=>{
      if(show.hasClass('scroll')){
        offset = show.offset().top - content.offset().top - 20
        firstChild.animate({'margin-top': '-' + offset},400)
      }
    })
    
  })


})