Add videos section to tutorial page

src/coffee/controllers/tutorial_page_controller.coffee

@@ -8,6 +8,8 @@ All rights reserved.
 AdsenseController         = require './adsense_controller'
 BaseController            = require './base_controller'
 MarkdownSectionController = require './markdown_section_controller'
+VideoController           = require './video_controller'
+{Duration}                = require '../constants'
 {Event}                   = require '../constants'
 {Url}                     = require '../constants'
 
@@ -37,13 +39,16 @@ module.exports = class TutorialPageController extends BaseController
     onDidRender: ->
         @adsenseController = @addChild AdsenseController, '.view__adsense', model:'sidebar_skyscraper'
 
-        @$byline            = @$('.byline')
+        @$byline             = @$('.byline')
-        @$bylineLink        = @$('.byline a')
+        @$bylineLink         = @$('.byline a')
-        @$name              = @$('.name')
+        @$name               = @$('.name')
-        @$officialLink      = @$('a.officialPage')
+        @$officialLink       = @$('a.officialPage')
-        @$sectionsContainer = @$('.sections')
+        @$sectionsContainer  = @$('.sections')
-        @$title             = @$('h1.name')
+        @$title              = @$('h1.name')
-        @$titleImage        = @$('.titleImage img')
+        @$titleImage         = @$('.titleImage img')
+        @$videosSection      = @$('.videos')
+        @$videosSectionTitle = @$('.videos h2')
+        @$videosSectionPanel = @$('.videos .panel')
         super
 
     refresh: ->
@@ -56,6 +61,7 @@ module.exports = class TutorialPageController extends BaseController
         @_refreshOfficialUrl()
         @_refreshSections()
         @_refreshTitle()
+        @_refreshVideos()
         super
 
     # Private Methods ##############################################################################
@@ -106,6 +112,32 @@ module.exports = class TutorialPageController extends BaseController
             controller = @_sectionController.pop()
             controller.$el.fadeOut duration:Duration.normal, complete:-> @remove()
 
+    _refreshVideos: ->
+        @_videoControllers ?= []
+        index = 0
+
+        videos = @model?.videos or []
+        if videos? and videos.length > 0
+            @$videosSection.slideDown duration:Duration.normal
+            @$videosSectionTitle.html if videos.length is 1 then 'Video' else 'Videos'
+
+            for video in videos
+                controller = @_videoControllers[index]
+                if not controller?
+                    controller = new VideoController model:video
+                    @_videoControllers.push controller
+                    controller.render()
+                    @$videosSectionPanel.append controller.$el
+                else
+                    controller.model = video
+                index++
+        else
+            @$videosSection.slideUp duration:Duration.normal
+
+        while @_videoControllers.length > index
+            controller = @_videoControllers.pop()
+            controller.$el.slideUp duration:Duration.normal, complete:-> controller.$el.remove()
+
     _resolveTutorial: ->
         return if @model?
 

src/coffee/underscore_mixins.coffee

@@ -15,7 +15,7 @@ _.mixin
 
         result = text.toLowerCase()
         result = result.replace /[^a-zA-Z0-9_]/g, '_'
-        result = result.replace /__+/, '_'
+        result = result.replace /__+/g, '_'
         result = result.replace /^_/, ''
         result = result.replace /_$/, ''
         return result

src/jade/templates/tutorial_page.jade

@@ -17,3 +17,7 @@
         .byline: p from <a></a>
 
         .sections
+
+        .videos.section
+            h2
+            .panel

src/scss/classes.scss

@@ -102,3 +102,11 @@ All rights reserved.
         padding: 1em;
     }
 }
+
+.videos {
+    display: none;
+
+    .panel {
+        text-align: center;
+    }
+}

src/scss/markdown.scss

@@ -39,6 +39,19 @@ All rights reserved.
         }
     }
 
+    ol {
+        margin: 2em 2em 0 2em;
+
+        li {
+            font-family: $font-family-normal;
+            font-size: $font-size-normal;
+            line-height: $font-size-normal + 0.15em;
+            list-style: decimal;
+            margin: 0.66em 0 0 2em;
+        }
+    }
+
+
     ul {
         margin: 2em 2em 0 2em;
 

src/scss/templates/item_page.scss

@@ -45,14 +45,6 @@ All rights reserved.
         .usedToMake {
             display: none;
         }
-
-        .videos {
-            display: none;
-
-            .panel {
-                text-align: center;
-            }
-        }
     }
 
     .view__item {