           size = info.size
         pos=0
         video.on 'data', (data) =>
+          percent = Math.round(pos / size * 100)
+          @elements.modalElement.innerHTML="Downloading video... #{percent}%"
           pos += data.length
           console.log pos,size
           if pos==size
             console.log 'downloaded'
+
+            @elements.modalElement.innerHTML="Rendering frames..."
             @insertVideo.apply @,[savePath]
         video.pipe fs.createWriteStream(savePath)
     else


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

  getFrame:(canvas,ctx,video,w,h)->
    console.log 'getting frame'
    ctx.drawImage video,0,0
    video.pause()
    @elements.encoder.addFrame ctx
    video.play()
    if @playing
      setTimeout =>
        @getFrame canvas,ctx,video,w,h
      , 50
    #@frames.push canvas.toDataURL 'image/png'



  getImages: ->
    @playing=true
    console.log 'getting images...'
    video = @elements.video
    canvas = @elements.videoCanvas
    context = canvas.getContext("2d")
    @elements.encoder.start()
    w = @videoWidth
    h = @videoHeight

      type:'string'
      default:''
      order:1
      description:"WARNING!!! NOT FINISHED YET - WORK IN PROGRESS,
      but if you are really curious try to find 'background loop' in YT"
    startTime:
      type:"integer"
      default:0
      order:2
      description:"video start time in miliseconds ( 1s = 1000ms )"
    endTime:
      type:"integer"
      default:10000
      maximum:30000
      description:"video end time in miliseconds (max 30 000 = 30s)"
      order:3
    textBackground:
      type:"color"
      default:"rgb(0,0,0)"
      order:4
      description:"background color for text/code"
    textBackgroundOpacity:
      type:"integer"
      default:100
      order:5
    textBackgroundBlurRadius:
      type:"integer"
      default:20
      order:6
    backgroundSize:
      type:"string"
      default:"original"
      enum:["original","100%","cover","manual"]
      description:"Background size"
      order:7
    manualBackgroundSize:
      type:"string"
      default:""
      description:"'100px 100px' or '50%' try something..."
      order:8
    customOverlayColor:
      type:"boolean"
      default:false
      order:9
      description:"Do you want different color on top of background? check this"
    overlayColor:
      type:'color'
      default:'rgba(0,0,0,0)'
      description:"Color used to overlay background image"
      order:10
    opacity:
      type:'integer'
      default:'100'
      description:"Background image visibility percent 1-100"
      order:11
    treeViewOpacity:
      type:'integer'
      default:"35"
      description:"Tree View can be transparent too :)"
      order:12
    transparentTabBar:
      type:"boolean"
      default:true
      desctiption:"Transparent background under file tabs"
      order:13
    mouseFactor:
      type:"integer"
      default: 0
      description: "move background with mouse (higher value = slower)
      try 8 or 4 for 3dbox or 20 for wallpaper"
      order:14
    textShadow:
      type:"string"
      default:"0px 2px 2px rgba(0,0,0,0.3)"
      description:"Add a little text shadow to code"
      order:15
    style:
      type:"string"
      default:"background:radial-gradient(rgba(0,0,0,0) 30%,rgba(0,0,0,0.75));"
      description:"Your custom css rules :]"
      order:16
    boxDepth:
      type:"integer"
      default: 0
