       setTimeout (=>@initialize.apply @),1000
 
 
+  updateBox: (depth) ->
+    depth2 = depth // 2
+    conf=atom.config.get('editor-background')
+    background=conf.imageURL
+    opacity=(conf.boxOpacity / 100).toFixed(2)
+    range=conf.boxRange
+    boxCss="
+    .eb-box-wrapper{
+      perspective:1000px;
+      perspective-origin:50% 50%;
+      position:fixed;
+      top:0;
+      left:0;
+      width:100%;
+      height:100%;
+    }
+    .eb-left,.eb-top,.eb-right,.eb-bottom,.eb-back{
+      position:fixed;
+      transform-origin:50% 50%;
+      box-shadow:inset 0px 0px #{range}px rgba(0,0,0,#{opacity});
+      background:url(#{background});
+    }
+    .eb-left,.eb-right{
+      width:#{depth}px;
+      height:100%;
+    }
+    .eb-top,.eb-bottom{
+      width:100%;
+      height:#{depth}px;
+    }
+    .eb-left{
+      transform: translate3d(-50%,0,0) rotateY(90deg);
+      left:0;
+    }
+    .eb-top{
+      transform: translate3d(0,-50%,0) rotateX(-90deg);
+      top:0;
+    }
+    .eb-right{
+      transform: translate3d(50%,0,0) rotateY(-90deg);
+      right:0;
+    }
+    .eb-bottom{
+      transform: translate3d(0,50%,0) rotateX(90deg);
+      bottom:0;
+    }
+    .eb-back{
+      transform: translate3d(0,0,-#{depth2}px);
+      width:100%;
+      height:100%;
+    }
+    "
+    console.log 'elements',@elements
+    @elements.boxStyle.innerText = boxCss
+    if depth==0
+      @elements.boxStyle.innerText=".eb-box-wrapper{display:none;}"
+
+
   deactivate: ->
     @subscriptions.dispose()
 

    cssstyle.setAttribute 'id','#editor-background-css'
    @elements.body.insertBefore cssstyle,@elements.body.childNodes[0]
    @elements.css = cssstyle

  initialize: ->
    @elements.body = qr 'body'

      if conf.textShadow
        @elements.css.innerText="atom-text-editor::shadow .line{text-shadow:"+conf.textShadow+" !important;}"

      @updateBox conf.boxDepth

      if conf.backgroundSize!='original'
        inline @elements.body, 'background-size:'+conf.backgroundSize+' !important;'
      else
