Move player overlays one level up

app/assets/javascripts/player/player_view.js.coffee

@@ -1,4 +1,6 @@
 class AsciiIo.PlayerView extends Backbone.View
+  events:
+    'click .start-prompt': 'onStartPromptClick'
 
   initialize: (options) ->
     @movie = new AsciiIo.Movie(
@@ -21,13 +23,17 @@ class AsciiIo.PlayerView extends Backbone.View
   createChildViews: ->
     @$el.append(@rendererView.$el)
     @rendererView.afterInsertedToDom()
-    @rendererView.showLoadingIndicator()
+    @showLoadingIndicator()
 
     @hudView = new AsciiIo.HudView()
     @$el.append(@hudView.$el)
 
+  onStartPromptClick: ->
+    @hideToggleOverlay()
+    $(@rendererView.el).click()
+
   onMovieLoaded: (asciicast) ->
-    @rendererView.hideLoadingIndicator()
+    @hideLoadingIndicator()
     @hudView.setDuration(asciicast.get('duration'))
 
     @bindEvents()
@@ -35,7 +41,7 @@ class AsciiIo.PlayerView extends Backbone.View
     if @options.autoPlay
       @movie.play()
     else
-      @rendererView.showToggleOverlay()
+      @showToggleOverlay()
 
   bindEvents: ->
     @rendererView.on 'terminal-click', =>
@@ -65,3 +71,15 @@ class AsciiIo.PlayerView extends Backbone.View
     @movie.on 'movie-finished', =>
       @rendererView.stopCursorBlink()
       @hudView.setProgress(100)
+
+  showLoadingIndicator: ->
+    @$el.append('<div class="loading">')
+
+  hideLoadingIndicator: ->
+    @$('.loading').remove()
+
+  showToggleOverlay: ->
+    @$el.append('<div class="start-prompt">')
+
+  hideToggleOverlay: ->
+    @$('.start-prompt').remove()

app/assets/javascripts/player/renderers/base.js.coffee

@@ -10,7 +10,6 @@ class AsciiIo.Renderer.Base extends Backbone.View
 
   onClick: ->
     @trigger('terminal-click')
-    @hideToggleOverlay()
 
   render: (changes, cursorX, cursorY) ->
     for n, fragments of changes
@@ -22,18 +21,6 @@ class AsciiIo.Renderer.Base extends Backbone.View
 
   afterInsertedToDom: ->
 
-  showLoadingIndicator: ->
-    @$el.append('<div class="loading">')
-
-  hideLoadingIndicator: ->
-    @$('.loading').remove()
-
-  showToggleOverlay: ->
-    @$el.append('<div class="start-prompt">')
-
-  hideToggleOverlay: ->
-    @$('.start-prompt').remove()
-
   showCursor: (show) ->
     throw '#showCursor not implemented'
 

app/assets/javascripts/player/vt.js.coffee

@@ -379,5 +379,10 @@ class AsciiIo.VT
     @buffer.setCharset('special')
 
 
+# References:
+# http://en.wikipedia.org/wiki/ANSI_escape_code
+# http://ttssh2.sourceforge.jp/manual/en/about/ctrlseq.html
+# http://real-world-systems.com/docs/ANSIcode.html
 # http://www.shaels.net/index.php/propterm/documents
 # http://manpages.ubuntu.com/manpages/lucid/man7/urxvt.7.html
+# http://vt100.net/docs/vt102-ug/chapter5.html

app/assets/stylesheets/player.css.scss

@@ -49,30 +49,6 @@ $color5: #EDC951;
     color: #ccc;
     cursor: pointer;
 
-    .loading {
-      background-image: url(image-path('loader.gif'));
-      background-repeat: no-repeat;
-      background-position: center;
-      z-index: 10;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    .start-prompt {
-      background-image: url(image-path('play-button-1.png'));
-      background-repeat: no-repeat;
-      background-position: center;
-      z-index: 20;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-
     .line {
       /* background-color: black;*/
       /* padding: 0;*/
@@ -88,6 +64,31 @@ $color5: #EDC951;
     }
   }
 
+  .loading {
+    background-image: url(image-path('loader.gif'));
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .start-prompt {
+    background-image: url(image-path('play-button-1.png'));
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index: 20;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+  }
+
   .hud {
     background-color: #333;
     opacity: 0;