let counter = 0

function timeout_trigger(){
  
  counter++
  
  $('#dropLoading .count').text(counter + "%")
  if(counter != 100) {
      setTimeout('timeout_trigger()', 50)
  }else{
    counter = 0
  }

}


$(document).ready(()=>{
  for(let i=0; i<5; i++){
    setTimeout(()=>{
      $('header.red .text-white').fadeOut(200,()=>{
        $('header.red .text-white').fadeIn(500)
      })
    },i*1000)
  }
  
  $(document).keydown((event)=> {
//     event.preventDefault()
    const content = $('.phone .content.focus')
    const firstChild = content.find('.cloud').first()
    let top = parseInt(firstChild.css('margin-top'))
    
    if(event.key == "ArrowUp"){
      top+=70
    }
    if(event.key == "ArrowDown"){
      top-=70
    }
    
    firstChild.animate({'margin-top':top})
    
  })
  
  $('.phone .content').on('click',(e)=>{
    $('.phone .content').removeClass('focus')
    $(e.currentTarget).addClass('focus')
  })
})