         @animate()
       , @speed
 
-
-  createCanvas:->
-    @canvas = document.createElement 'canvas'
-    @canvas.width = @frames[0].naturalWidth
-    @canvas.height = @frames[0].naturalHeight
-    @canvas.className = 'editor-background-animation'
-    @canvas.style.cssText = "
-    position:absolute;
-    left:0;
-    top:0;
-    width:100%;
-    height:100%;
-    "
-    @ctx = @canvas.getContext '2d'
-    if @before?
-      @element.insertBefore @canvas,@before
-    else
-      @element.appendChild @canvas
-
   stop:->
     @canvas.remove()
     @frames = []


  imageLoaded:(file,event)->
    @loaded++
    if @loaded == @frames.length
      @createCanvas()
      @playing = true
      @animate()



  addFrame:(file)->
    img = new Image()
    img.addEventListener 'load',(event)=>
      @imageLoaded.apply @,[file,event]
    img.src = @animPath+file
    @frames.push img

  start:(element,before)->
    @frames = []
    @element = element
    @before = before
    try
      fs.readdir @animPath,(err,files)=>
        if err then console.log err

          reg=///^[0-9]+\.jpg$///
          files.sort (a,b)->
            parseInt(reg.exec(a))-parseInt(reg.exec(b))
          @frames = files.length
          @addFrame file for file in files
          @filesLoaded()
    catch e
      console.log e


  drawFrame:(index)->
    if index? then @currentFrame = index
    if @currentFrame+1>=@frames
      @currentFrame = 0
    top = -(@currentFrame*@height)
    @animation.style.top=top+'px'
    @currentFrame++

  animate:->
    if @playing
