     @elements.main=main
     document.querySelector '#editor-background-main'.remove
     @elements.body.insertBefore main,@elements.body.firstChild
+    @elements.modalElement = modal =document.createElement 'div'
+    modal.innerText='hahahhaha';
+    @elements.modal = atom.workspace.addModalPanel  {item:modal,visible:false}
 
   insertTextBackgroundCss:->
     # CSS for background text

    videoWidth = @videoWidth
    videoHeight = @videoHeight
    encoder = new GIFEncoder @videoWidth,@videoHeight
    encoder.setQuality 5
    encoder.setDelay 100
    encoder.setRepeat 0
    @elements.encoder = encoder
    videoCanvas.width = videoWidth


  timer:{}
  frames:[]
  frame:0
  videoWidth:0
  videoHeight:0
  playing:true

  getFrame:(canvas,ctx,video,w,h)->
    @frame++
    tick=50
    if @frame*tick >= atom.config.get('editor-background.endTime')
      return @getImagesDone
    console.log 'getting frame',@frame
    frame=@elements.modalContent.querySelector '#editor-background-frame'
    frame.innerText=@frame
    ctx.drawImage video,0,0
    video.pause()
    if @frame*tick>=atom.config.get('editor-background.startTime')
      if @playing
        @elements.encoder.addFrame ctx
        video.play()
        if @playing
          setTimeout =>
            @getFrame.apply @,[canvas,ctx,video,w,h]
          , 50
        #@frames.push canvas.toDataURL 'image/png'



  getImages: ->
    @playing=true
    @frame = 0
    console.log 'getting images...'
    video = @elements.video
    canvas = @elements.videoCanvas
    context = canvas.getContext("2d")
    ytid = @getYTId atom.config.get 'editor-background.youTubeURL'
    gifPath = @elements.videoPath+ytid+'.gif'
    content=document.createElement 'div'
    @elements.modalContent=content
    content.innerHTML="
    <div id='editor-background-modal' style='overflow:hidden'>
    Getting Frame: <span id='editor-background-frame'>0</span><br>
    Please be patient.<a href id='editor-background-done' style='float:right;'>OK, that's it, let me see what you are doing so long...</a></div>"
    doneBtn = content.querySelector '#editor-background-done'
    doneBtn.addEventListener 'click',=>@getImagesDone()
    @elements.modalElement.innerHTML=""
    @elements.modalElement.appendChild content
    @elements.encoder.createReadStream().pipe(fs.createWriteStream(gifPath));
    @elements.encoder.start()
    w = @videoWidth
    h = @videoHeight
