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

  const plans = $('.plans')
  const phones = plans.find('.phone')
  const clouds = plans.find('.cloud')
  const videoOpener = plans.find('.video-opener')
  
  const delay = 1000
  let timer = 0
  
  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)
      }
    })
  }, delay)
  
  
  phones.each((index, phone)=>{
    
    const content = $(phone).find('.content')
    const actions = content.find('.button')
    const firstChild = content.find('.cloud').first()
        
    actions.each((index, button)=>{
      
      const action = $(button)
      
      action.on('click', (e)=>{
        
        const elem = $(e.currentTarget)
        const show = $('#' + elem.data('cloud'))
        let offset = 0

        $('#notify1')[0].play()
        
        show.fadeIn(400,()=>{
          offset = show.offset().top - content.offset().top - 20
          firstChild.animate({'margin-top': '-' + offset},400)
        })
        
      })
      
    })
    
  })
  
  videoOpener.on('click', (e)=>{
    
    const elem = $(e.currentTarget)
    const show = $('#' + elem.data('video'))
    const video = show.find('video')
    const close = show.find('.video-close')
    
    show.fadeIn()
    video.get(0).play()
    
    close.on('click', (e)=>{
      const elem = $(e.currentTarget)
      const video = elem.siblings('video')
      
      video.get(0).pause()
      elem.parent().fadeOut()
      
    })
    
  })
  
})