Put video into its own guide tab, fix intro tabs

app/styles/play/menu/guide-view.sass

@@ -54,6 +54,10 @@
       color: white
 
 #guide-view
+
+  &.has-tabs
+    margin-top: -40px
+
   pre.ace_editor
     padding: 2px 4px
     border-radius: 4px
@@ -63,3 +67,7 @@
 
     .ace_cursor, .ace_bracket
       display: none
+
+  .tab-content
+    img
+      max-width: 100%

app/templates/play/menu/guide-view.jade

@@ -1,6 +1,6 @@
 if docs.length === 1
   if showVideo
-    h3(id='help-video-heading', data-i18n="game_menu.guide_video_tutorial")
+    h3#help-video-heading(data-i18n="game_menu.guide_video_tutorial")
     if videoLocked
       p(data-i18n="subscribe.unlock_help_videos") Subscribe to unlock all video tutorials.
       button.start-subscription-button.btn.btn-lg.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
@@ -12,9 +12,19 @@ if docs.length === 1
 
 else
   ul.nav.nav-tabs
+    if showVideo
+      li
+        a(data-target="#docs_tab_help_video", data-toggle="tab", data-i18n="game_menu.guide_video_tutorial")
     for doc in docs
       li
         a(data-target="#docs_tab_#{doc.slug}", data-toggle="tab") #{doc.name}
   div.tab-content
+    if showVideo
+      div.tab-pane(id="docs_tab_help_video")
+        if videoLocked
+          p(data-i18n="subscribe.unlock_help_videos") Subscribe to unlock all video tutorials.
+          button.start-subscription-button.btn.btn-lg.btn-success(data-i18n="subscribe.subscribe_title") Subscribe
+        else
+          div(id="help-video-player")
     for doc in docs
       div.tab-pane(id="docs_tab_#{doc.slug}")!= doc.html

app/views/play/menu/GuideView.coffee

@@ -23,7 +23,7 @@ module.exports = class LevelGuideView extends CocoView
     # A/B Testing video tutorial styles
     @helpVideosIndex = me.getVideoTutorialStylesIndex(@helpVideos.length)
     @helpVideo = @helpVideos[@helpVideosIndex] if @helpVideos.length > 0
-    @videoLocked = not (@helpVideo?.free or options.level.get('type', true) is 'course') and @requiresSubscription
+    @videoLocked = not (@helpVideo?.free or options.level.get('type', true) in ['course', 'course-ladder']) and @requiresSubscription
 
     @firstOnly = options.firstOnly
     @docs = options?.docs ? options.level.get('documentation') ? {}
@@ -40,8 +40,8 @@ module.exports = class LevelGuideView extends CocoView
     @docs = $.extend(true, [], @docs)
     @docs = [@docs[0]] if @firstOnly and @docs[0]
     doc.html = marked(utils.filterMarkdownCodeLanguages(utils.i18n(doc, 'body'))) for doc in @docs
-    doc.name = (utils.i18n doc, 'name') for doc in @docs
     doc.slug = _.string.slugify(doc.name) for doc in @docs
+    doc.name = (utils.i18n doc, 'name') for doc in @docs
     super options
 
   destroy: ->
@@ -62,13 +62,18 @@ module.exports = class LevelGuideView extends CocoView
 
   afterRender: ->
     super()
-    if @docs.length is 1 and @helpVideos.length > 0
+    @setupVideoPlayer() unless @videoLocked
-      @setupVideoPlayer() unless @videoLocked
+    if @docs.length + @helpVideos.length > 1
-    else
+      if @helpVideos.length
+        startingTab = 0
+      else
+        startingTab = _.findIndex @docs, slug: 'intro'
+        startingTab = 0 if startingTab is -1
       # incredible hackiness. Getting bootstrap tabs to work shouldn't be this complex
-      @$el.find('.nav-tabs li:first').addClass('active')
+      @$el.find(".nav-tabs li:nth(#{startingTab})").addClass('active')
-      @$el.find('.tab-content .tab-pane:first').addClass('active')
+      @$el.find(".tab-content .tab-pane:nth(#{startingTab})").addClass('active')
       @$el.find('.nav-tabs a').click(@clickTab)
+      @$el.addClass 'has-tabs'
     @configureACEEditors()
     @playSound 'guide-open'