diff --git a/static/coffee/files.json b/static/coffee/files.json
index bfae4dfe87..67bf671f6a 100644
--- a/static/coffee/files.json
+++ b/static/coffee/files.json
@@ -2,7 +2,8 @@
   "js_files": [
     "/static/js/jquery-1.6.2.min.js",
     "/static/js/jquery-ui-1.8.16.custom.min.js",
-    "/static/js/jquery.leanModal.js"
+    "/static/js/jquery.leanModal.js",
+    "/static/js/jquery.cookie.js"
   ],
   "static_files": [
     "js/application.js"
diff --git a/static/coffee/spec/courseware_spec.coffee b/static/coffee/spec/courseware_spec.coffee
index 5933e3e686..8aa5e544a0 100644
--- a/static/coffee/spec/courseware_spec.coffee
+++ b/static/coffee/spec/courseware_spec.coffee
@@ -1,77 +1,46 @@
 describe 'Courseware', ->
+  describe 'start', ->
+    it 'create the navigation', ->
+      spyOn(window, 'Navigation')
+      Courseware.start()
+      expect(window.Navigation).toHaveBeenCalled()
+
+    it 'create the calculator', ->
+      spyOn(window, 'Calculator')
+      Courseware.start()
+      expect(window.Calculator).toHaveBeenCalled()
+
+    it 'creates the FeedbackForm', ->
+      spyOn(window, 'FeedbackForm')
+      Courseware.start()
+      expect(window.FeedbackForm).toHaveBeenCalled()
+
+    it 'binds the Logger', ->
+      spyOn(Logger, 'bind')
+      Courseware.start()
+      expect(Logger.bind).toHaveBeenCalled()
+
   describe 'bind', ->
-    it 'bind the navigation', ->
-      spyOn Courseware.Navigation, 'bind'
-      Courseware.bind()
-      expect(Courseware.Navigation.bind).toHaveBeenCalled()
-
-  describe 'Navigation', ->
     beforeEach ->
-      loadFixtures 'accordion.html'
-      @navigation = new Courseware.Navigation
+      @courseware = new Courseware
+      setFixtures """<div id="seq_content"></div>"""
 
-    describe 'bind', ->
-      describe 'when the #accordion exists', ->
-        describe 'when there is an active section', ->
-          it 'activate the accordion with correct active section', ->
-            spyOn $.fn, 'accordion'
-            $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>')
-            Courseware.Navigation.bind()
-            expect($('#accordion').accordion).toHaveBeenCalledWith
-              active: 1
-              header: 'h3'
-              autoHeight: false
+    it 'binds the sequential content change event', ->
+      @courseware.bind()
+      expect($('#seq_content')).toHandleWith 'change', @courseware.render
 
-        describe 'when there is no active section', ->
-          it 'activate the accordian with section 1 as active', ->
-            spyOn $.fn, 'accordion'
-            $('#accordion').append('<ul><li></li></ul><ul><li></li></ul>')
-            Courseware.Navigation.bind()
-            expect($('#accordion').accordion).toHaveBeenCalledWith
-              active: 1
-              header: 'h3'
-              autoHeight: false
+  describe 'render', ->
+    beforeEach ->
+      @courseware = new Courseware
+      setFixtures """
+        <div class="course-content">
+          <div id="video_1" class="video" data-streams="1.0:abc1234"></div>
+          <div id="video_2" class="video" data-streams="1.0:def5678"></div>
+        </div>
+        """
 
-        it 'binds the accordionchange event', ->
-          Courseware.Navigation.bind()
-          expect($('#accordion')).toHandleWith 'accordionchange', @navigation.log
-
-        it 'bind the navigation toggle', ->
-          Courseware.Navigation.bind()
-          expect($('#open_close_accordion a')).toHandleWith 'click', @navigation.toggle
-
-      describe 'when the #accordion does not exists', ->
-        beforeEach ->
-          $('#accordion').remove()
-
-        it 'does not activate the accordion', ->
-          spyOn $.fn, 'accordion'
-          Courseware.Navigation.bind()
-          expect($('#accordion').accordion).wasNotCalled()
-
-    describe 'toggle', ->
-      it 'toggle closed class on the wrapper', ->
-        $('.course-wrapper').removeClass('closed')
-
-        @navigation.toggle()
-        expect($('.course-wrapper')).toHaveClass('closed')
-
-        @navigation.toggle()
-        expect($('.course-wrapper')).not.toHaveClass('closed')
-
-    describe 'log', ->
-      beforeEach ->
-        window.log_event = ->
-        spyOn window, 'log_event'
-
-      it 'submit event log', ->
-        @navigation.log {}, {
-          newHeader:
-            text: -> "new"
-          oldHeader:
-            text: -> "old"
-        }
-
-        expect(window.log_event).toHaveBeenCalledWith 'accordion',
-          newheader: 'new'
-          oldheader: 'old'
+    it 'detect the video element and convert them', ->
+      spyOn(window, 'Video')
+      @courseware.render()
+      expect(window.Video).toHaveBeenCalledWith('1', '1.0:abc1234')
+      expect(window.Video).toHaveBeenCalledWith('2', '1.0:def5678')
diff --git a/static/coffee/spec/courseware_spec.js b/static/coffee/spec/courseware_spec.js
index d2d6e5583b..ce374dc421 100644
--- a/static/coffee/spec/courseware_spec.js
+++ b/static/coffee/spec/courseware_spec.js
@@ -1,96 +1,48 @@
 (function() {
 
   describe('Courseware', function() {
-    describe('bind', function() {
-      return it('bind the navigation', function() {
-        spyOn(Courseware.Navigation, 'bind');
-        Courseware.bind();
-        return expect(Courseware.Navigation.bind).toHaveBeenCalled();
+    describe('start', function() {
+      it('create the navigation', function() {
+        spyOn(window, 'Navigation');
+        Courseware.start();
+        return expect(window.Navigation).toHaveBeenCalled();
+      });
+      it('create the calculator', function() {
+        spyOn(window, 'Calculator');
+        Courseware.start();
+        return expect(window.Calculator).toHaveBeenCalled();
+      });
+      it('creates the FeedbackForm', function() {
+        spyOn(window, 'FeedbackForm');
+        Courseware.start();
+        return expect(window.FeedbackForm).toHaveBeenCalled();
+      });
+      return it('binds the Logger', function() {
+        spyOn(Logger, 'bind');
+        Courseware.start();
+        return expect(Logger.bind).toHaveBeenCalled();
       });
     });
-    return describe('Navigation', function() {
+    describe('bind', function() {
       beforeEach(function() {
-        loadFixtures('accordion.html');
-        return this.navigation = new Courseware.Navigation;
+        this.courseware = new Courseware;
+        return setFixtures("<div id=\"seq_content\"></div>");
       });
-      describe('bind', function() {
-        describe('when the #accordion exists', function() {
-          describe('when there is an active section', function() {
-            return it('activate the accordion with correct active section', function() {
-              spyOn($.fn, 'accordion');
-              $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>');
-              Courseware.Navigation.bind();
-              return expect($('#accordion').accordion).toHaveBeenCalledWith({
-                active: 1,
-                header: 'h3',
-                autoHeight: false
-              });
-            });
-          });
-          describe('when there is no active section', function() {
-            return it('activate the accordian with section 1 as active', function() {
-              spyOn($.fn, 'accordion');
-              $('#accordion').append('<ul><li></li></ul><ul><li></li></ul>');
-              Courseware.Navigation.bind();
-              return expect($('#accordion').accordion).toHaveBeenCalledWith({
-                active: 1,
-                header: 'h3',
-                autoHeight: false
-              });
-            });
-          });
-          it('binds the accordionchange event', function() {
-            Courseware.Navigation.bind();
-            return expect($('#accordion')).toHandleWith('accordionchange', this.navigation.log);
-          });
-          return it('bind the navigation toggle', function() {
-            Courseware.Navigation.bind();
-            return expect($('#open_close_accordion a')).toHandleWith('click', this.navigation.toggle);
-          });
-        });
-        return describe('when the #accordion does not exists', function() {
-          beforeEach(function() {
-            return $('#accordion').remove();
-          });
-          return it('does not activate the accordion', function() {
-            spyOn($.fn, 'accordion');
-            Courseware.Navigation.bind();
-            return expect($('#accordion').accordion).wasNotCalled();
-          });
-        });
+      return it('binds the sequential content change event', function() {
+        this.courseware.bind();
+        return expect($('#seq_content')).toHandleWith('change', this.courseware.render);
       });
-      describe('toggle', function() {
-        return it('toggle closed class on the wrapper', function() {
-          $('.course-wrapper').removeClass('closed');
-          this.navigation.toggle();
-          expect($('.course-wrapper')).toHaveClass('closed');
-          this.navigation.toggle();
-          return expect($('.course-wrapper')).not.toHaveClass('closed');
-        });
+    });
+    return describe('render', function() {
+      beforeEach(function() {
+        this.courseware = new Courseware;
+        return setFixtures("<div class=\"course-content\">\n  <div id=\"video_1\" class=\"video\" data-streams=\"1.0:abc1234\"></div>\n  <div id=\"video_2\" class=\"video\" data-streams=\"1.0:def5678\"></div>\n</div>");
       });
-      return describe('log', function() {
-        beforeEach(function() {
-          window.log_event = function() {};
-          return spyOn(window, 'log_event');
-        });
-        return it('submit event log', function() {
-          this.navigation.log({}, {
-            newHeader: {
-              text: function() {
-                return "new";
-              }
-            },
-            oldHeader: {
-              text: function() {
-                return "old";
-              }
-            }
-          });
-          return expect(window.log_event).toHaveBeenCalledWith('accordion', {
-            newheader: 'new',
-            oldheader: 'old'
-          });
-        });
+      return it('detect the video element and convert them', function() {
+        spyOn(window, 'Video');
+        this.courseware.render();
+        expect(window.Video).toHaveBeenCalledWith('1', '1.0:abc1234');
+        return expect(window.Video).toHaveBeenCalledWith('2', '1.0:def5678');
       });
     });
   });
diff --git a/static/coffee/spec/feedback_form_spec.coffee b/static/coffee/spec/feedback_form_spec.coffee
index 191645b3d3..41ba2ec04d 100644
--- a/static/coffee/spec/feedback_form_spec.coffee
+++ b/static/coffee/spec/feedback_form_spec.coffee
@@ -2,9 +2,9 @@ describe 'FeedbackForm', ->
   beforeEach ->
     loadFixtures 'feedback_form.html'
 
-  describe 'bind', ->
+  describe 'constructor', ->
     beforeEach ->
-      FeedbackForm.bind()
+      new FeedbackForm
       spyOn($, 'post').andCallFake (url, data, callback, format) ->
         callback()
 
diff --git a/static/coffee/spec/feedback_form_spec.js b/static/coffee/spec/feedback_form_spec.js
index bccb53604f..9824915d03 100644
--- a/static/coffee/spec/feedback_form_spec.js
+++ b/static/coffee/spec/feedback_form_spec.js
@@ -4,9 +4,9 @@
     beforeEach(function() {
       return loadFixtures('feedback_form.html');
     });
-    return describe('bind', function() {
+    return describe('constructor', function() {
       beforeEach(function() {
-        FeedbackForm.bind();
+        new FeedbackForm;
         return spyOn($, 'post').andCallFake(function(url, data, callback, format) {
           return callback();
         });
diff --git a/static/coffee/src/calculator.coffee b/static/coffee/src/calculator.coffee
index 1486775ad4..bca88503fd 100644
--- a/static/coffee/src/calculator.coffee
+++ b/static/coffee/src/calculator.coffee
@@ -1,4 +1,4 @@
-class Calculator
+class @Calculator
   constructor: ->
     $('.calc').click @toggle
     $('form#calculator').submit(@calculate).submit (e) ->
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index 762df721c4..fa746956f0 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -1,6 +1,6 @@
-class window.Courseware
+class @Courseware
   constructor: ->
-    new CoursewareNavigation
+    new Navigation
     new Calculator
     new FeedbackForm
     Logger.bind()
diff --git a/static/coffee/src/feedback_form.coffee b/static/coffee/src/feedback_form.coffee
index 8d34748dbf..ffb8b37521 100644
--- a/static/coffee/src/feedback_form.coffee
+++ b/static/coffee/src/feedback_form.coffee
@@ -1,4 +1,4 @@
-class FeedbackForm
+class @FeedbackForm
   constructor: ->
     $('#feedback_button').click ->
       data =
diff --git a/templates/coffee/spec/navigation_spec.coffee b/templates/coffee/spec/navigation_spec.coffee
new file mode 100644
index 0000000000..cb98c2b64c
--- /dev/null
+++ b/templates/coffee/spec/navigation_spec.coffee
@@ -0,0 +1,74 @@
+describe 'Navigation', ->
+  beforeEach ->
+    loadFixtures 'accordion.html'
+    @navigation = new Navigation
+
+  describe 'constructor', ->
+    describe 'when the #accordion exists', ->
+      describe 'when there is an active section', ->
+        beforeEach ->
+          spyOn $.fn, 'accordion'
+          $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>')
+          new Navigation
+
+        it 'activate the accordion with correct active section', ->
+          expect($('#accordion').accordion).toHaveBeenCalledWith
+            active: 1
+            header: 'h3'
+            autoHeight: false
+
+      describe 'when there is no active section', ->
+        beforeEach ->
+          spyOn $.fn, 'accordion'
+          $('#accordion').append('<ul><li></li></ul><ul><li></li></ul>')
+          new Navigation
+
+        it 'activate the accordian with section 1 as active', ->
+          expect($('#accordion').accordion).toHaveBeenCalledWith
+            active: 1
+            header: 'h3'
+            autoHeight: false
+
+      it 'binds the accordionchange event', ->
+        Navigation.bind()
+        expect($('#accordion')).toHandleWith 'accordionchange', @navigation.log
+
+      it 'bind the navigation toggle', ->
+        Navigation.bind()
+        expect($('#open_close_accordion a')).toHandleWith 'click', @navigation.toggle
+
+    describe 'when the #accordion does not exists', ->
+      beforeEach ->
+        $('#accordion').remove()
+
+      it 'does not activate the accordion', ->
+        spyOn $.fn, 'accordion'
+        Navigation.bind()
+        expect($('#accordion').accordion).wasNotCalled()
+
+  describe 'toggle', ->
+    it 'toggle closed class on the wrapper', ->
+      $('.course-wrapper').removeClass('closed')
+
+      @navigation.toggle()
+      expect($('.course-wrapper')).toHaveClass('closed')
+
+      @navigation.toggle()
+      expect($('.course-wrapper')).not.toHaveClass('closed')
+
+  describe 'log', ->
+    beforeEach ->
+      window.log_event = ->
+      spyOn window, 'log_event'
+
+    it 'submit event log', ->
+      @navigation.log {}, {
+        newHeader:
+          text: -> "new"
+        oldHeader:
+          text: -> "old"
+      }
+
+      expect(window.log_event).toHaveBeenCalledWith 'accordion',
+        newheader: 'new'
+        oldheader: 'old'
diff --git a/templates/coffee/spec/navigation_spec.js b/templates/coffee/spec/navigation_spec.js
new file mode 100644
index 0000000000..3ba6508eec
--- /dev/null
+++ b/templates/coffee/spec/navigation_spec.js
@@ -0,0 +1,94 @@
+// Generated by CoffeeScript 1.3.2-pre
+(function() {
+
+  describe('Navigation', function() {
+    beforeEach(function() {
+      loadFixtures('accordion.html');
+      return this.navigation = new Navigation;
+    });
+    describe('constructor', function() {
+      describe('when the #accordion exists', function() {
+        describe('when there is an active section', function() {
+          beforeEach(function() {
+            spyOn($.fn, 'accordion');
+            $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>');
+            return new Navigation;
+          });
+          return it('activate the accordion with correct active section', function() {
+            return expect($('#accordion').accordion).toHaveBeenCalledWith({
+              active: 1,
+              header: 'h3',
+              autoHeight: false
+            });
+          });
+        });
+        describe('when there is no active section', function() {
+          beforeEach(function() {
+            spyOn($.fn, 'accordion');
+            $('#accordion').append('<ul><li></li></ul><ul><li></li></ul>');
+            return new Navigation;
+          });
+          return it('activate the accordian with section 1 as active', function() {
+            return expect($('#accordion').accordion).toHaveBeenCalledWith({
+              active: 1,
+              header: 'h3',
+              autoHeight: false
+            });
+          });
+        });
+        it('binds the accordionchange event', function() {
+          Navigation.bind();
+          return expect($('#accordion')).toHandleWith('accordionchange', this.navigation.log);
+        });
+        return it('bind the navigation toggle', function() {
+          Navigation.bind();
+          return expect($('#open_close_accordion a')).toHandleWith('click', this.navigation.toggle);
+        });
+      });
+      return describe('when the #accordion does not exists', function() {
+        beforeEach(function() {
+          return $('#accordion').remove();
+        });
+        return it('does not activate the accordion', function() {
+          spyOn($.fn, 'accordion');
+          Navigation.bind();
+          return expect($('#accordion').accordion).wasNotCalled();
+        });
+      });
+    });
+    describe('toggle', function() {
+      return it('toggle closed class on the wrapper', function() {
+        $('.course-wrapper').removeClass('closed');
+        this.navigation.toggle();
+        expect($('.course-wrapper')).toHaveClass('closed');
+        this.navigation.toggle();
+        return expect($('.course-wrapper')).not.toHaveClass('closed');
+      });
+    });
+    return describe('log', function() {
+      beforeEach(function() {
+        window.log_event = function() {};
+        return spyOn(window, 'log_event');
+      });
+      return it('submit event log', function() {
+        this.navigation.log({}, {
+          newHeader: {
+            text: function() {
+              return "new";
+            }
+          },
+          oldHeader: {
+            text: function() {
+              return "old";
+            }
+          }
+        });
+        return expect(window.log_event).toHaveBeenCalledWith('accordion', {
+          newheader: 'new',
+          oldheader: 'old'
+        });
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/src/courseware_navigation.coffee b/templates/coffee/src/courseware_navigation.coffee
deleted file mode 100644
index aef204ea41..0000000000
--- a/templates/coffee/src/courseware_navigation.coffee
+++ /dev/null
@@ -1,19 +0,0 @@
-class CoursewareNavigation
-  constructor: ->
-    if $('#accordion').length
-      active = $('#accordion ul:has(li.active)').index('#accordion ul')
-      $('#accordion').bind('accordionchange', @log).accordion
-        active: if active >= 0 then active else 1
-        header: 'h3'
-        autoHeight: false
-      $('#open_close_accordion a').click @toggle
-
-      $('#accordion').show()
-
-  log: (event, ui) ->
-    log_event 'accordion',
-      newheader: ui.newHeader.text()
-      oldheader: ui.oldHeader.text()
-
-  toggle: ->
-    $('.course-wrapper').toggleClass('closed')
diff --git a/templates/coffee/src/modules/video.coffee b/templates/coffee/src/modules/video.coffee
index 9d059cf0b5..9fd0605c97 100644
--- a/templates/coffee/src/modules/video.coffee
+++ b/templates/coffee/src/modules/video.coffee
@@ -1,4 +1,4 @@
-class Video
+class @Video
   constructor: (@id, videos) ->
     window.player = null
     @element = $("#video_#{@id}")
diff --git a/templates/coffee/src/navigation.coffee b/templates/coffee/src/navigation.coffee
index 0f33d0fa10..7ba0a94fad 100644
--- a/templates/coffee/src/navigation.coffee
+++ b/templates/coffee/src/navigation.coffee
@@ -1,4 +1,4 @@
-class Courseware::Navigation
+class @Navigation
   constructor: ->
     if $('#accordion').length
       active = $('#accordion ul:has(li.active)').index('#accordion ul')