From 9906bd2b6bd93ac27993411812357c42375acc92 Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Mon, 21 May 2012 14:54:03 -0400
Subject: [PATCH 01/57] Moved code examples into snippets

---
 djangoapps/courseware/capa/responsetypes.py | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/djangoapps/courseware/capa/responsetypes.py b/djangoapps/courseware/capa/responsetypes.py
index 380ab85c56..3159b70d5c 100644
--- a/djangoapps/courseware/capa/responsetypes.py
+++ b/djangoapps/courseware/capa/responsetypes.py
@@ -66,10 +66,8 @@ class GenericResponse(object):
 #-----------------------------------------------------------------------------
 
 class MultipleChoiceResponse(GenericResponse):
-    '''
-    Example: 
-
-    <multiplechoiceresponse direction="vertical" randomize="yes">
+    # TODO: handle direction and randomize
+    snippets = [{'snippet': '''<multiplechoiceresponse direction="vertical" randomize="yes">
      <choicegroup type="MultipleChoice">
         <choice location="random" correct="false"><span>`a+b`<br/></span></choice>
         <choice location="random" correct="true"><span><math>a+b^2</math><br/></span></choice>
@@ -77,10 +75,7 @@ class MultipleChoiceResponse(GenericResponse):
         <choice location="bottom" correct="false"><math>a+b+d</math></choice>
      </choicegroup>
     </multiplechoiceresponse>
-
-    TODO: handle direction and randomize
-
-    '''
+    '''}]
     def __init__(self, xml, context, system=None):
         self.xml = xml
         self.correct_choices = xml.xpath('//*[@id=$id]//choice[@correct="true"]',
@@ -218,8 +213,9 @@ class NumericalResponse(GenericResponse):
 class CustomResponse(GenericResponse):
     '''
     Custom response.  The python code to be run should be in <answer>...</answer>.  Example:
+    '''
 
-    <customresponse>
+    snippets = [{'snippet': '''<customresponse>
     <startouttext/>
     <br/>
     Suppose that \(I(t)\) rises from \(0\) to \(I_S\) at a time \(t_0 \neq 0\)
@@ -237,9 +233,10 @@ class CustomResponse(GenericResponse):
     if not(r=="IS*u(t-t0)"):
         correct[0] ='incorrect'
     </answer>
-    </customresponse>
+    </customresponse>'''}]
     
-    Alternatively, the check function can be defined in <script>...</script>  Example:
+
+    '''Footnote: the check function can also be defined in <script>...</script>  Example:
 
 <script type="loncapa/python"><![CDATA[
 

From 32c50090eb9e07d24ef690bd69f250f0893e6d2b Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Mon, 21 May 2012 19:27:00 -0400
Subject: [PATCH 02/57] Very draft/prototype edits. Moving CMS components in
 LMS.

---
 djangoapps/courseware/modules/seq_module.py |  4 +-
 djangoapps/courseware/modules/x_module.py   | 78 +++++++++++++++++----
 2 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index 00350f0c62..210c11d451 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -20,7 +20,9 @@ class Module(XModule):
 
     @classmethod
     def get_xml_tags(c):
-        return ["sequential", 'tab']
+        obsolete_tags = ["sequential", 'tab']
+        modern_tags = ["problemset", "videosequence"]
+        return obsolete_tags + modern_tags
         
     def get_html(self):
         self.render()
diff --git a/djangoapps/courseware/modules/x_module.py b/djangoapps/courseware/modules/x_module.py
index 0898ac4f8f..0d0ce707e7 100644
--- a/djangoapps/courseware/modules/x_module.py
+++ b/djangoapps/courseware/modules/x_module.py
@@ -17,6 +17,39 @@ class XModule(object):
         ''' Tags in the courseware file guaranteed to correspond to the module '''
         return []
         
+    @classmethod(c):
+    def get_usage_tags(c):
+        ''' We should convert to a real module system
+            For now, this tells us whether we use this as an xmodule, a CAPA response type
+            or a CAPA input type '''
+        return ['xmodule']
+
+    def __init__(self, system = None, xml = None, item_id = None, 
+                 json = None, track_url=None, state=None):
+        ''' In most cases, you must pass state or xml'''
+        if not item_id: 
+            raise ValueError("Missing Index")
+        if not xml and not json:
+            raise ValueError("xml or json required")
+        if not system:
+            raise ValueError("System context required")
+
+        self.xml = xml
+        self.json = json
+        self.item_id = item_id
+        self.state = state
+
+        if system: 
+            ## These are temporary; we really should go 
+            ## through self.system. 
+            self.ajax_url = system.ajax_url
+            self.tracker = system.track_function
+            self.filestore = system.filestore
+            self.render_function = system.render_function
+        self.system = system
+
+    ### Functions used in the LMS
+
     def get_completion(self):
         ''' This is mostly unimplemented. 
             It gives a progress indication -- e.g. 30 minutes of 1.5 hours watched. 3 of 5 problems done, etc. '''
@@ -45,6 +78,12 @@ class XModule(object):
         '''
         return "Unimplemented"
 
+    # TODO: 
+    # def get_header_js(self):
+    #     ''' Filename of common js that needs to be included in the header
+    #     '''
+    #     raise NotImplementedError
+
     def get_init_js(self):
         ''' JavaScript code to be run when problem is shown. Be aware
         that this may happen several times on the same page
@@ -63,17 +102,30 @@ class XModule(object):
             get is a dictionary-like object ''' 
         return ""
 
-    def __init__(self, system, xml, item_id, track_url=None, state=None):
-        ''' In most cases, you must pass state or xml'''
-        self.xml = xml
-        self.item_id = item_id
-        self.state = state
+    ### Functions used in the CMS
+    def get_xml(self):
+        ''' For conversions between JSON and legacy XML representations.
+        '''
+        if self.xml: 
+            return self.xml
+        else: 
+            raise NotImplementedError
 
-        if system: 
-            ## These are temporary; we really should go 
-            ## through self.system. 
-            self.ajax_url = system.ajax_url
-            self.tracker = system.track_function
-            self.filestore = system.filestore
-            self.render_function = system.render_function
-        self.system = system
+    def get_json(self):
+        ''' For conversions between JSON and legacy XML representations.
+        '''
+        if self.json: 
+            raise NotImplementedError
+            return self.json # TODO: Return context as well -- files, etc. 
+        else: 
+            raise NotImplementedError
+
+    def handle_cms_json(self):
+        raise NotImplementedError
+
+    def render(self, size):
+        ''' Size: [thumbnail, small, full] 
+        Small ==> what we drag around
+        Full ==> what we edit
+        '''
+        raise NotImplementedError

From 1736eb212532479f290223db4ab02b61fb5abd62 Mon Sep 17 00:00:00 2001
From: John Jarvis <jarv@dhcp-18-111-4-220.dyn.mit.edu>
Date: Fri, 25 May 2012 16:15:12 -0400
Subject: [PATCH 03/57] first commit

---
 create-dev-env.sh | 221 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100755 create-dev-env.sh

diff --git a/create-dev-env.sh b/create-dev-env.sh
new file mode 100755
index 0000000000..35653c38ba
--- /dev/null
+++ b/create-dev-env.sh
@@ -0,0 +1,221 @@
+#!/bin/bash
+set -e
+
+error() {
+      printf '\E[36m'; echo "$@"; printf '\E[0m' 
+}
+output() {
+      printf '\E[36m'; echo "$@"; printf '\E[0m' 
+}
+usage() {
+    cat<<EO
+
+    Usage: $PROG [-c] [-v] [-h]
+    
+            -c        compile scipy and numpy
+            -v        set -x + spew
+            -h        this
+
+EO
+    info
+}
+
+info() {
+
+    cat<<EO
+    MITx base dir : $BASE 
+    Python dir : $PYTHON_DIR
+    Ruby dir : $RUBY_DIR
+
+    Ruby ver : $RUBY_VER
+    Ruby libraries : $GEM_PKGS
+
+EO
+
+
+
+}
+PROG=${0##*/}
+BASE="$HOME/mitx_all"
+PYTHON_DIR="$BASE/python"
+RUBY_DIR="$BASE/ruby"
+RUBY_VER="1.9.3"
+NUMPY_VER="1.6.2"
+SCIPY_VER="0.10.1"
+LOG="/var/tmp/install.log"
+BREW_PKGS="readline sqlite gdbm pkg-config gfortran mercurial python yuicompressor "
+APT_PKGS="curl git mercurial python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor"
+GEM_PKGS="sass bourbon"
+
+ARGS=$(getopt "cvh" "$*")
+if [[ $? != 0 ]]; then
+    usage
+    exit 1
+fi
+eval set -- "$ARGS"
+while true; do 
+    case $1 in 
+        -c)
+            compile=true
+            shift
+            ;;
+        -v)
+            set -x
+            verbose=true
+            shift
+            ;;
+        -h)
+            usage
+            exit 0
+            ;;
+        --)
+            shift
+            break
+            ;;
+    esac
+done
+
+cat<<EO
+
+  This script will setup a local MITx environment, this
+  includes
+
+       * Django
+       * A local copy of Python and library dependencies
+       * A local copy of Ruby and library dependencies
+
+  It will also attempt to install operating system dependencies
+  with apt(debian) or brew(OSx).
+
+  To compile scipy and numpy from source use the -c option
+
+EO
+info
+output "Press return to begin or control-C to abort"
+read dummy
+
+if [[ -f $HOME/.rvmrc ]]; then
+    output "$HOME/.rvmrc alredy exists, not adding $RUBY_DIR"
+else
+    output "Creating $HOME/.rmrc so rvm uses $RUBY_DIR"
+    echo "export rvm_path=$RUBY_DIR" > $HOME/.rvmrc
+fi
+mkdir -p $BASE
+rm -f $LOG
+case `uname -s` in
+    [Ll]inux)
+        command -v lsb_release &>/dev/null || {
+            error "Please install lsb-release."
+            exit 1
+        }
+        distro=`lsb_release -cs`
+        case $distro in
+            lisa|natty|oneiric|precise)
+                output "Installing ubuntu requirements"
+                sudo apt-get -y update
+                sudo apt-get -y install $APT_PKGS 
+                ;;
+            *)
+                error "Unsupported distribution - $distro"
+                exit 1
+                ;;
+        esac
+        ;;
+    Darwin)
+        command -v brew &>/dev/null || { 
+            output "Installing brew"
+            /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)" >>$LOG 
+        } 
+        output "Installing OSX requirements"
+        # brew errors if the package is already installed
+        for pkg in $BREW_PKGS; do
+            grep $pkg <(brew list) &>/dev/null || {
+                output "Installing $pkg"
+                brew install $pkg  >>$LOG 
+            }
+        done
+        command -v pip &>/dev/null || {
+            output "Installing pip"
+            sudo easy_install pip  >>$LOG 
+        }
+        command -v virtualenv &>/dev/null || {
+            output "Installing virtualenv"
+            sudo pip install virtualenv virtualenvwrapper >> $LOG
+        }
+        ;;
+    *)
+        error "Unsupported platform"
+        exit 1
+        ;;
+esac
+output "Installing rvm and ruby"
+curl -sL get.rvm.io | bash -s stable
+source $RUBY_DIR/scripts/rvm
+rvm install $RUBY_VER
+virtualenv "$PYTHON_DIR"
+source $PYTHON_DIR/bin/activate
+output "Installing ruby packages - $GEM_PKGS"
+gem install $GEM_PKGS
+cd "$BASE"
+output "Cloning mitx, askbot and data repos"
+if [[ -d "$BASE/mitx" ]]; then
+    mv "$BASE/mitx" "${BASE}/mitx.bak.$$"
+fi
+git clone git@github.com:MITx/mitx.git >>$LOG 
+if [[ -d "$BASE/askbot-devel" ]]; then
+    mv "$BASE/askbot-devel" "${BASE}/askbot-devel.bak.$$"
+fi
+git clone git@github.com:MITx/askbot-devel >>$LOG 
+if [[ -d "$BASE/data" ]]; then
+    mv "$BASE/data" "${BASE}/data.bak.$$"
+fi
+hg clone ssh://hg-content@gp.mitx.mit.edu/data >>$LOG 
+
+if [[ -n $compile ]]; then
+    output "Downloading numpy and scipy"
+    curl -sL -o numpy.tar.gz http://downloads.sourceforge.net/project/numpy/NumPy/${NUMPY_VER}/numpy-${NUMPY_VER}.tar.gz
+    curl -sL -o scipy.tar.gz http://downloads.sourceforge.net/project/scipy/scipy/${SCIPY_VER}/scipy-${SCIPY_VER}.tar.gz
+    tar xf numpy.tar.gz
+    tar xf scipy.tar.gz
+    rm -f numpy.tar.gz scipy.tar.gz
+    output "Compiling numpy"
+    cd "$BASE/numpy-${NUMPY_VER}"
+    python setup.py install >>$LOG  2>&1
+    output "Compiling scipy"
+    cd "$BASE/scipy-${SCIPY_VER}"
+    python setup.py install >>$LOG  2>&1
+    cd "$BASE"
+    rm -rf numpy-${NUMPY_VER} scipy-${SCIPY_VER}
+fi
+
+output "Installing askbot requirements"
+pip install -r askbot-devel/askbot_requirements.txt >>$LOG 
+pip install -r askbot-devel/askbot_requirements_dev.txt >>$LOG 
+output "Installing MITx requirements"
+pip install -r mitx/pre-requirements.txt >> $LOG
+pip install -r mitx/requirements.txt >>$LOG 
+
+mkdir "$BASE/log"
+mkdir "$BASE/db"
+
+cat<<END
+   
+   Success!!
+
+   To start using Django you will need
+   to activate the local Python and Ruby
+   environment:
+
+        $ source $RUBY_DIR/scripts/rvm
+        $ source $PYTHON_DIR/bin/activate
+  
+   To initialize and start a local instance of Django:
+        
+        $ cd $BASE/mitx
+        $ django-admin.py syncdb --settings=envs.dev --pythonpath=.
+        $ django-admin.py migrate --settings=envs.dev --pythonpath=.
+        $ django-admin.py runserver --settings=envs.dev --pythonpath=.   
+       
+END
+exit 0
+

From f6948d44ff6f97f9192d929b14508314d29b8f4a Mon Sep 17 00:00:00 2001
From: John Jarvis <jarv@dhcp-18-111-4-220.dyn.mit.edu>
Date: Fri, 25 May 2012 16:22:09 -0400
Subject: [PATCH 04/57] mkdirs fail silently

---
 create-dev-env.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/create-dev-env.sh b/create-dev-env.sh
index 35653c38ba..1f2ddd4376 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -195,8 +195,8 @@ output "Installing MITx requirements"
 pip install -r mitx/pre-requirements.txt >> $LOG
 pip install -r mitx/requirements.txt >>$LOG 
 
-mkdir "$BASE/log"
-mkdir "$BASE/db"
+mkdir "$BASE/log" || true
+mkdir "$BASE/db" || true
 
 cat<<END
    

From ffb0bac130155723e5f0c021f0ff442d09d998e4 Mon Sep 17 00:00:00 2001
From: John Jarvis <jarv@dhcp-18-111-4-220.dyn.mit.edu>
Date: Fri, 25 May 2012 16:37:22 -0400
Subject: [PATCH 05/57] updating gem install list

---
 create-dev-env.sh | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/create-dev-env.sh b/create-dev-env.sh
index 1f2ddd4376..6c4d1cae8e 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -26,9 +26,7 @@ info() {
     MITx base dir : $BASE 
     Python dir : $PYTHON_DIR
     Ruby dir : $RUBY_DIR
-
     Ruby ver : $RUBY_VER
-    Ruby libraries : $GEM_PKGS
 
 EO
 
@@ -45,7 +43,6 @@ SCIPY_VER="0.10.1"
 LOG="/var/tmp/install.log"
 BREW_PKGS="readline sqlite gdbm pkg-config gfortran mercurial python yuicompressor "
 APT_PKGS="curl git mercurial python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor"
-GEM_PKGS="sass bourbon"
 
 ARGS=$(getopt "cvh" "$*")
 if [[ $? != 0 ]]; then
@@ -154,8 +151,10 @@ source $RUBY_DIR/scripts/rvm
 rvm install $RUBY_VER
 virtualenv "$PYTHON_DIR"
 source $PYTHON_DIR/bin/activate
-output "Installing ruby packages - $GEM_PKGS"
-gem install $GEM_PKGS
+output "Installing ruby packages"
+gem install --version '0.8.3' rake
+gem install --version '3.1.15' sass
+gem install --version '1.3.6' bourbon
 cd "$BASE"
 output "Cloning mitx, askbot and data repos"
 if [[ -d "$BASE/mitx" ]]; then

From 2c2072dae3b1e6585954c75448d2d9b9d26c8dd0 Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Sun, 27 May 2012 07:39:09 -0400
Subject: [PATCH 06/57] Converted to use more semantic tags. Working snapshot.

---
 djangoapps/courseware/content_parser.py       |  1 +
 djangoapps/courseware/modules/seq_module.py   |  7 +++---
 .../courseware/modules/vertical_module.py     |  2 +-
 djangoapps/courseware/modules/x_module.py     |  2 +-
 djangoapps/courseware/views.py                | 25 +++++++++++++------
 templates/seq_module.js                       |  2 +-
 6 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/djangoapps/courseware/content_parser.py b/djangoapps/courseware/content_parser.py
index d557e5ac36..9d8811307f 100644
--- a/djangoapps/courseware/content_parser.py
+++ b/djangoapps/courseware/content_parser.py
@@ -218,6 +218,7 @@ def section_file(user, section, coursename=None, dironly=False):
     Given a user and the name of a section, return that section.
     This is done specific to each course.
     If dironly=True then return the sections directory.
+    TODO: This is a bit weird; dironly should be scrapped. 
     '''
     filename = section+".xml"
 
diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index 210c11d451..af41d0e8da 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -21,7 +21,7 @@ class Module(XModule):
     @classmethod
     def get_xml_tags(c):
         obsolete_tags = ["sequential", 'tab']
-        modern_tags = ["problemset", "videosequence"]
+        modern_tags = ["videosequence"]
         return obsolete_tags + modern_tags
         
     def get_html(self):
@@ -83,7 +83,8 @@ class Module(XModule):
         params={'items':self.contents,
                 'id':self.item_id,
                 'position': self.position,
-                'titles':self.titles}
+                'titles':self.titles, 
+                'tag':self.xmltree.tag}
 
         # TODO/BUG: Destroy JavaScript should only be called for the active view
         # This calls it for all the views
@@ -92,7 +93,7 @@ class Module(XModule):
         # IDs to sequences. 
         destroy_js="".join([e['destroy_js'] for e in self.contents if 'destroy_js' in e])
 
-        if self.xmltree.tag == 'sequential':
+        if self.xmltree.tag in ['sequential', 'videosequence']:
             self.init_js=js+render_to_string('seq_module.js',params)
             self.destroy_js=destroy_js
             self.content=render_to_string('seq_module.html',params)
diff --git a/djangoapps/courseware/modules/vertical_module.py b/djangoapps/courseware/modules/vertical_module.py
index f64e45fe7f..e57a58e33e 100644
--- a/djangoapps/courseware/modules/vertical_module.py
+++ b/djangoapps/courseware/modules/vertical_module.py
@@ -13,7 +13,7 @@ class Module(XModule):
 
     @classmethod
     def get_xml_tags(c):
-        return ["vertical"]
+        return ["vertical", "problemset"]
         
     def get_html(self):
         return render_to_string('vert_module.html',{'items':self.contents})
diff --git a/djangoapps/courseware/modules/x_module.py b/djangoapps/courseware/modules/x_module.py
index 0d0ce707e7..b475fd0280 100644
--- a/djangoapps/courseware/modules/x_module.py
+++ b/djangoapps/courseware/modules/x_module.py
@@ -17,7 +17,7 @@ class XModule(object):
         ''' Tags in the courseware file guaranteed to correspond to the module '''
         return []
         
-    @classmethod(c):
+    @classmethod
     def get_usage_tags(c):
         ''' We should convert to a real module system
             For now, this tells us whether we use this as an xmodule, a CAPA response type
diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index 313259bdb7..014f759ed1 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -60,7 +60,6 @@ def profile(request, student_id = None):
     if student_id == None:
         student = request.user
     else: 
-        print content_parser.user_groups(request.user)
         if 'course_admin' not in content_parser.user_groups(request.user):
             raise Http404
         student = User.objects.get( id = int(student_id))
@@ -184,16 +183,28 @@ def index(request, course=None, chapter="Using the System", section="Hints"):
         log.exception("Unable to parse courseware xml")
         return render_to_response('courseware-error.html', {})
 
-    dom_module = dom.xpath("//course[@name=$course]/chapter[@name=$chapter]//section[@name=$section]/*[1]", 
+    #dom_module = dom.xpath("//course[@name=$course]/chapter[@name=$chapter]//section[@name=$section]/*[1]", 
+    dom_module = dom.xpath("//course[@name=$course]/chapter[@name=$chapter]//section[@name=$section]", 
                            course=course, chapter=chapter, section=section)
 
+    #print "DM", dom_module
+
     if len(dom_module) == 0:
-        module = None
+        module_wrapper = None
     else:
-        module = dom_module[0]
+        module_wrapper = dom_module[0]
 
-    module_ids = dom.xpath("//course[@name=$course]/chapter[@name=$chapter]//section[@name=$section]//@id", 
-                           course=course, chapter=chapter, section=section)
+    if module_wrapper == None:
+        module = None
+    elif module_wrapper.get("src"):
+        module = content_parser.section_file(user=user, section=module_wrapper.get("src"), coursename=course)
+    else:
+        module = etree.XML(etree.tostring(module_wrapper[0])) # Copy the element out of the tree
+
+    module_ids = []
+    if module:
+        module_ids = module.xpath("//@id", 
+                                  course=course, chapter=chapter, section=section)
 
     if user.is_authenticated():
         module_object_preload = list(StudentModule.objects.filter(student=user, 
@@ -305,7 +316,7 @@ def quickedit(request, id=None):
     Maybe this should be moved into capa/views.py
     Or this should take a "module" argument, and the quickedit moved into capa_module.
     '''
-    print "WARNING: UNDEPLOYABLE CODE. FOR DEV USE ONLY."
+    print "WARNING: UNDEPLOYABLE CODE. FOR CONTENT DEV USE ONLY."
     print "In deployed use, this will only edit on one server"
     print "We need a setting to disable for production where there is"
     print "a load balanacer"
diff --git a/templates/seq_module.js b/templates/seq_module.js
index 5fa4070fca..691cbb5544 100644
--- a/templates/seq_module.js
+++ b/templates/seq_module.js
@@ -53,7 +53,7 @@ function disablePrev() {
 function ${ id }goto(i) {
   log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'});
 
-  postJSON('${ MITX_ROOT_URL }/modx/sequential/${ id }/goto_position',
+  postJSON('${ MITX_ROOT_URL }/modx/${tag}/${ id }/goto_position',
   {'position' : i });
 
   if (${ id }loc!=-1)

From 3b3cf5b7a08e7caeca1f1269754016dfa62b53f2 Mon Sep 17 00:00:00 2001
From: John Jarvis <jarv@Johns-MacBook-Air.local>
Date: Tue, 29 May 2012 09:33:42 -0400
Subject: [PATCH 07/57] added node/coffeescript to dependency list

---
 create-dev-env.sh | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/create-dev-env.sh b/create-dev-env.sh
index 6c4d1cae8e..b207dbdeb3 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -41,8 +41,8 @@ RUBY_VER="1.9.3"
 NUMPY_VER="1.6.2"
 SCIPY_VER="0.10.1"
 LOG="/var/tmp/install.log"
-BREW_PKGS="readline sqlite gdbm pkg-config gfortran mercurial python yuicompressor "
-APT_PKGS="curl git mercurial python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor"
+BREW_PKGS="readline sqlite gdbm pkg-config gfortran mercurial python yuicompressor node"
+APT_PKGS="curl git mercurial python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor coffeescript"
 
 ARGS=$(getopt "cvh" "$*")
 if [[ $? != 0 ]]; then

From c524ee7b888da402df220bc83c9247ae248ef647 Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Tue, 29 May 2012 10:46:01 -0400
Subject: [PATCH 08/57] Add enrollment link back to main page for development
 purposes, until we have the multicourse enrollment stuff worked out

---
 templates/index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/templates/index.html b/templates/index.html
index dee9f14848..aecade16e5 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -11,6 +11,7 @@
         <h1>Circuits &amp; Electronics</h1>
         <h2>6.002x</h2>
         <a class="enroll" rel="leanModal" href="/info">View 6.002x Circuits <span>&amp;</span> Electronics as a guest</a>
+        <a class="enroll" rel="leanModal" href="#enroll"><noscript>In order to</noscript> Enroll in 6.002x Circuits <span>&amp;</span> Electronics <noscript>you need to have javascript enabled</noscript></a>
       </section>
       <p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT&rsquo;s first undergraduate analog design course: 6.002. This course is running, free of charge, for students worldwide from March 5, 2012 through June 8, 2012.</p>
     </section>
@@ -53,6 +54,7 @@
 
     <section class="cta">
       <a class="enroll" rel="leanModal" href="/info">View 6.002x Circuits &amp; Electronics as a guest</a>
+      <a class="enroll" rel="leanModal" href="#enroll"><noscript>In order to</noscript> Enroll in 6.002x Circuits &amp; Electronics <noscript>you need to have javascript enabled</noscript></a>
     </section>
 
   </section>

From 45715e9280abeb8e25680859f7c947df5a180ea1 Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Tue, 29 May 2012 15:57:27 -0400
Subject: [PATCH 09/57] Add setting for inplace compiles in versions of
 django-pipeline that support it

---
 envs/common.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/envs/common.py b/envs/common.py
index 2af02bd0b0..af678f9a14 100644
--- a/envs/common.py
+++ b/envs/common.py
@@ -316,6 +316,9 @@ PIPELINE_YUI_BINARY = 'yui-compressor'
 PIPELINE_SASS_BINARY = 'sass'
 PIPELINE_COFFEE_SCRIPT_BINARY = 'coffee'
 
+# Setting that will only affect the MITx version of django-pipeline until our changes are merged upstream
+PIPELINE_COMPILE_INPLACE = True
+
 ################################### APPS #######################################
 INSTALLED_APPS = (
     # Standard ones that are always installed...

From d011ab99ada2ddcba4f9189010c84a9c616ccc68 Mon Sep 17 00:00:00 2001
From: John Jarvis <jrjarvis@mitx.mit.edu>
Date: Wed, 30 May 2012 11:43:33 -0400
Subject: [PATCH 10/57] added root user check

---
 create-dev-env.sh | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/create-dev-env.sh b/create-dev-env.sh
index b207dbdeb3..0a3d7258eb 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -2,7 +2,7 @@
 set -e
 
 error() {
-      printf '\E[36m'; echo "$@"; printf '\E[0m' 
+      printf '\E[31m'; echo "$@"; printf '\E[0m' 
 }
 output() {
       printf '\E[36m'; echo "$@"; printf '\E[0m' 
@@ -29,10 +29,10 @@ info() {
     Ruby ver : $RUBY_VER
 
 EO
-
-
-
 }
+
+
+
 PROG=${0##*/}
 BASE="$HOME/mitx_all"
 PYTHON_DIR="$BASE/python"
@@ -44,6 +44,12 @@ LOG="/var/tmp/install.log"
 BREW_PKGS="readline sqlite gdbm pkg-config gfortran mercurial python yuicompressor node"
 APT_PKGS="curl git mercurial python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor coffeescript"
 
+if [[ $EUID -eq 0 ]]; then
+    error "This script should not be run using sudo or as the root user"
+    usage
+    exit 1
+fi
+
 ARGS=$(getopt "cvh" "$*")
 if [[ $? != 0 ]]; then
     usage

From e46426b196a8b3625a1a8f5dfaf287300929f37c Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 30 May 2012 14:22:36 -0400
Subject: [PATCH 11/57] Update requirement dependencies

* Make sure we're installing django-pipeline from our fork
* Bump rake to 0.9.2.2, as 0.8.3 is already outdated.
---
 .gitignore       | 3 ++-
 Gemfile          | 2 +-
 Gemfile.lock     | 4 ++--
 requirements.txt | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 570fbd87bd..ebf06998b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,5 @@ coverage.xml
 cover/
 log/
 reports/
-\#*\#
\ No newline at end of file
+/src/
+\#*\#
diff --git a/Gemfile b/Gemfile
index b0065474bc..c6a19caca2 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,5 +1,5 @@
 source :rubygems
 
-gem 'rake', '0.8.3'
+gem 'rake'
 gem 'sass', '3.1.15'
 gem 'bourbon', '~> 1.3.6'
diff --git a/Gemfile.lock b/Gemfile.lock
index d6ec0096e2..2a9d48c35c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -3,7 +3,7 @@ GEM
   specs:
     bourbon (1.3.6)
       sass (>= 3.1)
-    rake (0.8.3)
+    rake (0.9.2.2)
     sass (3.1.15)
 
 PLATFORMS
@@ -11,5 +11,5 @@ PLATFORMS
 
 DEPENDENCIES
   bourbon (~> 1.3.6)
-  rake (= 0.8.3)
+  rake
   sass (= 3.1.15)
diff --git a/requirements.txt b/requirements.txt
index 4135b6aab4..c05b9eb265 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -13,7 +13,7 @@ python-memcached
 django-celery
 path.py
 django_debug_toolbar
-django-pipeline
+-e git://github.com/MITx/django-pipeline.git@incremental_compile#egg=django-pipeline
 django-staticfiles>=1.2.1
 django-masquerade
 fs

From 908e9c0427b0c14ca166ca81fe0acea3990d1f75 Mon Sep 17 00:00:00 2001
From: John Jarvis <jrjarvis@mitx.mit.edu>
Date: Thu, 31 May 2012 10:41:45 -0400
Subject: [PATCH 12/57] no longer redirecting STDOUT when running the brew
 installer

---
 create-dev-env.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/create-dev-env.sh b/create-dev-env.sh
index 0a3d7258eb..1b3b932dd5 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -127,7 +127,7 @@ case `uname -s` in
     Darwin)
         command -v brew &>/dev/null || { 
             output "Installing brew"
-            /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)" >>$LOG 
+            /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)" 
         } 
         output "Installing OSX requirements"
         # brew errors if the package is already installed

From 26ce972cea05bf75e21d1c7443b87754e7a174e2 Mon Sep 17 00:00:00 2001
From: John Jarvis <jrjarvis@mitx.mit.edu>
Date: Thu, 31 May 2012 11:39:55 -0400
Subject: [PATCH 13/57] adding brew-formulas, updating dev env script

---
 brew-formulas.txt |  9 +++++++++
 create-dev-env.sh | 34 ++++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 brew-formulas.txt

diff --git a/brew-formulas.txt b/brew-formulas.txt
new file mode 100644
index 0000000000..5f76861eda
--- /dev/null
+++ b/brew-formulas.txt
@@ -0,0 +1,9 @@
+readline 
+sqlite 
+gdbm 
+pkg-config 
+gfortran 
+mercurial 
+python 
+yuicompressor 
+node
diff --git a/create-dev-env.sh b/create-dev-env.sh
index 1b3b932dd5..1b3c272bb3 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -41,7 +41,7 @@ RUBY_VER="1.9.3"
 NUMPY_VER="1.6.2"
 SCIPY_VER="0.10.1"
 LOG="/var/tmp/install.log"
-BREW_PKGS="readline sqlite gdbm pkg-config gfortran mercurial python yuicompressor node"
+BREW_PKGS="$BASE/mit/brew-formulas.txt"
 APT_PKGS="curl git mercurial python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor coffeescript"
 
 if [[ $EUID -eq 0 ]]; then
@@ -92,6 +92,10 @@ cat<<EO
 
   To compile scipy and numpy from source use the -c option
 
+  STDOUT is redirected to /var/tmp/install.log, run
+  $ tail -f /var/tmp/install.log
+  to monitor progress
+
 EO
 info
 output "Press return to begin or control-C to abort"
@@ -131,7 +135,7 @@ case `uname -s` in
         } 
         output "Installing OSX requirements"
         # brew errors if the package is already installed
-        for pkg in $BREW_PKGS; do
+        for pkg in $(cat $BREW_PKGS); do
             grep $pkg <(brew list) &>/dev/null || {
                 output "Installing $pkg"
                 brew install $pkg  >>$LOG 
@@ -151,16 +155,7 @@ case `uname -s` in
         exit 1
         ;;
 esac
-output "Installing rvm and ruby"
-curl -sL get.rvm.io | bash -s stable
-source $RUBY_DIR/scripts/rvm
-rvm install $RUBY_VER
-virtualenv "$PYTHON_DIR"
-source $PYTHON_DIR/bin/activate
-output "Installing ruby packages"
-gem install --version '0.8.3' rake
-gem install --version '3.1.15' sass
-gem install --version '1.3.6' bourbon
+
 cd "$BASE"
 output "Cloning mitx, askbot and data repos"
 if [[ -d "$BASE/mitx" ]]; then
@@ -176,6 +171,21 @@ if [[ -d "$BASE/data" ]]; then
 fi
 hg clone ssh://hg-content@gp.mitx.mit.edu/data >>$LOG 
 
+
+output "Installing rvm and ruby"
+curl -sL get.rvm.io | bash -s stable
+source $RUBY_DIR/scripts/rvm
+rvm install $RUBY_VER
+virtualenv "$PYTHON_DIR"
+source $PYTHON_DIR/bin/activate
+output "Installing gem bundler"
+gem install bundler
+output "Installing ruby packages"
+cd $BASE/mitx
+bundle install
+
+cd $BASE
+
 if [[ -n $compile ]]; then
     output "Downloading numpy and scipy"
     curl -sL -o numpy.tar.gz http://downloads.sourceforge.net/project/numpy/NumPy/${NUMPY_VER}/numpy-${NUMPY_VER}.tar.gz

From f467134fc5a9fa4eb05175d2e9951b5a9a9f36fe Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Thu, 31 May 2012 11:59:14 -0400
Subject: [PATCH 14/57] Don't fail post-install configuration if gunicorn won't
 stop

---
 rakefile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/rakefile b/rakefile
index bdeeb6b09d..a78e835b45 100644
--- a/rakefile
+++ b/rakefile
@@ -80,7 +80,7 @@ task :package do
         chown -R makeitso:makeitso #{INSTALL_DIR_PATH}
         chmod +x #{INSTALL_DIR_PATH}/collect_static_resources
 
-        service gunicorn stop
+        service gunicorn stop || echo "Unable to stop gunicorn. Continuing"
         rm -f #{LINK_PATH}
         ln -s #{INSTALL_DIR_PATH} #{LINK_PATH}
         chown makeitso:makeitso #{LINK_PATH}

From 0b266098467ac9c61a7a662505eb41c3801e6b85 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Mon, 30 Apr 2012 16:23:45 -0400
Subject: [PATCH 15/57] Rewrite Sequence module to use unobtrusive JS

---
 djangoapps/courseware/modules/seq_module.py  |  38 ++----
 templates/coffee/src/modules/sequence.coffee |  70 +++++++++++
 templates/seq_module.html                    |  42 ++++---
 templates/seq_module.js                      | 118 -------------------
 4 files changed, 104 insertions(+), 164 deletions(-)
 create mode 100644 templates/coffee/src/modules/sequence.coffee
 delete mode 100644 templates/seq_module.js

diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index af41d0e8da..4239bc492f 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -28,14 +28,6 @@ class Module(XModule):
         self.render()
         return self.content
 
-    def get_init_js(self):
-        self.render()
-        return self.init_js
-
-    def get_destroy_js(self):
-        self.render()
-        return self.destroy_js
-
     def handle_ajax(self, dispatch, get):
         if dispatch=='goto_position':
             self.position = int(get['position'])
@@ -45,45 +37,40 @@ class Module(XModule):
     def render(self):
         if self.rendered:
             return
-        def j(m): 
+        def j(m):
             ''' jsonify contents so it can be embedded in a js array
             We also need to split </script> tags so they don't break
             mid-string'''
-            if 'init_js' not in m: m['init_js']=""
-            if 'type' not in m: m['init_js']=""
-            content=json.dumps(m['content']) 
-            content=content.replace('</script>', '<"+"/script>') 
+            content=json.dumps(m['content'])
+            content=content.replace('</script>', '<"+"/script>')
 
-            return {'content':content, 
-                    "destroy_js":m['destroy_js'], 
-                    'init_js':m['init_js'], 
+            return {'content':content,
                     'type': m['type']}
 
 
         ## Returns a set of all types of all sub-children
         child_classes = [set([i.tag for i in e.iter()]) for e in self.xmltree]
 
-        self.titles = json.dumps(["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") != None]) \
-                           for e in self.xmltree])
+        titles = ["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") != None]) \
+                           for e in self.xmltree]
 
         self.contents = [j(self.render_function(e)) \
                              for e in self.xmltree]
 
-        print self.titles
+        for i in range(len(self.contents)):
+          self.contents[i]['title'] = titles[i]
 
         for (content, element_class) in zip(self.contents, child_classes):
             new_class = 'other'
             for c in class_priority:
-                if c in element_class: 
+                if c in element_class:
                     new_class = c
             content['type'] = new_class
-     
-        js=""
 
         params={'items':self.contents,
                 'id':self.item_id,
                 'position': self.position,
-                'titles':self.titles, 
+                'titles':titles,
                 'tag':self.xmltree.tag}
 
         # TODO/BUG: Destroy JavaScript should only be called for the active view
@@ -94,16 +81,11 @@ class Module(XModule):
         destroy_js="".join([e['destroy_js'] for e in self.contents if 'destroy_js' in e])
 
         if self.xmltree.tag in ['sequential', 'videosequence']:
-            self.init_js=js+render_to_string('seq_module.js',params)
-            self.destroy_js=destroy_js
             self.content=render_to_string('seq_module.html',params)
         if self.xmltree.tag == 'tab':
             params['id'] = 'tab'
-            self.init_js=js+render_to_string('tab_module.js',params)
-            self.destroy_js=destroy_js
             self.content=render_to_string('tab_module.html',params)
         self.rendered = True
-        
 
     def __init__(self, system, xml, item_id, state=None):
         XModule.__init__(self, system, xml, item_id, state)
diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
new file mode 100644
index 0000000000..013206093c
--- /dev/null
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -0,0 +1,70 @@
+class window.Sequence
+  constructor: (@id, @elements, @tag, position) ->
+    @buildNavigation()
+    @bind()
+    @render position
+
+  bind: ->
+    $('#sequence-list a').click @goto
+
+  buildNavigation: ->
+    $.each @elements, (index, item) ->
+      link = $('<a>').attr class: "seq_#{item.type}_inactive", 'data-element': index + 1
+      title = $('<p>').html(item.title)
+      list_item = $('<li>').append(link.append(title))
+      $('#sequence-list').append list_item
+
+  toggleArrows: ->
+    $('.sequence-nav-buttons a').unbind('click')
+
+    if @position == 1
+      $('.sequence-nav-buttons .prev a').addClass('disabled')
+    else
+      $('.sequence-nav-buttons .prev a').removeClass('disabled').click(@previous)
+
+    if @position == @elements.length
+      $('.sequence-nav-buttons .next a').addClass('disabled')
+    else
+      $('.sequence-nav-buttons .next a').removeClass('disabled').click(@next)
+
+  render: (new_position) ->
+    if @position != undefined
+      @mark_visited @position
+      $.post "/modx/#{@tag}/#{@id}/goto_position", position: new_position
+
+    if @position != new_position
+      @mark_active new_position
+      $('#seq_content').html eval(@elements[new_position - 1].content)
+
+      MathJax.Hub.Queue(["Typeset",MathJax.Hub])
+      @position = new_position
+      @toggleArrows()
+
+  goto: (e) =>
+    e.preventDefault()
+    new_position = $(e.srcElement).data('element')
+    log_event("seq_goto", old: @position, new: new_position, id: @id)
+    @render new_position
+
+  next: (e) =>
+    e.preventDefault()
+    new_position = @position + 1
+    log_event("seq_next", old: @position, new: new_position, id: @id)
+    @render new_position
+
+  previous: (e) =>
+    e.preventDefault()
+    new_position = @position - 1
+    log_event("seq_prev", old: @position, new: new_position, id: @id)
+    @render new_position
+
+  link_for: (position) ->
+    $("#sequence-list a[data-element=#{position}]")
+
+  mark_visited: (position) ->
+    @link_for(position).attr class: "seq_#{@elements[position - 1].type}_visited"
+
+  mark_active: (position) ->
+    @link_for(position).attr class: "seq_#{@elements[position - 1].type}_active"
+
+
diff --git a/templates/seq_module.html b/templates/seq_module.html
index 94aa1661bc..ab903457dc 100644
--- a/templates/seq_module.html
+++ b/templates/seq_module.html
@@ -1,22 +1,28 @@
-<nav aria-label="Section Navigation" class="sequence-nav">
-  <ol>
-    % for t in range(1,1+len(items)):
-    <li><a href="#" class="seq_inactive" id="tt_${ t }"></a></li>
-    % endfor
-  </ol>
+<div id="sequence_${id}" class="sequence">
+  <nav aria-label="Section Navigation" class="sequence-nav">
+    <ol id="sequence-list">
+    </ol>
 
-  <ul>
-    <li class="${ id }prev prev"><a href="#">Previous</a></li>
-    <li class="${ id }next next"><a href="#">Next</a></li>
-  </ul>
-</nav>
+    <ul class="sequence-nav-buttons">
+      <li class="prev"><a href="#">Previous</a></li>
+      <li class="next"><a href="#">Next</a></li>
+    </ul>
+  </nav>
 
-<div id="seq_content"></div>
+  <div id="seq_content"></div>
 
-<nav class="sequence-bottom">
-<ul aria-label="Section Navigation">
-  <li class="${ id }prev prev"><a href="#">Previous</a></li>
-  <li class="${ id }next next"><a href="#">Next</a></li>
-</ul>
-</nav>
+  <nav class="sequence-bottom">
+    <ul aria-label="Section Navigation" class="sequence-nav-buttons">
+      <li class="prev"><a href="#">Previous</a></li>
+      <li class="next"><a href="#">Next</a></li>
+    </ul>
+  </nav>
+</div>
 
+<%block name="js_extra">
+<script type="text/javascript">
+  $(function(){
+      new Sequence('${id}', ${items}, '${tag}', ${position});
+  });
+</script>
+</%block>
diff --git a/templates/seq_module.js b/templates/seq_module.js
deleted file mode 100644
index 691cbb5544..0000000000
--- a/templates/seq_module.js
+++ /dev/null
@@ -1,118 +0,0 @@
-// IMPORTANT TODO: Namespace
-
-var ${ id }contents=["",
- %for t in items:
- ${t['content']} ,
- %endfor
- ""
-       ];
-
-var ${ id }types=["",
- %for t in items:
- "${t['type']}" , 
- %endfor
- ""
-       ];
-
-var ${ id }init_functions=["",
- %for t in items:
-	       function(){ ${t['init_js']} },
- %endfor
-	       ""];
-
-var ${ id }titles=${titles};
-
-var ${ id }destroy_functions=["",
- %for t in items:
-	       function(){ ${t['destroy_js']} },
- %endfor
-	       ""];
-
-var ${ id }loc = -1;
-function disablePrev() {
-    var i=${ id }loc-1;
-    log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
-    if (i < 1 ) {
-      $('.${ id }prev a').addClass('disabled');
-    } else {
-      $('.${ id }prev a').removeClass('disabled');
-    };
-  }
-
-  function disableNext() {
-    var i=${ id }loc+1;
-    log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
-
-    if(i > ${ len(items) } ) {
-      $('.${ id }next a').addClass('disabled');
-    } else {
-      $('.${ id }next a').removeClass('disabled');
-    };
-}
-
-function ${ id }goto(i) {
-  log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'});
-
-  postJSON('${ MITX_ROOT_URL }/modx/${tag}/${ id }/goto_position',
-  {'position' : i });
-
-  if (${ id }loc!=-1)
-  ${ id }destroy_functions[ ${ id }loc ]();
-  $('#seq_content').html(${ id }contents[i]);
-  ${ id }init_functions[i]()
-  //$('#tt_'+${ id }loc).attr("style", "background-color:gray");
-  $('#tt_'+${ id }loc).removeClass();
-  $('#tt_'+${ id }loc).addClass("seq_"+${ id }types[${ id }loc]+"_visited");
-  ${ id }loc=i;
-  //$('#tt_'+i).attr("style", "background-color:red");
-  $('#tt_'+i).removeClass();
-  $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");
-
-  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-
-  disableNext();
-  disablePrev();
-}
-
-function ${ id }setup_click(i) {
-        $('#tt_'+i).click(function(eo) { ${ id }goto(i);});
-	$('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive");
-	$('#tt_'+i).append("<p>" + ${ id }titles[i-1] + "</p>");
-
-}
-
-function ${ id }next() {
-    var i=${ id }loc+1;
-    log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
-    if(i > ${ len(items) } ) {
-      i = ${ len(items) };
-  } else {
-    ${ id }goto(i);
-  };
-}
-
-
-function ${ id }prev() {
-    var i=${ id }loc-1;
-    log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
-    if (i < 1 ) {
-      i = 1;
-    } else {
-    ${ id }goto(i);
-  };
-}
-
-
-
-$(function() {
-  var i;
-  for(i=1; i<${ len(items)+1 }; i++) {
-    ${ id }setup_click(i);
-  }
-
-
-  $('.${ id }next a').click(function(eo) { ${ id }next(); return false;});
-  $('.${ id }prev a').click(function(eo) { ${ id }prev(); return false;});
-  ${ id }goto( ${ position } );
-
-});

From 8624927fc4d2c3519d42f68f913456e25eca8747 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Tue, 1 May 2012 17:54:11 -0400
Subject: [PATCH 16/57] Rewritten video module

---
 djangoapps/courseware/modules/video_module.py |  23 +--
 static/coffee/src/courseware.coffee           |   2 +
 static/coffee/src/main.coffee                 |   4 +
 static/js/jquery.scrollTo-1.4.2-min.js        |  11 ++
 static/sass/courseware/_video.scss            | 114 +++++++-------
 templates/coffee/src/modules/video.coffee     |  41 +++++
 .../src/modules/video/video_caption.coffee    | 116 ++++++++++++++
 .../src/modules/video/video_player.coffee     | 145 ++++++++++++++++++
 .../video/video_progress_slider.coffee        |  54 +++++++
 .../modules/video/video_speed_control.coffee  |  38 +++++
 templates/coffee/src/time.coffee              |  21 +++
 templates/courseware.html                     |   2 +-
 templates/main.html                           |   5 +
 templates/video.html                          | 142 ++++-------------
 14 files changed, 530 insertions(+), 188 deletions(-)
 create mode 100644 static/js/jquery.scrollTo-1.4.2-min.js
 create mode 100644 templates/coffee/src/modules/video.coffee
 create mode 100644 templates/coffee/src/modules/video/video_caption.coffee
 create mode 100644 templates/coffee/src/modules/video/video_player.coffee
 create mode 100644 templates/coffee/src/modules/video/video_progress_slider.coffee
 create mode 100644 templates/coffee/src/modules/video/video_speed_control.coffee
 create mode 100644 templates/coffee/src/time.coffee

diff --git a/djangoapps/courseware/modules/video_module.py b/djangoapps/courseware/modules/video_module.py
index c678838f2b..1cf2c71435 100644
--- a/djangoapps/courseware/modules/video_module.py
+++ b/djangoapps/courseware/modules/video_module.py
@@ -30,32 +30,19 @@ class Module(XModule):
     def get_xml_tags(c):
         '''Tags in the courseware file guaranteed to correspond to the module'''
         return ["video"]
-        
+
     def video_list(self):
         l = self.youtube.split(',')
         l = [i.split(":") for i in l]
         return json.dumps(dict(l))
-    
+
     def get_html(self):
         return render_to_string('video.html',{'streams':self.video_list(),
                                               'id':self.item_id,
-                                              'position':self.position, 
-                                              'name':self.name, 
+                                              'position':self.position,
+                                              'name':self.name,
                                               'annotations':self.annotations})
 
-    def get_init_js(self):
-        '''JavaScript code to be run when problem is shown. Be aware
-        that this may happen several times on the same page
-        (e.g. student switching tabs). Common functions should be put
-        in the main course .js files for now. ''' 
-        log.debug(u"INIT POSITION {0}".format(self.position))
-        return render_to_string('video_init.js',{'streams':self.video_list(),
-                                                 'id':self.item_id,
-                                                 'position':self.position})+self.annotations_init
-
-    def get_destroy_js(self):
-        return "videoDestroy(\"{0}\");".format(self.item_id)+self.annotations_destroy
-
     def __init__(self, system, xml, item_id, state=None):
         XModule.__init__(self, system, xml, item_id, state)
         xmltree=etree.fromstring(xml)
@@ -69,5 +56,3 @@ class Module(XModule):
 
         self.annotations=[(e.get("name"),self.render_function(e)) \
                       for e in xmltree]
-        self.annotations_init="".join([e[1]['init_js'] for e in self.annotations if 'init_js' in e[1]])
-        self.annotations_destroy="".join([e[1]['destroy_js'] for e in self.annotations if 'destroy_js' in e[1]])
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index a4c93ec0b4..73b7938b46 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -13,6 +13,8 @@ class window.Courseware
           autoHeight: false
         $('#open_close_accordion a').click navigation.toggle
 
+        $('#accordion').show()
+
     log: (event, ui) ->
       log_event 'accordion',
         newheader: ui.newHeader.text()
diff --git a/static/coffee/src/main.coffee b/static/coffee/src/main.coffee
index 8a9a892f94..39f84228a6 100644
--- a/static/coffee/src/main.coffee
+++ b/static/coffee/src/main.coffee
@@ -2,7 +2,11 @@ $ ->
   $.ajaxSetup
     headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
 
+  window.onTouchBasedDevice = ->
+    navigator.userAgent.match /iPhone|iPod|iPad/i
+
   Calculator.bind()
   Courseware.bind()
   FeedbackForm.bind()
   $("a[rel*=leanModal]").leanModal()
+
diff --git a/static/js/jquery.scrollTo-1.4.2-min.js b/static/js/jquery.scrollTo-1.4.2-min.js
new file mode 100644
index 0000000000..73a334184e
--- /dev/null
+++ b/static/js/jquery.scrollTo-1.4.2-min.js
@@ -0,0 +1,11 @@
+/**
+ * jQuery.ScrollTo - Easy element scrolling using jQuery.
+ * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+ * Dual licensed under MIT and GPL.
+ * Date: 5/25/2009
+ * @author Ariel Flesler
+ * @version 1.4.2
+ *
+ * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
+ */
+;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
\ No newline at end of file
diff --git a/static/sass/courseware/_video.scss b/static/sass/courseware/_video.scss
index 54c1b9f600..76da33d652 100644
--- a/static/sass/courseware/_video.scss
+++ b/static/sass/courseware/_video.scss
@@ -14,38 +14,29 @@ section.course-content {
     }
   }
 
-  div.video-subtitles {
+  div.video {
+    @include clearfix();
     background: #f3f3f3;
     border-bottom: 1px solid #e1e1e1;
     border-top: 1px solid #e1e1e1;
-    @include clearfix();
     display: block;
     margin: 0 (-(lh()));
     padding: 6px lh();
 
-    div.video-wrapper {
+    article.video-wrapper {
       float: left;
       margin-right: flex-gutter(9);
       width: flex-grid(6, 9);
 
-      div.video-player {
+      section.video-player {
         height: 0;
         overflow: hidden;
         padding-bottom: 56.25%;
         padding-top: 30px;
         position: relative;
 
-        object {
-          height: 100%;
-          left: 0;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
-
-        iframe#html5_player {
+        object, iframe {
           border: none;
-          display: none;
           height: 100%;
           left: 0;
           position: absolute;
@@ -68,7 +59,7 @@ section.course-content {
           }
         }
 
-        div#slider {
+        div.slider {
           @extend .clearfix;
           background: #c2c2c2;
           border: none;
@@ -175,7 +166,8 @@ section.course-content {
               }
             }
 
-            div#vidtime {
+            div.vidtime {
+              padding-left: lh(.75);
               font-weight: bold;
               line-height: 46px; //height of play pause buttons
               padding-left: lh(.75);
@@ -190,6 +182,7 @@ section.course-content {
 
           div.speeds {
             float: left;
+            position: relative;
 
             a {
               background: url('../images/closed-arrow.png') 10px center no-repeat;
@@ -211,7 +204,7 @@ section.course-content {
               &.open {
                 background: url('../images/open-arrow.png') 10px center no-repeat;
 
-                ol#video_speeds {
+                ol.video_speeds {
                   display: block;
                   opacity: 1;
                 }
@@ -234,47 +227,52 @@ section.course-content {
                 padding: 0 lh(.5) 0 0;
               }
 
-              // fix for now
-              ol#video_speeds {
+              &:hover, &:active, &:focus {
+                opacity: 1;
                 background-color: #444;
-                border: 1px solid #000;
-                @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
-                display: none;
-                left: -1px;
-                opacity: 0;
-                position: absolute;
-                top:0;
-                @include transition();
-                width: 100%;
-                z-index: 10;
+              }
+            }
 
-                li {
-                  border-bottom: 1px solid #000;
-                  @include box-shadow( 0 1px 0 #555);
+            // fix for now
+            ol.video_speeds {
+              @include box-shadow(inset 1px 0 0 #555, 0 3px 0 #444);
+              @include transition();
+              background-color: #444;
+              border: 1px solid #000;
+              bottom: 46px;
+              display: none;
+              opacity: 0;
+              position: absolute;
+              width: 125px;
+              z-index: 10;
+
+              li {
+                @include box-shadow( 0 1px 0 #555);
+                border-bottom: 1px solid #000;
+                color: #fff;
+                cursor: pointer;
+
+                a {
+                  border: 0;
                   color: #fff;
-                  cursor: pointer;
-                  padding: 0 lh(.5);
-
-                  &.active {
-                    font-weight: bold;
-                  }
-
-                  &:last-child {
-                    border-bottom: 0;
-                    @include box-shadow(none);
-                    margin-top: 0;
-                  }
+                  display: block;
+                  padding: lh(.5);
 
                   &:hover {
                     background-color: #666;
                     color: #aaa;
                   }
                 }
-              }
 
-              &:hover {
-                background-color: #444;
-                opacity: 1;
+                &.active {
+                  font-weight: bold;
+                }
+
+                &:last-child {
+                  @include box-shadow(none);
+                  border-bottom: 0;
+                  margin-top: 0;
+                }
               }
             }
           }
@@ -334,7 +332,7 @@ section.course-content {
           opacity: 1;
         }
 
-        div#slider {
+        div.slider {
           height: 14px;
           margin-top: -7px;
 
@@ -352,7 +350,7 @@ section.course-content {
     ol.subtitles {
       float: left;
       max-height: 460px;
-      overflow: hidden;
+      overflow: auto;
       padding-top: 10px;
       width: flex-grid(3, 9);
 
@@ -360,7 +358,7 @@ section.course-content {
         border: 0;
         color: #666;
         cursor: pointer;
-        margin-bottom: 0px;
+        margin-bottom: 8px;
         padding: 0;
         @include transition(all, .5s, ease-in);
 
@@ -373,11 +371,7 @@ section.course-content {
           color: $mit-red;
         }
 
-        div {
-          margin-bottom: 8px;
-        }
-
-        div:empty {
+        &:empty {
           margin-bottom: 0px;
         }
       }
@@ -386,7 +380,7 @@ section.course-content {
     &.closed {
       @extend .trans;
 
-      div.video-wrapper {
+      article.video-wrapper {
         width: flex-grid(9,9);
       }
 
@@ -441,11 +435,11 @@ section.course-content {
       }
 
       div.tc-wrapper {
-        div.video-wrapper {
+        article.video-wrapper {
           width: 100%;
         }
 
-        object#myytplayer, iframe {
+        object, iframe {
           bottom: 0;
           height: 100%;
           left: 0;
@@ -487,7 +481,7 @@ section.course-content {
   }
 }
 
-div.course-wrapper.closed section.course-content div.video-subtitles {
+div.course-wrapper.closed section.course-content div.video {
   ol.subtitles {
     max-height: 577px;
   }
diff --git a/templates/coffee/src/modules/video.coffee b/templates/coffee/src/modules/video.coffee
new file mode 100644
index 0000000000..01aad7c334
--- /dev/null
+++ b/templates/coffee/src/modules/video.coffee
@@ -0,0 +1,41 @@
+class window.Video
+  constructor: (@id, videos) ->
+    @element = $("#video_#{@id}")
+    @parseVideos videos
+    @fetchMetadata()
+    @parseSpeed()
+    $("#video_#{@id}").data('video', this)
+    window.onYouTubePlayerAPIReady = =>
+      $('.course-content .video').each ->
+        $(this).data('video').embed()
+
+  youtubeId: (speed)->
+    @videos[speed || @speed]
+
+  parseVideos: (videos) ->
+    @videos = {}
+    $.each videos, (speed, url) =>
+      speed = parseFloat(speed).toFixed(2).replace /\.00$/, '.0'
+      @videos[speed] = url
+
+  parseSpeed: ->
+    @setSpeed($.cookie('video_speed'))
+    @speeds = ($.map @videos, (url, speed) -> speed).sort()
+
+  setSpeed: (newSpeed) ->
+    if @videos[newSpeed] != undefined
+      @speed = newSpeed
+      $.cookie('video_speed', "#{newSpeed}", expires: 3650, path: '/')
+    else
+      @speed = '1.0'
+
+  embed: ->
+    @player = new VideoPlayer(this)
+
+  fetchMetadata: (url) ->
+    @metadata = {}
+    $.each @videos, (speed, url) =>
+      $.get "http://gdata.youtube.com/feeds/api/videos/#{url}?v=2&alt=jsonc", ((data) => @metadata[data.data.id] = data.data) , 'jsonp'
+
+  getDuration: ->
+    @metadata[@youtubeId()].duration
diff --git a/templates/coffee/src/modules/video/video_caption.coffee b/templates/coffee/src/modules/video/video_caption.coffee
new file mode 100644
index 0000000000..8742c2031a
--- /dev/null
+++ b/templates/coffee/src/modules/video/video_caption.coffee
@@ -0,0 +1,116 @@
+class VideoCaption
+  constructor: (@player, @youtubeId) ->
+    @index = []
+    @fetchCaption()
+    @bind()
+
+  $: (selector) ->
+    @player.$(selector)
+
+  bind: ->
+    $(window).bind('resize', @onWindowResize)
+    $(@player).bind('resize', @onWindowResize)
+    $(@player).bind('updatePlayTime', @onUpdatePlayTime)
+    @$('.hide-subtitles').click @toggle
+
+  fetchCaption: ->
+    $.getJSON @captionURL(), (captions) =>
+      @captions = captions.text
+      @start = captions.start
+      for index in [0...captions.start.length]
+        for time in [captions.start[index]..captions.end[index]]
+          @index[time] ||= []
+          @index[time].push(index)
+      @render()
+
+  captionURL: ->
+    "/static/subs/#{@youtubeId}.srt.sjson"
+
+  render: ->
+    container = $('<ol class="subtitles">')
+    container.css maxHeight: @$('.video-wrapper').height() - 5
+
+    $.each @captions, (index, text) =>
+      container.append $('<li>').html(text).attr
+        'data-index': index
+        'data-start': @start[index]
+
+    @$('.subtitles').replaceWith(container)
+    @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
+      .mousemove(@onMovement).bind('mousewheel', @onMovement)
+      .bind('DOMMouseScroll', @onMovement)
+    @$('.subtitles li[data-index]').click @seekPlayer
+
+    # prepend and append an empty <li> for cosmatic reason
+    @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))
+      .append($('<li class="spacing">').height(@bottomSpacingHeight()))
+
+  onUpdatePlayTime: (event, time) =>
+    # This 250ms offset is required to match the video speed
+    time = Math.round(Time.convert(time, @player.currentSpeed(), '1.0') * 1000 + 250)
+    newIndex = @index[time]
+
+    if newIndex != undefined && @currentIndex != newIndex
+      if @currentIndex
+        for index in @currentIndex
+          @$(".subtitles li[data-index='#{index}']").removeClass('current')
+
+      for index in newIndex
+        @$(".subtitles li[data-index='#{newIndex}']").addClass('current')
+
+      @currentIndex = newIndex
+      @scrollCaption()
+
+  onWindowResize: =>
+    @$('.subtitles').css maxHeight: @captionHeight()
+    @$('.subtitles .spacing:first').height(@topSpacingHeight())
+    @$('.subtitles .spacing:last').height(@bottomSpacingHeight())
+    @scrollCaption()
+
+  onMouseEnter: =>
+    clearTimeout @frozen if @frozen
+    @frozen = setTimeout @onMouseLeave, 10000
+
+  onMovement: (event) =>
+    @onMouseEnter()
+
+  onMouseLeave: =>
+    clearTimeout @frozen if @frozen
+    @frozen = null
+    @scrollCaption() if @player.isPlaying()
+
+  scrollCaption: ->
+    if !@frozen && @$('.subtitles .current:first').length
+      @$('.subtitles').scrollTo @$('.subtitles .current:first'),
+        offset: - @calculateOffset(@$('.subtitles .current:first'))
+
+  seekPlayer: (event) =>
+    event.preventDefault()
+    time = Math.round(Time.convert($(event.target).data('start'), '1.0', @player.currentSpeed()) / 1000)
+    $(@player).trigger('seek', time)
+
+  calculateOffset: (element) ->
+    @captionHeight() / 2 - element.height() / 2
+
+  topSpacingHeight: ->
+    @calculateOffset(@$('.subtitles li:not(.spacing).first'))
+
+  bottomSpacingHeight: ->
+    @calculateOffset(@$('.subtitles li:not(.spacing).last'))
+
+  toggle: (event) =>
+    event.preventDefault()
+    if @player.element.hasClass('closed')
+      @$('.hide-subtitles').attr('title', 'Turn off captions')
+      @player.element.removeClass('closed')
+    else
+      @$('.hide-subtitles').attr('title', 'Turn on captions')
+      @player.element.addClass('closed')
+    @scrollCaption()
+
+  captionHeight: ->
+    if @player.element.hasClass('fullscreen')
+      $(window).height() - @$('.video-controls').height()
+    else
+      @$('.video-wrapper').height()
+
diff --git a/templates/coffee/src/modules/video/video_player.coffee b/templates/coffee/src/modules/video/video_player.coffee
new file mode 100644
index 0000000000..b6ae94aabb
--- /dev/null
+++ b/templates/coffee/src/modules/video/video_player.coffee
@@ -0,0 +1,145 @@
+class VideoPlayer
+  constructor: (@video) ->
+    @currentTime = 0
+    @element = $("#video_#{@video.id}")
+    @buildPlayer()
+    @bind()
+
+  $: (selector) ->
+    $(selector, @element)
+
+  bind: ->
+    $(@).bind('seek', @onSeek)
+    $(@).bind('updatePlayTime', @onUpdatePlayTime)
+    $(@).bind('speedChange', @onSpeedChange)
+    $(document).keyup @bindExitFullScreen
+
+    @$('.video_control').click @togglePlayback
+    @$('.add-fullscreen').click @toggleFullScreen
+    @addToolTip unless onTouchBasedDevice()
+
+  bindExitFullScreen: (event) =>
+    if @element.hasClass('fullscreen') && event.keyCode == 27
+      @toggleFullScreen(event)
+
+  buildPlayer: ->
+    new VideoCaption(this, @video.youtubeId('1.0'))
+    new VideoSpeedControl(this, @video.speeds)
+    new VideoProgressSlider(this)
+    @player = new YT.Player @video.id,
+      playerVars:
+        controls: 0
+        wmode: 'transparent'
+        rel: 0
+        showinfo: 0
+        enablejsapi: 1
+      videoId: @video.youtubeId()
+      events:
+        onReady: @onReady
+        onStateChange: @onStateChange
+
+  addToolTip: ->
+    @$('.add-fullscreen, .hide-subtitles').qtip
+      position:
+        my: 'top right'
+        at: 'top center'
+
+  onReady: =>
+    @setProgress(0, @duration())
+    $(@).trigger('ready')
+    unless true || onTouchBasedDevice()
+      $('.course-content .video:first').data('video').player.play()
+
+  onStateChange: (event) =>
+    switch event.data
+      when YT.PlayerState.PLAYING
+        if window.player && window.player != @player
+          window.player.pauseVideo()
+        window.player = @player
+        @onPlay()
+      when YT.PlayerState.PAUSED
+        if window.player == @player
+          window.player = null
+        @onPause()
+      when YT.PlayerState.ENDED
+        if window.player == @player
+          window.player = null
+        @onPause()
+
+  onPlay: ->
+    @$('.video_control').removeClass('play').addClass('pause').html('Pause')
+    unless @player.interval
+      @player.interval = setInterval(@update, 200)
+
+  onPause: ->
+    @$('.video_control').removeClass('pause').addClass('play').html('Play')
+    clearInterval(@player.interval)
+    @player.interval = null
+
+  onSeek: (event, time) ->
+    @player.seekTo(time, true)
+    if @isPlaying()
+      clearInterval(@player.interval)
+      @player.interval = setInterval(@update, 200)
+    else
+      @currentTime = time
+      $(@).trigger('updatePlayTime', time)
+
+  onSpeedChange: (event, newSpeed) =>
+    @currentTime = Time.convert(@currentTime, parseFloat(@currentSpeed()), newSpeed)
+    @video.setSpeed(parseFloat(newSpeed).toFixed(2).replace /\.00$/, '.0')
+
+    if @isPlaying()
+      @player.loadVideoById(@video.youtubeId(), @currentTime)
+    else
+      @player.cueVideoById(@video.youtubeId(), @currentTime)
+      @setProgress(@currentTime, @duration())
+    $(@).trigger('updatePlayTime', @currentTime)
+
+  update: =>
+    if @currentTime = @player.getCurrentTime()
+      $(@).trigger('updatePlayTime', @currentTime)
+
+  onUpdatePlayTime: (event, time) =>
+    @setProgress(@currentTime) if time
+
+  setProgress: (time) =>
+    progress = Time.format(time) + ' / ' + Time.format(@duration())
+    if @progress != progress
+      @$(".vidtime").html(progress)
+      @progress = progress
+
+  togglePlayback: (event) =>
+    event.preventDefault()
+    if $(event.target).hasClass('play')
+      @play()
+    else
+      @pause()
+
+  toggleFullScreen: (event) =>
+    event.preventDefault()
+    if @element.hasClass('fullscreen')
+      @$('.exit').remove()
+      @$('.add-fullscreen').attr('title', 'Fill browser')
+      @element.removeClass('fullscreen')
+    else
+      @element.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen')
+      @$('.add-fullscreen').attr('title', 'Exit fill browser')
+      @$('.exit').click @toggleFullScreen
+    $(@).trigger('resize')
+
+  # Delegates
+  play: ->
+    @player.playVideo() if @player.playVideo
+
+  isPlaying: ->
+    @player.getPlayerState() == YT.PlayerState.PLAYING
+
+  pause: ->
+    @player.pauseVideo()
+
+  duration: ->
+    @video.getDuration()
+
+  currentSpeed: ->
+    @video.speed
diff --git a/templates/coffee/src/modules/video/video_progress_slider.coffee b/templates/coffee/src/modules/video/video_progress_slider.coffee
new file mode 100644
index 0000000000..4eaba392ba
--- /dev/null
+++ b/templates/coffee/src/modules/video/video_progress_slider.coffee
@@ -0,0 +1,54 @@
+class VideoProgressSlider
+  constructor: (@player) ->
+    @buildSlider()
+    @buildHandle()
+    $(@player).bind('updatePlayTime', @onUpdatePlayTime)
+    $(@player).bind('ready', @onReady)
+
+  $: (selector) ->
+    @player.$(selector)
+
+  buildSlider: ->
+    @slider = @$('.slider').slider
+      range: 'min'
+      change: @onChange
+      slide: @onSlide
+      stop: @onStop
+
+  buildHandle: ->
+    @handle = @$('.ui-slider-handle')
+    @handle.qtip
+      content: "#{Time.format(@slider.slider('value'))}"
+      position:
+        my: 'bottom center'
+        at: 'top center'
+        container: @handle
+      hide:
+        delay: 700
+      style:
+        classes: 'ui-tooltip-slider'
+        widget: true
+
+  onReady: =>
+    @slider.slider('option', 'max', @player.duration())
+
+  onUpdatePlayTime: (event, currentTime) =>
+    if !@frozen
+      @slider.slider('option', 'max', @player.duration())
+      @slider.slider('value', currentTime)
+
+  onSlide: (event, ui) =>
+    @frozen = true
+    @updateTooltip(ui.value)
+    $(@player).trigger('seek', ui.value)
+
+  onChange: (event, ui) =>
+    @updateTooltip(ui.value)
+
+  onStop: (event, ui) =>
+    @frozen = true
+    $(@player).trigger('seek', ui.value)
+    setTimeout (=> @frozen = false), 200
+
+  updateTooltip: (value)->
+    @handle.qtip('option', 'content.text', "#{Time.format(value)}")
diff --git a/templates/coffee/src/modules/video/video_speed_control.coffee b/templates/coffee/src/modules/video/video_speed_control.coffee
new file mode 100644
index 0000000000..1214053fd9
--- /dev/null
+++ b/templates/coffee/src/modules/video/video_speed_control.coffee
@@ -0,0 +1,38 @@
+class VideoSpeedControl
+  constructor: (@player, @speeds) ->
+    @build()
+    @bind()
+
+  $: (selector) ->
+    @player.$(selector)
+
+  bind: ->
+    $(@player).bind('speedChange', @onSpeedChange)
+    @$('.video_speeds a').click @changeVideoSpeed
+    if onTouchBasedDevice()
+      @$('.speeds').click -> $(this).toggleClass('open')
+    else
+      @$('.speeds').mouseover -> $(this).addClass('open')
+      .mouseout -> $(this).removeClass('open')
+      .click (event) ->
+        event.preventDefault()
+        $(this).removeClass('open')
+
+  build: ->
+    $.each @speeds, (index, speed) =>
+      link = $('<a>').attr(href: "#").html("#{speed}x")
+      @$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link))
+    @setSpeed(@player.currentSpeed())
+
+  changeVideoSpeed: (event) =>
+    event.preventDefault()
+    unless $(event.target).parent().hasClass('active')
+      $(@player).trigger 'speedChange', $(event.target).parent().data('speed')
+
+  onSpeedChange: (event, speed) =>
+    @setSpeed(parseFloat(speed).toFixed(2).replace /\.00$/, '.0')
+
+  setSpeed: (speed) ->
+    @$('.video_speeds li').removeClass('active')
+    @$(".video_speeds li[data-speed='#{speed}']").addClass('active')
+    @$('.speeds p.active').html("#{speed}x")
diff --git a/templates/coffee/src/time.coffee b/templates/coffee/src/time.coffee
new file mode 100644
index 0000000000..3e39820866
--- /dev/null
+++ b/templates/coffee/src/time.coffee
@@ -0,0 +1,21 @@
+class @Time
+  @format: (time) ->
+    seconds = Math.floor time
+    minutes = Math.floor seconds / 60
+    hours = Math.floor minutes / 60
+    seconds = seconds % 60
+    minutes = minutes % 60
+
+    if hours
+      "#{hours}:#{@pad(minutes)}:#{@pad(seconds % 60)}"
+    else
+      "#{minutes}:#{@pad(seconds % 60)}"
+
+  @pad: (number) ->
+    if number < 10
+      "0#{number}"
+    else
+      number
+
+  @convert: (time, oldSpeed, newSpeed) ->
+    (time * oldSpeed / newSpeed).toFixed(3)
diff --git a/templates/courseware.html b/templates/courseware.html
index 404871e49c..ca74d843a8 100644
--- a/templates/courseware.html
+++ b/templates/courseware.html
@@ -26,7 +26,7 @@
         <a href="#">close</a>
       </header>
 
-      <div id="accordion">
+      <div id="accordion" style="display: none">
         <nav>
           ${accordion}
         </nav>
diff --git a/templates/main.html b/templates/main.html
index beeb9d991e..0a3424a053 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -116,6 +116,11 @@
   <script type="text/javascript" src="${static.url('js/video_player.js')}"></script>
   <script type="text/javascript" src="${static.url('js/schematic.js')}"></script>
   <script type="text/javascript" src="${static.url('js/cktsim.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/jquery.scrollTo-1.4.2-min.js')}"></script>
+  <script type="text/javascript">
+    document.write('\x3Cscript type="text/javascript" src="' +
+        document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
+  </script>
 
   <%block name="js_extra"/>
 </body>
diff --git a/templates/video.html b/templates/video.html
index 0d1f6c5641..19ebeb5e5f 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -2,123 +2,49 @@
   <h1> ${name} </h1>
 % endif
 
-<div class="video-subtitles">
-<div class="tc-wrapper">
+<div id="video_${id}" class="video">
+  <div class="tc-wrapper">
+    <article class="video-wrapper">
+      <section class="video-player">
+        <div id="${id}"></div>
+      </section>
 
-  <div class="video-wrapper">
-    <div class="video-player">
-      <div id="ytapiplayer">
-      </div>
+      <section class="video-controls">
+        <div class="slider"></div>
+        <div>
+          <ul class="vcr">
+            <li><a class="video_control play">Play</a></li>
+            <li>
+              <div class="vidtime">0:00 / 0:00</div>
+            </li>
+          </ul>
 
-      <iframe id="html5_player" type="text/html" frameborder="0">
-      </iframe>
-    </div>
+          <div class="secondary-controls">
+            <div class="speeds">
+              <a href="#">
+                <h3>Speed</h3>
+                <p class="active"></p>
+              </a>
+              <ol class="video_speeds"></ol>
+            </div>
 
-    <section class="video-controls">
-      <div id="slider"></div>
-
-      <section>
-        <ul class="vcr">
-          <li><a id="video_control" class="pause">Pause</a></li>
-
-          <li>
-            <div id="vidtime">0:00 / 0:00</div>
-          </li>
-        </ul>
-
-
-        <div class="secondary-controls">
-        <div class="speeds">
-          <a href="#">
-            <h3>Speed</h3>
-            <p class="active"></p>
-            <ol id="video_speeds"></ol>
-          </a>
-        </div>
-
-        <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
-
-        <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
+            <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
+            <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
+          </div>
         </div>
       </section>
-    </section>
+    </article>
+
+    <ol class="subtitles">
+      <li>Attempting to load captions...</li>
+    </ol>
   </div>
-
-  <ol class="subtitles">
-    <!-- <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li> -->
-    <li id="stt_n4"><div id="std_n6" onclick="title_seek(-6);"></div></li>
-    <li id="stt_n4"><div id="std_n5" onclick="title_seek(-5);"></div></li>
-    <li id="stt_n4"><div id="std_n4" onclick="title_seek(-4);"></div></li>
-    <li id="stt_n3"><div id="std_n3" onclick="title_seek(-3);"></div></li>
-    <li id="stt_n2"><div id="std_n2" onclick="title_seek(-2);"></div></li>
-    <li id="stt_n1"><div id="std_n1" onclick="title_seek(-1);"></div></li>
-    <li id="stt_0 "class="current"><div id="std_0" onclick="title_seek(0);"></div></li>
-    <li id="stt_p1"><div id="std_p1" onclick="title_seek( 1);"></div></li>
-    <li id="stt_p2"><div id="std_p2" onclick="title_seek( 2);"></div></li>
-    <li id="stt_p3"><div id="std_p3" onclick="title_seek( 3);"></div></li>
-    <li id="stt_p4"><div id="std_p4" onclick="title_seek( 4);"></div></li>
-    <li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
-    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
-    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
-    <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
-  </ol>
-</div>
-
 </div>
 
 <%block name="js_extra">
-<script src="/static/js/jquery.ui.touch-punch.min.js"></script>
-<script type="text/javascript" charset="utf-8">
-  $(function() {
-      // tooltips for full browser and closed caption
-      $('.add-fullscreen, .hide-subtitles ').qtip({
-          position: {
-            my: 'top right',
-            at: 'top center'
-            }
-        });
-
-      //full browser
-      $('.add-fullscreen').click(function() {
-
-          $('div.video-subtitles').toggleClass('fullscreen');
-
-          if ($('div.video-subtitles').hasClass('fullscreen')) {
-            $('div.video-subtitles').append('<a href="#" class="exit">Exit</a>');
-            } else {
-            $('a.exit').remove();
-            }
-
-          $('.exit').click(function() {
-            $('div.video-subtitles').removeClass('fullscreen');
-            $(this).remove();
-            return false;
-            });
-
-          var link_title = $(this).attr('title');
-          $(this).attr('title', (link_title == 'Exit fill browser') ? 'Fill browser' : 'Exit fill browser');
-
-          return false;
-        });
-
-
-      //hide subtitles
-      $('.hide-subtitles').click(function() {
-        $('div.video-subtitles').toggleClass('closed');
-
-        var link_title = $(this).attr('title');
-        $(this).attr('title', (link_title == 'Turn on captions') ? 'Turn off captions' : 'Turn on captions');
-
-        return false;
-       });
-
-      $("div.speeds a").hover(function() {
-        $(this).toggleClass("open");
-        });
-
-      $("div.speeds a").click(function() {
-        return false;
-        });
+<script type="text/javascript">
+  $(function(){
+    new Video('${id}', ${streams});
   });
 </script>
 </%block>

From 80c97c65920170d7036232cd1690a8b97454298d Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 9 May 2012 15:17:10 -0400
Subject: [PATCH 17/57] Refactor module loading using class detection

---
 djangoapps/courseware/modules/video_module.py |  4 +--
 static/coffee/src/calculator.coffee           | 11 +++----
 static/coffee/src/courseware.coffee           | 32 +++++++------------
 static/coffee/src/feedback_form.coffee        |  4 +--
 static/coffee/src/main.coffee                 |  5 ++-
 static/sass/courseware/_video.scss            |  1 -
 .../coffee/src/courseware_navigation.coffee   | 19 +++++++++++
 templates/coffee/src/modules/sequence.coffee  | 14 ++++----
 templates/coffee/src/modules/video.coffee     |  9 +++---
 templates/coffee/src/navigation.coffee        | 19 +++++++++++
 templates/video.html                          | 10 +-----
 11 files changed, 72 insertions(+), 56 deletions(-)
 create mode 100644 templates/coffee/src/courseware_navigation.coffee
 create mode 100644 templates/coffee/src/navigation.coffee

diff --git a/djangoapps/courseware/modules/video_module.py b/djangoapps/courseware/modules/video_module.py
index 1cf2c71435..80a1ce2f80 100644
--- a/djangoapps/courseware/modules/video_module.py
+++ b/djangoapps/courseware/modules/video_module.py
@@ -32,9 +32,7 @@ class Module(XModule):
         return ["video"]
 
     def video_list(self):
-        l = self.youtube.split(',')
-        l = [i.split(":") for i in l]
-        return json.dumps(dict(l))
+        return self.youtube
 
     def get_html(self):
         return render_to_string('video.html',{'streams':self.video_list(),
diff --git a/static/coffee/src/calculator.coffee b/static/coffee/src/calculator.coffee
index 003cf5b1f4..1486775ad4 100644
--- a/static/coffee/src/calculator.coffee
+++ b/static/coffee/src/calculator.coffee
@@ -1,10 +1,9 @@
-class window.Calculator
-  @bind: ->
-    calculator = new Calculator
-    $('.calc').click calculator.toggle
-    $('form#calculator').submit(calculator.calculate).submit (e) ->
+class Calculator
+  constructor: ->
+    $('.calc').click @toggle
+    $('form#calculator').submit(@calculate).submit (e) ->
       e.preventDefault()
-    $('div.help-wrapper a').hover(calculator.helpToggle).click (e) ->
+    $('div.help-wrapper a').hover(@helpToggle).click (e) ->
       e.preventDefault()
 
   toggle: ->
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index 73b7938b46..ec1d067b6d 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -1,24 +1,14 @@
 class window.Courseware
-  @bind: ->
-    @Navigation.bind()
+  constructor: ->
+    new CoursewareNavigation
+    new Calculator
+    new FeedbackForm
+    @renderModules()
 
-  class @Navigation
-    @bind: ->
-      if $('#accordion').length
-        navigation = new Navigation
-        active = $('#accordion ul:has(li.active)').index('#accordion ul')
-        $('#accordion').bind('accordionchange', navigation.log).accordion
-          active: if active >= 0 then active else 1
-          header: 'h3'
-          autoHeight: false
-        $('#open_close_accordion a').click navigation.toggle
+  @start: ->
+    new Courseware
 
-        $('#accordion').show()
-
-    log: (event, ui) ->
-      log_event 'accordion',
-        newheader: ui.newHeader.text()
-        oldheader: ui.oldHeader.text()
-
-    toggle: ->
-      $('.course-wrapper').toggleClass('closed')
+  renderModules: ->
+    $('.course-content .video').each ->
+      id = $(this).attr('id').replace(/video_/, '')
+      new Video id, $(this).data('streams')
diff --git a/static/coffee/src/feedback_form.coffee b/static/coffee/src/feedback_form.coffee
index bbb5c09365..8d34748dbf 100644
--- a/static/coffee/src/feedback_form.coffee
+++ b/static/coffee/src/feedback_form.coffee
@@ -1,5 +1,5 @@
-class window.FeedbackForm
-  @bind: ->
+class FeedbackForm
+  constructor: ->
     $('#feedback_button').click ->
       data =
         subject: $('#feedback_subject').val()
diff --git a/static/coffee/src/main.coffee b/static/coffee/src/main.coffee
index 39f84228a6..71f7e55d7d 100644
--- a/static/coffee/src/main.coffee
+++ b/static/coffee/src/main.coffee
@@ -5,8 +5,7 @@ $ ->
   window.onTouchBasedDevice = ->
     navigator.userAgent.match /iPhone|iPod|iPad/i
 
-  Calculator.bind()
-  Courseware.bind()
-  FeedbackForm.bind()
   $("a[rel*=leanModal]").leanModal()
 
+  if $('body').hasClass('courseware')
+    Courseware.start()
diff --git a/static/sass/courseware/_video.scss b/static/sass/courseware/_video.scss
index 76da33d652..38a00b0e16 100644
--- a/static/sass/courseware/_video.scss
+++ b/static/sass/courseware/_video.scss
@@ -351,7 +351,6 @@ section.course-content {
       float: left;
       max-height: 460px;
       overflow: auto;
-      padding-top: 10px;
       width: flex-grid(3, 9);
 
       li {
diff --git a/templates/coffee/src/courseware_navigation.coffee b/templates/coffee/src/courseware_navigation.coffee
new file mode 100644
index 0000000000..aef204ea41
--- /dev/null
+++ b/templates/coffee/src/courseware_navigation.coffee
@@ -0,0 +1,19 @@
+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/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index 013206093c..e956252927 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -40,20 +40,20 @@ class window.Sequence
       @position = new_position
       @toggleArrows()
 
-  goto: (e) =>
-    e.preventDefault()
-    new_position = $(e.srcElement).data('element')
+  goto: (event) =>
+    event.preventDefault()
+    new_position = $(event.target).data('element')
     log_event("seq_goto", old: @position, new: new_position, id: @id)
     @render new_position
 
-  next: (e) =>
-    e.preventDefault()
+  next: (event) =>
+    event.preventDefault()
     new_position = @position + 1
     log_event("seq_next", old: @position, new: new_position, id: @id)
     @render new_position
 
-  previous: (e) =>
-    e.preventDefault()
+  previous: (event) =>
+    event.preventDefault()
     new_position = @position - 1
     log_event("seq_prev", old: @position, new: new_position, id: @id)
     @render new_position
diff --git a/templates/coffee/src/modules/video.coffee b/templates/coffee/src/modules/video.coffee
index 01aad7c334..8f35ae0cb1 100644
--- a/templates/coffee/src/modules/video.coffee
+++ b/templates/coffee/src/modules/video.coffee
@@ -1,4 +1,4 @@
-class window.Video
+class Video
   constructor: (@id, videos) ->
     @element = $("#video_#{@id}")
     @parseVideos videos
@@ -14,9 +14,10 @@ class window.Video
 
   parseVideos: (videos) ->
     @videos = {}
-    $.each videos, (speed, url) =>
-      speed = parseFloat(speed).toFixed(2).replace /\.00$/, '.0'
-      @videos[speed] = url
+    $.each videos.split(/,/), (index, video) =>
+      video = video.split(/:/)
+      speed = parseFloat(video[0]).toFixed(2).replace /\.00$/, '.0'
+      @videos[speed] = video[1]
 
   parseSpeed: ->
     @setSpeed($.cookie('video_speed'))
diff --git a/templates/coffee/src/navigation.coffee b/templates/coffee/src/navigation.coffee
new file mode 100644
index 0000000000..0f33d0fa10
--- /dev/null
+++ b/templates/coffee/src/navigation.coffee
@@ -0,0 +1,19 @@
+class Courseware::Navigation
+  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/video.html b/templates/video.html
index 19ebeb5e5f..c7278bee22 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -2,7 +2,7 @@
   <h1> ${name} </h1>
 % endif
 
-<div id="video_${id}" class="video">
+<div id="video_${id}" class="video" data-streams="${streams}">
   <div class="tc-wrapper">
     <article class="video-wrapper">
       <section class="video-player">
@@ -41,14 +41,6 @@
   </div>
 </div>
 
-<%block name="js_extra">
-<script type="text/javascript">
-  $(function(){
-    new Video('${id}', ${streams});
-  });
-</script>
-</%block>
-
 <ol class="video-mod">
 % for t in annotations:
   <li id="video-${annotations.index(t)}">

From e58674f220357df4c40eb1832bf6e610d1425a89 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 9 May 2012 15:59:07 -0400
Subject: [PATCH 18/57] Rebuild controls in JavaScript to reduce bandwidth

---
 templates/coffee/src/modules/sequence.coffee  |  2 -
 .../src/modules/video/video_caption.coffee    | 57 +++++++++++--------
 .../src/modules/video/video_control.coffee    | 42 ++++++++++++++
 .../src/modules/video/video_player.coffee     | 42 ++++++--------
 .../modules/video/video_speed_control.coffee  | 14 ++++-
 templates/video.html                          | 29 +---------
 6 files changed, 104 insertions(+), 82 deletions(-)
 create mode 100644 templates/coffee/src/modules/video/video_control.coffee

diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index e956252927..96450199e8 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -66,5 +66,3 @@ class window.Sequence
 
   mark_active: (position) ->
     @link_for(position).attr class: "seq_#{@elements[position - 1].type}_active"
-
-
diff --git a/templates/coffee/src/modules/video/video_caption.coffee b/templates/coffee/src/modules/video/video_caption.coffee
index 8742c2031a..fd6ade363f 100644
--- a/templates/coffee/src/modules/video/video_caption.coffee
+++ b/templates/coffee/src/modules/video/video_caption.coffee
@@ -1,7 +1,7 @@
 class VideoCaption
   constructor: (@player, @youtubeId) ->
     @index = []
-    @fetchCaption()
+    @render()
     @bind()
 
   $: (selector) ->
@@ -12,6 +12,37 @@ class VideoCaption
     $(@player).bind('resize', @onWindowResize)
     $(@player).bind('updatePlayTime', @onUpdatePlayTime)
     @$('.hide-subtitles').click @toggle
+    @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
+      .mousemove(@onMovement).bind('mousewheel', @onMovement)
+      .bind('DOMMouseScroll', @onMovement)
+    @$('.subtitles li[data-index]').click @seekPlayer
+
+  captionURL: ->
+    "/static/subs/#{@youtubeId}.srt.sjson"
+
+  render: ->
+    @$('.video-wrapper').after """
+      <ol class="subtitles"><li>Attempting to load captions...</li></ol>
+      """
+    @$('.video-controls .secondary-controls').append """
+      <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
+      """
+    @$('.subtitles').css maxHeight: @$('.video-wrapper').height() - 5
+    @fetchCaption()
+
+  renderCaption: ->
+    container = $('<ol>')
+
+    $.each @captions, (index, text) =>
+      container.append $('<li>').html(text).attr
+        'data-index': index
+        'data-start': @start[index]
+
+    @$('.subtitles').html(container.html())
+
+    # prepend and append an empty <li> for cosmatic reason
+    @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))
+      .append($('<li class="spacing">').height(@bottomSpacingHeight()))
 
   fetchCaption: ->
     $.getJSON @captionURL(), (captions) =>
@@ -21,29 +52,7 @@ class VideoCaption
         for time in [captions.start[index]..captions.end[index]]
           @index[time] ||= []
           @index[time].push(index)
-      @render()
-
-  captionURL: ->
-    "/static/subs/#{@youtubeId}.srt.sjson"
-
-  render: ->
-    container = $('<ol class="subtitles">')
-    container.css maxHeight: @$('.video-wrapper').height() - 5
-
-    $.each @captions, (index, text) =>
-      container.append $('<li>').html(text).attr
-        'data-index': index
-        'data-start': @start[index]
-
-    @$('.subtitles').replaceWith(container)
-    @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
-      .mousemove(@onMovement).bind('mousewheel', @onMovement)
-      .bind('DOMMouseScroll', @onMovement)
-    @$('.subtitles li[data-index]').click @seekPlayer
-
-    # prepend and append an empty <li> for cosmatic reason
-    @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))
-      .append($('<li class="spacing">').height(@bottomSpacingHeight()))
+      @renderCaption()
 
   onUpdatePlayTime: (event, time) =>
     # This 250ms offset is required to match the video speed
diff --git a/templates/coffee/src/modules/video/video_control.coffee b/templates/coffee/src/modules/video/video_control.coffee
new file mode 100644
index 0000000000..0f78dc3f84
--- /dev/null
+++ b/templates/coffee/src/modules/video/video_control.coffee
@@ -0,0 +1,42 @@
+class VideoControl
+  constructor: (@player) ->
+    @render()
+    @bind()
+
+  $: (selector) ->
+    @player.$(selector)
+
+  bind: ->
+    $(@player).bind('play', @onPlay)
+      .bind('pause', @onPause)
+      .bind('ended', @onPause)
+    @$('.video_control').click @togglePlayback
+
+  render: ->
+    @$('.video-controls').append """
+      <div class="slider"></div>
+      <div>
+        <ul class="vcr">
+          <li><a class="video_control play">Play</a></li>
+          <li>
+            <div class="vidtime">0:00 / 0:00</div>
+          </li>
+        </ul>
+        <div class="secondary-controls">
+          <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
+        </div>
+      </div>
+     """
+
+  onPlay: =>
+    @$('.video_control').removeClass('play').addClass('pause').html('Pause')
+
+  onPause: =>
+    @$('.video_control').removeClass('pause').addClass('play').html('Play')
+
+  togglePlayback: (event) =>
+    event.preventDefault()
+    if $(event.target).hasClass('play')
+      $(@player).trigger('play')
+    else
+      $(@player).trigger('pause')
diff --git a/templates/coffee/src/modules/video/video_player.coffee b/templates/coffee/src/modules/video/video_player.coffee
index b6ae94aabb..b51dbcd95e 100644
--- a/templates/coffee/src/modules/video/video_player.coffee
+++ b/templates/coffee/src/modules/video/video_player.coffee
@@ -2,7 +2,7 @@ class VideoPlayer
   constructor: (@video) ->
     @currentTime = 0
     @element = $("#video_#{@video.id}")
-    @buildPlayer()
+    @render()
     @bind()
 
   $: (selector) ->
@@ -10,11 +10,13 @@ class VideoPlayer
 
   bind: ->
     $(@).bind('seek', @onSeek)
-    $(@).bind('updatePlayTime', @onUpdatePlayTime)
-    $(@).bind('speedChange', @onSpeedChange)
+      .bind('updatePlayTime', @onUpdatePlayTime)
+      .bind('speedChange', @onSpeedChange)
+      .bind('play', @onPlay)
+      .bind('pause', @onPause)
+      .bind('ended', @onPause)
     $(document).keyup @bindExitFullScreen
 
-    @$('.video_control').click @togglePlayback
     @$('.add-fullscreen').click @toggleFullScreen
     @addToolTip unless onTouchBasedDevice()
 
@@ -22,7 +24,8 @@ class VideoPlayer
     if @element.hasClass('fullscreen') && event.keyCode == 27
       @toggleFullScreen(event)
 
-  buildPlayer: ->
+  render: ->
+    new VideoControl(this)
     new VideoCaption(this, @video.youtubeId('1.0'))
     new VideoSpeedControl(this, @video.speeds)
     new VideoProgressSlider(this)
@@ -53,26 +56,20 @@ class VideoPlayer
   onStateChange: (event) =>
     switch event.data
       when YT.PlayerState.PLAYING
-        if window.player && window.player != @player
-          window.player.pauseVideo()
-        window.player = @player
-        @onPlay()
+        $(@).trigger('play')
       when YT.PlayerState.PAUSED
-        if window.player == @player
-          window.player = null
-        @onPause()
+        $(@).trigger('pause')
       when YT.PlayerState.ENDED
-        if window.player == @player
-          window.player = null
-        @onPause()
+        $(@).trigger('ended')
 
-  onPlay: ->
-    @$('.video_control').removeClass('play').addClass('pause').html('Pause')
+  onPlay: =>
+    window.player.pauseVideo() if window.player && window.player != @player
+    window.player = @player
     unless @player.interval
       @player.interval = setInterval(@update, 200)
 
-  onPause: ->
-    @$('.video_control').removeClass('pause').addClass('play').html('Play')
+  onPause: =>
+    window.player = null if window.player == @player
     clearInterval(@player.interval)
     @player.interval = null
 
@@ -109,13 +106,6 @@ class VideoPlayer
       @$(".vidtime").html(progress)
       @progress = progress
 
-  togglePlayback: (event) =>
-    event.preventDefault()
-    if $(event.target).hasClass('play')
-      @play()
-    else
-      @pause()
-
   toggleFullScreen: (event) =>
     event.preventDefault()
     if @element.hasClass('fullscreen')
diff --git a/templates/coffee/src/modules/video/video_speed_control.coffee b/templates/coffee/src/modules/video/video_speed_control.coffee
index 1214053fd9..3e0b9b7b33 100644
--- a/templates/coffee/src/modules/video/video_speed_control.coffee
+++ b/templates/coffee/src/modules/video/video_speed_control.coffee
@@ -1,6 +1,6 @@
 class VideoSpeedControl
   constructor: (@player, @speeds) ->
-    @build()
+    @render()
     @bind()
 
   $: (selector) ->
@@ -18,7 +18,17 @@ class VideoSpeedControl
         event.preventDefault()
         $(this).removeClass('open')
 
-  build: ->
+  render: ->
+    @$('.secondary-controls').prepend """
+      <div class="speeds">
+        <a href="#">
+          <h3>Speed</h3>
+          <p class="active"></p>
+        </a>
+        <ol class="video_speeds"></ol>
+      </div>
+      """
+
     $.each @speeds, (index, speed) =>
       link = $('<a>').attr(href: "#").html("#{speed}x")
       @$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link))
diff --git a/templates/video.html b/templates/video.html
index c7278bee22..54d6f8fa37 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -9,35 +9,8 @@
         <div id="${id}"></div>
       </section>
 
-      <section class="video-controls">
-        <div class="slider"></div>
-        <div>
-          <ul class="vcr">
-            <li><a class="video_control play">Play</a></li>
-            <li>
-              <div class="vidtime">0:00 / 0:00</div>
-            </li>
-          </ul>
-
-          <div class="secondary-controls">
-            <div class="speeds">
-              <a href="#">
-                <h3>Speed</h3>
-                <p class="active"></p>
-              </a>
-              <ol class="video_speeds"></ol>
-            </div>
-
-            <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
-            <a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
-          </div>
-        </div>
-      </section>
+      <section class="video-controls"></section>
     </article>
-
-    <ol class="subtitles">
-      <li>Attempting to load captions...</li>
-    </ol>
   </div>
 </div>
 

From dfb05bbb0131df1b482adf76df9aefad556f4d27 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 9 May 2012 17:55:02 -0400
Subject: [PATCH 19/57] Refactor and removed unused code

---
 static/coffee/src/courseware.coffee |   1 +
 static/coffee/src/main.coffee       |  11 +
 static/js/video_player.js           | 499 ----------------------------
 templates/coffee/src/logger.coffee  |  20 ++
 templates/video_init.js             | 156 ---------
 5 files changed, 32 insertions(+), 655 deletions(-)
 delete mode 100644 static/js/video_player.js
 create mode 100644 templates/coffee/src/logger.coffee
 delete mode 100644 templates/video_init.js

diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index ec1d067b6d..d7469cec04 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -3,6 +3,7 @@ class window.Courseware
     new CoursewareNavigation
     new Calculator
     new FeedbackForm
+    Logger.bind()
     @renderModules()
 
   @start: ->
diff --git a/static/coffee/src/main.coffee b/static/coffee/src/main.coffee
index 71f7e55d7d..5c658f3415 100644
--- a/static/coffee/src/main.coffee
+++ b/static/coffee/src/main.coffee
@@ -1,11 +1,22 @@
 $ ->
   $.ajaxSetup
     headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
+    dataType: 'json'
 
   window.onTouchBasedDevice = ->
     navigator.userAgent.match /iPhone|iPod|iPad/i
 
   $("a[rel*=leanModal]").leanModal()
+  $('#csrfmiddlewaretoken').attr 'value', $.cookie('csrftoken')
 
   if $('body').hasClass('courseware')
     Courseware.start()
+
+  # Preserved for backward compatibility
+  window.submit_circuit = (circuit_id) ->
+    $("input.schematic").each (index, element) ->
+      element.schematic.update_value()
+
+    schematic_value $("#schematic_#{circuit_id}").attr("value")
+    $.post "/save_circuit/#{circuit_id}", schematic: schematic_value, (data) ->
+      alert('Saved') if data.results == 'success'
diff --git a/static/js/video_player.js b/static/js/video_player.js
deleted file mode 100644
index 5b3b9377a9..0000000000
--- a/static/js/video_player.js
+++ /dev/null
@@ -1,499 +0,0 @@
-// Things to abstract out to another file
-
-// We do sync AJAX for just the page close event. 
-// TODO: This should _really_ not be a global. 
-var log_close_event = false; 
-
-function log_close() {
-    var d=new Date();
-    var t=d.getTime();
-    //close_event_logged = "waiting";
-    log_close_event = true;
-    log_event('page_close', {});
-    log_close_event = false;
-    // Google Chrome will close without letting the event go through.
-    // This causes the page close to be delayed until we've hit the
-    // server. The code below fixes it, but breaks Firefox. 
-    // TODO: Check what happens with no network. 
-    /*while((close_event_logged != "done") && (d.getTime() < t+500)) {
-	console.log(close_event_logged);
-    }*/
-}
-
-window.onbeforeunload = log_close;
-
-function getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie != '') {
-	var cookies = document.cookie.split(';');
-	for (var i = 0; i < cookies.length; i++) {
-	    var cookie = jQuery.trim(cookies[i]);
-	    // Does this cookie string begin with the name we want?
-	    if (cookie.substring(0, name.length + 1) == (name + '=')) {
-		cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-		break;
-	    }
-	}
-    }
-    return cookieValue;
-}
-
-function postJSON(url, data, callback) {
-    $.ajax({type:'POST',
-	    url: url,
-		dataType: 'json',
-		data: data,
-		success: callback,
-		headers : {'X-CSRFToken':getCookie('csrftoken')}
-  });
-}
-
-function postJSONAsync(url, data, callback) {
-    $.ajax({type:'POST',
-	    url: url,
-		dataType: 'json',
-		data: data,
-		success: callback,
-		headers : {'X-CSRFToken':getCookie('csrftoken')},
-		async:true
-		});
-}
-
-// For easy embedding of CSRF in forms
-$(function() {
-    $('#csrfmiddlewaretoken').attr("value", getCookie('csrftoken'))
-});
-
-// For working with circuits in wiki: 
-
-function submit_circuit(circuit_id) {
-    $("input.schematic").each(function(index,element){ element.schematic.update_value(); });
-    postJSON('/save_circuit/'+circuit_id, 
-	     {'schematic': $('#schematic_'+circuit_id).attr("value")}, 
-	     function(data){ if (data.results=='success') alert("Saved");});
-    return false;
-}
-
-// Video player
-
-var load_id = 0;
-var caption_id;
-var video_speed = "1.0";
-
-var updateytPlayerInterval;
-var ajax_videoInterval;
-
-function change_video_speed(speed, youtube_id) {
-    new_position = ytplayer.getCurrentTime() * video_speed / speed;
-    video_speed = speed;
-    ytplayer.loadVideoById(youtube_id, new_position);
-    syncPlayButton();
-    log_event("speed", {"new_speed":speed, "clip":youtube_id});
-
-    $.cookie("video_speed", speed, {'expires':3650, 'path':'/'});
-}
-
-function caption_at(index) {
-    if (captions==0)
-	return "";
-
-    text_array=captions.text
-
-    if ((index>=text_array.length) || (index < 0))
-	return "";
-    return text_array[index];
-}
-
-function caption_time_at(index) {
-    if (captions==0)
-	return 0;
-
-    time_array=captions.start;
-
-    if (index < 0)
-	return 0;
-    if (index>=time_array.length)
-	return ytplayer.getDuration();
-
-    return time_array[index] / 1000.0 / video_speed;
-}
-
-function caption_index(now) {
-    // Returns the index of the current caption, given a time
-    now = now * video_speed;
-
-    if (captions==0)
-	return 0;
-
-    time_array=captions.start
-
-    // TODO: Bisection would be better, or something incremental
-    var i; 
-    for(i=0;i<captions.start.length; i++) {
-	if(time_array[i]>(now*1000)) {
-	    return i-1;
-	}
-    }
-    return i-1;
-}
-
-function format_time(t)
-{
-    seconds = Math.floor(t);
-    minutes = Math.floor(seconds / 60);
-    hours = Math.floor(minutes / 60);
-    seconds = seconds % 60;
-    minutes = minutes % 60;
-
-    if (hours) {
-      return hours+":"+((minutes < 10)?"0":"")+minutes+":"+((seconds < 10)?"0":"")+(seconds%60);
-    } else {
-      return minutes+":"+((seconds < 10)?"0":"")+(seconds%60);
-    }
-}
-
-function update_captions(t) {
-    var i=caption_index(t);
-    $("#vidtime").html(format_time(ytplayer.getCurrentTime())+' / '+format_time(ytplayer.getDuration()));
-    var j;
-    for(j=1; j<9; j++) {
-	$("#std_n"+j).html(caption_at(i-j));
-	$("#std_p"+j).html(caption_at(i+j));
-    }
-    $("#std_0").html(caption_at(i));
-}
-
-function title_seek(i) {
-    // Seek video forwards or backwards by i subtitles
-    current=caption_index(getCurrentTime());
-    new_time=caption_time_at(current+i);
-    
-    ytplayer.seekTo(new_time, true);
-}
-
-function updateHTML(elmId, value) {
-    document.getElementById(elmId).innerHTML = value;
-}
-
-function setytplayerState(newState) {
-    //    updateHTML("playerstate", newState);
-}
-
-// Updates server with location in video so we can resume from the same place
-// IMPORTANT TODO: Load test
-// POSSIBLE FIX: Move to unload() event and similar
-var ajax_video=function(){};
-var ytplayer;
-
-function onYouTubePlayerReady(playerId) {
-    ytplayer = document.getElementById("myytplayer");
-    updateytplayerInfoInterval = setInterval(updateytplayerInfo, 500);
-    ajax_videoInterval = setInterval(ajax_video,5000);
-    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
-    ytplayer.addEventListener("onError", "onPlayerError");
-    if((typeof load_id != "undefined") && (load_id != 0)) {
-	var id=load_id;
-	loadNewVideo(caption_id, id, 0);
-    }
-}
-
-/* HTML5 YouTube iFrame API Specific */
-function onYouTubePlayerAPIReady() {
-  ytplayer = new YT.Player('html5_player', {
-    events: { 
-      'onReady': onPlayerReady,
-      'onStateChange': onPlayerStateChange
-    }
-  });
-  updateytplayerInfoInterval = setInterval(updateHTML5ytplayerInfo, 200);
-  //ajax_videoInterval = setInterval(ajax_video, 5000);
-}
-
-// Need this function to call the API ready callback when we switch to a tab with AJAX that has a video
-// That callback is not being fired when we switch tabs. 
-function loadHTML5Video() {
-    if (!ytplayer && switched_tab){
-      onYouTubePlayerAPIReady();
-    }
-}
-
-function isiOSDevice(){
-  var iphone = "iphone";
-  var ipod = "ipod";
-  var ipad = "ipad";
-  var uagent = navigator.userAgent.toLowerCase();
-
-  //alert(uagent);
-  if (uagent.search(ipad) > -1 || uagent.search(iphone) > -1
-      || uagent.search(ipod) > -1) {
-    return true;
-  }
-  return false;
-}
-
-function onPlayerReady(event) {
-  //do not want to autoplay on iOS devices since its not enabled
-  //and leads to confusing behavior for the user
-  if (!isiOSDevice()) {
-    event.target.playVideo();
-  }
-}
-
-function onPlayerStateChange(event) {
-  if (event.data == YT.PlayerState.PLAYING) {
-  }
-}
-
-/* End HTML5 Specific */
-
-
-var switched_tab = false; // switch to true when we destroy so we know to call onYouTubePlayerAPIReady()
-// clear pings to video status when we switch to a different sequence tab with ajax
-function videoDestroy(id) {
-//    postJSON('/modx/video/'+id+'/goto_position',
-//	     {'position' :  ytplayer.getCurrentTime()});
-
-    load_id = 0;
-    clearInterval(updateytplayerInfoInterval);
-    clearInterval(ajax_videoInterval);
-    ytplayer = false;
-    switched_tab = true;
-}
-
-function log_event(e, d) {
-    data = {
-	"event_type" : e, 
-	"event" : JSON.stringify(d),
-	"page" : document.URL
-    }
-    $.ajax({type:'GET',
-	    url: '/event',
-	    dataType: 'json',
-	    data: data,
-	    async: !log_close_event, // HACK: See comment on log_close_event
-	    success: function(){},
-	    headers : {'X-CSRFToken':getCookie('csrftoken')}
-	   });
-
-    /*, // Commenting out Chrome bug fix, since it breaks FF
-	  function(data) {
-	      console.log("closing");
-	      if (close_event_logged == "waiting") {
-		  close_event_logged = "done";
-	      console.log("closed");
-	  }
-	  });*/
-}
-
-function seek_slide(type,oe,value) {
-    //log_event('video', [type, value]);
-    if(type=='slide') {
-	 // HACK/TODO: Youtube recommends this be false for slide and true for stop.
-	 // Works better on my system with true/true. 
-	 // We should test both configurations on low/high bandwidth 
-	 // connections, and different browsers
-	 // One issue is that we query the Youtube window every 250ms for position/state
-	 // With false, it returns the old one (ignoring the new seek), and moves the
-         // scroll bar to the wrong spot. 
-	ytplayer.seekTo(value, true);
-    } else if (type=='stop') {
-	ytplayer.seekTo(value, true);
-	log_event('video', [type, value]);
-    }
-
-    update_captions(value);
-}
-
-function get_state() {
-    if (ytplayer)
-	return [ytplayer.getPlayerState(),
-		ytplayer.getVideoUrl(),
-		ytplayer.getDuration(), ytplayer.getCurrentTime(), 
-		ytplayer.getVideoBytesLoaded(), ytplayer.getVideoBytesTotal(), 
-		ytplayer.getVideoStartBytes(), 
-		ytplayer.getVolume(),ytplayer.isMuted(),
-		ytplayer.getPlaybackQuality(),
-		ytplayer.getAvailableQualityLevels()];
-    return [];
-}
-
-function onytplayerStateChange(newState) {
-    setytplayerState(newState);
-    log_event('video', ['State Change',newState, get_state()]);
-}
-
-function onPlayerError(errorCode) {
-    //    alert("An error occured: " + errorCode);
-    log_event("player_error", {"error":errorCode});
-}
-
-// Currently duplicated to check for if video control changed by clicking the video for HTML5
-// Hacky b/c of lack of control over YT player
-function updateHTML5ytplayerInfo() {
-    var player_state = getPlayerState();
-    if(player_state != 3) {
-      $("#slider").slider("option","max",ytplayer.getDuration());
-      $("#slider").slider("option","value",ytplayer.getCurrentTime());
-    }
-    if (player_state == 1){
-      update_captions(getCurrentTime());
-    }
-    if (player_state == 1 && $("#video_control").hasClass("play"))
-      $("#video_control").removeClass().addClass("pause");
-    else if (player_state == 2 && $("#video_control").hasClass("pause"))
-      $("#video_control").removeClass().addClass("play");
-}
-
-function updateytplayerInfo() {
-    var player_state = getPlayerState();
-    if(player_state != 3) {
-      $("#slider").slider("option","max",ytplayer.getDuration());
-      $("#slider").slider("option","value",ytplayer.getCurrentTime());
-    }
-    if (player_state == 1){
-      update_captions(getCurrentTime());
-      handle = $('.ui-slider-handle',  $('#slider'));
-      handle.qtip('option', 'content.text', '' +  format_time(getCurrentTime()));
-    }
-       // updateHTML("videoduration", getDuration());
-    //    updateHTML("videotime", getCurrentTime());
-    //    updateHTML("startbytes", getStartBytes());
-    //    updateHTML("volume", getVolume());
-}
-
-// functions for the api calls
-function loadNewVideo(cap_id, id, startSeconds) {
-    captions={"start":[0],"end":[0],"text":["Attempting to load captions..."]};
-    $.getJSON("/static/subs/"+cap_id+".srt.sjson", function(data) {
-        captions=data;
-    });
-    caption_id = cap_id;
-    load_id = id;
-    //if ((typeof ytplayer != "undefined") && (ytplayer.type=="application/x-shockwave-flash")) {
-    // Try it every time. If we fail, we want the error message for now. 
-    // TODO: Add try/catch
-    try {
-	ytplayer.loadVideoById(id, parseInt(startSeconds));
-        load_id=0;
-    }
-    catch(e) {
-	window['console'].log(JSON.stringify(e));
-    }
-    log_event("load_video", {"id":id,"start":startSeconds});
-    //$("#slider").slider("option","value",startSeconds);
-    //seekTo(startSeconds);
-}
-
-function syncPlayButton(){
-  var state = getPlayerState();
-  if (state == 1 || state == 3) {
-    $("#video_control").removeClass("play").addClass("pause");
-  } else if (state == 2 || state == -1 || state == 0){
-    $("#video_control").removeClass("pause").addClass("play");
-  }
-}
-
-function cueNewVideo(id, startSeconds) {
-    if (ytplayer) {
-	ytplayer.cueVideoById(id, startSeconds);
-    }
-}
-
-function play() {
-    if (ytplayer) {
-	ytplayer.playVideo();
-    }
-    log_event("play_video", {"id":getCurrentTime(), "code":getEmbedCode()});
-}
-
-function pause() {
-    if (ytplayer) {
-	ytplayer.pauseVideo();
-    }
-    log_event("pause_video", {"id":getCurrentTime(), "code":getEmbedCode()});
-}
-
-function stop() {
-    if (ytplayer) {
-	ytplayer.stopVideo();
-    }
-    log_event("stop_video", {"id":getCurrentTime(), "code":getEmbedCode()});
-}
-
-function getPlayerState() {
-    if (ytplayer) {
-      return ytplayer.getPlayerState();
-    }
-}
-
-function seekTo(seconds) {
-    if (ytplayer) {
-	ytplayer.seekTo(seconds, true);
-    }
-}
-
-function getBytesTotal() {
-    if (ytplayer) {
-	return ytplayer.getVideoBytesTotal();
-    }
-}
-
-function getCurrentTime() {
-    if (ytplayer) {
-	return ytplayer.getCurrentTime();
-    }
-}
-
-function getDuration() {
-    if (ytplayer) {
-	return ytplayer.getDuration();
-    }
-}
-
-function getStartBytes() {
-    if (ytplayer) {
-	return ytplayer.getVideoStartBytes();
-    }
-}
-
-function mute() {
-    if (ytplayer) {
-	ytplayer.mute();
-    }
-}
-
-function unMute() {
-    if (ytplayer) {
-	ytplayer.unMute();
-    }
-}
-
-function getEmbedCode() {
-    if(ytplayer) {
-	ytplayer.getVideoEmbedCode();
-    }
-}
-
-function getVideoUrl() {
-    if(ytplayer) {
-	ytplayer.getVideoUrl();
-    }
-}
-
-function setVolume(newVolume) {
-    if (ytplayer) {
-	ytplayer.setVolume(newVolume);
-    }
-}
-
-function getVolume() {
-    if (ytplayer) {
-	return ytplayer.getVolume();
-    }
-}
-
-function clearVideo() {
-    if (ytplayer) {
-	ytplayer.clearVideo();
-    }
-}
diff --git a/templates/coffee/src/logger.coffee b/templates/coffee/src/logger.coffee
new file mode 100644
index 0000000000..729cb54982
--- /dev/null
+++ b/templates/coffee/src/logger.coffee
@@ -0,0 +1,20 @@
+class @Logger
+  @log: (event_type, data) ->
+    $.getJSON '/event',
+      event_type: event_type
+      event: JSON.stringify(data)
+      page: window.location.href
+
+  @bind: ->
+    window.onunload = ->
+      $.ajax
+        url: '/event'
+        data:
+          event_type: 'page_close'
+          event: ''
+          page: window.location.href
+        async: false
+      return true
+
+# Keeping this for conpatibility issue only.
+@log_event = Logger.log
diff --git a/templates/video_init.js b/templates/video_init.js
deleted file mode 100644
index bcbaecd249..0000000000
--- a/templates/video_init.js
+++ /dev/null
@@ -1,156 +0,0 @@
-var streams=${ streams }
-var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "transparent", allowFullScreen: "true" };
-var atts = { id: "myytplayer" };
-
-// If the user doesn't have flash, use the HTML5 Video instead. YouTube's
-// iFrame API which supports HTML5 is still developmental so it is not default
-if (swfobject.hasFlashPlayerVersion("10.1")){
-  swfobject.embedSWF(document.location.protocol +  "//www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer?wmode=transparent",
-        "ytapiplayer", "640", "385", "8", null, null, params, atts);
-} else {
-
-  //end of this URL may need &origin=http://..... once pushed to production to prevent XSS
-  $("#html5_player").attr("src", document.location.protocol +  "//www.youtube.com/embed/" + streams["1.0"] + "?enablejsapi=1&controls=0");
-  $("#html5_player").show();
-
-  var tag = document.createElement('script');
-  tag.src = document.location.protocol +  "//www.youtube.com/player_api";
-  var firstScriptTag = document.getElementsByTagName('script')[0];
-  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-  // Make sure the callback is called once API ready, YT seems to be buggy
-  loadHTML5Video();
-}
-
-var captions=0;
-
-/* Cache a reference to our slider element */
-var slider = $('#slider')
-
-.slider({
-  range: "min",
-  slide: function(event,ui) {
-    var slider_time = format_time(ui.value)
-
-    seek_slide('slide',event.originalEvent,ui.value);
-    handle.qtip('option', 'content.text', '' + slider_time);
-  }, 
-  stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}
-}),
-
-/* Grab and cache the newly created slider handle */
-handle = $('.ui-slider-handle', slider);
-
-/* 
-	 * Selector needs changing here to match your elements.
-	 * 
-	 * Notice the second argument to the $() constructor, which tells
-	 * jQuery to use that as the top-level element to seareh down from.
-	 */
-	handle.qtip({
-		content: '' + slider.slider('option', 'value'), // Use the current value of the slider
-		position: {
-			my: 'bottom center',
-			at: 'top center',
-			container: handle // Stick it inside the handle element so it keeps the position synched up
-		},
-		hide: {
-			delay: 700 // Give it a longer delay so it doesn't hide frequently as we move the handle
-		},
-		style: {
-			classes: 'ui-tooltip-slider',
-			widget: true // Make it Themeroller compatible
-		}
-	});
-
-function good() {
-    window['console'].log(ytplayer.getCurrentTime());
-}
-
-ajax_video=good;
-
-// load the same video speed your last video was at in a sequence
-// if the last speed played on video doesn't exist on another video just use 1.0 as default
-
-function add_speed(key, stream) {
-  var id = 'speed_' + stream;
-
-  if (key == video_speed) {
-    $("#video_speeds").append(' <li class="active" id="'+id+'">'+key+'x</li>');
-    $("p.active").text(key + 'x');
-  } else {
-    $("#video_speeds").append(' <li id="'+id+'">'+key+'x</li>');
-  }
-
-  $("#"+id).click(function(){
-    change_video_speed(key, stream);
-    $(this).siblings().removeClass("active");
-    $(this).addClass("active");
-    var active = $(this).text();
-    $("p.active").text(active);
-  });
-
-}
-
-var l=[]
-for (var key in streams) {
-    l.push(key);
-}
-
-function sort_by_value(a,b) {
-    var x=parseFloat(a);
-    var y=parseFloat(b);
-    var r=((x < y) ? -1 : ((x > y) ? 1 : 0));
-    return r;
-}
-
-l.sort(sort_by_value);
-
-$(document).ready(function() {
-    video_speed = $.cookie("video_speed");
-
-    //ugly hack to account for different formats in vid speed in the XML (.75 vs 0.75, 1.5 vs 1.50);
-    if (( !video_speed ) || ( !streams[video_speed] && !streams[video_speed + "0"]) && !streams[video_speed.slice(0,-1)] && !streams[video_speed.slice(1)] && !streams["0" + video_speed]) {
-      video_speed = "1.0";
-    }
-
-    if (streams[video_speed + "0"]){
-      video_speed = video_speed + "0";
-    } else if (streams[video_speed.slice(0, -1)]){
-      video_speed = video_speed.slice(0, -1);
-    } else if (streams[video_speed.slice(1)]) {
-      video_speed = video_speed.slice(1);
-    } else if (streams["0" + video_speed]) {
-      video_speed = "0" + video_speed;
-    }
-
-    loadNewVideo(streams["1.0"], streams[video_speed], ${ position });
-
-    for(var i=0; i<l.length; i++) {
-      add_speed(l[i], streams[l[i]])
-    }
-
-    var dropUpHeight = $('ol#video_speeds').height();
-    console.log(dropUpHeight);
-    $('ol#video_speeds').css('top', -(dropUpHeight + 2));
-});
-
-function toggleVideo(){
-  if ($("#video_control").hasClass("play")){
-    play();
-    $("#video_control").removeClass().addClass("pause");
-  } else {
-    pause();
-    $("#video_control").removeClass().addClass("play");
-  }
-}
-
-$("#video_control").click(toggleVideo);
-
-// space bar to pause video
-$(".video-wrapper").keyup(function(e){
-  active = document.activeElement;
-  if (e.which == 32) {
-    e.preventDefault();
-    $("#video_control").click();
-  }
-});

From b0149541a38ed5b35b16f52d11e4c4da891f7b23 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 9 May 2012 18:20:38 -0400
Subject: [PATCH 20/57] Preserve window.postJSON for now

---
 static/coffee/src/main.coffee | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/static/coffee/src/main.coffee b/static/coffee/src/main.coffee
index 5c658f3415..85c98ff929 100644
--- a/static/coffee/src/main.coffee
+++ b/static/coffee/src/main.coffee
@@ -20,3 +20,6 @@ $ ->
     schematic_value $("#schematic_#{circuit_id}").attr("value")
     $.post "/save_circuit/#{circuit_id}", schematic: schematic_value, (data) ->
       alert('Saved') if data.results == 'success'
+
+  window.postJSON = (url, data, callback) ->
+    $.post url, data, callback

From 823843cd2fdd3d771ee0d3645caeacb2f284576d Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 9 May 2012 18:22:33 -0400
Subject: [PATCH 21/57] Make sure video is working in sequence module

---
 static/coffee/src/courseware.coffee               |  9 +++++++--
 templates/coffee/src/modules/sequence.coffee      |  5 +++--
 templates/coffee/src/modules/video.coffee         | 15 ++++++++++-----
 .../coffee/src/modules/video/video_player.coffee  |  2 ++
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index d7469cec04..762df721c4 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -4,12 +4,17 @@ class window.Courseware
     new Calculator
     new FeedbackForm
     Logger.bind()
-    @renderModules()
+    @bind()
+    @render()
 
   @start: ->
     new Courseware
 
-  renderModules: ->
+  bind: ->
+    if $('#seq_content').length
+      $('#seq_content').change @render
+
+  render: ->
     $('.course-content .video').each ->
       id = $(this).attr('id').replace(/video_/, '')
       new Video id, $(this).data('streams')
diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index 96450199e8..e33cad5416 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -6,6 +6,7 @@ class window.Sequence
 
   bind: ->
     $('#sequence-list a').click @goto
+    $('#seq_content').change @toggleArrows
 
   buildNavigation: ->
     $.each @elements, (index, item) ->
@@ -14,7 +15,7 @@ class window.Sequence
       list_item = $('<li>').append(link.append(title))
       $('#sequence-list').append list_item
 
-  toggleArrows: ->
+  toggleArrows: =>
     $('.sequence-nav-buttons a').unbind('click')
 
     if @position == 1
@@ -38,7 +39,7 @@ class window.Sequence
 
       MathJax.Hub.Queue(["Typeset",MathJax.Hub])
       @position = new_position
-      @toggleArrows()
+      $('#seq_content').change()
 
   goto: (event) =>
     event.preventDefault()
diff --git a/templates/coffee/src/modules/video.coffee b/templates/coffee/src/modules/video.coffee
index 8f35ae0cb1..9d059cf0b5 100644
--- a/templates/coffee/src/modules/video.coffee
+++ b/templates/coffee/src/modules/video.coffee
@@ -1,13 +1,16 @@
 class Video
   constructor: (@id, videos) ->
+    window.player = null
     @element = $("#video_#{@id}")
     @parseVideos videos
-    @fetchMetadata()
-    @parseSpeed()
     $("#video_#{@id}").data('video', this)
-    window.onYouTubePlayerAPIReady = =>
-      $('.course-content .video').each ->
-        $(this).data('video').embed()
+
+    if YT.Player
+      @embed()
+    else
+      window.onYouTubePlayerAPIReady = =>
+        $('.course-content .video').each ->
+          $(this).data('video').embed()
 
   youtubeId: (speed)->
     @videos[speed || @speed]
@@ -18,6 +21,8 @@ class Video
       video = video.split(/:/)
       speed = parseFloat(video[0]).toFixed(2).replace /\.00$/, '.0'
       @videos[speed] = video[1]
+    @fetchMetadata()
+    @parseSpeed()
 
   parseSpeed: ->
     @setSpeed($.cookie('video_speed'))
diff --git a/templates/coffee/src/modules/video/video_player.coffee b/templates/coffee/src/modules/video/video_player.coffee
index b51dbcd95e..2871f6ff0c 100644
--- a/templates/coffee/src/modules/video/video_player.coffee
+++ b/templates/coffee/src/modules/video/video_player.coffee
@@ -63,12 +63,14 @@ class VideoPlayer
         $(@).trigger('ended')
 
   onPlay: =>
+    Logger.log 'play_video', id: @currentTime, code: @player.getVideoEmbedCode()
     window.player.pauseVideo() if window.player && window.player != @player
     window.player = @player
     unless @player.interval
       @player.interval = setInterval(@update, 200)
 
   onPause: =>
+    Logger.log 'pause_video', id: @currentTime, code: @player.getVideoEmbedCode()
     window.player = null if window.player == @player
     clearInterval(@player.interval)
     @player.interval = null

From afde79da334ccdd24510549c911b69745b13a5ad Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 9 May 2012 18:25:16 -0400
Subject: [PATCH 22/57] Fix the broken caption select

---
 templates/coffee/src/modules/video/video_caption.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/coffee/src/modules/video/video_caption.coffee b/templates/coffee/src/modules/video/video_caption.coffee
index fd6ade363f..9115274222 100644
--- a/templates/coffee/src/modules/video/video_caption.coffee
+++ b/templates/coffee/src/modules/video/video_caption.coffee
@@ -15,7 +15,6 @@ class VideoCaption
     @$('.subtitles').mouseenter(@onMouseEnter).mouseleave(@onMouseLeave)
       .mousemove(@onMovement).bind('mousewheel', @onMovement)
       .bind('DOMMouseScroll', @onMovement)
-    @$('.subtitles li[data-index]').click @seekPlayer
 
   captionURL: ->
     "/static/subs/#{@youtubeId}.srt.sjson"
@@ -39,6 +38,7 @@ class VideoCaption
         'data-start': @start[index]
 
     @$('.subtitles').html(container.html())
+    @$('.subtitles li[data-index]').click @seekPlayer
 
     # prepend and append an empty <li> for cosmatic reason
     @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))

From 8e7bf4c1825cc3c4e56791917fc7b463ab7c35e7 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 10 May 2012 16:07:39 -0400
Subject: [PATCH 23/57] Fix broken test case

---
 static/coffee/files.json                      |   3 +-
 static/coffee/spec/courseware_spec.coffee     | 111 ++++++----------
 static/coffee/spec/courseware_spec.js         | 120 ++++++------------
 static/coffee/spec/feedback_form_spec.coffee  |   4 +-
 static/coffee/spec/feedback_form_spec.js      |   4 +-
 static/coffee/src/calculator.coffee           |   2 +-
 static/coffee/src/courseware.coffee           |   4 +-
 static/coffee/src/feedback_form.coffee        |   2 +-
 templates/coffee/spec/navigation_spec.coffee  |  74 +++++++++++
 templates/coffee/spec/navigation_spec.js      |  94 ++++++++++++++
 .../coffee/src/courseware_navigation.coffee   |  19 ---
 templates/coffee/src/modules/video.coffee     |   2 +-
 templates/coffee/src/navigation.coffee        |   2 +-
 13 files changed, 256 insertions(+), 185 deletions(-)
 create mode 100644 templates/coffee/spec/navigation_spec.coffee
 create mode 100644 templates/coffee/spec/navigation_spec.js
 delete mode 100644 templates/coffee/src/courseware_navigation.coffee

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')

From 1abe15d4d9b5d84b40884f7b18f53269fd32de7e Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 10 May 2012 19:40:55 -0400
Subject: [PATCH 24/57] Rewrite Problem module

---
 djangoapps/courseware/modules/capa_module.py | 10 +-
 static/coffee/spec/courseware_spec.coffee    |  2 +-
 static/coffee/spec/courseware_spec.js        |  2 +-
 static/coffee/src/courseware.coffee          |  5 +-
 static/sass/courseware/_courseware.scss      |  7 ++
 templates/coffee/src/modules/problem.coffee  | 57 ++++++++++++
 templates/coffee/src/modules/sequence.coffee |  2 +-
 templates/problem.html                       | 33 ++++---
 templates/problem.js                         | 96 --------------------
 templates/problem_ajax.html                  |  2 +-
 10 files changed, 90 insertions(+), 126 deletions(-)
 create mode 100644 templates/coffee/src/modules/problem.coffee
 delete mode 100644 templates/problem.js

diff --git a/djangoapps/courseware/modules/capa_module.py b/djangoapps/courseware/modules/capa_module.py
index 7d42cfb250..b54b028c11 100644
--- a/djangoapps/courseware/modules/capa_module.py
+++ b/djangoapps/courseware/modules/capa_module.py
@@ -61,12 +61,6 @@ class Module(XModule):
                                'ajax_url':self.ajax_url,
                                })
 
-    def get_init_js(self):
-        return render_to_string('problem.js', 
-                              {'id':self.item_id, 
-                               'ajax_url':self.ajax_url,
-                               })
-
     def get_problem_html(self, encapsulate=True):
         html = self.lcp.get_html()
         content={'name':self.name, 
@@ -130,8 +124,8 @@ class Module(XModule):
 
         html=render_to_string('problem.html', context)
         if encapsulate:
-            html = '<div id="main_{id}">'.format(id=self.item_id)+html+"</div>"
-            
+            html = '<div id="problem_{id}" class="problem" data-url="{ajax_url}">'.format(id=self.item_id)+html+"</div>"
+
         return html
 
     def __init__(self, system, xml, item_id, state=None):
diff --git a/static/coffee/spec/courseware_spec.coffee b/static/coffee/spec/courseware_spec.coffee
index 8aa5e544a0..3baaf73acd 100644
--- a/static/coffee/spec/courseware_spec.coffee
+++ b/static/coffee/spec/courseware_spec.coffee
@@ -27,7 +27,7 @@ describe 'Courseware', ->
 
     it 'binds the sequential content change event', ->
       @courseware.bind()
-      expect($('#seq_content')).toHandleWith 'change', @courseware.render
+      expect($('#seq_content')).toHandleWith 'contentChanged', @courseware.render
 
   describe 'render', ->
     beforeEach ->
diff --git a/static/coffee/spec/courseware_spec.js b/static/coffee/spec/courseware_spec.js
index ce374dc421..346fd46e20 100644
--- a/static/coffee/spec/courseware_spec.js
+++ b/static/coffee/spec/courseware_spec.js
@@ -30,7 +30,7 @@
       });
       return it('binds the sequential content change event', function() {
         this.courseware.bind();
-        return expect($('#seq_content')).toHandleWith('change', this.courseware.render);
+        return expect($('#seq_content')).toHandleWith('contentChanged', this.courseware.render);
       });
     });
     return describe('render', function() {
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index fa746956f0..c27db29006 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -12,9 +12,12 @@ class @Courseware
 
   bind: ->
     if $('#seq_content').length
-      $('#seq_content').change @render
+      $('#seq_content').bind 'contentChanged', @render
 
   render: ->
     $('.course-content .video').each ->
       id = $(this).attr('id').replace(/video_/, '')
       new Video id, $(this).data('streams')
+    $('.course-content .problems-wrapper').each ->
+      id = $(this).attr('id').replace(/problem_/, '')
+      new Problem id, $(this).data('url')
diff --git a/static/sass/courseware/_courseware.scss b/static/sass/courseware/_courseware.scss
index 520440c234..bd707e1b80 100644
--- a/static/sass/courseware/_courseware.scss
+++ b/static/sass/courseware/_courseware.scss
@@ -54,6 +54,13 @@ div.course-wrapper {
         display: table-cell;
         vertical-align: top;
 
+        &.problem-header {
+          section.staff {
+            margin-top: 30px;
+            font-size: 80%;
+          }
+        }
+
         @media screen and (max-width:1120px) {
           display: block;
           width: auto;
diff --git a/templates/coffee/src/modules/problem.coffee b/templates/coffee/src/modules/problem.coffee
new file mode 100644
index 0000000000..add045266c
--- /dev/null
+++ b/templates/coffee/src/modules/problem.coffee
@@ -0,0 +1,57 @@
+class @Problem
+  constructor: (@id, url) ->
+    @element = $("#problem_#{id}")
+    @content_url = "#{url}problem_get?id=#{@id}"
+    @render()
+
+  $: (selector) ->
+    $(selector, @element)
+
+  bind: =>
+    MathJax.Hub.Queue ["Typeset",MathJax.Hub]
+    window.update_schematics()
+    @$('section.action input:button').click @refreshAnswers
+    @$('section.action input.check').click @check
+    @$('section.action input.reset').click @reset
+    @$('section.action input.show').click @show
+    @$('section.action input.save').click @save
+
+  render: (content) ->
+    if content
+      @element.html(content)
+      @bind()
+    else
+      @element.load @content_url, @bind
+
+  check: =>
+    Logger.log 'problem_check', @answers
+    $.post "/modx/problem/#{@id}/problem_check", @answers, (response) =>
+      switch response.success
+        when 'incorrect', 'correct'
+          @render(response.contents)
+        else
+          alert(response.success)
+
+  reset: =>
+    Logger.log 'problem_reset', @answers
+    $.post "/modx/problem/#{@id}/problem_reset", id: @id, (content) =>
+      @render(content)
+
+  show: =>
+    Logger.log 'problem_show', problem: @id
+    $.post "/modx/problem/#{@id}/problem_show", (response) =>
+      $.each response, (key, value) =>
+        @$("#answer_#{key}").text(value)
+
+  save: =>
+    Logger.log 'problem_save', @answers
+    $.post "/modx/problem/#{@id}/problem_save", @answers, (response) =>
+      if response.success
+        alert 'Saved'
+
+  refreshAnswers: =>
+    @answers = {}
+    @$('input.schematic').each (index, element) ->
+      element.schematic.update_value()
+    $.each @$("[id^=input_#{@id}_]"), (index, input) =>
+      @answers[$(input).attr('id')] = $(input).val()
diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index e33cad5416..9c5fd7b7c0 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -39,7 +39,7 @@ class window.Sequence
 
       MathJax.Hub.Queue(["Typeset",MathJax.Hub])
       @position = new_position
-      $('#seq_content').change()
+      $('#seq_content').trigger 'contentChanged'
 
   goto: (event) =>
     event.preventDefault()
diff --git a/templates/problem.html b/templates/problem.html
index af712f67ac..3f79be3b3a 100644
--- a/templates/problem.html
+++ b/templates/problem.html
@@ -1,17 +1,15 @@
 <%namespace name='static' file='static_content.html'/>
-<h2 class="problem-header">${ problem['name'] }
-% if problem['weight']:
-: ${ problem['weight'] } points
-% endif
-% if settings.QUICKEDIT:
-<span class="staff">
-<br/>
-<br/>
-<br/>
-<br/>
-<font size=-2><a href=${MITX_ROOT_URL}/quickedit/${id}>Quick
-Edit Problem</a></font></span>
-% endif
+<h2 class="problem-header">
+  ${ problem['name'] }
+  % if problem['weight']:
+    : ${ problem['weight'] } points
+  % endif
+
+  % if settings.QUICKEDIT:
+  <section class="staff">
+    <a href=${MITX_ROOT_URL}/quickedit/${id}>Quick Edit Problem</a>
+  </section>
+  % endif
 </h2>
 
 <section class="problem">
@@ -21,16 +19,16 @@ Edit Problem</a></font></span>
     <input type="hidden" name="problem_id" value="${ problem['name'] }">
 
     % if check_button:
-    <input id="check_${ id }" type="button" value="${ check_button }" >
+    <input class="check" type="button" value="${ check_button }">
     % endif
     % if reset_button:
-    <input id="reset_${ id }" type="button" value="Reset" >
+    <input class="reset" type="button" value="Reset">
     % endif
     % if save_button:
-    <input id="save_${ id }" type="button" value="Save" >
+    <input class="save" type="button" value="Save">
     % endif
     % if answer_available:
-    <input id="show_${ id }" type="button" value="Show Answer" >
+    <input class="show" type="button" value="Show Answer">
     % endif
     % if explain :
     <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
@@ -42,3 +40,4 @@ Edit Problem</a></font></span>
     % endif
   </section>
 </section>
+
diff --git a/templates/problem.js b/templates/problem.js
deleted file mode 100644
index 80924a79a6..0000000000
--- a/templates/problem.js
+++ /dev/null
@@ -1,96 +0,0 @@
-function ${ id }_content_updated() {
-  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-  update_schematics();
-
-  $('#check_${ id }').unbind('click').click(function() {
-  $("input.schematic").each(function(index,element){ element.schematic.update_value(); });
-  $(".CodeMirror").each(function(index,element){ if (element.CodeMirror.save) element.CodeMirror.save(); });
-    var submit_data={};
-    $.each($("[id^=input_${ id }_]"), function(index,value){
-	    if (value.type==="checkbox"){
-		if (value.checked) {
-		    if (typeof submit_data[value.name] == 'undefined'){
-			submit_data[value.name]=[];
-		    }
-		    submit_data[value.name].push(value.value);
-		}
-	    }
-	    if (value.type==="radio"){
-		if (value.checked) {
-		    submit_data[value.name]= value.value;
-		}
-	    }
-	    else{
-		submit_data[value.id]=value.value;
-	    }
-    });
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_check',
-      submit_data,
-      function(json) {
-        switch(json.success) {
-        case 'incorrect': // Worked, but answer not 
-        case 'correct':
-          $('#main_${ id }').html(json.contents);
-          ${ id }_content_updated();
-          break;
-        default:
-          alert(json.success);
-      }}
-    );
-    log_event('problem_check', submit_data);
-  });
-
-  $('#reset_${ id }').unbind('click').click(function() {
-    var submit_data={};
-    $.each($("[id^=input_${ id }_]"), function(index,value){
-      submit_data[value.id]=value.value;
-    });
-
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_reset', {'id':'${ id }'}, function(html_as_json) {
-      $('#main_${ id }').html(html_as_json);
-      ${ id }_content_updated();
-    });
-    log_event('problem_reset', submit_data);
-  });
-
-  // show answer button
-  // TODO: the button should turn into "hide answer" afterwards
-  $('#show_${ id }').unbind('click').click(function() {
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_show', {}, function(data) {
-      for (var key in data) {
-	  if ($.isArray(data[key])){
-	      for (var ans_index in data[key]){
-		  var choice_id = 'input_'+key+'_'+data[key][ans_index];
-		  $("label[for="+choice_id+"]").attr("correct_answer", "true");   
-	      }
-	  }
-	  $("#answer_"+key).text(data[key]);
-    }
-  });
-
-    log_event('problem_show', {'problem':'${ id }'});
-  });
-
-  $('#save_${ id }').unbind('click').click(function() {
-    $("input.schematic").each(function(index,element){ element.schematic.update_value(); });
-    var submit_data={};
-    $.each($("[id^=input_${ id }_]"), function(index,value) {
-      submit_data[value.id]=value.value;
-    });
-    postJSON('${ MITX_ROOT_URL }/modx/problem/${ id }/problem_save',
-      submit_data,
-      function(data) {
-        if(data.success) {
-          alert('Saved');
-    }});
-    log_event('problem_save', submit_data);
-  });
-}
-
-function ${ id }_load() {
-  $('#main_${ id }').load('${ ajax_url }problem_get?id=${ id }', ${ id }_content_updated);
-}
-
-$(function() {
-  ${ id }_load();
-});
diff --git a/templates/problem_ajax.html b/templates/problem_ajax.html
index 7296b362ad..78b85df3c1 100644
--- a/templates/problem_ajax.html
+++ b/templates/problem_ajax.html
@@ -1 +1 @@
-<section id="main_${id}" class="problems-wrapper"></section>
+<section id="problem_${id}" class="problems-wrapper" data-url="${ajax_url}"></section>

From 59b453488ac528b1573bbb53788d06eda3a277bc Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 10 May 2012 21:04:53 -0400
Subject: [PATCH 25/57] Rewrite Tab module, refactor Sequence module

---
 djangoapps/courseware/modules/seq_module.py   |  8 ++--
 static/coffee/spec/courseware_spec.coffee     | 10 +++--
 static/coffee/spec/courseware_spec.js         |  6 +--
 static/coffee/src/courseware.coffee           |  4 +-
 templates/coffee/src/modules/sequence.coffee  | 28 +++++++-----
 .../coffee/src/modules/tab_module.coffee      | 23 ++++++++++
 templates/tab_module.html                     | 22 +++++-----
 templates/tab_module.js                       | 44 -------------------
 8 files changed, 64 insertions(+), 81 deletions(-)
 create mode 100644 templates/coffee/src/modules/tab_module.coffee
 delete mode 100644 templates/tab_module.js

diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index 4239bc492f..a9c6138cc9 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -52,13 +52,12 @@ class Module(XModule):
         child_classes = [set([i.tag for i in e.iter()]) for e in self.xmltree]
 
         titles = ["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") != None]) \
-                           for e in self.xmltree]
+                       for e in self.xmltree]
 
-        self.contents = [j(self.render_function(e)) \
-                             for e in self.xmltree]
+        self.contents = [j(self.render_function(e)) for e in self.xmltree]
 
         for i in range(len(self.contents)):
-          self.contents[i]['title'] = titles[i]
+            self.contents[i]['title'] = titles[i]
 
         for (content, element_class) in zip(self.contents, child_classes):
             new_class = 'other'
@@ -83,7 +82,6 @@ class Module(XModule):
         if self.xmltree.tag in ['sequential', 'videosequence']:
             self.content=render_to_string('seq_module.html',params)
         if self.xmltree.tag == 'tab':
-            params['id'] = 'tab'
             self.content=render_to_string('tab_module.html',params)
         self.rendered = True
 
diff --git a/static/coffee/spec/courseware_spec.coffee b/static/coffee/spec/courseware_spec.coffee
index 3baaf73acd..91b9187668 100644
--- a/static/coffee/spec/courseware_spec.coffee
+++ b/static/coffee/spec/courseware_spec.coffee
@@ -23,11 +23,15 @@ describe 'Courseware', ->
   describe 'bind', ->
     beforeEach ->
       @courseware = new Courseware
-      setFixtures """<div id="seq_content"></div>"""
+      setFixtures """
+        <div class="course-content">
+          <div class="sequence"></div>
+        </div>
+        """
 
-    it 'binds the sequential content change event', ->
+    it 'binds the content change event', ->
       @courseware.bind()
-      expect($('#seq_content')).toHandleWith 'contentChanged', @courseware.render
+      expect($('.course-content .sequence')).toHandleWith 'contentChanged', @courseware.render
 
   describe 'render', ->
     beforeEach ->
diff --git a/static/coffee/spec/courseware_spec.js b/static/coffee/spec/courseware_spec.js
index 346fd46e20..adb04adc49 100644
--- a/static/coffee/spec/courseware_spec.js
+++ b/static/coffee/spec/courseware_spec.js
@@ -26,11 +26,11 @@
     describe('bind', function() {
       beforeEach(function() {
         this.courseware = new Courseware;
-        return setFixtures("<div id=\"seq_content\"></div>");
+        return setFixtures("<div class=\"course-content\">\n  <div class=\"sequence\"></div>\n</div>");
       });
-      return it('binds the sequential content change event', function() {
+      return it('binds the content change event', function() {
         this.courseware.bind();
-        return expect($('#seq_content')).toHandleWith('contentChanged', this.courseware.render);
+        return expect($('.course-content .sequence')).toHandleWith('contentChanged', this.courseware.render);
       });
     });
     return describe('render', function() {
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index c27db29006..e2f015baef 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -11,8 +11,8 @@ class @Courseware
     new Courseware
 
   bind: ->
-    if $('#seq_content').length
-      $('#seq_content').bind 'contentChanged', @render
+    $('.course-content .sequence, .course-content .tab')
+      .bind 'contentChanged', @render
 
   render: ->
     $('.course-content .video').each ->
diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index 9c5fd7b7c0..42e9cde71f 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -1,32 +1,36 @@
-class window.Sequence
+class @Sequence
   constructor: (@id, @elements, @tag, position) ->
+    @element = $("#sequence_#{@id}")
     @buildNavigation()
     @bind()
     @render position
 
+  $: (selector) ->
+    $(selector, @element)
+
   bind: ->
-    $('#sequence-list a').click @goto
-    $('#seq_content').change @toggleArrows
+    @element.bind 'contentChanged', @toggleArrows
+    @$('#sequence-list a').click @goto
 
   buildNavigation: ->
     $.each @elements, (index, item) ->
       link = $('<a>').attr class: "seq_#{item.type}_inactive", 'data-element': index + 1
       title = $('<p>').html(item.title)
       list_item = $('<li>').append(link.append(title))
-      $('#sequence-list').append list_item
+      @$('#sequence-list').append list_item
 
   toggleArrows: =>
-    $('.sequence-nav-buttons a').unbind('click')
+    @$('.sequence-nav-buttons a').unbind('click')
 
     if @position == 1
-      $('.sequence-nav-buttons .prev a').addClass('disabled')
+      @$('.sequence-nav-buttons .prev a').addClass('disabled')
     else
-      $('.sequence-nav-buttons .prev a').removeClass('disabled').click(@previous)
+      @$('.sequence-nav-buttons .prev a').removeClass('disabled').click(@previous)
 
     if @position == @elements.length
-      $('.sequence-nav-buttons .next a').addClass('disabled')
+      @$('.sequence-nav-buttons .next a').addClass('disabled')
     else
-      $('.sequence-nav-buttons .next a').removeClass('disabled').click(@next)
+      @$('.sequence-nav-buttons .next a').removeClass('disabled').click(@next)
 
   render: (new_position) ->
     if @position != undefined
@@ -35,11 +39,11 @@ class window.Sequence
 
     if @position != new_position
       @mark_active new_position
-      $('#seq_content').html eval(@elements[new_position - 1].content)
+      @$('#seq_content').html eval(@elements[new_position - 1].content)
 
       MathJax.Hub.Queue(["Typeset",MathJax.Hub])
       @position = new_position
-      $('#seq_content').trigger 'contentChanged'
+      @element.trigger 'contentChanged'
 
   goto: (event) =>
     event.preventDefault()
@@ -60,7 +64,7 @@ class window.Sequence
     @render new_position
 
   link_for: (position) ->
-    $("#sequence-list a[data-element=#{position}]")
+    @$("#sequence-list a[data-element=#{position}]")
 
   mark_visited: (position) ->
     @link_for(position).attr class: "seq_#{@elements[position - 1].type}_visited"
diff --git a/templates/coffee/src/modules/tab_module.coffee b/templates/coffee/src/modules/tab_module.coffee
new file mode 100644
index 0000000000..69d833b86e
--- /dev/null
+++ b/templates/coffee/src/modules/tab_module.coffee
@@ -0,0 +1,23 @@
+class @Tab
+  constructor: (@id, @items) ->
+    @element = $("#tab_#{id}")
+    @render()
+
+  $: (selector) ->
+    $(selector, @element)
+
+  render: ->
+    $.each @items, (index, item) =>
+      tab = $('<a>').attr(href: "##{@tabId(index)}").html(item.title)
+      @$('.navigation').append($('<li>').append(tab))
+      @element.append($('<section>').attr(id: @tabId(index)))
+    @element.tabs
+      show: @onShow
+
+  onShow: (element, ui) =>
+    @$('section.ui-tabs-hide').html('')
+    @$("##{@tabId(ui.index)}").html(eval(@items[ui.index]['content']))
+    @element.trigger 'contentChanged'
+
+  tabId: (index) ->
+    "tab-#{@id}-#{index}"
diff --git a/templates/tab_module.html b/templates/tab_module.html
index b2f2e3280e..21f69fc359 100644
--- a/templates/tab_module.html
+++ b/templates/tab_module.html
@@ -1,13 +1,11 @@
-<div id="tabs">
-<ul>
-  % for t in items:
-  <li> <a href="#tabs-${items.index(t)}">${t[0]}</a>
-  % endfor
-</ul>
-
-% for t in items:
-  <div id="tabs-${items.index(t)}">
-  </div>
-% endfor
-
+<div id="tab_${id}" class="tab">
+  <ul class="navigation"></ul>
 </div>
+
+<%block name="js_extra">
+<script type="text/javascript">
+  $(function(){
+      new Tab('${id}', ${items});
+  });
+</script>
+</%block>
diff --git a/templates/tab_module.js b/templates/tab_module.js
deleted file mode 100644
index e8e5adc7e7..0000000000
--- a/templates/tab_module.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// IMPORTANT TODO: Namespace
-
-var ${ id }contents=["",
- %for t in items:
- ${t[1]['content']} , 
- %endfor
- ""
-       ];
-
-var ${ id }init_functions=["",
- %for t in items:
-	       function(){ ${t[1]['init_js']} }, 
- %endfor
-	       ""];
-
-var ${ id }destroy_functions=["",
- %for t in items:
-	       function(){ ${t[1]['destroy_js']} }, 
- %endfor
-	       ""];
-
-var ${ id }loc = -1;
-
-function ${ id }goto(i) {
-    if (${ id }loc!=-1)
-	${ id }destroy_functions[ ${ id }loc ]();
-    $('#tabs-'+(i-1)).html(${ id }contents[i]);
-    ${ id }init_functions[i]()
-	       $('#tt_'+${ id }loc).attr("style", "background-color:grey");
-    ${ id }loc=i;
-    $('#tt_'+i).attr("style", "background-color:red");
-    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-}
-
-$("#tabs").tabs({select:function(event, ui){
-	    //global=ui;
-	    return true;
-	},
-        show:function(event,ui){
-	    //global=ui;
-	    ${ id }goto(ui.index+1);
-	    return true;
-        },
-        });

From d393a503e604a288c0eee1f98e42b721e329ac76 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 10 May 2012 21:19:24 -0400
Subject: [PATCH 26/57] Remove unused JavaScript on the page bottom

---
 templates/coffee/src/modules/sequence.coffee | 6 +++++-
 templates/courseware.html                    | 6 ++----
 templates/main.html                          | 2 --
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index 42e9cde71f..9c1549ff78 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -11,9 +11,10 @@ class @Sequence
   bind: ->
     @element.bind 'contentChanged', @toggleArrows
     @$('#sequence-list a').click @goto
+    @$('.sequence-nav li a').hover @navHover
 
   buildNavigation: ->
-    $.each @elements, (index, item) ->
+    $.each @elements, (index, item) =>
       link = $('<a>').attr class: "seq_#{item.type}_inactive", 'data-element': index + 1
       title = $('<p>').html(item.title)
       list_item = $('<li>').append(link.append(title))
@@ -45,6 +46,9 @@ class @Sequence
       @position = new_position
       @element.trigger 'contentChanged'
 
+  navHover: (event) =>
+    $(event.target).siblings().toggleClass("shown")
+
   goto: (event) =>
     event.preventDefault()
     new_position = $(event.target).data('element')
diff --git a/templates/courseware.html b/templates/courseware.html
index ca74d843a8..2b53eaa3a0 100644
--- a/templates/courseware.html
+++ b/templates/courseware.html
@@ -7,12 +7,10 @@
 </%block>
 
 <%block name="js_extra">
-##Is there a reason this isn't in header_extra? Is it important that the javascript is at the bottom of the generated document?
 <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
 <script type="text/javascript">
-  $(function() {
-    ${init}
-  });
+  document.write('\x3Cscript type="text/javascript" src="' +
+      document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
 </script>
 </%block>
 
diff --git a/templates/main.html b/templates/main.html
index 0a3424a053..00abe2902d 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -113,7 +113,6 @@
   <script type="text/javascript" src="${static.url('js/jquery.leanModal.min.js')}"></script>
   <script type="text/javascript" src="${static.url('js/jquery.qtip.min.js')}"></script>
   <script type="text/javascript" src="${static.url('js/jquery.cookie.js')}"></script>
-  <script type="text/javascript" src="${static.url('js/video_player.js')}"></script>
   <script type="text/javascript" src="${static.url('js/schematic.js')}"></script>
   <script type="text/javascript" src="${static.url('js/cktsim.js')}"></script>
   <script type="text/javascript" src="${static.url('js/jquery.scrollTo-1.4.2-min.js')}"></script>
@@ -121,7 +120,6 @@
     document.write('\x3Cscript type="text/javascript" src="' +
         document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
   </script>
-
   <%block name="js_extra"/>
 </body>
 </html>

From 80ba9bd0ffcfb0f903614561faf6316a17f8cb2f Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 10 May 2012 22:25:14 -0400
Subject: [PATCH 27/57] Remove unused `init_js` and `destroy_js`

---
 .../management/commands/check_course.py       |  2 +-
 djangoapps/courseware/module_render.py        | 11 ++---------
 .../courseware/modules/vertical_module.py     |  9 ---------
 djangoapps/courseware/modules/x_module.py     | 19 -------------------
 4 files changed, 3 insertions(+), 38 deletions(-)

diff --git a/djangoapps/courseware/management/commands/check_course.py b/djangoapps/courseware/management/commands/check_course.py
index 2f069ee5f3..17a97268cf 100644
--- a/djangoapps/courseware/management/commands/check_course.py
+++ b/djangoapps/courseware/management/commands/check_course.py
@@ -33,7 +33,7 @@ class Command(BaseCommand):
                              ajax_url='',
                              state=None, 
                              track_function = lambda x,y,z:None, 
-                             render_function = lambda x: {'content':'','destroy_js':'','init_js':'','type':'video'})
+                             render_function = lambda x: {'content':'','type':'video'})
             except:
                 print "==============> Error in ", etree.tostring(module)
                 check = False
diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index 278d19fd2c..2463e31d9b 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -130,8 +130,6 @@ def render_x_module(user, request, xml_module, module_object_preload):
 
     # Grab content
     content = instance.get_html()
-    init_js = instance.get_init_js()
-    destory_js = instance.get_destroy_js()
 
     # special extra information about each problem, only for users who are staff 
     if user.is_staff:
@@ -140,13 +138,8 @@ def render_x_module(user, request, xml_module, module_object_preload):
         content=content+render_to_string("staff_problem_info.html", {'xml':etree.tostring(xml_module), 
                                                                      'module_id' : module_id,
                                                                      'render_histogram' : render_histogram})
-        if render_histogram:
-            init_js = init_js+render_to_string("staff_problem_histogram.js", {'histogram' : histogram,
-                                                                              'module_id' : module_id})
-        
-    content = {'content':content, 
-               "destroy_js":destory_js,
-               'init_js':init_js, 
+
+    content = {'content':content,
                'type':module_type}
 
     return content
diff --git a/djangoapps/courseware/modules/vertical_module.py b/djangoapps/courseware/modules/vertical_module.py
index e57a58e33e..a834614e26 100644
--- a/djangoapps/courseware/modules/vertical_module.py
+++ b/djangoapps/courseware/modules/vertical_module.py
@@ -18,17 +18,8 @@ class Module(XModule):
     def get_html(self):
         return render_to_string('vert_module.html',{'items':self.contents})
 
-    def get_init_js(self):
-        return self.init_js_text
-
-    def get_destroy_js(self):
-        return self.destroy_js_text
-
-
     def __init__(self, system, xml, item_id, state=None):
         XModule.__init__(self, system, xml, item_id, state)
         xmltree=etree.fromstring(xml)
         self.contents=[(e.get("name"),self.render_function(e)) \
                       for e in xmltree]
-        self.init_js_text="".join([e[1]['init_js'] for e in self.contents if 'init_js' in e[1]])
-        self.destroy_js_text="".join([e[1]['destroy_js'] for e in self.contents if 'destroy_js' in e[1]])
diff --git a/djangoapps/courseware/modules/x_module.py b/djangoapps/courseware/modules/x_module.py
index b475fd0280..464e2f0a90 100644
--- a/djangoapps/courseware/modules/x_module.py
+++ b/djangoapps/courseware/modules/x_module.py
@@ -78,25 +78,6 @@ class XModule(object):
         '''
         return "Unimplemented"
 
-    # TODO: 
-    # def get_header_js(self):
-    #     ''' Filename of common js that needs to be included in the header
-    #     '''
-    #     raise NotImplementedError
-
-    def get_init_js(self):
-        ''' JavaScript code to be run when problem is shown. Be aware
-        that this may happen several times on the same page
-        (e.g. student switching tabs). Common functions should be put
-        in the main course .js files for now. ''' 
-        return ""
-
-    def get_destroy_js(self):
-        ''' JavaScript called to destroy the problem (e.g. when a user switches to a different tab). 
-            We make an attempt, but not a promise, to call this when the user closes the web page. 
-        '''
-        return ""
-
     def handle_ajax(self, dispatch, get):
         ''' dispatch is last part of the URL. 
             get is a dictionary-like object ''' 

From 2bc68c0f25876ee3bd0450a21485b17ea22e15f9 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Mon, 14 May 2012 16:32:27 -0400
Subject: [PATCH 28/57] Add path prefix to all AJAX requests

This will handle the case where the site was deployed under a
path prefix.
---
 static/coffee/spec/calculator_spec.coffee              |  2 +-
 static/coffee/spec/feedback_form_spec.coffee           |  2 +-
 static/coffee/src/calculator.coffee                    |  2 +-
 static/coffee/src/courseware.coffee                    |  1 +
 static/coffee/src/feedback_form.coffee                 |  2 +-
 static/coffee/src/main.coffee                          | 10 ++++++++--
 templates/coffee/src/logger.coffee                     |  4 ++--
 templates/coffee/src/modules/problem.coffee            |  8 ++++----
 templates/coffee/src/modules/sequence.coffee           |  2 +-
 .../coffee/src/modules/video/video_caption.coffee      |  2 +-
 templates/main.html                                    |  1 +
 templates/profile.html                                 |  2 +-
 12 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/static/coffee/spec/calculator_spec.coffee b/static/coffee/spec/calculator_spec.coffee
index 5c3fde5e2d..a9ef69ed26 100644
--- a/static/coffee/spec/calculator_spec.coffee
+++ b/static/coffee/spec/calculator_spec.coffee
@@ -60,7 +60,7 @@ describe 'Calculator', ->
       @calculator.calculate()
 
     it 'send data to /calculate', ->
-      expect($.getJSON).toHaveBeenCalledWith '/calculate',
+      expect($.getWithPrefix).toHaveBeenCalledWith '/calculate',
         equation: '1+2'
       , jasmine.any(Function)
 
diff --git a/static/coffee/spec/feedback_form_spec.coffee b/static/coffee/spec/feedback_form_spec.coffee
index 41ba2ec04d..64fa5cba24 100644
--- a/static/coffee/spec/feedback_form_spec.coffee
+++ b/static/coffee/spec/feedback_form_spec.coffee
@@ -16,7 +16,7 @@ describe 'FeedbackForm', ->
       $('#feedback_message').val 'This site is really good.'
       $('#feedback_button').click()
 
-      expect($.post).toHaveBeenCalledWith '/send_feedback', {
+      expect($.postWithPrefix).toHaveBeenCalledWith '/send_feedback', {
         subject: 'Awesome!'
         message: 'This site is really good.'
         url: window.location.href
diff --git a/static/coffee/src/calculator.coffee b/static/coffee/src/calculator.coffee
index bca88503fd..2f9b8a1aa8 100644
--- a/static/coffee/src/calculator.coffee
+++ b/static/coffee/src/calculator.coffee
@@ -20,5 +20,5 @@ class @Calculator
     $('.help').toggleClass 'shown'
 
   calculate: ->
-    $.getJSON '/calculate', { equation: $('#calculator_input').val() }, (data) ->
+    $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) ->
       $('#calculator_output').val(data.result)
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index e2f015baef..b495e14bc2 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -1,5 +1,6 @@
 class @Courseware
   constructor: ->
+    Courseware.prefix = $("meta[name='path_prefix']").attr('content')
     new Navigation
     new Calculator
     new FeedbackForm
diff --git a/static/coffee/src/feedback_form.coffee b/static/coffee/src/feedback_form.coffee
index ffb8b37521..3394db448f 100644
--- a/static/coffee/src/feedback_form.coffee
+++ b/static/coffee/src/feedback_form.coffee
@@ -5,6 +5,6 @@ class @FeedbackForm
         subject: $('#feedback_subject').val()
         message: $('#feedback_message').val()
         url: window.location.href
-      $.post '/send_feedback', data, ->
+      $.postWithPrefix '/send_feedback', data, ->
         $('#feedback_div').html 'Feedback submitted. Thank you'
       ,'json'
diff --git a/static/coffee/src/main.coffee b/static/coffee/src/main.coffee
index 85c98ff929..733322b9bb 100644
--- a/static/coffee/src/main.coffee
+++ b/static/coffee/src/main.coffee
@@ -1,3 +1,9 @@
+jQuery.postWithPrefix = (url, data, callback, type) ->
+  $.post("#{Courseware.prefix}#{url}", data, callback, type)
+
+jQuery.getWithPrefix = (url, data, callback, type) ->
+  $.get("#{Courseware.prefix}#{url}", data, callback, type)
+
 $ ->
   $.ajaxSetup
     headers : { 'X-CSRFToken': $.cookie 'csrftoken' }
@@ -18,8 +24,8 @@ $ ->
       element.schematic.update_value()
 
     schematic_value $("#schematic_#{circuit_id}").attr("value")
-    $.post "/save_circuit/#{circuit_id}", schematic: schematic_value, (data) ->
+    $.postWithPrefix "/save_circuit/#{circuit_id}", schematic: schematic_value, (data) ->
       alert('Saved') if data.results == 'success'
 
   window.postJSON = (url, data, callback) ->
-    $.post url, data, callback
+    $.postWithPrefix url, data, callback
diff --git a/templates/coffee/src/logger.coffee b/templates/coffee/src/logger.coffee
index 729cb54982..97d6deaacc 100644
--- a/templates/coffee/src/logger.coffee
+++ b/templates/coffee/src/logger.coffee
@@ -1,6 +1,6 @@
 class @Logger
   @log: (event_type, data) ->
-    $.getJSON '/event',
+    $.getWithPrefix '/event',
       event_type: event_type
       event: JSON.stringify(data)
       page: window.location.href
@@ -8,7 +8,7 @@ class @Logger
   @bind: ->
     window.onunload = ->
       $.ajax
-        url: '/event'
+        url: "#{Courseware.prefix}/event"
         data:
           event_type: 'page_close'
           event: ''
diff --git a/templates/coffee/src/modules/problem.coffee b/templates/coffee/src/modules/problem.coffee
index add045266c..b2d4d0f5ed 100644
--- a/templates/coffee/src/modules/problem.coffee
+++ b/templates/coffee/src/modules/problem.coffee
@@ -25,7 +25,7 @@ class @Problem
 
   check: =>
     Logger.log 'problem_check', @answers
-    $.post "/modx/problem/#{@id}/problem_check", @answers, (response) =>
+    $.postWithPrefix "/modx/problem/#{@id}/problem_check", @answers, (response) =>
       switch response.success
         when 'incorrect', 'correct'
           @render(response.contents)
@@ -34,18 +34,18 @@ class @Problem
 
   reset: =>
     Logger.log 'problem_reset', @answers
-    $.post "/modx/problem/#{@id}/problem_reset", id: @id, (content) =>
+    $.postWithPrefix "/modx/problem/#{@id}/problem_reset", id: @id, (content) =>
       @render(content)
 
   show: =>
     Logger.log 'problem_show', problem: @id
-    $.post "/modx/problem/#{@id}/problem_show", (response) =>
+    $.postWithPrefix "/modx/problem/#{@id}/problem_show", (response) =>
       $.each response, (key, value) =>
         @$("#answer_#{key}").text(value)
 
   save: =>
     Logger.log 'problem_save', @answers
-    $.post "/modx/problem/#{@id}/problem_save", @answers, (response) =>
+    $.postWithPrefix "/modx/problem/#{@id}/problem_save", @answers, (response) =>
       if response.success
         alert 'Saved'
 
diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index 9c1549ff78..4fb6225bbc 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -36,7 +36,7 @@ class @Sequence
   render: (new_position) ->
     if @position != undefined
       @mark_visited @position
-      $.post "/modx/#{@tag}/#{@id}/goto_position", position: new_position
+      $.postWithPrefix "/modx/#{@tag}/#{@id}/goto_position", position: new_position
 
     if @position != new_position
       @mark_active new_position
diff --git a/templates/coffee/src/modules/video/video_caption.coffee b/templates/coffee/src/modules/video/video_caption.coffee
index 9115274222..97122e1704 100644
--- a/templates/coffee/src/modules/video/video_caption.coffee
+++ b/templates/coffee/src/modules/video/video_caption.coffee
@@ -45,7 +45,7 @@ class VideoCaption
       .append($('<li class="spacing">').height(@bottomSpacingHeight()))
 
   fetchCaption: ->
-    $.getJSON @captionURL(), (captions) =>
+    $.getWithPrefix @captionURL(), (captions) =>
       @captions = captions.text
       @start = captions.start
       for index in [0...captions.start.length]
diff --git a/templates/main.html b/templates/main.html
index 00abe2902d..33ca0b85eb 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -28,6 +28,7 @@
        It can't be run through static.url because MathJax uses crazy url introspection to do lazy loading of
        MathJax extension libraries -->
   <script type="text/javascript" src="/static/js/mathjax-MathJax-c9db6ac/MathJax.js?config=TeX-AMS_HTML-full"></script>
+  <meta name="path_prefix" content="${MITX_ROOT_URL}">
 </head>
 
 <body class="<%block name='bodyclass'/>">
diff --git a/templates/profile.html b/templates/profile.html
index 98d5b38c7b..e732616d5a 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -75,7 +75,7 @@ $(function() {
       });
 
     $('#pwd_reset_button').click(function() {
-      $.post('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
+      $.postWithPrefix('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
                     "email"  : $('#id_email').val()}, function(data){
          $("#password_reset_complete_link").click();
          log_event("profile", {"type":"password_send"});

From 5eac6ffa1df39eb938f2989e57a519a9a819b800 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Mon, 14 May 2012 16:36:48 -0400
Subject: [PATCH 29/57] Refactor Problem from changes upstream

---
 templates/coffee/src/modules/problem.coffee | 24 +++++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/templates/coffee/src/modules/problem.coffee b/templates/coffee/src/modules/problem.coffee
index b2d4d0f5ed..2bba68224e 100644
--- a/templates/coffee/src/modules/problem.coffee
+++ b/templates/coffee/src/modules/problem.coffee
@@ -38,10 +38,20 @@ class @Problem
       @render(content)
 
   show: =>
-    Logger.log 'problem_show', problem: @id
-    $.postWithPrefix "/modx/problem/#{@id}/problem_show", (response) =>
-      $.each response, (key, value) =>
-        @$("#answer_#{key}").text(value)
+    if !@element.hasClass 'showed'
+      Logger.log 'problem_show', problem: @id
+      $.postWithPrefix "/modx/problem/#{@id}/problem_show", (response) =>
+        $.each response, (key, value) =>
+          if $.isArray(data[key])
+            $.each data[key], (index, answer_index) =>
+              @$("#label[for='input_#{key}_#{data[key][answer_index]}']").attr
+                correct_answer: 'true'
+          @$("#answer_#{key}").text(value)
+        @element.addClass 'showed'
+    else
+      @$('[id^=answer_]').text('')
+      @$('[correct_answer]').attr(correct_answer: null)
+
 
   save: =>
     Logger.log 'problem_save', @answers
@@ -50,8 +60,8 @@ class @Problem
         alert 'Saved'
 
   refreshAnswers: =>
-    @answers = {}
     @$('input.schematic').each (index, element) ->
       element.schematic.update_value()
-    $.each @$("[id^=input_#{@id}_]"), (index, input) =>
-      @answers[$(input).attr('id')] = $(input).val()
+    @$(".CodeMirror").each (index, element) ->
+      element.CodeMirror.save() if element.CodeMirror.save
+    @answers = @$("[id^=input_#{@id}_]").serialize()

From fc4d4c8295c9bc0313b7a4089627d41179aa174c Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Mon, 14 May 2012 16:58:10 -0400
Subject: [PATCH 30/57] Fix section convention and code highlight

---
 static/js/CodeMirror/python.js | 341 +++++++++++++++++++++++++++++++++
 templates/jstextline.html      |  20 +-
 templates/textbox.html         |  34 ++--
 templates/textinput.html       |  14 +-
 4 files changed, 377 insertions(+), 32 deletions(-)
 create mode 100644 static/js/CodeMirror/python.js

diff --git a/static/js/CodeMirror/python.js b/static/js/CodeMirror/python.js
new file mode 100644
index 0000000000..cb59e5cbc4
--- /dev/null
+++ b/static/js/CodeMirror/python.js
@@ -0,0 +1,341 @@
+CodeMirror.defineMode("python", function(conf, parserConf) {
+    var ERRORCLASS = 'error';
+    
+    function wordRegexp(words) {
+        return new RegExp("^((" + words.join(")|(") + "))\\b");
+    }
+    
+    var singleOperators = new RegExp("^[\\+\\-\\*/%&|\\^~<>!]");
+    var singleDelimiters = new RegExp('^[\\(\\)\\[\\]\\{\\}@,:`=;\\.]');
+    var doubleOperators = new RegExp("^((==)|(!=)|(<=)|(>=)|(<>)|(<<)|(>>)|(//)|(\\*\\*))");
+    var doubleDelimiters = new RegExp("^((\\+=)|(\\-=)|(\\*=)|(%=)|(/=)|(&=)|(\\|=)|(\\^=))");
+    var tripleDelimiters = new RegExp("^((//=)|(>>=)|(<<=)|(\\*\\*=))");
+    var identifiers = new RegExp("^[_A-Za-z][_A-Za-z0-9]*");
+
+    var wordOperators = wordRegexp(['and', 'or', 'not', 'is', 'in']);
+    var commonkeywords = ['as', 'assert', 'break', 'class', 'continue',
+                          'def', 'del', 'elif', 'else', 'except', 'finally',
+                          'for', 'from', 'global', 'if', 'import',
+                          'lambda', 'pass', 'raise', 'return',
+                          'try', 'while', 'with', 'yield'];
+    var commonBuiltins = ['abs', 'all', 'any', 'bin', 'bool', 'bytearray', 'callable', 'chr',
+                          'classmethod', 'compile', 'complex', 'delattr', 'dict', 'dir', 'divmod',
+                          'enumerate', 'eval', 'filter', 'float', 'format', 'frozenset',
+                          'getattr', 'globals', 'hasattr', 'hash', 'help', 'hex', 'id',
+                          'input', 'int', 'isinstance', 'issubclass', 'iter', 'len',
+                          'list', 'locals', 'map', 'max', 'memoryview', 'min', 'next',
+                          'object', 'oct', 'open', 'ord', 'pow', 'property', 'range',
+                          'repr', 'reversed', 'round', 'set', 'setattr', 'slice',
+                          'sorted', 'staticmethod', 'str', 'sum', 'super', 'tuple',
+                          'type', 'vars', 'zip', '__import__', 'NotImplemented',
+                          'Ellipsis', '__debug__'];
+    var py2 = {'builtins': ['apply', 'basestring', 'buffer', 'cmp', 'coerce', 'execfile',
+                            'file', 'intern', 'long', 'raw_input', 'reduce', 'reload',
+                            'unichr', 'unicode', 'xrange', 'False', 'True', 'None'],
+               'keywords': ['exec', 'print']};
+    var py3 = {'builtins': ['ascii', 'bytes', 'exec', 'print'],
+               'keywords': ['nonlocal', 'False', 'True', 'None']};
+
+    if (!!parserConf.version && parseInt(parserConf.version, 10) === 3) {
+        commonkeywords = commonkeywords.concat(py3.keywords);
+        commonBuiltins = commonBuiltins.concat(py3.builtins);
+        var stringPrefixes = new RegExp("^(([rb]|(br))?('{3}|\"{3}|['\"]))", "i");
+    } else {
+        commonkeywords = commonkeywords.concat(py2.keywords);
+        commonBuiltins = commonBuiltins.concat(py2.builtins);
+        var stringPrefixes = new RegExp("^(([rub]|(ur)|(br))?('{3}|\"{3}|['\"]))", "i");
+    }
+    var keywords = wordRegexp(commonkeywords);
+    var builtins = wordRegexp(commonBuiltins);
+
+    var indentInfo = null;
+
+    // tokenizers
+    function tokenBase(stream, state) {
+        // Handle scope changes
+        if (stream.sol()) {
+            var scopeOffset = state.scopes[0].offset;
+            if (stream.eatSpace()) {
+                var lineOffset = stream.indentation();
+                if (lineOffset > scopeOffset) {
+                    indentInfo = 'indent';
+                } else if (lineOffset < scopeOffset) {
+                    indentInfo = 'dedent';
+                }
+                return null;
+            } else {
+                if (scopeOffset > 0) {
+                    dedent(stream, state);
+                }
+            }
+        }
+        if (stream.eatSpace()) {
+            return null;
+        }
+        
+        var ch = stream.peek();
+        
+        // Handle Comments
+        if (ch === '#') {
+            stream.skipToEnd();
+            return 'comment';
+        }
+        
+        // Handle Number Literals
+        if (stream.match(/^[0-9\.]/, false)) {
+            var floatLiteral = false;
+            // Floats
+            if (stream.match(/^\d*\.\d+(e[\+\-]?\d+)?/i)) { floatLiteral = true; }
+            if (stream.match(/^\d+\.\d*/)) { floatLiteral = true; }
+            if (stream.match(/^\.\d+/)) { floatLiteral = true; }
+            if (floatLiteral) {
+                // Float literals may be "imaginary"
+                stream.eat(/J/i);
+                return 'number';
+            }
+            // Integers
+            var intLiteral = false;
+            // Hex
+            if (stream.match(/^0x[0-9a-f]+/i)) { intLiteral = true; }
+            // Binary
+            if (stream.match(/^0b[01]+/i)) { intLiteral = true; }
+            // Octal
+            if (stream.match(/^0o[0-7]+/i)) { intLiteral = true; }
+            // Decimal
+            if (stream.match(/^[1-9]\d*(e[\+\-]?\d+)?/)) {
+                // Decimal literals may be "imaginary"
+                stream.eat(/J/i);
+                // TODO - Can you have imaginary longs?
+                intLiteral = true;
+            }
+            // Zero by itself with no other piece of number.
+            if (stream.match(/^0(?![\dx])/i)) { intLiteral = true; }
+            if (intLiteral) {
+                // Integer literals may be "long"
+                stream.eat(/L/i);
+                return 'number';
+            }
+        }
+        
+        // Handle Strings
+        if (stream.match(stringPrefixes)) {
+            state.tokenize = tokenStringFactory(stream.current());
+            return state.tokenize(stream, state);
+        }
+        
+        // Handle operators and Delimiters
+        if (stream.match(tripleDelimiters) || stream.match(doubleDelimiters)) {
+            return null;
+        }
+        if (stream.match(doubleOperators)
+            || stream.match(singleOperators)
+            || stream.match(wordOperators)) {
+            return 'operator';
+        }
+        if (stream.match(singleDelimiters)) {
+            return null;
+        }
+        
+        if (stream.match(keywords)) {
+            return 'keyword';
+        }
+        
+        if (stream.match(builtins)) {
+            return 'builtin';
+        }
+        
+        if (stream.match(identifiers)) {
+            return 'variable';
+        }
+        
+        // Handle non-detected items
+        stream.next();
+        return ERRORCLASS;
+    }
+    
+    function tokenStringFactory(delimiter) {
+        while ('rub'.indexOf(delimiter.charAt(0).toLowerCase()) >= 0) {
+            delimiter = delimiter.substr(1);
+        }
+        var singleline = delimiter.length == 1;
+        var OUTCLASS = 'string';
+        
+        return function tokenString(stream, state) {
+            while (!stream.eol()) {
+                stream.eatWhile(/[^'"\\]/);
+                if (stream.eat('\\')) {
+                    stream.next();
+                    if (singleline && stream.eol()) {
+                        return OUTCLASS;
+                    }
+                } else if (stream.match(delimiter)) {
+                    state.tokenize = tokenBase;
+                    return OUTCLASS;
+                } else {
+                    stream.eat(/['"]/);
+                }
+            }
+            if (singleline) {
+                if (parserConf.singleLineStringErrors) {
+                    return ERRORCLASS;
+                } else {
+                    state.tokenize = tokenBase;
+                }
+            }
+            return OUTCLASS;
+        };
+    }
+    
+    function indent(stream, state, type) {
+        type = type || 'py';
+        var indentUnit = 0;
+        if (type === 'py') {
+            if (state.scopes[0].type !== 'py') {
+                state.scopes[0].offset = stream.indentation();
+                return;
+            }
+            for (var i = 0; i < state.scopes.length; ++i) {
+                if (state.scopes[i].type === 'py') {
+                    indentUnit = state.scopes[i].offset + conf.indentUnit;
+                    break;
+                }
+            }
+        } else {
+            indentUnit = stream.column() + stream.current().length;
+        }
+        state.scopes.unshift({
+            offset: indentUnit,
+            type: type
+        });
+    }
+    
+    function dedent(stream, state, type) {
+        type = type || 'py';
+        if (state.scopes.length == 1) return;
+        if (state.scopes[0].type === 'py') {
+            var _indent = stream.indentation();
+            var _indent_index = -1;
+            for (var i = 0; i < state.scopes.length; ++i) {
+                if (_indent === state.scopes[i].offset) {
+                    _indent_index = i;
+                    break;
+                }
+            }
+            if (_indent_index === -1) {
+                return true;
+            }
+            while (state.scopes[0].offset !== _indent) {
+                state.scopes.shift();
+            }
+            return false
+        } else {
+            if (type === 'py') {
+                state.scopes[0].offset = stream.indentation();
+                return false;
+            } else {
+                if (state.scopes[0].type != type) {
+                    return true;
+                }
+                state.scopes.shift();
+                return false;
+            }
+        }
+    }
+
+    function tokenLexer(stream, state) {
+        indentInfo = null;
+        var style = state.tokenize(stream, state);
+        var current = stream.current();
+
+        // Handle '.' connected identifiers
+        if (current === '.') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'variable' || style === 'builtin') {
+                return 'variable';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+        
+        // Handle decorators
+        if (current === '@') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'variable'
+                || current === '@staticmethod'
+                || current === '@classmethod') {
+                return 'meta';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+        
+        // Handle scope changes.
+        if (current === 'pass' || current === 'return') {
+            state.dedent += 1;
+        }
+        if (current === 'lambda') state.lambda = true;
+        if ((current === ':' && !state.lambda && state.scopes[0].type == 'py')
+            || indentInfo === 'indent') {
+            indent(stream, state);
+        }
+        var delimiter_index = '[({'.indexOf(current);
+        if (delimiter_index !== -1) {
+            indent(stream, state, '])}'.slice(delimiter_index, delimiter_index+1));
+        }
+        if (indentInfo === 'dedent') {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        delimiter_index = '])}'.indexOf(current);
+        if (delimiter_index !== -1) {
+            if (dedent(stream, state, current)) {
+                return ERRORCLASS;
+            }
+        }
+        if (state.dedent > 0 && stream.eol() && state.scopes[0].type == 'py') {
+            if (state.scopes.length > 1) state.scopes.shift();
+            state.dedent -= 1;
+        }
+        
+        return style;
+    }
+
+    var external = {
+        startState: function(basecolumn) {
+            return {
+              tokenize: tokenBase,
+              scopes: [{offset:basecolumn || 0, type:'py'}],
+              lastToken: null,
+              lambda: false,
+              dedent: 0
+          };
+        },
+        
+        token: function(stream, state) {
+            var style = tokenLexer(stream, state);
+            
+            state.lastToken = {style:style, content: stream.current()};
+            
+            if (stream.eol() && stream.lambda) {
+                state.lambda = false;
+            }
+            
+            return style;
+        },
+        
+        indent: function(state, textAfter) {
+            if (state.tokenize != tokenBase) {
+                return 0;
+            }
+            
+            return state.scopes[0].offset;
+        }
+        
+    };
+    return external;
+});
+
+CodeMirror.defineMIME("text/x-python", "python");
diff --git a/templates/jstextline.html b/templates/jstextline.html
index a062252392..045f329ad4 100644
--- a/templates/jstextline.html
+++ b/templates/jstextline.html
@@ -1,12 +1,12 @@
-<section class="text-input">
-  <input type="text" name="input_${id}" id="input_${id}" value="${value}" 
-	 % if size:
-	 size="${size}"
-	 % endif 
-         % if dojs == 'math':
-	 onkeyup="DoUpdateMath('${id}')"
-	 % endif 
-	 />
+<section id="jstextline_${id}" class="jstextline">
+  <input type="text" name="input_${id}" id="input_${id}" value="${value}"
+   % if size:
+   size="${size}"
+   % endif
+   % if dojs == 'math':
+   onkeyup="DoUpdateMath('${id}')"
+   % endif
+   />
 
   % if dojs == 'math':
     <span id="display_${id}">`{::}`</span>
@@ -20,7 +20,7 @@
 
   % if state == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif state == 'correct':
   <span class="correct" id="status_${id}"></span>
   % elif state == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>
diff --git a/templates/textbox.html b/templates/textbox.html
index cbbab7babc..5f09dd8f11 100644
--- a/templates/textbox.html
+++ b/templates/textbox.html
@@ -1,11 +1,11 @@
-<section class="text-input">
+<section id="textbox_${id}" class="textbox">
   <textarea rows="30" cols="80" name="input_${id}" id="input_${id}">${value|h}</textarea>
 
   <span id="answer_${id}"></span>
 
   % if state == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif state == 'correct':
   <span class="correct" id="status_${id}"></span>
   % elif state == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>
@@ -18,17 +18,21 @@
   <span class="debug">${msg|n}</span>
   <br/>
 
-<br/>
-<script>
-// Note: We need to make the area follow the CodeMirror for this to 
-// work. 
-$(function(){
-  var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), 
-                                   {'mode':"python"});
-});
-</script>
-<style type="text/css">
-  .CodeMirror {border-style: solid;
-              border-width: 1px;}
-</style>
+  <br/>
+
+  <script type="text/javascript" src="${ settings.LIB_URL }CodeMirror/codemirror.js"></script>
+  <script type="text/javascript" src="${ settings.LIB_URL }CodeMirror/python.js"></script>
+  <link rel="stylesheet" href="${ settings.LIB_URL }CodeMirror/codemirror.css" />
+  <script>
+    // Note: We need to make the area follow the CodeMirror for this to work.
+    $(function(){
+      var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), {
+        mode: "python"
+      });
+    });
+  </script>
+  <style type="text/css">
+    .CodeMirror {border-style: solid;
+      border-width: 1px;}
+  </style>
 </section>
diff --git a/templates/textinput.html b/templates/textinput.html
index 7c330777f3..b30c515dc3 100644
--- a/templates/textinput.html
+++ b/templates/textinput.html
@@ -1,15 +1,15 @@
-<section class="text-input">
-  <input type="text" name="input_${id}" id="input_${id}" value="${value}" 
-	 % if size:
-	 size="${size}"
-	 % endif 
-	 />
+<section id="textinput_${id}" class="textinput">
+  <input type="text" name="input_${id}" id="input_${id}" value="${value}"
+   % if size:
+   size="${size}"
+   % endif
+   />
 
   <span id="answer_${id}"></span>
 
   % if state == 'unsubmitted':
   <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct': 
+  % elif state == 'correct':
   <span class="correct" id="status_${id}"></span>
   % elif state == 'incorrect':
   <span class="incorrect" id="status_${id}"></span>

From 4298c920b8506085ed9bfce85e27f9d7f61173dc Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Tue, 15 May 2012 11:25:05 -0400
Subject: [PATCH 31/57] Make show answer button toggleable

---
 templates/coffee/src/modules/problem.coffee | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/templates/coffee/src/modules/problem.coffee b/templates/coffee/src/modules/problem.coffee
index 2bba68224e..21b63ff0d7 100644
--- a/templates/coffee/src/modules/problem.coffee
+++ b/templates/coffee/src/modules/problem.coffee
@@ -42,16 +42,18 @@ class @Problem
       Logger.log 'problem_show', problem: @id
       $.postWithPrefix "/modx/problem/#{@id}/problem_show", (response) =>
         $.each response, (key, value) =>
-          if $.isArray(data[key])
-            $.each data[key], (index, answer_index) =>
-              @$("#label[for='input_#{key}_#{data[key][answer_index]}']").attr
+          if $.isArray(value)
+            $.each value, (index, answer_index) =>
+              @$("#label[for='input_#{key}_#{value[answer_index]}']").attr
                 correct_answer: 'true'
           @$("#answer_#{key}").text(value)
+        @$('.show').val 'Hide Answer'
         @element.addClass 'showed'
     else
       @$('[id^=answer_]').text('')
       @$('[correct_answer]').attr(correct_answer: null)
-
+      @element.removeClass 'showed'
+      @$('.show').val 'Show Answer'
 
   save: =>
     Logger.log 'problem_save', @answers

From 8a87a4ba8bc19c67634e9d25fde4808fa0bd21e0 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Tue, 15 May 2012 13:57:51 -0400
Subject: [PATCH 32/57] Make staff problem histogram work again

---
 djangoapps/courseware/module_render.py   |  2 ++
 static/coffee/spec/calculator_spec.js    |  2 +-
 static/coffee/spec/feedback_form_spec.js |  2 +-
 static/coffee/src/courseware.coffee      |  4 +++
 static/sass/courseware/_courseware.scss  |  4 +++
 templates/coffee/spec/navigation_spec.js |  1 -
 templates/coffee/src/histogram.coffee    | 35 +++++++++++++++++++++
 templates/staff_problem_histogram.js     | 40 ------------------------
 templates/staff_problem_info.html        |  2 +-
 9 files changed, 48 insertions(+), 44 deletions(-)
 create mode 100644 templates/coffee/src/histogram.coffee
 delete mode 100644 templates/staff_problem_histogram.js

diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index 2463e31d9b..510d26033c 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -1,3 +1,4 @@
+import json
 import logging
 
 from lxml import etree
@@ -137,6 +138,7 @@ def render_x_module(user, request, xml_module, module_object_preload):
         render_histogram = len(histogram) > 0
         content=content+render_to_string("staff_problem_info.html", {'xml':etree.tostring(xml_module), 
                                                                      'module_id' : module_id,
+                                                                     'histogram': json.dumps(histogram),
                                                                      'render_histogram' : render_histogram})
 
     content = {'content':content,
diff --git a/static/coffee/spec/calculator_spec.js b/static/coffee/spec/calculator_spec.js
index 9ea57f3aef..66033964de 100644
--- a/static/coffee/spec/calculator_spec.js
+++ b/static/coffee/spec/calculator_spec.js
@@ -66,7 +66,7 @@
         return this.calculator.calculate();
       });
       it('send data to /calculate', function() {
-        return expect($.getJSON).toHaveBeenCalledWith('/calculate', {
+        return expect($.getWithPrefix).toHaveBeenCalledWith('/calculate', {
           equation: '1+2'
         }, jasmine.any(Function));
       });
diff --git a/static/coffee/spec/feedback_form_spec.js b/static/coffee/spec/feedback_form_spec.js
index 9824915d03..4a02b4d541 100644
--- a/static/coffee/spec/feedback_form_spec.js
+++ b/static/coffee/spec/feedback_form_spec.js
@@ -18,7 +18,7 @@
         $('#feedback_subject').val('Awesome!');
         $('#feedback_message').val('This site is really good.');
         $('#feedback_button').click();
-        return expect($.post).toHaveBeenCalledWith('/send_feedback', {
+        return expect($.postWithPrefix).toHaveBeenCalledWith('/send_feedback', {
           subject: 'Awesome!',
           message: 'This site is really good.',
           url: window.location.href
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index b495e14bc2..697aff8af4 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -22,3 +22,7 @@ class @Courseware
     $('.course-content .problems-wrapper').each ->
       id = $(this).attr('id').replace(/problem_/, '')
       new Problem id, $(this).data('url')
+    $('.course-content .histogram').each ->
+      id = $(this).attr('id').replace(/histogram_/, '')
+      new Histogram id, $(this).data('histogram')
+
diff --git a/static/sass/courseware/_courseware.scss b/static/sass/courseware/_courseware.scss
index bd707e1b80..44d54492ea 100644
--- a/static/sass/courseware/_courseware.scss
+++ b/static/sass/courseware/_courseware.scss
@@ -202,6 +202,10 @@ div.course-wrapper {
           padding-bottom: 0;
         }
 
+        .histogram {
+          width: 200px;
+          height: 150px;
+        }
 
         ul {
           list-style: disc outside none;
diff --git a/templates/coffee/spec/navigation_spec.js b/templates/coffee/spec/navigation_spec.js
index 3ba6508eec..cb51aacbf8 100644
--- a/templates/coffee/spec/navigation_spec.js
+++ b/templates/coffee/spec/navigation_spec.js
@@ -1,4 +1,3 @@
-// Generated by CoffeeScript 1.3.2-pre
 (function() {
 
   describe('Navigation', function() {
diff --git a/templates/coffee/src/histogram.coffee b/templates/coffee/src/histogram.coffee
new file mode 100644
index 0000000000..0ef2d64764
--- /dev/null
+++ b/templates/coffee/src/histogram.coffee
@@ -0,0 +1,35 @@
+class @Histogram
+  constructor: (@id, @rawData) ->
+    @xTicks = []
+    @yTicks = []
+    @data = []
+    @calculate()
+    @render()
+
+  calculate: ->
+    for [score, count] in @rawData
+      log_count = Math.log(count + 1)
+      @data.push [score, log_count]
+      @xTicks.push [score, score.toString()]
+      @yTicks.push [log_count, count.toString()]
+
+  render: ->
+    $.plot $("#histogram_#{@id}"), [
+      data: @data
+      bars:
+        show: true
+        align: 'center'
+        lineWidth: 0
+        fill: 1.0
+      color: "#b72121"
+    ],
+      xaxis:
+        min: -1
+        max: Math.max $.map(@xTicks, (data) -> data[0] + 1)
+        ticks: @xTicks
+        tickLength: 0
+      yaxis:
+        min: 0.0
+        max: Math.max $.map(@yTicks, (data) -> data[0] * 1.1)
+        ticks: @yTicks
+        labelWidth: 50
diff --git a/templates/staff_problem_histogram.js b/templates/staff_problem_histogram.js
deleted file mode 100644
index 77ba59d490..0000000000
--- a/templates/staff_problem_histogram.js
+++ /dev/null
@@ -1,40 +0,0 @@
-<%!
-  import json
-  import math
-%>
-
-
-var rawData = ${json.dumps(histogram)};
-
-var maxx = 1;
-var maxy = 1.5;
-var xticks = Array();
-var yticks = Array();
-var data = Array();
-for (var i = 0; i < rawData.length; i++) {
-  var score = rawData[i][0];
-  var count = rawData[i][1];
-  var log_count = Math.log(count + 1);
-  
-  data.push( [score, log_count] );
-  
-  xticks.push( [score, score.toString()] );
-  yticks.push( [log_count, count.toString()] );
-  
-  maxx = Math.max( score + 1, maxx );
-  maxy = Math.max(log_count*1.1, maxy );
-}
-
-$.plot($("#histogram_${module_id}"), [{
-    data: data,
-    bars: { show: true,
-            align: 'center',
-            lineWidth: 0, 
-            fill: 1.0 },
-    color: "#b72121",
-  }],
-  {
-    xaxis: {min: -1, max: maxx, ticks: xticks, tickLength: 0},
-    yaxis: {min: 0.0, max: maxy, ticks: yticks, labelWidth: 50},
-  }
-);
diff --git a/templates/staff_problem_info.html b/templates/staff_problem_info.html
index 20370a9c81..24450c797a 100644
--- a/templates/staff_problem_info.html
+++ b/templates/staff_problem_info.html
@@ -2,5 +2,5 @@
 ${xml | h}
 </div>
 %if render_histogram:
-  <div id="histogram_${module_id}" style="width:200px;height:150px"></div>
+<div id="histogram_${module_id}" class="histogram" data-histogram="${histogram}"></div>
 %endif

From b1daa59cea9fec4e26957a7609464123883008d0 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Tue, 15 May 2012 15:59:59 -0400
Subject: [PATCH 33/57] Refactor video caption to use binary search

---
 .../src/modules/video/video_caption.coffee    | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/templates/coffee/src/modules/video/video_caption.coffee b/templates/coffee/src/modules/video/video_caption.coffee
index 97122e1704..2e807fb93c 100644
--- a/templates/coffee/src/modules/video/video_caption.coffee
+++ b/templates/coffee/src/modules/video/video_caption.coffee
@@ -1,6 +1,5 @@
 class VideoCaption
   constructor: (@player, @youtubeId) ->
-    @index = []
     @render()
     @bind()
 
@@ -29,6 +28,12 @@ class VideoCaption
     @$('.subtitles').css maxHeight: @$('.video-wrapper').height() - 5
     @fetchCaption()
 
+  fetchCaption: ->
+    $.getWithPrefix @captionURL(), (captions) =>
+      @captions = captions.text
+      @start = captions.start
+      @renderCaption()
+
   renderCaption: ->
     container = $('<ol>')
 
@@ -44,28 +49,28 @@ class VideoCaption
     @$('.subtitles').prepend($('<li class="spacing">').height(@topSpacingHeight()))
       .append($('<li class="spacing">').height(@bottomSpacingHeight()))
 
-  fetchCaption: ->
-    $.getWithPrefix @captionURL(), (captions) =>
-      @captions = captions.text
-      @start = captions.start
-      for index in [0...captions.start.length]
-        for time in [captions.start[index]..captions.end[index]]
-          @index[time] ||= []
-          @index[time].push(index)
-      @renderCaption()
+  search: (time) ->
+    min = 0
+    max = @start.length - 1
+
+    while min < max
+      index = Math.ceil((max + min) / 2)
+      if time < @start[index]
+        max = index - 1
+      if time >= @start[index]
+        min = index
+
+    return min
 
   onUpdatePlayTime: (event, time) =>
     # This 250ms offset is required to match the video speed
     time = Math.round(Time.convert(time, @player.currentSpeed(), '1.0') * 1000 + 250)
-    newIndex = @index[time]
+    newIndex = @search time
 
     if newIndex != undefined && @currentIndex != newIndex
       if @currentIndex
-        for index in @currentIndex
-          @$(".subtitles li[data-index='#{index}']").removeClass('current')
-
-      for index in newIndex
-        @$(".subtitles li[data-index='#{newIndex}']").addClass('current')
+        @$(".subtitles li.current").removeClass('current')
+      @$(".subtitles li[data-index='#{newIndex}']").addClass('current')
 
       @currentIndex = newIndex
       @scrollCaption()

From 60094a1772c8934658f536a08e6f3a5d596aa1bb Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 17 May 2012 12:33:39 -0400
Subject: [PATCH 34/57] Add test coverage for JavaScript

---
 static/coffee/files.json                      |   2 +-
 static/coffee/spec/calculator_spec.coffee     |   3 +-
 static/coffee/spec/calculator_spec.js         |   3 +-
 static/coffee/spec/courseware_spec.coffee     |  18 +-
 static/coffee/spec/courseware_spec.js         |  17 +-
 static/coffee/spec/feedback_form_spec.coffee  |   2 +-
 static/coffee/spec/feedback_form_spec.js      |   2 +-
 static/coffee/spec/helper.coffee              |  75 +++
 static/coffee/spec/helper.js                  |  86 ++++
 static/coffee/src/courseware.coffee           |   3 +-
 templates/coffee/fixtures/items.json          |  15 +
 templates/coffee/fixtures/problem.html        |   1 +
 .../coffee/fixtures/problem_content.html      |  16 +
 templates/coffee/fixtures/sequence.html       |  20 +
 templates/coffee/fixtures/tab.html            |   3 +
 templates/coffee/fixtures/video.html          |  12 +
 templates/coffee/spec/histogram_spec.coffee   |  46 ++
 templates/coffee/spec/histogram_spec.js       |  62 +++
 templates/coffee/spec/logger_spec.coffee      |  35 ++
 templates/coffee/spec/logger_spec.js          |  46 ++
 .../coffee/spec/modules/problem_spec.coffee   | 250 ++++++++++
 templates/coffee/spec/modules/problem_spec.js | 301 ++++++++++++
 .../coffee/spec/modules/sequence_spec.coffee  | 156 +++++++
 .../coffee/spec/modules/sequence_spec.js      | 199 ++++++++
 templates/coffee/spec/modules/tab_spec.coffee |  39 ++
 templates/coffee/spec/modules/tab_spec.js     |  55 +++
 .../modules/video/video_caption_spec.coffee   | 294 ++++++++++++
 .../spec/modules/video/video_caption_spec.js  | 317 +++++++++++++
 .../modules/video/video_control_spec.coffee   |  73 +++
 .../spec/modules/video/video_control_spec.js  |  72 +++
 .../modules/video/video_player_spec.coffee    | 381 +++++++++++++++
 .../spec/modules/video/video_player_spec.js   | 441 ++++++++++++++++++
 .../video/video_progress_slider_spec.coffee   | 122 +++++
 .../video/video_progress_slider_spec.js       | 154 ++++++
 .../video/video_speed_control_spec.coffee     |  95 ++++
 .../modules/video/video_speed_control_spec.js | 103 ++++
 .../coffee/spec/modules/video_spec.coffee     | 121 +++++
 templates/coffee/spec/modules/video_spec.js   | 148 ++++++
 templates/coffee/spec/time_spec.coffee        |  18 +
 templates/coffee/spec/time_spec.js            |  28 ++
 templates/coffee/src/histogram.coffee         |   4 +-
 templates/coffee/src/logger.coffee            |   1 -
 templates/coffee/src/modules/problem.coffee   |  13 +-
 templates/coffee/src/modules/sequence.coffee  |  20 +-
 .../modules/{tab_module.coffee => tab.coffee} |   0
 templates/coffee/src/modules/video.coffee     |   4 +-
 .../src/modules/video/video_caption.coffee    |  11 +-
 .../src/modules/video/video_control.coffee    |   8 +-
 .../src/modules/video/video_player.coffee     |  24 +-
 .../video/video_progress_slider.coffee        |   2 +-
 .../modules/video/video_speed_control.coffee  |   6 +-
 templates/coffee/src/time.coffee              |  12 +-
 templates/jasmine/base.html                   |  68 +++
 53 files changed, 3934 insertions(+), 73 deletions(-)
 create mode 100644 templates/coffee/fixtures/items.json
 create mode 100644 templates/coffee/fixtures/problem.html
 create mode 100644 templates/coffee/fixtures/problem_content.html
 create mode 100644 templates/coffee/fixtures/sequence.html
 create mode 100644 templates/coffee/fixtures/tab.html
 create mode 100644 templates/coffee/fixtures/video.html
 create mode 100644 templates/coffee/spec/histogram_spec.coffee
 create mode 100644 templates/coffee/spec/histogram_spec.js
 create mode 100644 templates/coffee/spec/logger_spec.coffee
 create mode 100644 templates/coffee/spec/logger_spec.js
 create mode 100644 templates/coffee/spec/modules/problem_spec.coffee
 create mode 100644 templates/coffee/spec/modules/problem_spec.js
 create mode 100644 templates/coffee/spec/modules/sequence_spec.coffee
 create mode 100644 templates/coffee/spec/modules/sequence_spec.js
 create mode 100644 templates/coffee/spec/modules/tab_spec.coffee
 create mode 100644 templates/coffee/spec/modules/tab_spec.js
 create mode 100644 templates/coffee/spec/modules/video/video_caption_spec.coffee
 create mode 100644 templates/coffee/spec/modules/video/video_caption_spec.js
 create mode 100644 templates/coffee/spec/modules/video/video_control_spec.coffee
 create mode 100644 templates/coffee/spec/modules/video/video_control_spec.js
 create mode 100644 templates/coffee/spec/modules/video/video_player_spec.coffee
 create mode 100644 templates/coffee/spec/modules/video/video_player_spec.js
 create mode 100644 templates/coffee/spec/modules/video/video_progress_slider_spec.coffee
 create mode 100644 templates/coffee/spec/modules/video/video_progress_slider_spec.js
 create mode 100644 templates/coffee/spec/modules/video/video_speed_control_spec.coffee
 create mode 100644 templates/coffee/spec/modules/video/video_speed_control_spec.js
 create mode 100644 templates/coffee/spec/modules/video_spec.coffee
 create mode 100644 templates/coffee/spec/modules/video_spec.js
 create mode 100644 templates/coffee/spec/time_spec.coffee
 create mode 100644 templates/coffee/spec/time_spec.js
 rename templates/coffee/src/modules/{tab_module.coffee => tab.coffee} (100%)
 create mode 100644 templates/jasmine/base.html

diff --git a/static/coffee/files.json b/static/coffee/files.json
index 67bf671f6a..1e5e010d73 100644
--- a/static/coffee/files.json
+++ b/static/coffee/files.json
@@ -3,7 +3,7 @@
     "/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.cookie.js"
+    "/static/js/flot/jquery.flot.js"
   ],
   "static_files": [
     "js/application.js"
diff --git a/static/coffee/spec/calculator_spec.coffee b/static/coffee/spec/calculator_spec.coffee
index a9ef69ed26..58d7c70790 100644
--- a/static/coffee/spec/calculator_spec.coffee
+++ b/static/coffee/spec/calculator_spec.coffee
@@ -24,6 +24,7 @@ describe 'Calculator', ->
       expect($('form#calculator')).toHandleWith 'submit', @calculator.calculate
 
     it 'prevent default behavior on form submit', ->
+      jasmine.stubRequests()
       $('form#calculator').submit (e) ->
         expect(e.isDefaultPrevented()).toBeTruthy()
         e.preventDefault()
@@ -55,7 +56,7 @@ describe 'Calculator', ->
   describe 'calculate', ->
     beforeEach ->
       $('#calculator_input').val '1+2'
-      spyOn($, 'getJSON').andCallFake (url, data, callback) ->
+      spyOn($, 'getWithPrefix').andCallFake (url, data, callback) ->
         callback({ result: 3 })
       @calculator.calculate()
 
diff --git a/static/coffee/spec/calculator_spec.js b/static/coffee/spec/calculator_spec.js
index 66033964de..4bc54700a5 100644
--- a/static/coffee/spec/calculator_spec.js
+++ b/static/coffee/spec/calculator_spec.js
@@ -26,6 +26,7 @@
         return expect($('form#calculator')).toHandleWith('submit', this.calculator.calculate);
       });
       return it('prevent default behavior on form submit', function() {
+        jasmine.stubRequests();
         $('form#calculator').submit(function(e) {
           expect(e.isDefaultPrevented()).toBeTruthy();
           return e.preventDefault();
@@ -58,7 +59,7 @@
     return describe('calculate', function() {
       beforeEach(function() {
         $('#calculator_input').val('1+2');
-        spyOn($, 'getJSON').andCallFake(function(url, data, callback) {
+        spyOn($, 'getWithPrefix').andCallFake(function(url, data, callback) {
           return callback({
             result: 3
           });
diff --git a/static/coffee/spec/courseware_spec.coffee b/static/coffee/spec/courseware_spec.coffee
index 91b9187668..9d938c14e1 100644
--- a/static/coffee/spec/courseware_spec.coffee
+++ b/static/coffee/spec/courseware_spec.coffee
@@ -35,16 +35,28 @@ describe 'Courseware', ->
 
   describe 'render', ->
     beforeEach ->
+      jasmine.stubRequests()
       @courseware = new Courseware
+      spyOn(window, 'Histogram')
+      spyOn(window, 'Problem')
+      spyOn(window, 'Video')
       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 id="problem_3" class="problems-wrapper" data-url="/example/url/">
+            <div id="histogram_3" class="histogram" data-histogram="[[0, 1]]" style="height: 20px; display: block;">
+          </div>
         </div>
         """
-
-    it 'detect the video element and convert them', ->
-      spyOn(window, 'Video')
       @courseware.render()
+
+    it 'detect the video elements and convert them', ->
       expect(window.Video).toHaveBeenCalledWith('1', '1.0:abc1234')
       expect(window.Video).toHaveBeenCalledWith('2', '1.0:def5678')
+
+    it 'detect the problem element and convert it', ->
+      expect(window.Problem).toHaveBeenCalledWith('3', '/example/url/')
+
+    it 'detect the histrogram element and convert it', ->
+      expect(window.Histogram).toHaveBeenCalledWith('3', [[0, 1]])
diff --git a/static/coffee/spec/courseware_spec.js b/static/coffee/spec/courseware_spec.js
index adb04adc49..757943118c 100644
--- a/static/coffee/spec/courseware_spec.js
+++ b/static/coffee/spec/courseware_spec.js
@@ -35,15 +35,24 @@
     });
     return describe('render', function() {
       beforeEach(function() {
+        jasmine.stubRequests();
         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 it('detect the video element and convert them', function() {
+        spyOn(window, 'Histogram');
+        spyOn(window, 'Problem');
         spyOn(window, 'Video');
-        this.courseware.render();
+        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 id=\"problem_3\" class=\"problems-wrapper\" data-url=\"/example/url/\">\n    <div id=\"histogram_3\" class=\"histogram\" data-histogram=\"[[0, 1]]\" style=\"height: 20px; display: block;\">\n  </div>\n</div>");
+        return this.courseware.render();
+      });
+      it('detect the video elements and convert them', function() {
         expect(window.Video).toHaveBeenCalledWith('1', '1.0:abc1234');
         return expect(window.Video).toHaveBeenCalledWith('2', '1.0:def5678');
       });
+      it('detect the problem element and convert it', function() {
+        return expect(window.Problem).toHaveBeenCalledWith('3', '/example/url/');
+      });
+      return it('detect the histrogram element and convert it', function() {
+        return expect(window.Histogram).toHaveBeenCalledWith('3', [[0, 1]]);
+      });
     });
   });
 
diff --git a/static/coffee/spec/feedback_form_spec.coffee b/static/coffee/spec/feedback_form_spec.coffee
index 64fa5cba24..ce4195faab 100644
--- a/static/coffee/spec/feedback_form_spec.coffee
+++ b/static/coffee/spec/feedback_form_spec.coffee
@@ -5,7 +5,7 @@ describe 'FeedbackForm', ->
   describe 'constructor', ->
     beforeEach ->
       new FeedbackForm
-      spyOn($, 'post').andCallFake (url, data, callback, format) ->
+      spyOn($, 'postWithPrefix').andCallFake (url, data, callback, format) ->
         callback()
 
     it 'binds to the #feedback_button', ->
diff --git a/static/coffee/spec/feedback_form_spec.js b/static/coffee/spec/feedback_form_spec.js
index 4a02b4d541..eb5546baa1 100644
--- a/static/coffee/spec/feedback_form_spec.js
+++ b/static/coffee/spec/feedback_form_spec.js
@@ -7,7 +7,7 @@
     return describe('constructor', function() {
       beforeEach(function() {
         new FeedbackForm;
-        return spyOn($, 'post').andCallFake(function(url, data, callback, format) {
+        return spyOn($, 'postWithPrefix').andCallFake(function(url, data, callback, format) {
           return callback();
         });
       });
diff --git a/static/coffee/spec/helper.coffee b/static/coffee/spec/helper.coffee
index 1f27e257c2..c81cb83405 100644
--- a/static/coffee/spec/helper.coffee
+++ b/static/coffee/spec/helper.coffee
@@ -1 +1,76 @@
 jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/"
+
+jasmine.stubbedMetadata =
+  abc123:
+    id: 'abc123'
+    duration: 100
+  def456:
+    id: 'def456'
+    duration: 200
+  bogus:
+    duration: 300
+
+jasmine.stubbedCaption =
+  start: [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000,
+    100000, 110000, 120000]
+  text: ['Caption at 0', 'Caption at 10000', 'Caption at 20000',
+  'Caption at 30000', 'Caption at 40000', 'Caption at 50000', 'Caption at 60000',
+  'Caption at 70000', 'Caption at 80000', 'Caption at 90000', 'Caption at 100000',
+  'Caption at 110000', 'Caption at 120000']
+
+jasmine.stubRequests = ->
+  spyOn($, 'ajax').andCallFake (settings) ->
+    if match = settings.url.match /youtube\.com\/.+\/videos\/(.+)\?v=2&alt=jsonc/
+      settings.success data: jasmine.stubbedMetadata[match[1]]
+    else if match = settings.url.match /static\/subs\/(.+)\.srt\.sjson/
+      settings.success jasmine.stubbedCaption
+    else if settings.url == '/calculate' ||
+      settings.url == '/6002x/modx/sequential/1/goto_position' ||
+      settings.url.match(/event$/) ||
+      settings.url.match(/6002x\/modx\/problem\/.+\/problem_(check|reset|show|save)$/)
+      # do nothing
+    else
+      throw "External request attempted for #{settings.url}, which is not defined."
+
+jasmine.stubYoutubePlayer = ->
+  YT.Player = -> jasmine.createSpyObj 'YT.Player', ['cueVideoById', 'getVideoEmbedCode',
+    'getCurrentTime', 'getPlayerState', 'loadVideoById', 'playVideo', 'pauseVideo', 'seekTo']
+
+jasmine.stubVideoPlayer = (context, enableParts) ->
+  enableParts = [enableParts] unless $.isArray(enableParts)
+
+  suite = context.suite
+  currentPartName = suite.description while suite = suite.parentSuite
+  enableParts.push currentPartName
+
+  for part in ['VideoCaption', 'VideoSpeedControl', 'VideoProgressSlider']
+    unless $.inArray(part, enableParts) >= 0
+      spyOn window, part
+
+  loadFixtures 'video.html'
+  jasmine.stubRequests()
+  YT.Player = undefined
+  context.video = new Video 'example', '.75:abc123,1.0:def456'
+  jasmine.stubYoutubePlayer()
+  return new VideoPlayer context.video
+
+spyOn(window, 'onunload')
+
+# Stub Youtube API
+window.YT =
+  PlayerState:
+    UNSTARTED: -1
+    ENDED: 0
+    PLAYING: 1
+    PAUSED: 2
+    BUFFERING: 3
+    CUED: 5
+
+# Stub jQuery.cookie
+$.cookie = jasmine.createSpy('jQuery.cookie').andReturn '1.0'
+
+# Stub jQuery.qtip
+$.fn.qtip = jasmine.createSpy 'jQuery.qtip'
+
+# Stub jQuery.scrollTo
+$.fn.scrollTo = jasmine.createSpy 'jQuery.scrollTo'
diff --git a/static/coffee/spec/helper.js b/static/coffee/spec/helper.js
index 3add5f2bf8..0abaa18090 100644
--- a/static/coffee/spec/helper.js
+++ b/static/coffee/spec/helper.js
@@ -2,4 +2,90 @@
 
   jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/";
 
+  jasmine.stubbedMetadata = {
+    abc123: {
+      id: 'abc123',
+      duration: 100
+    },
+    def456: {
+      id: 'def456',
+      duration: 200
+    },
+    bogus: {
+      duration: 300
+    }
+  };
+
+  jasmine.stubbedCaption = {
+    start: [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000, 100000, 110000, 120000],
+    text: ['Caption at 0', 'Caption at 10000', 'Caption at 20000', 'Caption at 30000', 'Caption at 40000', 'Caption at 50000', 'Caption at 60000', 'Caption at 70000', 'Caption at 80000', 'Caption at 90000', 'Caption at 100000', 'Caption at 110000', 'Caption at 120000']
+  };
+
+  jasmine.stubRequests = function() {
+    return spyOn($, 'ajax').andCallFake(function(settings) {
+      var match;
+      if (match = settings.url.match(/youtube\.com\/.+\/videos\/(.+)\?v=2&alt=jsonc/)) {
+        return settings.success({
+          data: jasmine.stubbedMetadata[match[1]]
+        });
+      } else if (match = settings.url.match(/static\/subs\/(.+)\.srt\.sjson/)) {
+        return settings.success(jasmine.stubbedCaption);
+      } else if (settings.url === '/calculate' || settings.url === '/6002x/modx/sequential/1/goto_position' || settings.url.match(/event$/) || settings.url.match(/6002x\/modx\/problem\/.+\/problem_(check|reset|show|save)$/)) {
+
+      } else {
+        throw "External request attempted for " + settings.url + ", which is not defined.";
+      }
+    });
+  };
+
+  jasmine.stubYoutubePlayer = function() {
+    return YT.Player = function() {
+      return jasmine.createSpyObj('YT.Player', ['cueVideoById', 'getVideoEmbedCode', 'getCurrentTime', 'getPlayerState', 'loadVideoById', 'playVideo', 'pauseVideo', 'seekTo']);
+    };
+  };
+
+  jasmine.stubVideoPlayer = function(context, enableParts) {
+    var currentPartName, part, suite, _i, _len, _ref;
+    if (!$.isArray(enableParts)) {
+      enableParts = [enableParts];
+    }
+    suite = context.suite;
+    while (suite = suite.parentSuite) {
+      currentPartName = suite.description;
+    }
+    enableParts.push(currentPartName);
+    _ref = ['VideoCaption', 'VideoSpeedControl', 'VideoProgressSlider'];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      part = _ref[_i];
+      if (!($.inArray(part, enableParts) >= 0)) {
+        spyOn(window, part);
+      }
+    }
+    loadFixtures('video.html');
+    jasmine.stubRequests();
+    YT.Player = void 0;
+    context.video = new Video('example', '.75:abc123,1.0:def456');
+    jasmine.stubYoutubePlayer();
+    return new VideoPlayer(context.video);
+  };
+
+  spyOn(window, 'onunload');
+
+  window.YT = {
+    PlayerState: {
+      UNSTARTED: -1,
+      ENDED: 0,
+      PLAYING: 1,
+      PAUSED: 2,
+      BUFFERING: 3,
+      CUED: 5
+    }
+  };
+
+  $.cookie = jasmine.createSpy('jQuery.cookie').andReturn('1.0');
+
+  $.fn.qtip = jasmine.createSpy('jQuery.qtip');
+
+  $.fn.scrollTo = jasmine.createSpy('jQuery.scrollTo');
+
 }).call(this);
diff --git a/static/coffee/src/courseware.coffee b/static/coffee/src/courseware.coffee
index 697aff8af4..e110dfe0ac 100644
--- a/static/coffee/src/courseware.coffee
+++ b/static/coffee/src/courseware.coffee
@@ -1,4 +1,6 @@
 class @Courseware
+  @prefix: ''
+
   constructor: ->
     Courseware.prefix = $("meta[name='path_prefix']").attr('content')
     new Navigation
@@ -25,4 +27,3 @@ class @Courseware
     $('.course-content .histogram').each ->
       id = $(this).attr('id').replace(/histogram_/, '')
       new Histogram id, $(this).data('histogram')
-
diff --git a/templates/coffee/fixtures/items.json b/templates/coffee/fixtures/items.json
new file mode 100644
index 0000000000..df37531f3f
--- /dev/null
+++ b/templates/coffee/fixtures/items.json
@@ -0,0 +1,15 @@
+[
+  {
+    "content": "\"Video 1\"",
+    "type": "video",
+    "title": "Video 1"
+  }, {
+    "content": "\"Video 2\"",
+    "type": "video",
+    "title": "Video 2"
+  }, {
+    "content": "\"Sample Problem\"",
+    "type": "problem",
+    "title": "Sample Problem"
+  }
+]
diff --git a/templates/coffee/fixtures/problem.html b/templates/coffee/fixtures/problem.html
new file mode 100644
index 0000000000..f77ece7845
--- /dev/null
+++ b/templates/coffee/fixtures/problem.html
@@ -0,0 +1 @@
+<section id="problem_1" class="problems-wrapper" data-url="/problem/url/"></section>
diff --git a/templates/coffee/fixtures/problem_content.html b/templates/coffee/fixtures/problem_content.html
new file mode 100644
index 0000000000..d2e89fed2b
--- /dev/null
+++ b/templates/coffee/fixtures/problem_content.html
@@ -0,0 +1,16 @@
+<h2 class="problem-header">Problem Header</h2>
+
+<section class="problem">
+  <p>Problem Content</p>
+
+  <section class="action">
+    <input type="hidden" name="problem_id" value="1">
+
+    <input class="check" type="button" value="Check">
+    <input class="reset" type="button" value="Reset">
+    <input class="save" type="button" value="Save">
+    <input class="show" type="button" value="Show Answer">
+    <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
+    <section class="submission_feedback"></section>
+  </section>
+</section>
diff --git a/templates/coffee/fixtures/sequence.html b/templates/coffee/fixtures/sequence.html
new file mode 100644
index 0000000000..53e9531dd2
--- /dev/null
+++ b/templates/coffee/fixtures/sequence.html
@@ -0,0 +1,20 @@
+<div id="sequence_1" class="sequence">
+  <nav class="sequence-nav">
+    <ol id="sequence-list">
+    </ol>
+
+    <ul class="sequence-nav-buttons">
+      <li class="prev"><a href="#">Previous</a></li>
+      <li class="next"><a href="#">Next</a></li>
+    </ul>
+  </nav>
+
+  <div id="seq_content"></div>
+
+  <nav class="sequence-bottom">
+    <ul class="sequence-nav-buttons">
+      <li class="prev"><a href="#">Previous</a></li>
+      <li class="next"><a href="#">Next</a></li>
+    </ul>
+  </nav>
+</div>
diff --git a/templates/coffee/fixtures/tab.html b/templates/coffee/fixtures/tab.html
new file mode 100644
index 0000000000..7d28fa2ad7
--- /dev/null
+++ b/templates/coffee/fixtures/tab.html
@@ -0,0 +1,3 @@
+<div id="tab_1" class="tab">
+  <ul class="navigation"></ul>
+</div>
diff --git a/templates/coffee/fixtures/video.html b/templates/coffee/fixtures/video.html
new file mode 100644
index 0000000000..15404a89d1
--- /dev/null
+++ b/templates/coffee/fixtures/video.html
@@ -0,0 +1,12 @@
+<div class="course-content">
+  <div id="video_example" class="video">
+    <div class="tc-wrapper">
+      <article class="video-wrapper">
+        <section class="video-player">
+          <div id="example"></div>
+        </section>
+        <section class="video-controls"></section>
+      </article>
+    </div>
+  </div>
+</div>
diff --git a/templates/coffee/spec/histogram_spec.coffee b/templates/coffee/spec/histogram_spec.coffee
new file mode 100644
index 0000000000..4fd7ef98c3
--- /dev/null
+++ b/templates/coffee/spec/histogram_spec.coffee
@@ -0,0 +1,46 @@
+describe 'Histogram', ->
+  beforeEach ->
+    spyOn $, 'plot'
+
+  describe 'constructor', ->
+    it 'instantiate the data arrays', ->
+      histogram = new Histogram 1, []
+      expect(histogram.xTicks).toEqual []
+      expect(histogram.yTicks).toEqual []
+      expect(histogram.data).toEqual []
+
+  describe 'calculate', ->
+    beforeEach ->
+      @histogram = new Histogram(1, [[1, 1], [2, 2], [3, 3]])
+
+    it 'store the correct value for data', ->
+      expect(@histogram.data).toEqual [[1, Math.log(2)], [2, Math.log(3)], [3, Math.log(4)]]
+
+    it 'store the correct value for x ticks', ->
+      expect(@histogram.xTicks).toEqual [[1, '1'], [2, '2'], [3, '3']]
+
+    it 'store the correct value for y ticks', ->
+      expect(@histogram.yTicks).toEqual
+
+  describe 'render', ->
+    it 'call flot with correct option', ->
+      new Histogram(1, [[1, 1], [2, 2], [3, 3]])
+      expect($.plot).toHaveBeenCalledWith $("#histogram_1"), [
+        data: [[1, Math.log(2)], [2, Math.log(3)], [3, Math.log(4)]]
+        bars:
+          show: true
+          align: 'center'
+          lineWidth: 0
+          fill: 1.0
+        color: "#b72121"
+      ],
+        xaxis:
+          min: -1
+          max: 4
+          ticks: [[1, '1'], [2, '2'], [3, '3']]
+          tickLength: 0
+        yaxis:
+          min: 0.0
+          max: Math.log(4) * 1.1
+          ticks: [[Math.log(2), '1'], [Math.log(3), '2'], [Math.log(4), '3']]
+          labelWidth: 50
diff --git a/templates/coffee/spec/histogram_spec.js b/templates/coffee/spec/histogram_spec.js
new file mode 100644
index 0000000000..edfeec15d5
--- /dev/null
+++ b/templates/coffee/spec/histogram_spec.js
@@ -0,0 +1,62 @@
+(function() {
+
+  describe('Histogram', function() {
+    beforeEach(function() {
+      return spyOn($, 'plot');
+    });
+    describe('constructor', function() {
+      return it('instantiate the data arrays', function() {
+        var histogram;
+        histogram = new Histogram(1, []);
+        expect(histogram.xTicks).toEqual([]);
+        expect(histogram.yTicks).toEqual([]);
+        return expect(histogram.data).toEqual([]);
+      });
+    });
+    describe('calculate', function() {
+      beforeEach(function() {
+        return this.histogram = new Histogram(1, [[1, 1], [2, 2], [3, 3]]);
+      });
+      it('store the correct value for data', function() {
+        return expect(this.histogram.data).toEqual([[1, Math.log(2)], [2, Math.log(3)], [3, Math.log(4)]]);
+      });
+      it('store the correct value for x ticks', function() {
+        return expect(this.histogram.xTicks).toEqual([[1, '1'], [2, '2'], [3, '3']]);
+      });
+      return it('store the correct value for y ticks', function() {
+        return expect(this.histogram.yTicks).toEqual;
+      });
+    });
+    return describe('render', function() {
+      return it('call flot with correct option', function() {
+        new Histogram(1, [[1, 1], [2, 2], [3, 3]]);
+        return expect($.plot).toHaveBeenCalledWith($("#histogram_1"), [
+          {
+            data: [[1, Math.log(2)], [2, Math.log(3)], [3, Math.log(4)]],
+            bars: {
+              show: true,
+              align: 'center',
+              lineWidth: 0,
+              fill: 1.0
+            },
+            color: "#b72121"
+          }
+        ], {
+          xaxis: {
+            min: -1,
+            max: 4,
+            ticks: [[1, '1'], [2, '2'], [3, '3']],
+            tickLength: 0
+          },
+          yaxis: {
+            min: 0.0,
+            max: Math.log(4) * 1.1,
+            ticks: [[Math.log(2), '1'], [Math.log(3), '2'], [Math.log(4), '3']],
+            labelWidth: 50
+          }
+        });
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/logger_spec.coffee b/templates/coffee/spec/logger_spec.coffee
new file mode 100644
index 0000000000..bfad742de3
--- /dev/null
+++ b/templates/coffee/spec/logger_spec.coffee
@@ -0,0 +1,35 @@
+describe 'Logger', ->
+  it 'expose window.log_event', ->
+    jasmine.stubRequests()
+    expect(window.log_event).toBe Logger.log
+
+  describe 'log', ->
+    it 'send a request to log event', ->
+      spyOn $, 'getWithPrefix'
+      Logger.log 'example', 'data'
+      expect($.getWithPrefix).toHaveBeenCalledWith '/event',
+        event_type: 'example'
+        event: '"data"'
+        page: window.location.href
+
+  describe 'bind', ->
+    beforeEach ->
+      Logger.bind()
+      Courseware.prefix = '/6002x'
+
+    afterEach ->
+      window.onunload = null
+
+    it 'bind the onunload event', ->
+      expect(window.onunload).toEqual jasmine.any(Function)
+
+    it 'send a request to log event', ->
+      spyOn($, 'ajax')
+      $(window).trigger('onunload')
+      expect($.ajax).toHaveBeenCalledWith
+        url: "#{Courseware.prefix}/event",
+        data:
+          event_type: 'page_close'
+          event: ''
+          page: window.location.href
+        async: false
diff --git a/templates/coffee/spec/logger_spec.js b/templates/coffee/spec/logger_spec.js
new file mode 100644
index 0000000000..86b184a873
--- /dev/null
+++ b/templates/coffee/spec/logger_spec.js
@@ -0,0 +1,46 @@
+(function() {
+
+  describe('Logger', function() {
+    it('expose window.log_event', function() {
+      jasmine.stubRequests();
+      return expect(window.log_event).toBe(Logger.log);
+    });
+    describe('log', function() {
+      return it('send a request to log event', function() {
+        spyOn($, 'getWithPrefix');
+        Logger.log('example', 'data');
+        return expect($.getWithPrefix).toHaveBeenCalledWith('/event', {
+          event_type: 'example',
+          event: '"data"',
+          page: window.location.href
+        });
+      });
+    });
+    return describe('bind', function() {
+      beforeEach(function() {
+        Logger.bind();
+        return Courseware.prefix = '/6002x';
+      });
+      afterEach(function() {
+        return window.onunload = null;
+      });
+      it('bind the onunload event', function() {
+        return expect(window.onunload).toEqual(jasmine.any(Function));
+      });
+      return it('send a request to log event', function() {
+        spyOn($, 'ajax');
+        $(window).trigger('onunload');
+        return expect($.ajax).toHaveBeenCalledWith({
+          url: "" + Courseware.prefix + "/event",
+          data: {
+            event_type: 'page_close',
+            event: '',
+            page: window.location.href
+          },
+          async: false
+        });
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/problem_spec.coffee b/templates/coffee/spec/modules/problem_spec.coffee
new file mode 100644
index 0000000000..6bca63cfe1
--- /dev/null
+++ b/templates/coffee/spec/modules/problem_spec.coffee
@@ -0,0 +1,250 @@
+describe 'Problem', ->
+  beforeEach ->
+    # Stub MathJax
+    window.MathJax = { Hub: { Queue: -> } }
+    window.update_schematics = ->
+
+    loadFixtures 'problem.html'
+    spyOn Logger, 'log'
+    spyOn($.fn, 'load').andCallFake (url, callback) ->
+      $(@).html readFixtures('problem_content.html')
+      callback()
+
+  describe 'constructor', ->
+    beforeEach ->
+      @problem = new Problem 1, '/problem/url/'
+
+    it 'set the element', ->
+      expect(@problem.element).toBe '#problem_1'
+
+    it 'set the content url', ->
+      expect(@problem.content_url).toEqual '/problem/url/problem_get?id=1'
+
+    it 'render the content', ->
+      expect($.fn.load).toHaveBeenCalledWith @problem.content_url, @problem.bind
+
+  describe 'bind', ->
+    beforeEach ->
+      spyOn MathJax.Hub, 'Queue'
+      spyOn window, 'update_schematics'
+      @problem = new Problem 1, '/problem/url/'
+
+    it 'set mathjax typeset', ->
+      expect(MathJax.Hub.Queue).toHaveBeenCalled()
+
+    it 'update schematics', ->
+      expect(window.update_schematics).toHaveBeenCalled()
+
+    it 'bind answer refresh on button click', ->
+      expect($('section.action input:button')).toHandleWith 'click', @problem.refreshAnswers
+
+    it 'bind the check button', ->
+      expect($('section.action input.check')).toHandleWith 'click', @problem.check
+
+    it 'bind the reset button', ->
+      expect($('section.action input.reset')).toHandleWith 'click', @problem.reset
+
+    it 'bind the show button', ->
+      expect($('section.action input.show')).toHandleWith 'click', @problem.show
+
+    it 'bind the save button', ->
+      expect($('section.action input.save')).toHandleWith 'click', @problem.save
+
+  describe 'render', ->
+    beforeEach ->
+      @problem = new Problem 1, '/problem/url/'
+      @bind = @problem.bind
+      spyOn @problem, 'bind'
+
+    describe 'with content given', ->
+      beforeEach ->
+        @problem.render 'Hello World'
+
+      it 'render the content', ->
+        expect(@problem.element.html()).toEqual 'Hello World'
+
+      it 're-bind the content', ->
+        expect(@problem.bind).toHaveBeenCalled()
+
+    describe 'with no content given', ->
+      it 'load the content via ajax', ->
+        expect($.fn.load).toHaveBeenCalledWith @problem.content_url, @bind
+
+  describe 'check', ->
+    beforeEach ->
+      jasmine.stubRequests()
+      @problem = new Problem 1, '/problem/url/'
+      @problem.answers = 'foo=1&bar=2'
+
+    it 'log the problem_check event', ->
+      @problem.check()
+      expect(Logger.log).toHaveBeenCalledWith 'problem_check', 'foo=1&bar=2'
+
+    it 'submit the answer for check', ->
+      spyOn $, 'postWithPrefix'
+      @problem.check()
+      expect($.postWithPrefix).toHaveBeenCalledWith '/modx/problem/1/problem_check', 'foo=1&bar=2', jasmine.any(Function)
+
+    describe 'when the response is correct', ->
+      it 'call render with returned content', ->
+        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback(success: 'correct', contents: 'Correct!')
+        @problem.check()
+        expect(@problem.element.html()).toEqual 'Correct!'
+
+    describe 'when the response is incorrect', ->
+      it 'call render with returned content', ->
+        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback(success: 'incorrect', contents: 'Correct!')
+        @problem.check()
+        expect(@problem.element.html()).toEqual 'Correct!'
+
+    describe 'when the response is undetermined', ->
+      it 'alert the response', ->
+        spyOn window, 'alert'
+        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback(success: 'Number Only!')
+        @problem.check()
+        expect(window.alert).toHaveBeenCalledWith 'Number Only!'
+
+  describe 'reset', ->
+    beforeEach ->
+      jasmine.stubRequests()
+      @problem = new Problem 1, '/problem/url/'
+
+    it 'log the problem_reset event', ->
+      @problem.answers = 'foo=1&bar=2'
+      @problem.reset()
+      expect(Logger.log).toHaveBeenCalledWith 'problem_reset', 'foo=1&bar=2'
+
+    it 'POST to the problem reset page', ->
+      spyOn $, 'postWithPrefix'
+      @problem.reset()
+      expect($.postWithPrefix).toHaveBeenCalledWith '/modx/problem/1/problem_reset', { id: 1 }, jasmine.any(Function)
+
+    it 'render the returned content', ->
+      spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback("Reset!")
+      @problem.reset()
+      expect(@problem.element.html()).toEqual 'Reset!'
+
+  describe 'show', ->
+    beforeEach ->
+      jasmine.stubRequests()
+      @problem = new Problem 1, '/problem/url/'
+      @problem.element.prepend '<div id="answer_1_1" /><div id="answer_1_2" />'
+
+    describe 'when the answer has not yet shown', ->
+      beforeEach ->
+        @problem.element.removeClass 'showed'
+
+      it 'log the problem_show event', ->
+        @problem.show()
+        expect(Logger.log).toHaveBeenCalledWith 'problem_show', problem: 1
+
+      it 'fetch the answers', ->
+        spyOn $, 'postWithPrefix'
+        @problem.show()
+        expect($.postWithPrefix).toHaveBeenCalledWith '/modx/problem/1/problem_show', jasmine.any(Function)
+
+      it 'show the answers', ->
+        spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback('1_1': 'One', '1_2': 'Two')
+        @problem.show()
+        expect($('#answer_1_1')).toHaveHtml 'One'
+        expect($('#answer_1_2')).toHaveHtml 'Two'
+
+      it 'toggle the show answer button', ->
+        spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback({})
+        @problem.show()
+        expect($('.show')).toHaveValue 'Hide Answer'
+
+      it 'add the showed class to element', ->
+        spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback({})
+        @problem.show()
+        expect(@problem.element).toHaveClass 'showed'
+
+      describe 'multiple choice question', ->
+        beforeEach ->
+          @problem.element.prepend '''
+            <label for="input_1_1_1"><input type="checkbox" name="input_1_1" id="input_1_1_1" value="1"> One</label>
+            <label for="input_1_1_2"><input type="checkbox" name="input_1_1" id="input_1_1_2" value="2"> Two</label>
+            <label for="input_1_1_3"><input type="checkbox" name="input_1_1" id="input_1_1_3" value="3"> Three</label>
+            <label for="input_1_2_1"><input type="radio" name="input_1_2" id="input_1_2_1" value="1"> Other</label>
+          '''
+
+        it 'set the correct_answer attribute on the choice', ->
+          spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback('1_1': [2, 3])
+          @problem.show()
+          expect($('label[for="input_1_1_1"]')).not.toHaveAttr 'correct_answer', 'true'
+          expect($('label[for="input_1_1_2"]')).toHaveAttr 'correct_answer', 'true'
+          expect($('label[for="input_1_1_3"]')).toHaveAttr 'correct_answer', 'true'
+          expect($('label[for="input_1_2_1"]')).not.toHaveAttr 'correct_answer', 'true'
+
+    describe 'when the answers are alreay shown', ->
+      beforeEach ->
+        @problem.element.addClass 'showed'
+        @problem.element.prepend '''
+          <label for="input_1_1_1" correct_answer="true">
+            <input type="checkbox" name="input_1_1" id="input_1_1_1" value="1" />
+            One
+          </label>
+        '''
+        $('#answer_1_1').html('One')
+        $('#answer_1_2').html('Two')
+
+      it 'hide the answers', ->
+        @problem.show()
+        expect($('#answer_1_1')).toHaveHtml ''
+        expect($('#answer_1_2')).toHaveHtml ''
+        expect($('label[for="input_1_1_1"]')).not.toHaveAttr 'correct_answer'
+
+      it 'toggle the show answer button', ->
+        @problem.show()
+        expect($('.show')).toHaveValue 'Show Answer'
+
+      it 'remove the showed class from element', ->
+        @problem.show()
+        expect(@problem.element).not.toHaveClass 'showed'
+
+  describe 'save', ->
+    beforeEach ->
+      jasmine.stubRequests()
+      @problem = new Problem 1, '/problem/url/'
+      @problem.answers = 'foo=1&bar=2'
+
+    it 'log the problem_save event', ->
+      @problem.save()
+      expect(Logger.log).toHaveBeenCalledWith 'problem_save', 'foo=1&bar=2'
+
+    it 'POST to save problem', ->
+      spyOn $, 'postWithPrefix'
+      @problem.save()
+      expect($.postWithPrefix).toHaveBeenCalledWith '/modx/problem/1/problem_save', 'foo=1&bar=2', jasmine.any(Function)
+
+    it 'alert to the user', ->
+      spyOn window, 'alert'
+      spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> callback(success: 'OK')
+      @problem.save()
+      expect(window.alert).toHaveBeenCalledWith 'Saved'
+
+  describe 'refreshAnswers', ->
+    beforeEach ->
+      @problem = new Problem 1, '/problem/url/'
+      @problem.element.html '''
+        <textarea class="CodeMirror" />
+        <input id="input_1_1" name="input_1_1" class="schematic" value="one" />
+        <input id="input_1_2" name="input_1_2" value="two" />
+        <input id="input_bogus_3" name="input_bogus_3" value="three" />
+        '''
+      @stubSchematic = { update_value: jasmine.createSpy('schematic') }
+      @stubCodeMirror = { save: jasmine.createSpy('CodeMirror') }
+      $('input.schematic').get(0).schematic = @stubSchematic
+      $('textarea.CodeMirror').get(0).CodeMirror = @stubCodeMirror
+
+    it 'update each schematic', ->
+      @problem.refreshAnswers()
+      expect(@stubSchematic.update_value).toHaveBeenCalled()
+
+    it 'update each code block', ->
+      @problem.refreshAnswers()
+      expect(@stubCodeMirror.save).toHaveBeenCalled()
+
+    it 'serialize all answers', ->
+      @problem.refreshAnswers()
+      expect(@problem.answers).toEqual "input_1_1=one&input_1_2=two"
diff --git a/templates/coffee/spec/modules/problem_spec.js b/templates/coffee/spec/modules/problem_spec.js
new file mode 100644
index 0000000000..bfc1969399
--- /dev/null
+++ b/templates/coffee/spec/modules/problem_spec.js
@@ -0,0 +1,301 @@
+(function() {
+
+  describe('Problem', function() {
+    beforeEach(function() {
+      window.MathJax = {
+        Hub: {
+          Queue: function() {}
+        }
+      };
+      window.update_schematics = function() {};
+      loadFixtures('problem.html');
+      spyOn(Logger, 'log');
+      return spyOn($.fn, 'load').andCallFake(function(url, callback) {
+        $(this).html(readFixtures('problem_content.html'));
+        return callback();
+      });
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        return this.problem = new Problem(1, '/problem/url/');
+      });
+      it('set the element', function() {
+        return expect(this.problem.element).toBe('#problem_1');
+      });
+      it('set the content url', function() {
+        return expect(this.problem.content_url).toEqual('/problem/url/problem_get?id=1');
+      });
+      return it('render the content', function() {
+        return expect($.fn.load).toHaveBeenCalledWith(this.problem.content_url, this.problem.bind);
+      });
+    });
+    describe('bind', function() {
+      beforeEach(function() {
+        spyOn(MathJax.Hub, 'Queue');
+        spyOn(window, 'update_schematics');
+        return this.problem = new Problem(1, '/problem/url/');
+      });
+      it('set mathjax typeset', function() {
+        return expect(MathJax.Hub.Queue).toHaveBeenCalled();
+      });
+      it('update schematics', function() {
+        return expect(window.update_schematics).toHaveBeenCalled();
+      });
+      it('bind answer refresh on button click', function() {
+        return expect($('section.action input:button')).toHandleWith('click', this.problem.refreshAnswers);
+      });
+      it('bind the check button', function() {
+        return expect($('section.action input.check')).toHandleWith('click', this.problem.check);
+      });
+      it('bind the reset button', function() {
+        return expect($('section.action input.reset')).toHandleWith('click', this.problem.reset);
+      });
+      it('bind the show button', function() {
+        return expect($('section.action input.show')).toHandleWith('click', this.problem.show);
+      });
+      return it('bind the save button', function() {
+        return expect($('section.action input.save')).toHandleWith('click', this.problem.save);
+      });
+    });
+    describe('render', function() {
+      beforeEach(function() {
+        this.problem = new Problem(1, '/problem/url/');
+        this.bind = this.problem.bind;
+        return spyOn(this.problem, 'bind');
+      });
+      describe('with content given', function() {
+        beforeEach(function() {
+          return this.problem.render('Hello World');
+        });
+        it('render the content', function() {
+          return expect(this.problem.element.html()).toEqual('Hello World');
+        });
+        return it('re-bind the content', function() {
+          return expect(this.problem.bind).toHaveBeenCalled();
+        });
+      });
+      return describe('with no content given', function() {
+        return it('load the content via ajax', function() {
+          return expect($.fn.load).toHaveBeenCalledWith(this.problem.content_url, this.bind);
+        });
+      });
+    });
+    describe('check', function() {
+      beforeEach(function() {
+        jasmine.stubRequests();
+        this.problem = new Problem(1, '/problem/url/');
+        return this.problem.answers = 'foo=1&bar=2';
+      });
+      it('log the problem_check event', function() {
+        this.problem.check();
+        return expect(Logger.log).toHaveBeenCalledWith('problem_check', 'foo=1&bar=2');
+      });
+      it('submit the answer for check', function() {
+        spyOn($, 'postWithPrefix');
+        this.problem.check();
+        return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_check', 'foo=1&bar=2', jasmine.any(Function));
+      });
+      describe('when the response is correct', function() {
+        return it('call render with returned content', function() {
+          spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
+            return callback({
+              success: 'correct',
+              contents: 'Correct!'
+            });
+          });
+          this.problem.check();
+          return expect(this.problem.element.html()).toEqual('Correct!');
+        });
+      });
+      describe('when the response is incorrect', function() {
+        return it('call render with returned content', function() {
+          spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
+            return callback({
+              success: 'incorrect',
+              contents: 'Correct!'
+            });
+          });
+          this.problem.check();
+          return expect(this.problem.element.html()).toEqual('Correct!');
+        });
+      });
+      return describe('when the response is undetermined', function() {
+        return it('alert the response', function() {
+          spyOn(window, 'alert');
+          spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
+            return callback({
+              success: 'Number Only!'
+            });
+          });
+          this.problem.check();
+          return expect(window.alert).toHaveBeenCalledWith('Number Only!');
+        });
+      });
+    });
+    describe('reset', function() {
+      beforeEach(function() {
+        jasmine.stubRequests();
+        return this.problem = new Problem(1, '/problem/url/');
+      });
+      it('log the problem_reset event', function() {
+        this.problem.answers = 'foo=1&bar=2';
+        this.problem.reset();
+        return expect(Logger.log).toHaveBeenCalledWith('problem_reset', 'foo=1&bar=2');
+      });
+      it('POST to the problem reset page', function() {
+        spyOn($, 'postWithPrefix');
+        this.problem.reset();
+        return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_reset', {
+          id: 1
+        }, jasmine.any(Function));
+      });
+      return it('render the returned content', function() {
+        spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
+          return callback("Reset!");
+        });
+        this.problem.reset();
+        return expect(this.problem.element.html()).toEqual('Reset!');
+      });
+    });
+    describe('show', function() {
+      beforeEach(function() {
+        jasmine.stubRequests();
+        this.problem = new Problem(1, '/problem/url/');
+        return this.problem.element.prepend('<div id="answer_1_1" /><div id="answer_1_2" />');
+      });
+      describe('when the answer has not yet shown', function() {
+        beforeEach(function() {
+          return this.problem.element.removeClass('showed');
+        });
+        it('log the problem_show event', function() {
+          this.problem.show();
+          return expect(Logger.log).toHaveBeenCalledWith('problem_show', {
+            problem: 1
+          });
+        });
+        it('fetch the answers', function() {
+          spyOn($, 'postWithPrefix');
+          this.problem.show();
+          return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_show', jasmine.any(Function));
+        });
+        it('show the answers', function() {
+          spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
+            return callback({
+              '1_1': 'One',
+              '1_2': 'Two'
+            });
+          });
+          this.problem.show();
+          expect($('#answer_1_1')).toHaveHtml('One');
+          return expect($('#answer_1_2')).toHaveHtml('Two');
+        });
+        it('toggle the show answer button', function() {
+          spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
+            return callback({});
+          });
+          this.problem.show();
+          return expect($('.show')).toHaveValue('Hide Answer');
+        });
+        it('add the showed class to element', function() {
+          spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
+            return callback({});
+          });
+          this.problem.show();
+          return expect(this.problem.element).toHaveClass('showed');
+        });
+        return describe('multiple choice question', function() {
+          beforeEach(function() {
+            return this.problem.element.prepend('<label for="input_1_1_1"><input type="checkbox" name="input_1_1" id="input_1_1_1" value="1"> One</label>\n<label for="input_1_1_2"><input type="checkbox" name="input_1_1" id="input_1_1_2" value="2"> Two</label>\n<label for="input_1_1_3"><input type="checkbox" name="input_1_1" id="input_1_1_3" value="3"> Three</label>\n<label for="input_1_2_1"><input type="radio" name="input_1_2" id="input_1_2_1" value="1"> Other</label>');
+          });
+          return it('set the correct_answer attribute on the choice', function() {
+            spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
+              return callback({
+                '1_1': [2, 3]
+              });
+            });
+            this.problem.show();
+            expect($('label[for="input_1_1_1"]')).not.toHaveAttr('correct_answer', 'true');
+            expect($('label[for="input_1_1_2"]')).toHaveAttr('correct_answer', 'true');
+            expect($('label[for="input_1_1_3"]')).toHaveAttr('correct_answer', 'true');
+            return expect($('label[for="input_1_2_1"]')).not.toHaveAttr('correct_answer', 'true');
+          });
+        });
+      });
+      return describe('when the answers are alreay shown', function() {
+        beforeEach(function() {
+          this.problem.element.addClass('showed');
+          this.problem.element.prepend('<label for="input_1_1_1" correct_answer="true">\n  <input type="checkbox" name="input_1_1" id="input_1_1_1" value="1" />\n  One\n</label>');
+          $('#answer_1_1').html('One');
+          return $('#answer_1_2').html('Two');
+        });
+        it('hide the answers', function() {
+          this.problem.show();
+          expect($('#answer_1_1')).toHaveHtml('');
+          expect($('#answer_1_2')).toHaveHtml('');
+          return expect($('label[for="input_1_1_1"]')).not.toHaveAttr('correct_answer');
+        });
+        it('toggle the show answer button', function() {
+          this.problem.show();
+          return expect($('.show')).toHaveValue('Show Answer');
+        });
+        return it('remove the showed class from element', function() {
+          this.problem.show();
+          return expect(this.problem.element).not.toHaveClass('showed');
+        });
+      });
+    });
+    describe('save', function() {
+      beforeEach(function() {
+        jasmine.stubRequests();
+        this.problem = new Problem(1, '/problem/url/');
+        return this.problem.answers = 'foo=1&bar=2';
+      });
+      it('log the problem_save event', function() {
+        this.problem.save();
+        return expect(Logger.log).toHaveBeenCalledWith('problem_save', 'foo=1&bar=2');
+      });
+      it('POST to save problem', function() {
+        spyOn($, 'postWithPrefix');
+        this.problem.save();
+        return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_save', 'foo=1&bar=2', jasmine.any(Function));
+      });
+      return it('alert to the user', function() {
+        spyOn(window, 'alert');
+        spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
+          return callback({
+            success: 'OK'
+          });
+        });
+        this.problem.save();
+        return expect(window.alert).toHaveBeenCalledWith('Saved');
+      });
+    });
+    return describe('refreshAnswers', function() {
+      beforeEach(function() {
+        this.problem = new Problem(1, '/problem/url/');
+        this.problem.element.html('<textarea class="CodeMirror" />\n<input id="input_1_1" name="input_1_1" class="schematic" value="one" />\n<input id="input_1_2" name="input_1_2" value="two" />\n<input id="input_bogus_3" name="input_bogus_3" value="three" />');
+        this.stubSchematic = {
+          update_value: jasmine.createSpy('schematic')
+        };
+        this.stubCodeMirror = {
+          save: jasmine.createSpy('CodeMirror')
+        };
+        $('input.schematic').get(0).schematic = this.stubSchematic;
+        return $('textarea.CodeMirror').get(0).CodeMirror = this.stubCodeMirror;
+      });
+      it('update each schematic', function() {
+        this.problem.refreshAnswers();
+        return expect(this.stubSchematic.update_value).toHaveBeenCalled();
+      });
+      it('update each code block', function() {
+        this.problem.refreshAnswers();
+        return expect(this.stubCodeMirror.save).toHaveBeenCalled();
+      });
+      return it('serialize all answers', function() {
+        this.problem.refreshAnswers();
+        return expect(this.problem.answers).toEqual("input_1_1=one&input_1_2=two");
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/sequence_spec.coffee b/templates/coffee/spec/modules/sequence_spec.coffee
new file mode 100644
index 0000000000..87cd2b54ed
--- /dev/null
+++ b/templates/coffee/spec/modules/sequence_spec.coffee
@@ -0,0 +1,156 @@
+describe 'Sequence', ->
+  beforeEach ->
+    # Stub MathJax
+    window.MathJax = { Hub: { Queue: -> } }
+    spyOn Logger, 'log'
+
+    loadFixtures 'sequence.html'
+    @items = $.parseJSON readFixtures('items.json')
+
+  describe 'constructor', ->
+    beforeEach ->
+      @sequence = new Sequence '1', @items, 1
+
+    it 'set the element', ->
+      expect(@sequence.element).toEqual $('#sequence_1')
+
+    it 'build the navigation', ->
+      classes = $('#sequence-list li>a').map(-> $(this).attr('class')).get()
+      elements = $('#sequence-list li>a').map(-> $(this).attr('data-element')).get()
+      titles = $('#sequence-list li>a>p').map(-> $(this).html()).get()
+
+      expect(classes).toEqual ['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive']
+      expect(elements).toEqual ['1', '2', '3']
+      expect(titles).toEqual ['Video 1', 'Video 2', 'Sample Problem']
+
+    it 'bind the page events', ->
+      expect(@sequence.element).toHandleWith 'contentChanged', @sequence.toggleArrows
+      expect($('#sequence-list a')).toHandleWith 'click', @sequence.goto
+
+    it 'render the active sequence content', ->
+      expect($('#seq_content').html()).toEqual 'Video 1'
+
+  describe 'toggleArrows', ->
+    beforeEach ->
+      @sequence = new Sequence '1', @items, 1
+
+    describe 'when the first tab is active', ->
+      beforeEach ->
+        @sequence.position = 1
+        @sequence.toggleArrows()
+
+      it 'disable the previous button', ->
+        expect($('.sequence-nav-buttons .prev a')).toHaveClass 'disabled'
+
+      it 'enable the next button', ->
+        expect($('.sequence-nav-buttons .next a')).not.toHaveClass 'disabled'
+        expect($('.sequence-nav-buttons .next a')).toHandleWith 'click', @sequence.next
+
+    describe 'when the middle tab is active', ->
+      beforeEach ->
+        @sequence.position = 2
+        @sequence.toggleArrows()
+
+      it 'enable the previous button', ->
+        expect($('.sequence-nav-buttons .prev a')).not.toHaveClass 'disabled'
+        expect($('.sequence-nav-buttons .prev a')).toHandleWith 'click', @sequence.previous
+
+      it 'enable the next button', ->
+        expect($('.sequence-nav-buttons .next a')).not.toHaveClass 'disabled'
+        expect($('.sequence-nav-buttons .next a')).toHandleWith 'click', @sequence.next
+
+    describe 'when the last tab is active', ->
+      beforeEach ->
+        @sequence.position = 3
+        @sequence.toggleArrows()
+
+      it 'enable the previous button', ->
+        expect($('.sequence-nav-buttons .prev a')).not.toHaveClass 'disabled'
+        expect($('.sequence-nav-buttons .prev a')).toHandleWith 'click', @sequence.previous
+
+      it 'disable the next button', ->
+        expect($('.sequence-nav-buttons .next a')).toHaveClass 'disabled'
+
+  describe 'render', ->
+    beforeEach ->
+      spyOn $, 'postWithPrefix'
+      @sequence = new Sequence '1', @items
+      spyOnEvent @sequence.element, 'contentChanged'
+
+    describe 'with a different position than the current one', ->
+      beforeEach ->
+        @sequence.render 1
+
+      describe 'with no previous position', ->
+        it 'does not save the new position', ->
+          expect($.postWithPrefix).not.toHaveBeenCalled()
+
+      describe 'with previous position', ->
+        beforeEach ->
+          @sequence.position = 2
+          @sequence.render 1
+
+        it 'mark the previous tab as visited', ->
+          expect($('[data-element="2"]')).toHaveClass 'seq_video_visited'
+
+        it 'save the new position', ->
+          expect($.postWithPrefix).toHaveBeenCalledWith '/modx/sequential/1/goto_position', position: 1
+
+      it 'mark new tab as active', ->
+        expect($('[data-element="1"]')).toHaveClass 'seq_video_active'
+
+      it 'render the new content', ->
+        expect($('#seq_content').html()).toEqual 'Video 1'
+
+      it 'update the position', ->
+        expect(@sequence.position).toEqual 1
+
+      it 'trigger contentChanged event', ->
+        expect('contentChanged').toHaveBeenTriggeredOn @sequence.element
+
+    describe 'with the same position as the current one', ->
+      it 'should not trigger contentChanged event', ->
+        @sequence.position = 2
+        @sequence.render 2
+        expect('contentChanged').not.toHaveBeenTriggeredOn @sequence.element
+
+  describe 'goto', ->
+    beforeEach ->
+      jasmine.stubRequests()
+      @sequence = new Sequence '1', @items, 2
+      $('[data-element="3"]').click()
+
+    it 'log the sequence goto event', ->
+      expect(Logger.log).toHaveBeenCalledWith 'seq_goto', old: 2, new: 3, id: '1'
+
+    it 'call render on the right sequence', ->
+      expect($('#seq_content').html()).toEqual 'Sample Problem'
+
+  describe 'next', ->
+    beforeEach ->
+      jasmine.stubRequests()
+      @sequence = new Sequence '1', @items, 2
+      $('.sequence-nav-buttons .next a').click()
+
+    it 'log the next sequence event', ->
+      expect(Logger.log).toHaveBeenCalledWith 'seq_next', old: 2, new: 3, id: '1'
+
+    it 'call render on the next sequence', ->
+      expect($('#seq_content').html()).toEqual 'Sample Problem'
+
+  describe 'previous', ->
+    beforeEach ->
+      jasmine.stubRequests()
+      @sequence = new Sequence '1', @items, 2
+      $('.sequence-nav-buttons .prev a').click()
+
+    it 'log the previous sequence event', ->
+      expect(Logger.log).toHaveBeenCalledWith 'seq_prev', old: 2, new: 1, id: '1'
+
+    it 'call render on the previous sequence', ->
+      expect($('#seq_content').html()).toEqual 'Video 1'
+
+  describe 'link_for', ->
+    it 'return a link for specific position', ->
+      sequence = new Sequence '1', @items, 2
+      expect(sequence.link_for(2)).toBe '[data-element="2"]'
diff --git a/templates/coffee/spec/modules/sequence_spec.js b/templates/coffee/spec/modules/sequence_spec.js
new file mode 100644
index 0000000000..54d7888e22
--- /dev/null
+++ b/templates/coffee/spec/modules/sequence_spec.js
@@ -0,0 +1,199 @@
+(function() {
+
+  describe('Sequence', function() {
+    beforeEach(function() {
+      window.MathJax = {
+        Hub: {
+          Queue: function() {}
+        }
+      };
+      spyOn(Logger, 'log');
+      loadFixtures('sequence.html');
+      return this.items = $.parseJSON(readFixtures('items.json'));
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        return this.sequence = new Sequence('1', this.items, 1);
+      });
+      it('set the element', function() {
+        return expect(this.sequence.element).toEqual($('#sequence_1'));
+      });
+      it('build the navigation', function() {
+        var classes, elements, titles;
+        classes = $('#sequence-list li>a').map(function() {
+          return $(this).attr('class');
+        }).get();
+        elements = $('#sequence-list li>a').map(function() {
+          return $(this).attr('data-element');
+        }).get();
+        titles = $('#sequence-list li>a>p').map(function() {
+          return $(this).html();
+        }).get();
+        expect(classes).toEqual(['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive']);
+        expect(elements).toEqual(['1', '2', '3']);
+        return expect(titles).toEqual(['Video 1', 'Video 2', 'Sample Problem']);
+      });
+      it('bind the page events', function() {
+        expect(this.sequence.element).toHandleWith('contentChanged', this.sequence.toggleArrows);
+        return expect($('#sequence-list a')).toHandleWith('click', this.sequence.goto);
+      });
+      return it('render the active sequence content', function() {
+        return expect($('#seq_content').html()).toEqual('Video 1');
+      });
+    });
+    describe('toggleArrows', function() {
+      beforeEach(function() {
+        return this.sequence = new Sequence('1', this.items, 1);
+      });
+      describe('when the first tab is active', function() {
+        beforeEach(function() {
+          this.sequence.position = 1;
+          return this.sequence.toggleArrows();
+        });
+        it('disable the previous button', function() {
+          return expect($('.sequence-nav-buttons .prev a')).toHaveClass('disabled');
+        });
+        return it('enable the next button', function() {
+          expect($('.sequence-nav-buttons .next a')).not.toHaveClass('disabled');
+          return expect($('.sequence-nav-buttons .next a')).toHandleWith('click', this.sequence.next);
+        });
+      });
+      describe('when the middle tab is active', function() {
+        beforeEach(function() {
+          this.sequence.position = 2;
+          return this.sequence.toggleArrows();
+        });
+        it('enable the previous button', function() {
+          expect($('.sequence-nav-buttons .prev a')).not.toHaveClass('disabled');
+          return expect($('.sequence-nav-buttons .prev a')).toHandleWith('click', this.sequence.previous);
+        });
+        return it('enable the next button', function() {
+          expect($('.sequence-nav-buttons .next a')).not.toHaveClass('disabled');
+          return expect($('.sequence-nav-buttons .next a')).toHandleWith('click', this.sequence.next);
+        });
+      });
+      return describe('when the last tab is active', function() {
+        beforeEach(function() {
+          this.sequence.position = 3;
+          return this.sequence.toggleArrows();
+        });
+        it('enable the previous button', function() {
+          expect($('.sequence-nav-buttons .prev a')).not.toHaveClass('disabled');
+          return expect($('.sequence-nav-buttons .prev a')).toHandleWith('click', this.sequence.previous);
+        });
+        return it('disable the next button', function() {
+          return expect($('.sequence-nav-buttons .next a')).toHaveClass('disabled');
+        });
+      });
+    });
+    describe('render', function() {
+      beforeEach(function() {
+        spyOn($, 'postWithPrefix');
+        this.sequence = new Sequence('1', this.items);
+        return spyOnEvent(this.sequence.element, 'contentChanged');
+      });
+      describe('with a different position than the current one', function() {
+        beforeEach(function() {
+          return this.sequence.render(1);
+        });
+        describe('with no previous position', function() {
+          return it('does not save the new position', function() {
+            return expect($.postWithPrefix).not.toHaveBeenCalled();
+          });
+        });
+        describe('with previous position', function() {
+          beforeEach(function() {
+            this.sequence.position = 2;
+            return this.sequence.render(1);
+          });
+          it('mark the previous tab as visited', function() {
+            return expect($('[data-element="2"]')).toHaveClass('seq_video_visited');
+          });
+          return it('save the new position', function() {
+            return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/sequential/1/goto_position', {
+              position: 1
+            });
+          });
+        });
+        it('mark new tab as active', function() {
+          return expect($('[data-element="1"]')).toHaveClass('seq_video_active');
+        });
+        it('render the new content', function() {
+          return expect($('#seq_content').html()).toEqual('Video 1');
+        });
+        it('update the position', function() {
+          return expect(this.sequence.position).toEqual(1);
+        });
+        return it('trigger contentChanged event', function() {
+          return expect('contentChanged').toHaveBeenTriggeredOn(this.sequence.element);
+        });
+      });
+      return describe('with the same position as the current one', function() {
+        return it('should not trigger contentChanged event', function() {
+          this.sequence.position = 2;
+          this.sequence.render(2);
+          return expect('contentChanged').not.toHaveBeenTriggeredOn(this.sequence.element);
+        });
+      });
+    });
+    describe('goto', function() {
+      beforeEach(function() {
+        jasmine.stubRequests();
+        this.sequence = new Sequence('1', this.items, 2);
+        return $('[data-element="3"]').click();
+      });
+      it('log the sequence goto event', function() {
+        return expect(Logger.log).toHaveBeenCalledWith('seq_goto', {
+          old: 2,
+          "new": 3,
+          id: '1'
+        });
+      });
+      return it('call render on the right sequence', function() {
+        return expect($('#seq_content').html()).toEqual('Sample Problem');
+      });
+    });
+    describe('next', function() {
+      beforeEach(function() {
+        jasmine.stubRequests();
+        this.sequence = new Sequence('1', this.items, 2);
+        return $('.sequence-nav-buttons .next a').click();
+      });
+      it('log the next sequence event', function() {
+        return expect(Logger.log).toHaveBeenCalledWith('seq_next', {
+          old: 2,
+          "new": 3,
+          id: '1'
+        });
+      });
+      return it('call render on the next sequence', function() {
+        return expect($('#seq_content').html()).toEqual('Sample Problem');
+      });
+    });
+    describe('previous', function() {
+      beforeEach(function() {
+        jasmine.stubRequests();
+        this.sequence = new Sequence('1', this.items, 2);
+        return $('.sequence-nav-buttons .prev a').click();
+      });
+      it('log the previous sequence event', function() {
+        return expect(Logger.log).toHaveBeenCalledWith('seq_prev', {
+          old: 2,
+          "new": 1,
+          id: '1'
+        });
+      });
+      return it('call render on the previous sequence', function() {
+        return expect($('#seq_content').html()).toEqual('Video 1');
+      });
+    });
+    return describe('link_for', function() {
+      return it('return a link for specific position', function() {
+        var sequence;
+        sequence = new Sequence('1', this.items, 2);
+        return expect(sequence.link_for(2)).toBe('[data-element="2"]');
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/tab_spec.coffee b/templates/coffee/spec/modules/tab_spec.coffee
new file mode 100644
index 0000000000..bacf040131
--- /dev/null
+++ b/templates/coffee/spec/modules/tab_spec.coffee
@@ -0,0 +1,39 @@
+describe 'Tab', ->
+  beforeEach ->
+    loadFixtures 'tab.html'
+    @items = $.parseJSON readFixtures('items.json')
+
+  describe 'constructor', ->
+    beforeEach ->
+      spyOn($.fn, 'tabs')
+      @tab = new Tab 1, @items
+
+    it 'set the element', ->
+      expect(@tab.element).toEqual $('#tab_1')
+
+    it 'build the tabs', ->
+      links = $('.navigation li>a').map(-> $(this).attr('href')).get()
+      expect(links).toEqual ['#tab-1-0', '#tab-1-1', '#tab-1-2']
+
+    it 'build the container', ->
+      containers = $('section').map(-> $(this).attr('id')).get()
+      expect(containers).toEqual ['tab-1-0', 'tab-1-1', 'tab-1-2']
+
+    it 'bind the tabs', ->
+      expect($.fn.tabs).toHaveBeenCalledWith show: @tab.onShow
+
+  describe 'onShow', ->
+    beforeEach ->
+      @tab = new Tab 1, @items
+      $('[href="#tab-1-0"]').click()
+
+    it 'replace content in the container', ->
+      $('[href="#tab-1-1"]').click()
+      expect($('#tab-1-0').html()).toEqual ''
+      expect($('#tab-1-1').html()).toEqual 'Video 2'
+      expect($('#tab-1-2').html()).toEqual ''
+
+    it 'trigger contentChanged event on the element', ->
+      spyOnEvent @tab.element, 'contentChanged'
+      $('[href="#tab-1-1"]').click()
+      expect('contentChanged').toHaveBeenTriggeredOn @tab.element
diff --git a/templates/coffee/spec/modules/tab_spec.js b/templates/coffee/spec/modules/tab_spec.js
new file mode 100644
index 0000000000..838b052a28
--- /dev/null
+++ b/templates/coffee/spec/modules/tab_spec.js
@@ -0,0 +1,55 @@
+(function() {
+
+  describe('Tab', function() {
+    beforeEach(function() {
+      loadFixtures('tab.html');
+      return this.items = $.parseJSON(readFixtures('items.json'));
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        spyOn($.fn, 'tabs');
+        return this.tab = new Tab(1, this.items);
+      });
+      it('set the element', function() {
+        return expect(this.tab.element).toEqual($('#tab_1'));
+      });
+      it('build the tabs', function() {
+        var links;
+        links = $('.navigation li>a').map(function() {
+          return $(this).attr('href');
+        }).get();
+        return expect(links).toEqual(['#tab-1-0', '#tab-1-1', '#tab-1-2']);
+      });
+      it('build the container', function() {
+        var containers;
+        containers = $('section').map(function() {
+          return $(this).attr('id');
+        }).get();
+        return expect(containers).toEqual(['tab-1-0', 'tab-1-1', 'tab-1-2']);
+      });
+      return it('bind the tabs', function() {
+        return expect($.fn.tabs).toHaveBeenCalledWith({
+          show: this.tab.onShow
+        });
+      });
+    });
+    return describe('onShow', function() {
+      beforeEach(function() {
+        this.tab = new Tab(1, this.items);
+        return $('[href="#tab-1-0"]').click();
+      });
+      it('replace content in the container', function() {
+        $('[href="#tab-1-1"]').click();
+        expect($('#tab-1-0').html()).toEqual('');
+        expect($('#tab-1-1').html()).toEqual('Video 2');
+        return expect($('#tab-1-2').html()).toEqual('');
+      });
+      return it('trigger contentChanged event on the element', function() {
+        spyOnEvent(this.tab.element, 'contentChanged');
+        $('[href="#tab-1-1"]').click();
+        return expect('contentChanged').toHaveBeenTriggeredOn(this.tab.element);
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_caption_spec.coffee b/templates/coffee/spec/modules/video/video_caption_spec.coffee
new file mode 100644
index 0000000000..acf900fdcf
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_caption_spec.coffee
@@ -0,0 +1,294 @@
+describe 'VideoCaption', ->
+  beforeEach ->
+    @player = jasmine.stubVideoPlayer @
+
+  afterEach ->
+    YT.Player = undefined
+    $.fn.scrollTo.reset()
+
+  describe 'constructor', ->
+    beforeEach ->
+      spyOn($, 'getWithPrefix').andCallThrough()
+      @caption = new VideoCaption @player, 'def456'
+
+    it 'set the player', ->
+      expect(@caption.player).toEqual @player
+
+    it 'set the youtube id', ->
+      expect(@caption.youtubeId).toEqual 'def456'
+
+    it 'create the caption element', ->
+      expect($('.video')).toContain 'ol.subtitles'
+
+    it 'add caption control to video player', ->
+      expect($('.video')).toContain 'a.hide-subtitles'
+
+    it 'fetch the caption', ->
+      expect($.getWithPrefix).toHaveBeenCalledWith @caption.captionURL(), jasmine.any(Function)
+
+    it 'render the caption', ->
+      expect($('.subtitles').html()).toMatch new RegExp('''
+        <li data-index="0" data-start="0">Caption at 0</li>
+        <li data-index="1" data-start="10000">Caption at 10000</li>
+        <li data-index="2" data-start="20000">Caption at 20000</li>
+        <li data-index="3" data-start="30000">Caption at 30000</li>
+        <li data-index="4" data-start="40000">Caption at 40000</li>
+        <li data-index="5" data-start="50000">Caption at 50000</li>
+        <li data-index="6" data-start="60000">Caption at 60000</li>
+        <li data-index="7" data-start="70000">Caption at 70000</li>
+        <li data-index="8" data-start="80000">Caption at 80000</li>
+        <li data-index="9" data-start="90000">Caption at 90000</li>
+        <li data-index="10" data-start="100000">Caption at 100000</li>
+        <li data-index="11" data-start="110000">Caption at 110000</li>
+        <li data-index="12" data-start="120000">Caption at 120000</li>
+      '''.replace(/\n/g, ''))
+
+    it 'add a padding element to caption', ->
+      expect($('.subtitles li:first')).toBe '.spacing'
+      expect($('.subtitles li:last')).toBe '.spacing'
+
+    it 'bind all the caption link', ->
+      $('.subtitles li[data-index]').each (index, link) =>
+        expect($(link)).toHandleWith 'click', @caption.seekPlayer
+
+    it 'bind window resize event', ->
+      expect($(window)).toHandleWith 'resize', @caption.onWindowResize
+
+    it 'bind player resize event', ->
+      expect($(@player)).toHandleWith 'resize', @caption.onWindowResize
+
+    it 'bind player updatePlayTime event', ->
+      expect($(@player)).toHandleWith 'updatePlayTime', @caption.onUpdatePlayTime
+
+    it 'bind the hide caption button', ->
+      expect($('.hide-subtitles')).toHandleWith 'click', @caption.toggle
+
+    it 'bind the mouse movement', ->
+      expect($('.subtitles')).toHandleWith 'mouseenter', @caption.onMouseEnter
+      expect($('.subtitles')).toHandleWith 'mouseleave', @caption.onMouseLeave
+      expect($('.subtitles')).toHandleWith 'mousemove', @caption.onMovement
+      expect($('.subtitles')).toHandleWith 'mousewheel', @caption.onMovement
+      expect($('.subtitles')).toHandleWith 'DOMMouseScroll', @caption.onMovement
+
+  describe 'mouse movement', ->
+    beforeEach ->
+      spyOn(window, 'setTimeout').andReturn 100
+      spyOn window, 'clearTimeout'
+      @caption = new VideoCaption @player, 'def456'
+
+    describe 'when cursor is outside of the caption box', ->
+      beforeEach ->
+        $(window).trigger jQuery.Event 'mousemove'
+
+      it 'does not set freezing timeout', ->
+        expect(@caption.frozen).toBeFalsy()
+
+    describe 'when cursor is in the caption box', ->
+      beforeEach ->
+        $('.subtitles').trigger jQuery.Event 'mouseenter'
+
+      it 'set the freezing timeout', ->
+        expect(@caption.frozen).toEqual 100
+
+      describe 'when the cursor is moving', ->
+        beforeEach ->
+          $('.subtitles').trigger jQuery.Event 'mousemove'
+
+        it 'reset the freezing timeout', ->
+          expect(window.clearTimeout).toHaveBeenCalledWith 100
+
+      describe 'when the mouse is scrolling', ->
+        beforeEach ->
+          $('.subtitles').trigger jQuery.Event 'mousewheel'
+
+        it 'reset the freezing timeout', ->
+          expect(window.clearTimeout).toHaveBeenCalledWith 100
+
+    describe 'when cursor is moving out of the caption box', ->
+      beforeEach ->
+        @caption.frozen = 100
+        $.fn.scrollTo.reset()
+
+      describe 'always', ->
+        beforeEach ->
+          $('.subtitles').trigger jQuery.Event 'mouseout'
+
+        it 'reset the freezing timeout', ->
+          expect(window.clearTimeout).toHaveBeenCalledWith 100
+
+        it 'unfreeze the caption', ->
+          expect(@caption.frozen).toBeNull()
+
+      describe 'when the player is playing', ->
+        beforeEach ->
+          spyOn(@player, 'isPlaying').andReturn true
+          $('.subtitles li[data-index]:first').addClass 'current'
+          $('.subtitles').trigger jQuery.Event 'mouseout'
+
+        it 'scroll the caption', ->
+          expect($.fn.scrollTo).toHaveBeenCalled()
+
+      describe 'when the player is not playing', ->
+        beforeEach ->
+          spyOn(@player, 'isPlaying').andReturn false
+          $('.subtitles').trigger jQuery.Event 'mouseout'
+
+        it 'does not scroll the caption', ->
+          expect($.fn.scrollTo).not.toHaveBeenCalled()
+
+  describe 'search', ->
+    beforeEach ->
+      @caption = new VideoCaption @player, 'def456'
+
+    it 'return a correct caption index', ->
+      expect(@caption.search(0)).toEqual 0
+      expect(@caption.search(9999)).toEqual 0
+      expect(@caption.search(10000)).toEqual 1
+      expect(@caption.search(15000)).toEqual 1
+      expect(@caption.search(120000)).toEqual 12
+      expect(@caption.search(120001)).toEqual 12
+
+  describe 'onUpdatePlayTime', ->
+    beforeEach ->
+      @caption = new VideoCaption @player, 'def456'
+
+    describe 'when the video speed is 1.0x', ->
+      beforeEach ->
+        @video.setSpeed '1.0'
+        @caption.onUpdatePlayTime {}, 25.000
+
+      it 'search the caption based on time', ->
+        expect(@caption.currentIndex).toEqual 2
+
+    describe 'when the video speed is not 1.0x', ->
+      beforeEach ->
+        @video.setSpeed '0.75'
+        @caption.onUpdatePlayTime {}, 25.000
+
+      it 'search the caption based on 1.0x speed', ->
+        expect(@caption.currentIndex).toEqual 1
+
+    describe 'when the index is not the same', ->
+      beforeEach ->
+        @caption.currentIndex = 1
+        $('.subtitles li[data-index=1]').addClass 'current'
+        @caption.onUpdatePlayTime {}, 25.000
+
+      it 'deactivate the previous caption', ->
+        expect($('.subtitles li[data-index=1]')).not.toHaveClass 'current'
+
+      it 'activate new caption', ->
+        expect($('.subtitles li[data-index=2]')).toHaveClass 'current'
+
+      it 'save new index', ->
+        expect(@caption.currentIndex).toEqual 2
+
+      it 'scroll caption to new position', ->
+        expect($.fn.scrollTo).toHaveBeenCalled()
+
+    describe 'when the index is the same', ->
+      beforeEach ->
+        @caption.currentIndex = 1
+        $('.subtitles li[data-index=1]').addClass 'current'
+        @caption.onUpdatePlayTime {}, 15.000
+
+      it 'does not change current subtitle', ->
+        expect($('.subtitles li[data-index=1]')).toHaveClass 'current'
+
+  describe 'onWindowResize', ->
+    beforeEach ->
+      @caption = new VideoCaption @player, 'def456'
+      $('.subtitles li[data-index=1]').addClass 'current'
+      @caption.onWindowResize()
+
+    it 'set the height of caption container', ->
+      expect(parseInt($('.subtitles').css('maxHeight'))).toEqual $('.video-wrapper').height()
+
+    it 'set the height of caption spacing', ->
+      expect(parseInt($('.subtitles .spacing:first').css('height'))).toEqual(
+        $('.video-wrapper').height() / 2 - $('.subtitles li:not(.spacing):first').height() / 2)
+      expect(parseInt($('.subtitles .spacing:last').css('height'))).toEqual(
+        $('.video-wrapper').height() / 2 - $('.subtitles li:not(.spacing):last').height() / 2)
+
+    it 'scroll caption to new position', ->
+      expect($.fn.scrollTo).toHaveBeenCalled()
+
+  describe 'scrollCaption', ->
+    beforeEach ->
+      @caption = new VideoCaption @player, 'def456'
+
+    describe 'when frozen', ->
+      beforeEach ->
+        @caption.frozen = true
+        $('.subtitles li[data-index=1]').addClass 'current'
+        @caption.scrollCaption()
+
+      it 'does not scroll the caption', ->
+        expect($.fn.scrollTo).not.toHaveBeenCalled()
+
+    describe 'when not frozen', ->
+      beforeEach ->
+        @caption.frozen = false
+
+      describe 'when there is no current caption', ->
+        beforeEach ->
+          @caption.scrollCaption()
+
+        it 'does not scroll the caption', ->
+          expect($.fn.scrollTo).not.toHaveBeenCalled()
+
+      describe 'when there is a current caption', ->
+        beforeEach ->
+          $('.subtitles li[data-index=1]').addClass 'current'
+          @caption.scrollCaption()
+
+        it 'scroll to current caption', ->
+          expect($.fn.scrollTo).toHaveBeenCalledWith $('.subtitles .current:first', @player.element),
+            offset: - ($('.video-wrapper').height() / 2 - $('.subtitles .current:first').height() / 2)
+
+  describe 'seekPlayer', ->
+    beforeEach ->
+      @caption = new VideoCaption @player, 'def456'
+      @time = null
+      $(@player).bind 'seek', (event, time) => @time = time
+
+    describe 'when the video speed is 1.0x', ->
+      beforeEach ->
+        @video.setSpeed '1.0'
+        $('.subtitles li[data-start="30000"]').click()
+
+      it 'trigger seek event with the correct time', ->
+        expect(@time).toEqual 30.000
+
+    describe 'when the video speed is not 1.0x', ->
+      beforeEach ->
+        @video.setSpeed '0.75'
+        $('.subtitles li[data-start="30000"]').click()
+
+      it 'trigger seek event with the correct time', ->
+        expect(@time).toEqual 40.000
+
+  describe 'toggle', ->
+    beforeEach ->
+      @caption = new VideoCaption @player, 'def456'
+      $('.subtitles li[data-index=1]').addClass 'current'
+
+    describe 'when the caption is visible', ->
+      beforeEach ->
+        @player.element.removeClass 'closed'
+        @caption.toggle jQuery.Event('click')
+
+      it 'hide the caption', ->
+        expect(@player.element).toHaveClass 'closed'
+
+
+    describe 'when the caption is hidden', ->
+      beforeEach ->
+        @player.element.addClass 'closed'
+        @caption.toggle jQuery.Event('click')
+
+      it 'show the caption', ->
+        expect(@player.element).not.toHaveClass 'closed'
+
+      it 'scroll the caption', ->
+        expect($.fn.scrollTo).toHaveBeenCalled()
diff --git a/templates/coffee/spec/modules/video/video_caption_spec.js b/templates/coffee/spec/modules/video/video_caption_spec.js
new file mode 100644
index 0000000000..176fc23ebc
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_caption_spec.js
@@ -0,0 +1,317 @@
+(function() {
+
+  describe('VideoCaption', function() {
+    beforeEach(function() {
+      return this.player = jasmine.stubVideoPlayer(this);
+    });
+    afterEach(function() {
+      YT.Player = void 0;
+      return $.fn.scrollTo.reset();
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        spyOn($, 'getWithPrefix').andCallThrough();
+        return this.caption = new VideoCaption(this.player, 'def456');
+      });
+      it('set the player', function() {
+        return expect(this.caption.player).toEqual(this.player);
+      });
+      it('set the youtube id', function() {
+        return expect(this.caption.youtubeId).toEqual('def456');
+      });
+      it('create the caption element', function() {
+        return expect($('.video')).toContain('ol.subtitles');
+      });
+      it('add caption control to video player', function() {
+        return expect($('.video')).toContain('a.hide-subtitles');
+      });
+      it('fetch the caption', function() {
+        return expect($.getWithPrefix).toHaveBeenCalledWith(this.caption.captionURL(), jasmine.any(Function));
+      });
+      it('render the caption', function() {
+        return expect($('.subtitles').html()).toMatch(new RegExp('<li data-index="0" data-start="0">Caption at 0</li>\n<li data-index="1" data-start="10000">Caption at 10000</li>\n<li data-index="2" data-start="20000">Caption at 20000</li>\n<li data-index="3" data-start="30000">Caption at 30000</li>\n<li data-index="4" data-start="40000">Caption at 40000</li>\n<li data-index="5" data-start="50000">Caption at 50000</li>\n<li data-index="6" data-start="60000">Caption at 60000</li>\n<li data-index="7" data-start="70000">Caption at 70000</li>\n<li data-index="8" data-start="80000">Caption at 80000</li>\n<li data-index="9" data-start="90000">Caption at 90000</li>\n<li data-index="10" data-start="100000">Caption at 100000</li>\n<li data-index="11" data-start="110000">Caption at 110000</li>\n<li data-index="12" data-start="120000">Caption at 120000</li>'.replace(/\n/g, '')));
+      });
+      it('add a padding element to caption', function() {
+        expect($('.subtitles li:first')).toBe('.spacing');
+        return expect($('.subtitles li:last')).toBe('.spacing');
+      });
+      it('bind all the caption link', function() {
+        var _this = this;
+        return $('.subtitles li[data-index]').each(function(index, link) {
+          return expect($(link)).toHandleWith('click', _this.caption.seekPlayer);
+        });
+      });
+      it('bind window resize event', function() {
+        return expect($(window)).toHandleWith('resize', this.caption.onWindowResize);
+      });
+      it('bind player resize event', function() {
+        return expect($(this.player)).toHandleWith('resize', this.caption.onWindowResize);
+      });
+      it('bind player updatePlayTime event', function() {
+        return expect($(this.player)).toHandleWith('updatePlayTime', this.caption.onUpdatePlayTime);
+      });
+      it('bind the hide caption button', function() {
+        return expect($('.hide-subtitles')).toHandleWith('click', this.caption.toggle);
+      });
+      return it('bind the mouse movement', function() {
+        expect($('.subtitles')).toHandleWith('mouseenter', this.caption.onMouseEnter);
+        expect($('.subtitles')).toHandleWith('mouseleave', this.caption.onMouseLeave);
+        expect($('.subtitles')).toHandleWith('mousemove', this.caption.onMovement);
+        expect($('.subtitles')).toHandleWith('mousewheel', this.caption.onMovement);
+        return expect($('.subtitles')).toHandleWith('DOMMouseScroll', this.caption.onMovement);
+      });
+    });
+    describe('mouse movement', function() {
+      beforeEach(function() {
+        spyOn(window, 'setTimeout').andReturn(100);
+        spyOn(window, 'clearTimeout');
+        return this.caption = new VideoCaption(this.player, 'def456');
+      });
+      describe('when cursor is outside of the caption box', function() {
+        beforeEach(function() {
+          return $(window).trigger(jQuery.Event('mousemove'));
+        });
+        return it('does not set freezing timeout', function() {
+          return expect(this.caption.frozen).toBeFalsy();
+        });
+      });
+      describe('when cursor is in the caption box', function() {
+        beforeEach(function() {
+          return $('.subtitles').trigger(jQuery.Event('mouseenter'));
+        });
+        it('set the freezing timeout', function() {
+          return expect(this.caption.frozen).toEqual(100);
+        });
+        describe('when the cursor is moving', function() {
+          beforeEach(function() {
+            return $('.subtitles').trigger(jQuery.Event('mousemove'));
+          });
+          return it('reset the freezing timeout', function() {
+            return expect(window.clearTimeout).toHaveBeenCalledWith(100);
+          });
+        });
+        return describe('when the mouse is scrolling', function() {
+          beforeEach(function() {
+            return $('.subtitles').trigger(jQuery.Event('mousewheel'));
+          });
+          return it('reset the freezing timeout', function() {
+            return expect(window.clearTimeout).toHaveBeenCalledWith(100);
+          });
+        });
+      });
+      return describe('when cursor is moving out of the caption box', function() {
+        beforeEach(function() {
+          this.caption.frozen = 100;
+          return $.fn.scrollTo.reset();
+        });
+        describe('always', function() {
+          beforeEach(function() {
+            return $('.subtitles').trigger(jQuery.Event('mouseout'));
+          });
+          it('reset the freezing timeout', function() {
+            return expect(window.clearTimeout).toHaveBeenCalledWith(100);
+          });
+          return it('unfreeze the caption', function() {
+            return expect(this.caption.frozen).toBeNull();
+          });
+        });
+        describe('when the player is playing', function() {
+          beforeEach(function() {
+            spyOn(this.player, 'isPlaying').andReturn(true);
+            $('.subtitles li[data-index]:first').addClass('current');
+            return $('.subtitles').trigger(jQuery.Event('mouseout'));
+          });
+          return it('scroll the caption', function() {
+            return expect($.fn.scrollTo).toHaveBeenCalled();
+          });
+        });
+        return describe('when the player is not playing', function() {
+          beforeEach(function() {
+            spyOn(this.player, 'isPlaying').andReturn(false);
+            return $('.subtitles').trigger(jQuery.Event('mouseout'));
+          });
+          return it('does not scroll the caption', function() {
+            return expect($.fn.scrollTo).not.toHaveBeenCalled();
+          });
+        });
+      });
+    });
+    describe('search', function() {
+      beforeEach(function() {
+        return this.caption = new VideoCaption(this.player, 'def456');
+      });
+      return it('return a correct caption index', function() {
+        expect(this.caption.search(0)).toEqual(0);
+        expect(this.caption.search(9999)).toEqual(0);
+        expect(this.caption.search(10000)).toEqual(1);
+        expect(this.caption.search(15000)).toEqual(1);
+        expect(this.caption.search(120000)).toEqual(12);
+        return expect(this.caption.search(120001)).toEqual(12);
+      });
+    });
+    describe('onUpdatePlayTime', function() {
+      beforeEach(function() {
+        return this.caption = new VideoCaption(this.player, 'def456');
+      });
+      describe('when the video speed is 1.0x', function() {
+        beforeEach(function() {
+          this.video.setSpeed('1.0');
+          return this.caption.onUpdatePlayTime({}, 25.000);
+        });
+        return it('search the caption based on time', function() {
+          return expect(this.caption.currentIndex).toEqual(2);
+        });
+      });
+      describe('when the video speed is not 1.0x', function() {
+        beforeEach(function() {
+          this.video.setSpeed('0.75');
+          return this.caption.onUpdatePlayTime({}, 25.000);
+        });
+        return it('search the caption based on 1.0x speed', function() {
+          return expect(this.caption.currentIndex).toEqual(1);
+        });
+      });
+      describe('when the index is not the same', function() {
+        beforeEach(function() {
+          this.caption.currentIndex = 1;
+          $('.subtitles li[data-index=1]').addClass('current');
+          return this.caption.onUpdatePlayTime({}, 25.000);
+        });
+        it('deactivate the previous caption', function() {
+          return expect($('.subtitles li[data-index=1]')).not.toHaveClass('current');
+        });
+        it('activate new caption', function() {
+          return expect($('.subtitles li[data-index=2]')).toHaveClass('current');
+        });
+        it('save new index', function() {
+          return expect(this.caption.currentIndex).toEqual(2);
+        });
+        return it('scroll caption to new position', function() {
+          return expect($.fn.scrollTo).toHaveBeenCalled();
+        });
+      });
+      return describe('when the index is the same', function() {
+        beforeEach(function() {
+          this.caption.currentIndex = 1;
+          $('.subtitles li[data-index=1]').addClass('current');
+          return this.caption.onUpdatePlayTime({}, 15.000);
+        });
+        return it('does not change current subtitle', function() {
+          return expect($('.subtitles li[data-index=1]')).toHaveClass('current');
+        });
+      });
+    });
+    describe('onWindowResize', function() {
+      beforeEach(function() {
+        this.caption = new VideoCaption(this.player, 'def456');
+        $('.subtitles li[data-index=1]').addClass('current');
+        return this.caption.onWindowResize();
+      });
+      it('set the height of caption container', function() {
+        return expect(parseInt($('.subtitles').css('maxHeight'))).toEqual($('.video-wrapper').height());
+      });
+      it('set the height of caption spacing', function() {
+        expect(parseInt($('.subtitles .spacing:first').css('height'))).toEqual($('.video-wrapper').height() / 2 - $('.subtitles li:not(.spacing):first').height() / 2);
+        return expect(parseInt($('.subtitles .spacing:last').css('height'))).toEqual($('.video-wrapper').height() / 2 - $('.subtitles li:not(.spacing):last').height() / 2);
+      });
+      return it('scroll caption to new position', function() {
+        return expect($.fn.scrollTo).toHaveBeenCalled();
+      });
+    });
+    describe('scrollCaption', function() {
+      beforeEach(function() {
+        return this.caption = new VideoCaption(this.player, 'def456');
+      });
+      describe('when frozen', function() {
+        beforeEach(function() {
+          this.caption.frozen = true;
+          $('.subtitles li[data-index=1]').addClass('current');
+          return this.caption.scrollCaption();
+        });
+        return it('does not scroll the caption', function() {
+          return expect($.fn.scrollTo).not.toHaveBeenCalled();
+        });
+      });
+      return describe('when not frozen', function() {
+        beforeEach(function() {
+          return this.caption.frozen = false;
+        });
+        describe('when there is no current caption', function() {
+          beforeEach(function() {
+            return this.caption.scrollCaption();
+          });
+          return it('does not scroll the caption', function() {
+            return expect($.fn.scrollTo).not.toHaveBeenCalled();
+          });
+        });
+        return describe('when there is a current caption', function() {
+          beforeEach(function() {
+            $('.subtitles li[data-index=1]').addClass('current');
+            return this.caption.scrollCaption();
+          });
+          return it('scroll to current caption', function() {
+            return expect($.fn.scrollTo).toHaveBeenCalledWith($('.subtitles .current:first', this.player.element), {
+              offset: -($('.video-wrapper').height() / 2 - $('.subtitles .current:first').height() / 2)
+            });
+          });
+        });
+      });
+    });
+    describe('seekPlayer', function() {
+      beforeEach(function() {
+        var _this = this;
+        this.caption = new VideoCaption(this.player, 'def456');
+        this.time = null;
+        return $(this.player).bind('seek', function(event, time) {
+          return _this.time = time;
+        });
+      });
+      describe('when the video speed is 1.0x', function() {
+        beforeEach(function() {
+          this.video.setSpeed('1.0');
+          return $('.subtitles li[data-start="30000"]').click();
+        });
+        return it('trigger seek event with the correct time', function() {
+          return expect(this.time).toEqual(30.000);
+        });
+      });
+      return describe('when the video speed is not 1.0x', function() {
+        beforeEach(function() {
+          this.video.setSpeed('0.75');
+          return $('.subtitles li[data-start="30000"]').click();
+        });
+        return it('trigger seek event with the correct time', function() {
+          return expect(this.time).toEqual(40.000);
+        });
+      });
+    });
+    return describe('toggle', function() {
+      beforeEach(function() {
+        this.caption = new VideoCaption(this.player, 'def456');
+        return $('.subtitles li[data-index=1]').addClass('current');
+      });
+      describe('when the caption is visible', function() {
+        beforeEach(function() {
+          this.player.element.removeClass('closed');
+          return this.caption.toggle(jQuery.Event('click'));
+        });
+        return it('hide the caption', function() {
+          return expect(this.player.element).toHaveClass('closed');
+        });
+      });
+      return describe('when the caption is hidden', function() {
+        beforeEach(function() {
+          this.player.element.addClass('closed');
+          return this.caption.toggle(jQuery.Event('click'));
+        });
+        it('show the caption', function() {
+          return expect(this.player.element).not.toHaveClass('closed');
+        });
+        return it('scroll the caption', function() {
+          return expect($.fn.scrollTo).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_control_spec.coffee b/templates/coffee/spec/modules/video/video_control_spec.coffee
new file mode 100644
index 0000000000..a912abb2d0
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_control_spec.coffee
@@ -0,0 +1,73 @@
+describe 'VideoControl', ->
+  beforeEach ->
+    @player = jasmine.stubVideoPlayer @
+
+  describe 'constructor', ->
+    beforeEach ->
+      @control = new VideoControl @player
+
+    it 'render the video controls', ->
+      expect($('.video-controls').html()).toContain '''
+        <div class="slider"></div>
+        <div>
+          <ul class="vcr">
+            <li><a class="video_control play">Play</a></li>
+            <li>
+              <div class="vidtime">0:00 / 0:00</div>
+            </li>
+          </ul>
+          <div class="secondary-controls">
+            <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
+          </div>
+        </div>
+      '''
+
+    it 'bind player events', ->
+      expect($(@player)).toHandleWith 'play', @control.onPlay
+      expect($(@player)).toHandleWith 'pause', @control.onPause
+      expect($(@player)).toHandleWith 'ended', @control.onPause
+
+    it 'bind the playback button', ->
+      expect($('.video_control')).toHandleWith 'click', @control.togglePlayback
+
+  describe 'onPlay', ->
+    beforeEach ->
+      @control = new VideoControl @player
+      @control.onPlay()
+
+    it 'switch playback button to play state', ->
+      expect($('.video_control')).not.toHaveClass 'play'
+      expect($('.video_control')).toHaveClass 'pause'
+      expect($('.video_control')).toHaveHtml 'Pause'
+
+  describe 'onPause', ->
+    beforeEach ->
+      @control = new VideoControl @player
+      @control.onPause()
+
+    it 'switch playback button to pause state', ->
+      expect($('.video_control')).not.toHaveClass 'pause'
+      expect($('.video_control')).toHaveClass 'play'
+      expect($('.video_control')).toHaveHtml 'Play'
+
+  describe 'togglePlayback', ->
+    beforeEach ->
+      @control = new VideoControl @player
+
+    describe 'when the video is playing', ->
+      beforeEach ->
+        spyOn(@player, 'isPlaying').andReturn true
+        spyOnEvent @player, 'pause'
+        @control.togglePlayback jQuery.Event('click')
+
+      it 'trigger the pause event', ->
+        expect('pause').toHaveBeenTriggeredOn @player
+
+    describe 'when the video is paused', ->
+      beforeEach ->
+        spyOn(@player, 'isPlaying').andReturn false
+        spyOnEvent @player, 'play'
+        @control.togglePlayback jQuery.Event('click')
+
+      it 'trigger the play event', ->
+        expect('play').toHaveBeenTriggeredOn @player
diff --git a/templates/coffee/spec/modules/video/video_control_spec.js b/templates/coffee/spec/modules/video/video_control_spec.js
new file mode 100644
index 0000000000..f32e938783
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_control_spec.js
@@ -0,0 +1,72 @@
+(function() {
+
+  describe('VideoControl', function() {
+    beforeEach(function() {
+      return this.player = jasmine.stubVideoPlayer(this);
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        return this.control = new VideoControl(this.player);
+      });
+      it('render the video controls', function() {
+        return expect($('.video-controls').html()).toContain('<div class="slider"></div>\n<div>\n  <ul class="vcr">\n    <li><a class="video_control play">Play</a></li>\n    <li>\n      <div class="vidtime">0:00 / 0:00</div>\n    </li>\n  </ul>\n  <div class="secondary-controls">\n    <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>\n  </div>\n</div>');
+      });
+      it('bind player events', function() {
+        expect($(this.player)).toHandleWith('play', this.control.onPlay);
+        expect($(this.player)).toHandleWith('pause', this.control.onPause);
+        return expect($(this.player)).toHandleWith('ended', this.control.onPause);
+      });
+      return it('bind the playback button', function() {
+        return expect($('.video_control')).toHandleWith('click', this.control.togglePlayback);
+      });
+    });
+    describe('onPlay', function() {
+      beforeEach(function() {
+        this.control = new VideoControl(this.player);
+        return this.control.onPlay();
+      });
+      return it('switch playback button to play state', function() {
+        expect($('.video_control')).not.toHaveClass('play');
+        expect($('.video_control')).toHaveClass('pause');
+        return expect($('.video_control')).toHaveHtml('Pause');
+      });
+    });
+    describe('onPause', function() {
+      beforeEach(function() {
+        this.control = new VideoControl(this.player);
+        return this.control.onPause();
+      });
+      return it('switch playback button to pause state', function() {
+        expect($('.video_control')).not.toHaveClass('pause');
+        expect($('.video_control')).toHaveClass('play');
+        return expect($('.video_control')).toHaveHtml('Play');
+      });
+    });
+    return describe('togglePlayback', function() {
+      beforeEach(function() {
+        return this.control = new VideoControl(this.player);
+      });
+      describe('when the video is playing', function() {
+        beforeEach(function() {
+          spyOn(this.player, 'isPlaying').andReturn(true);
+          spyOnEvent(this.player, 'pause');
+          return this.control.togglePlayback(jQuery.Event('click'));
+        });
+        return it('trigger the pause event', function() {
+          return expect('pause').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+      return describe('when the video is paused', function() {
+        beforeEach(function() {
+          spyOn(this.player, 'isPlaying').andReturn(false);
+          spyOnEvent(this.player, 'play');
+          return this.control.togglePlayback(jQuery.Event('click'));
+        });
+        return it('trigger the play event', function() {
+          return expect('play').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_player_spec.coffee b/templates/coffee/spec/modules/video/video_player_spec.coffee
new file mode 100644
index 0000000000..309afcd002
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_player_spec.coffee
@@ -0,0 +1,381 @@
+describe 'VideoPlayer', ->
+  beforeEach ->
+    jasmine.stubVideoPlayer @
+
+  afterEach ->
+    YT.Player = undefined
+
+  describe 'constructor', ->
+    beforeEach ->
+      spyOn window, 'VideoControl'
+      spyOn YT, 'Player'
+      $.fn.qtip.andCallFake ->
+        $(this).data('qtip', true)
+      $('.video').append $('<div class="hide-subtitles" />')
+      @player = new VideoPlayer @video
+
+    it 'instanticate current time to zero', ->
+      expect(@player.currentTime).toEqual 0
+
+    it 'set the element', ->
+      expect(@player.element).toBe '#video_example'
+
+    it 'create video control', ->
+      expect(window.VideoControl).toHaveBeenCalledWith @player
+
+    it 'create video caption', ->
+      expect(window.VideoCaption).toHaveBeenCalledWith @player, 'def456'
+
+    it 'create video speed control', ->
+      expect(window.VideoSpeedControl).toHaveBeenCalledWith @player, ['0.75', '1.0']
+
+    it 'create video progress slider', ->
+      expect(window.VideoProgressSlider).toHaveBeenCalledWith @player
+
+    it 'create Youtube player', ->
+      expect(YT.Player).toHaveBeenCalledWith 'example'
+        playerVars:
+          controls: 0
+          wmode: 'transparent'
+          rel: 0
+          showinfo: 0
+          enablejsapi: 1
+        videoId: 'def456'
+        events:
+          onReady: @player.onReady
+          onStateChange: @player.onStateChange
+
+    it 'bind to seek event', ->
+      expect($(@player)).toHandleWith 'seek', @player.onSeek
+
+    it 'bind to updatePlayTime event', ->
+      expect($(@player)).toHandleWith 'updatePlayTime', @player.onUpdatePlayTime
+
+    it 'bidn to speedChange event', ->
+      expect($(@player)).toHandleWith 'speedChange', @player.onSpeedChange
+
+    it 'bind to play event', ->
+      expect($(@player)).toHandleWith 'play', @player.onPlay
+
+    it 'bind to paused event', ->
+      expect($(@player)).toHandleWith 'pause', @player.onPause
+
+    it 'bind to ended event', ->
+      expect($(@player)).toHandleWith 'ended', @player.onPause
+
+    it 'bind to key press', ->
+      expect($(document)).toHandleWith 'keyup', @player.bindExitFullScreen
+
+    it 'bind to fullscreen switching button', ->
+      expect($('.add-fullscreen')).toHandleWith 'click', @player.toggleFullScreen
+
+    describe 'when not on a touch based device', ->
+      it 'add the tooltip to fullscreen and subtitle button', ->
+        expect($('.add-fullscreen')).toHaveData 'qtip'
+        expect($('.hide-subtitles')).toHaveData 'qtip'
+
+  describe 'onReady', ->
+    beforeEach ->
+      @video.embed()
+      @player = @video.player
+      spyOnEvent @player, 'ready'
+      spyOnEvent @player, 'updatePlayTime'
+      @player.onReady()
+
+    it 'reset the progress to zero', ->
+      expect('updatePlayTime').toHaveBeenTriggeredOn @player
+
+    it 'trigger ready event on the player', ->
+      expect('ready').toHaveBeenTriggeredOn @player
+
+    describe 'when not on a touch based device', ->
+      beforeEach ->
+        window.onTouchBasedDevice = -> false
+        spyOn @player, 'play'
+        @player.onReady()
+
+      it 'autoplay the first video', ->
+        expect(@player.play).toHaveBeenCalled()
+
+    describe 'when on a touch based device', ->
+      beforeEach ->
+        window.onTouchBasedDevice = -> true
+        spyOn @player, 'play'
+        @player.onReady()
+
+      it 'does not autoplay the first video', ->
+        expect(@player.play).not.toHaveBeenCalled()
+
+  describe 'onStateChange', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+
+    describe 'when the video is playing', ->
+      beforeEach ->
+        spyOnEvent @player, 'play'
+        @player.onStateChange data: YT.PlayerState.PLAYING
+
+      it 'trigger play event', ->
+        expect('play').toHaveBeenTriggeredOn @player
+
+    describe 'when the video is paused', ->
+      beforeEach ->
+        spyOnEvent @player, 'pause'
+        @player.onStateChange data: YT.PlayerState.PAUSED
+
+      it 'trigger pause event', ->
+        expect('pause').toHaveBeenTriggeredOn @player
+
+    describe 'when the video is ended', ->
+      beforeEach ->
+        spyOnEvent @player, 'ended'
+        @player.onStateChange data: YT.PlayerState.ENDED
+
+      it 'trigger ended event', ->
+        expect('ended').toHaveBeenTriggeredOn @player
+
+  describe 'onPlay', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      @anotherPlayer = jasmine.createSpyObj 'AnotherPlayer', ['pauseVideo']
+      window.player = @anotherPlayer
+      spyOn Logger, 'log'
+      spyOn(window, 'setInterval').andReturn 100
+      @player.player.getVideoEmbedCode.andReturn 'embedCode'
+      @player.onPlay()
+
+    it 'log the play_video event', ->
+      expect(Logger.log).toHaveBeenCalledWith 'play_video', id: @player.currentTime, code: 'embedCode'
+
+    it 'pause other video player', ->
+      expect(@anotherPlayer.pauseVideo).toHaveBeenCalled()
+
+    it 'set current video player as active player', ->
+      expect(window.player).toEqual @player.player
+
+    it 'set update interval', ->
+      expect(window.setInterval).toHaveBeenCalledWith @player.update, 200
+      expect(@player.player.interval).toEqual 100
+
+  describe 'onPause', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      window.player = @player.player
+      spyOn Logger, 'log'
+      spyOn window, 'clearInterval'
+      @player.player.interval = 100
+      @player.player.getVideoEmbedCode.andReturn 'embedCode'
+      @player.onPause()
+
+    it 'log the pause_video event', ->
+      expect(Logger.log).toHaveBeenCalledWith 'pause_video', id: @player.currentTime, code: 'embedCode'
+
+    it 'set current video player as inactive', ->
+      expect(window.player).toBeNull()
+
+    it 'clear update interval', ->
+      expect(window.clearInterval).toHaveBeenCalledWith 100
+      expect(@player.player.interval).toBeNull()
+
+  describe 'onSeek', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      spyOn window, 'clearInterval'
+      @player.player.interval = 100
+      @player.onSeek {}, 60
+
+    it 'seek the player', ->
+      expect(@player.player.seekTo).toHaveBeenCalledWith 60, true
+
+    describe 'when the player is playing', ->
+      beforeEach ->
+        @player.player.getPlayerState.andReturn YT.PlayerState.PLAYING
+        @player.onSeek {}, 60
+
+      it 'reset the update interval', ->
+        expect(window.clearInterval).toHaveBeenCalledWith 100
+
+    describe 'when the player is not playing', ->
+      beforeEach ->
+        @player.player.getPlayerState.andReturn YT.PlayerState.PAUSED
+        spyOnEvent @player, 'updatePlayTime'
+        @player.onSeek {}, 60
+
+      it 'set the current time', ->
+        expect(@player.currentTime).toEqual 60
+
+      it 'trigger updatePlayTime event', ->
+        expect('updatePlayTime').toHaveBeenTriggeredOn @player
+
+  describe 'onSpeedChange', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      @player.currentTime = 60
+      spyOn(@video, 'setSpeed').andCallThrough()
+
+    describe 'always', ->
+      beforeEach ->
+        @player.onSpeedChange {}, '0.75'
+
+      it 'convert the current time to the new speed', ->
+        expect(@player.currentTime).toEqual '80.000'
+
+      it 'set video speed to the new speed', ->
+        expect(@video.setSpeed).toHaveBeenCalledWith '0.75'
+
+    describe 'when the video is playing', ->
+      beforeEach ->
+        @player.player.getPlayerState.andReturn YT.PlayerState.PLAYING
+        spyOnEvent @player, 'updatePlayTime'
+        @player.onSpeedChange {}, '0.75'
+
+      it 'load the video', ->
+        expect(@player.player.loadVideoById).toHaveBeenCalledWith 'abc123', '80.000'
+
+      it 'trigger updatePlayTime event', ->
+        expect('updatePlayTime').toHaveBeenTriggeredOn @player
+
+    describe 'when the video is not playing', ->
+      beforeEach ->
+        @player.player.getPlayerState.andReturn YT.PlayerState.PAUSED
+        spyOnEvent @player, 'updatePlayTime'
+        @player.onSpeedChange {}, '0.75'
+
+      it 'cue the video', ->
+        expect(@player.player.cueVideoById).toHaveBeenCalledWith 'abc123', '80.000'
+
+      it 'trigger updatePlayTime event', ->
+        expect('updatePlayTime').toHaveBeenTriggeredOn @player
+
+  describe 'update', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      spyOnEvent @player, 'updatePlayTime'
+
+    describe 'when the current time is unavailable from the player', ->
+      beforeEach ->
+        @player.player.getCurrentTime.andReturn undefined
+        @player.update()
+
+      it 'does not trigger updatePlayTime event', ->
+        expect('updatePlayTime').not.toHaveBeenTriggeredOn @player
+
+    describe 'when the current time is available from the player', ->
+      beforeEach ->
+        @player.player.getCurrentTime.andReturn 60
+        @player.update()
+
+      it 'trigger updatePlayTime event', ->
+        expect('updatePlayTime').toHaveBeenTriggeredOn @player
+
+  describe 'onUpdatePlaytime', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      spyOn(@video, 'getDuration').andReturn 1800
+      @player.onUpdatePlayTime {}, 60
+
+    it 'update the video playback time', ->
+      expect($('.vidtime')).toHaveHtml '1:00 / 30:00'
+
+  describe 'toggleFullScreen', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+
+    describe 'when the video player is not full screen', ->
+      beforeEach ->
+        @player.element.removeClass 'fullscreen'
+        spyOnEvent @player, 'resize'
+        @player.toggleFullScreen(jQuery.Event("click"))
+
+      it 'replace the full screen button tooltip', ->
+        expect($('.add-fullscreen')).toHaveAttr 'title', 'Exit fill browser'
+
+      it 'add a new exit from fullscreen button', ->
+        expect(@player.element).toContain 'a.exit'
+
+      it 'add the fullscreen class', ->
+        expect(@player.element).toHaveClass 'fullscreen'
+
+      it 'trigger resize event', ->
+        expect('resize').toHaveBeenTriggeredOn @player
+
+    describe 'when the video player already full screen', ->
+      beforeEach ->
+        @player.element.addClass 'fullscreen'
+        spyOnEvent @player, 'resize'
+        @player.toggleFullScreen(jQuery.Event("click"))
+
+      it 'replace the full screen button tooltip', ->
+        expect($('.add-fullscreen')).toHaveAttr 'title', 'Fill browser'
+
+      it 'remove exit full screen button', ->
+        expect(@player.element).not.toContain 'a.exit'
+
+      it 'remove the fullscreen class', ->
+        expect(@player.element).not.toHaveClass 'fullscreen'
+
+      it 'trigger resize event', ->
+        expect('resize').toHaveBeenTriggeredOn @player
+
+  describe 'play', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+
+    describe 'when the player is not ready', ->
+      beforeEach ->
+        @player.player.playVideo = undefined
+        @player.play()
+
+      it 'does nothing', ->
+        expect(@player.player.playVideo).toBeUndefined()
+
+    describe 'when the player is ready', ->
+      beforeEach ->
+        @player.player.playVideo.andReturn true
+        @player.play()
+
+      it 'delegate to the Youtube player', ->
+        expect(@player.player.playVideo).toHaveBeenCalled()
+
+  describe 'isPlaying', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+
+    describe 'when the video is playing', ->
+      beforeEach ->
+        @player.player.getPlayerState.andReturn YT.PlayerState.PLAYING
+
+      it 'return true', ->
+        expect(@player.isPlaying()).toBeTruthy()
+
+    describe 'when the video is not playing', ->
+      beforeEach ->
+        @player.player.getPlayerState.andReturn YT.PlayerState.PAUSED
+
+      it 'return false', ->
+        expect(@player.isPlaying()).toBeFalsy()
+
+  describe 'pause', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      @player.pause()
+
+    it 'delegate to the Youtube player', ->
+      expect(@player.player.pauseVideo).toHaveBeenCalled()
+
+  describe 'duration', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      spyOn @video, 'getDuration'
+      @player.duration()
+
+    it 'delegate to the video', ->
+      expect(@video.getDuration).toHaveBeenCalled()
+
+  describe 'currentSpeed', ->
+    beforeEach ->
+      @player = new VideoPlayer @video
+      @video.speed = '3.0'
+
+    it 'delegate to the video', ->
+      expect(@player.currentSpeed()).toEqual '3.0'
diff --git a/templates/coffee/spec/modules/video/video_player_spec.js b/templates/coffee/spec/modules/video/video_player_spec.js
new file mode 100644
index 0000000000..0937a3d92e
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_player_spec.js
@@ -0,0 +1,441 @@
+(function() {
+
+  describe('VideoPlayer', function() {
+    beforeEach(function() {
+      return jasmine.stubVideoPlayer(this);
+    });
+    afterEach(function() {
+      return YT.Player = void 0;
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        spyOn(window, 'VideoControl');
+        spyOn(YT, 'Player');
+        $.fn.qtip.andCallFake(function() {
+          return $(this).data('qtip', true);
+        });
+        $('.video').append($('<div class="hide-subtitles" />'));
+        return this.player = new VideoPlayer(this.video);
+      });
+      it('instanticate current time to zero', function() {
+        return expect(this.player.currentTime).toEqual(0);
+      });
+      it('set the element', function() {
+        return expect(this.player.element).toBe('#video_example');
+      });
+      it('create video control', function() {
+        return expect(window.VideoControl).toHaveBeenCalledWith(this.player);
+      });
+      it('create video caption', function() {
+        return expect(window.VideoCaption).toHaveBeenCalledWith(this.player, 'def456');
+      });
+      it('create video speed control', function() {
+        return expect(window.VideoSpeedControl).toHaveBeenCalledWith(this.player, ['0.75', '1.0']);
+      });
+      it('create video progress slider', function() {
+        return expect(window.VideoProgressSlider).toHaveBeenCalledWith(this.player);
+      });
+      it('create Youtube player', function() {
+        return expect(YT.Player).toHaveBeenCalledWith('example', {
+          playerVars: {
+            controls: 0,
+            wmode: 'transparent',
+            rel: 0,
+            showinfo: 0,
+            enablejsapi: 1
+          },
+          videoId: 'def456',
+          events: {
+            onReady: this.player.onReady,
+            onStateChange: this.player.onStateChange
+          }
+        });
+      });
+      it('bind to seek event', function() {
+        return expect($(this.player)).toHandleWith('seek', this.player.onSeek);
+      });
+      it('bind to updatePlayTime event', function() {
+        return expect($(this.player)).toHandleWith('updatePlayTime', this.player.onUpdatePlayTime);
+      });
+      it('bidn to speedChange event', function() {
+        return expect($(this.player)).toHandleWith('speedChange', this.player.onSpeedChange);
+      });
+      it('bind to play event', function() {
+        return expect($(this.player)).toHandleWith('play', this.player.onPlay);
+      });
+      it('bind to paused event', function() {
+        return expect($(this.player)).toHandleWith('pause', this.player.onPause);
+      });
+      it('bind to ended event', function() {
+        return expect($(this.player)).toHandleWith('ended', this.player.onPause);
+      });
+      it('bind to key press', function() {
+        return expect($(document)).toHandleWith('keyup', this.player.bindExitFullScreen);
+      });
+      it('bind to fullscreen switching button', function() {
+        return expect($('.add-fullscreen')).toHandleWith('click', this.player.toggleFullScreen);
+      });
+      return describe('when not on a touch based device', function() {
+        return it('add the tooltip to fullscreen and subtitle button', function() {
+          expect($('.add-fullscreen')).toHaveData('qtip');
+          return expect($('.hide-subtitles')).toHaveData('qtip');
+        });
+      });
+    });
+    describe('onReady', function() {
+      beforeEach(function() {
+        this.video.embed();
+        this.player = this.video.player;
+        spyOnEvent(this.player, 'ready');
+        spyOnEvent(this.player, 'updatePlayTime');
+        return this.player.onReady();
+      });
+      it('reset the progress to zero', function() {
+        return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
+      });
+      it('trigger ready event on the player', function() {
+        return expect('ready').toHaveBeenTriggeredOn(this.player);
+      });
+      describe('when not on a touch based device', function() {
+        beforeEach(function() {
+          window.onTouchBasedDevice = function() {
+            return false;
+          };
+          spyOn(this.player, 'play');
+          return this.player.onReady();
+        });
+        return it('autoplay the first video', function() {
+          return expect(this.player.play).toHaveBeenCalled();
+        });
+      });
+      return describe('when on a touch based device', function() {
+        beforeEach(function() {
+          window.onTouchBasedDevice = function() {
+            return true;
+          };
+          spyOn(this.player, 'play');
+          return this.player.onReady();
+        });
+        return it('does not autoplay the first video', function() {
+          return expect(this.player.play).not.toHaveBeenCalled();
+        });
+      });
+    });
+    describe('onStateChange', function() {
+      beforeEach(function() {
+        return this.player = new VideoPlayer(this.video);
+      });
+      describe('when the video is playing', function() {
+        beforeEach(function() {
+          spyOnEvent(this.player, 'play');
+          return this.player.onStateChange({
+            data: YT.PlayerState.PLAYING
+          });
+        });
+        return it('trigger play event', function() {
+          return expect('play').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+      describe('when the video is paused', function() {
+        beforeEach(function() {
+          spyOnEvent(this.player, 'pause');
+          return this.player.onStateChange({
+            data: YT.PlayerState.PAUSED
+          });
+        });
+        return it('trigger pause event', function() {
+          return expect('pause').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+      return describe('when the video is ended', function() {
+        beforeEach(function() {
+          spyOnEvent(this.player, 'ended');
+          return this.player.onStateChange({
+            data: YT.PlayerState.ENDED
+          });
+        });
+        return it('trigger ended event', function() {
+          return expect('ended').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+    });
+    describe('onPlay', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        this.anotherPlayer = jasmine.createSpyObj('AnotherPlayer', ['pauseVideo']);
+        window.player = this.anotherPlayer;
+        spyOn(Logger, 'log');
+        spyOn(window, 'setInterval').andReturn(100);
+        this.player.player.getVideoEmbedCode.andReturn('embedCode');
+        return this.player.onPlay();
+      });
+      it('log the play_video event', function() {
+        return expect(Logger.log).toHaveBeenCalledWith('play_video', {
+          id: this.player.currentTime,
+          code: 'embedCode'
+        });
+      });
+      it('pause other video player', function() {
+        return expect(this.anotherPlayer.pauseVideo).toHaveBeenCalled();
+      });
+      it('set current video player as active player', function() {
+        return expect(window.player).toEqual(this.player.player);
+      });
+      return it('set update interval', function() {
+        expect(window.setInterval).toHaveBeenCalledWith(this.player.update, 200);
+        return expect(this.player.player.interval).toEqual(100);
+      });
+    });
+    describe('onPause', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        window.player = this.player.player;
+        spyOn(Logger, 'log');
+        spyOn(window, 'clearInterval');
+        this.player.player.interval = 100;
+        this.player.player.getVideoEmbedCode.andReturn('embedCode');
+        return this.player.onPause();
+      });
+      it('log the pause_video event', function() {
+        return expect(Logger.log).toHaveBeenCalledWith('pause_video', {
+          id: this.player.currentTime,
+          code: 'embedCode'
+        });
+      });
+      it('set current video player as inactive', function() {
+        return expect(window.player).toBeNull();
+      });
+      return it('clear update interval', function() {
+        expect(window.clearInterval).toHaveBeenCalledWith(100);
+        return expect(this.player.player.interval).toBeNull();
+      });
+    });
+    describe('onSeek', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        spyOn(window, 'clearInterval');
+        this.player.player.interval = 100;
+        return this.player.onSeek({}, 60);
+      });
+      it('seek the player', function() {
+        return expect(this.player.player.seekTo).toHaveBeenCalledWith(60, true);
+      });
+      describe('when the player is playing', function() {
+        beforeEach(function() {
+          this.player.player.getPlayerState.andReturn(YT.PlayerState.PLAYING);
+          return this.player.onSeek({}, 60);
+        });
+        return it('reset the update interval', function() {
+          return expect(window.clearInterval).toHaveBeenCalledWith(100);
+        });
+      });
+      return describe('when the player is not playing', function() {
+        beforeEach(function() {
+          this.player.player.getPlayerState.andReturn(YT.PlayerState.PAUSED);
+          spyOnEvent(this.player, 'updatePlayTime');
+          return this.player.onSeek({}, 60);
+        });
+        it('set the current time', function() {
+          return expect(this.player.currentTime).toEqual(60);
+        });
+        return it('trigger updatePlayTime event', function() {
+          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+    });
+    describe('onSpeedChange', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        this.player.currentTime = 60;
+        return spyOn(this.video, 'setSpeed').andCallThrough();
+      });
+      describe('always', function() {
+        beforeEach(function() {
+          return this.player.onSpeedChange({}, '0.75');
+        });
+        it('convert the current time to the new speed', function() {
+          return expect(this.player.currentTime).toEqual('80.000');
+        });
+        return it('set video speed to the new speed', function() {
+          return expect(this.video.setSpeed).toHaveBeenCalledWith('0.75');
+        });
+      });
+      describe('when the video is playing', function() {
+        beforeEach(function() {
+          this.player.player.getPlayerState.andReturn(YT.PlayerState.PLAYING);
+          spyOnEvent(this.player, 'updatePlayTime');
+          return this.player.onSpeedChange({}, '0.75');
+        });
+        it('load the video', function() {
+          return expect(this.player.player.loadVideoById).toHaveBeenCalledWith('abc123', '80.000');
+        });
+        return it('trigger updatePlayTime event', function() {
+          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+      return describe('when the video is not playing', function() {
+        beforeEach(function() {
+          this.player.player.getPlayerState.andReturn(YT.PlayerState.PAUSED);
+          spyOnEvent(this.player, 'updatePlayTime');
+          return this.player.onSpeedChange({}, '0.75');
+        });
+        it('cue the video', function() {
+          return expect(this.player.player.cueVideoById).toHaveBeenCalledWith('abc123', '80.000');
+        });
+        return it('trigger updatePlayTime event', function() {
+          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+    });
+    describe('update', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        return spyOnEvent(this.player, 'updatePlayTime');
+      });
+      describe('when the current time is unavailable from the player', function() {
+        beforeEach(function() {
+          this.player.player.getCurrentTime.andReturn(void 0);
+          return this.player.update();
+        });
+        return it('does not trigger updatePlayTime event', function() {
+          return expect('updatePlayTime').not.toHaveBeenTriggeredOn(this.player);
+        });
+      });
+      return describe('when the current time is available from the player', function() {
+        beforeEach(function() {
+          this.player.player.getCurrentTime.andReturn(60);
+          return this.player.update();
+        });
+        return it('trigger updatePlayTime event', function() {
+          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+    });
+    describe('onUpdatePlaytime', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        spyOn(this.video, 'getDuration').andReturn(1800);
+        return this.player.onUpdatePlayTime({}, 60);
+      });
+      return it('update the video playback time', function() {
+        return expect($('.vidtime')).toHaveHtml('1:00 / 30:00');
+      });
+    });
+    describe('toggleFullScreen', function() {
+      beforeEach(function() {
+        return this.player = new VideoPlayer(this.video);
+      });
+      describe('when the video player is not full screen', function() {
+        beforeEach(function() {
+          this.player.element.removeClass('fullscreen');
+          spyOnEvent(this.player, 'resize');
+          return this.player.toggleFullScreen(jQuery.Event("click"));
+        });
+        it('replace the full screen button tooltip', function() {
+          return expect($('.add-fullscreen')).toHaveAttr('title', 'Exit fill browser');
+        });
+        it('add a new exit from fullscreen button', function() {
+          return expect(this.player.element).toContain('a.exit');
+        });
+        it('add the fullscreen class', function() {
+          return expect(this.player.element).toHaveClass('fullscreen');
+        });
+        return it('trigger resize event', function() {
+          return expect('resize').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+      return describe('when the video player already full screen', function() {
+        beforeEach(function() {
+          this.player.element.addClass('fullscreen');
+          spyOnEvent(this.player, 'resize');
+          return this.player.toggleFullScreen(jQuery.Event("click"));
+        });
+        it('replace the full screen button tooltip', function() {
+          return expect($('.add-fullscreen')).toHaveAttr('title', 'Fill browser');
+        });
+        it('remove exit full screen button', function() {
+          return expect(this.player.element).not.toContain('a.exit');
+        });
+        it('remove the fullscreen class', function() {
+          return expect(this.player.element).not.toHaveClass('fullscreen');
+        });
+        return it('trigger resize event', function() {
+          return expect('resize').toHaveBeenTriggeredOn(this.player);
+        });
+      });
+    });
+    describe('play', function() {
+      beforeEach(function() {
+        return this.player = new VideoPlayer(this.video);
+      });
+      describe('when the player is not ready', function() {
+        beforeEach(function() {
+          this.player.player.playVideo = void 0;
+          return this.player.play();
+        });
+        return it('does nothing', function() {
+          return expect(this.player.player.playVideo).toBeUndefined();
+        });
+      });
+      return describe('when the player is ready', function() {
+        beforeEach(function() {
+          this.player.player.playVideo.andReturn(true);
+          return this.player.play();
+        });
+        return it('delegate to the Youtube player', function() {
+          return expect(this.player.player.playVideo).toHaveBeenCalled();
+        });
+      });
+    });
+    describe('isPlaying', function() {
+      beforeEach(function() {
+        return this.player = new VideoPlayer(this.video);
+      });
+      describe('when the video is playing', function() {
+        beforeEach(function() {
+          return this.player.player.getPlayerState.andReturn(YT.PlayerState.PLAYING);
+        });
+        return it('return true', function() {
+          return expect(this.player.isPlaying()).toBeTruthy();
+        });
+      });
+      return describe('when the video is not playing', function() {
+        beforeEach(function() {
+          return this.player.player.getPlayerState.andReturn(YT.PlayerState.PAUSED);
+        });
+        return it('return false', function() {
+          return expect(this.player.isPlaying()).toBeFalsy();
+        });
+      });
+    });
+    describe('pause', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        return this.player.pause();
+      });
+      return it('delegate to the Youtube player', function() {
+        return expect(this.player.player.pauseVideo).toHaveBeenCalled();
+      });
+    });
+    describe('duration', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        spyOn(this.video, 'getDuration');
+        return this.player.duration();
+      });
+      return it('delegate to the video', function() {
+        return expect(this.video.getDuration).toHaveBeenCalled();
+      });
+    });
+    return describe('currentSpeed', function() {
+      beforeEach(function() {
+        this.player = new VideoPlayer(this.video);
+        return this.video.speed = '3.0';
+      });
+      return it('delegate to the video', function() {
+        return expect(this.player.currentSpeed()).toEqual('3.0');
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_progress_slider_spec.coffee b/templates/coffee/spec/modules/video/video_progress_slider_spec.coffee
new file mode 100644
index 0000000000..b2ade26ba8
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_progress_slider_spec.coffee
@@ -0,0 +1,122 @@
+describe 'VideoProgressSlider', ->
+  beforeEach ->
+    @player = jasmine.stubVideoPlayer @
+
+  describe 'constructor', ->
+    beforeEach ->
+      spyOn($.fn, 'slider').andCallThrough()
+      @slider = new VideoProgressSlider @player
+
+    it 'build the slider', ->
+      expect(@slider.slider).toBe '.slider'
+      expect($.fn.slider).toHaveBeenCalledWith
+        range: 'min'
+        change: @slider.onChange
+        slide: @slider.onSlide
+        stop: @slider.onStop
+
+    it 'build the seek handle', ->
+      expect(@slider.handle).toBe '.ui-slider-handle'
+      expect($.fn.qtip).toHaveBeenCalledWith
+        content: "0:00"
+        position:
+          my: 'bottom center'
+          at: 'top center'
+          container: @slider.handle
+        hide:
+          delay: 700
+        style:
+          classes: 'ui-tooltip-slider'
+          widget: true
+
+    it 'bind player events', ->
+      expect($(@player)).toHandleWith 'updatePlayTime', @slider.onUpdatePlayTime
+
+  describe 'onReady', ->
+    beforeEach ->
+      spyOn(@player, 'duration').andReturn 120
+      @slider = new VideoProgressSlider @player
+      @slider.onReady()
+
+    it 'set the max value to the length of video', ->
+      expect(@slider.slider.slider('option', 'max')).toEqual 120
+
+  describe 'onUpdatePlayTime', ->
+    beforeEach ->
+      @slider = new VideoProgressSlider @player
+      spyOn(@player, 'duration').andReturn 120
+      spyOn($.fn, 'slider').andCallThrough()
+
+    describe 'when frozen', ->
+      beforeEach ->
+        @slider.frozen = true
+        @slider.onUpdatePlayTime {}, 20
+
+      it 'does not update the slider', ->
+        expect($.fn.slider).not.toHaveBeenCalled()
+
+    describe 'when not frozen', ->
+      beforeEach ->
+        @slider.frozen = false
+        @slider.onUpdatePlayTime {}, 20
+
+      it 'update the max value of the slider', ->
+        expect($.fn.slider).toHaveBeenCalledWith 'option', 'max', 120
+
+      it 'update current value of the slider', ->
+        expect($.fn.slider).toHaveBeenCalledWith 'value', 20
+
+  describe 'onSlide', ->
+    beforeEach ->
+      @slider = new VideoProgressSlider @player
+      @time = null
+      $(@player).bind 'seek', (event, time) => @time = time
+      spyOnEvent @player, 'seek'
+      @slider.onSlide {}, value: 20
+
+    it 'freeze the slider', ->
+      expect(@slider.frozen).toBeTruthy()
+
+    it 'update the tooltip', ->
+      expect($.fn.qtip).toHaveBeenCalled()
+
+    it 'trigger seek event', ->
+      expect('seek').toHaveBeenTriggeredOn @player
+      expect(@time).toEqual 20
+
+  describe 'onChange', ->
+    beforeEach ->
+      @slider = new VideoProgressSlider @player
+      @slider.onChange {}, value: 20
+
+    it 'update the tooltip', ->
+      expect($.fn.qtip).toHaveBeenCalled()
+
+  describe 'onStop', ->
+    beforeEach ->
+      @slider = new VideoProgressSlider @player
+      @time = null
+      $(@player).bind 'seek', (event, time) => @time = time
+      spyOnEvent @player, 'seek'
+      spyOn(window, 'setTimeout')
+      @slider.onStop {}, value: 20
+
+    it 'freeze the slider', ->
+      expect(@slider.frozen).toBeTruthy()
+
+    it 'trigger seek event', ->
+      expect('seek').toHaveBeenTriggeredOn @player
+      expect(@time).toEqual 20
+
+    it 'set timeout to unfreeze the slider', ->
+      expect(window.setTimeout).toHaveBeenCalledWith jasmine.any(Function), 200
+      window.setTimeout.mostRecentCall.args[0]()
+      expect(@slider.frozen).toBeFalsy()
+
+  describe 'updateTooltip', ->
+    beforeEach ->
+      @slider = new VideoProgressSlider @player
+      @slider.updateTooltip 90
+
+    it 'set the tooltip value', ->
+      expect($.fn.qtip).toHaveBeenCalledWith 'option', 'content.text', '1:30'
diff --git a/templates/coffee/spec/modules/video/video_progress_slider_spec.js b/templates/coffee/spec/modules/video/video_progress_slider_spec.js
new file mode 100644
index 0000000000..2699249e69
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_progress_slider_spec.js
@@ -0,0 +1,154 @@
+(function() {
+
+  describe('VideoProgressSlider', function() {
+    beforeEach(function() {
+      return this.player = jasmine.stubVideoPlayer(this);
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        spyOn($.fn, 'slider').andCallThrough();
+        return this.slider = new VideoProgressSlider(this.player);
+      });
+      it('build the slider', function() {
+        expect(this.slider.slider).toBe('.slider');
+        return expect($.fn.slider).toHaveBeenCalledWith({
+          range: 'min',
+          change: this.slider.onChange,
+          slide: this.slider.onSlide,
+          stop: this.slider.onStop
+        });
+      });
+      it('build the seek handle', function() {
+        expect(this.slider.handle).toBe('.ui-slider-handle');
+        return expect($.fn.qtip).toHaveBeenCalledWith({
+          content: "0:00",
+          position: {
+            my: 'bottom center',
+            at: 'top center',
+            container: this.slider.handle
+          },
+          hide: {
+            delay: 700
+          },
+          style: {
+            classes: 'ui-tooltip-slider',
+            widget: true
+          }
+        });
+      });
+      return it('bind player events', function() {
+        return expect($(this.player)).toHandleWith('updatePlayTime', this.slider.onUpdatePlayTime);
+      });
+    });
+    describe('onReady', function() {
+      beforeEach(function() {
+        spyOn(this.player, 'duration').andReturn(120);
+        this.slider = new VideoProgressSlider(this.player);
+        return this.slider.onReady();
+      });
+      return it('set the max value to the length of video', function() {
+        return expect(this.slider.slider.slider('option', 'max')).toEqual(120);
+      });
+    });
+    describe('onUpdatePlayTime', function() {
+      beforeEach(function() {
+        this.slider = new VideoProgressSlider(this.player);
+        spyOn(this.player, 'duration').andReturn(120);
+        return spyOn($.fn, 'slider').andCallThrough();
+      });
+      describe('when frozen', function() {
+        beforeEach(function() {
+          this.slider.frozen = true;
+          return this.slider.onUpdatePlayTime({}, 20);
+        });
+        return it('does not update the slider', function() {
+          return expect($.fn.slider).not.toHaveBeenCalled();
+        });
+      });
+      return describe('when not frozen', function() {
+        beforeEach(function() {
+          this.slider.frozen = false;
+          return this.slider.onUpdatePlayTime({}, 20);
+        });
+        it('update the max value of the slider', function() {
+          return expect($.fn.slider).toHaveBeenCalledWith('option', 'max', 120);
+        });
+        return it('update current value of the slider', function() {
+          return expect($.fn.slider).toHaveBeenCalledWith('value', 20);
+        });
+      });
+    });
+    describe('onSlide', function() {
+      beforeEach(function() {
+        var _this = this;
+        this.slider = new VideoProgressSlider(this.player);
+        this.time = null;
+        $(this.player).bind('seek', function(event, time) {
+          return _this.time = time;
+        });
+        spyOnEvent(this.player, 'seek');
+        return this.slider.onSlide({}, {
+          value: 20
+        });
+      });
+      it('freeze the slider', function() {
+        return expect(this.slider.frozen).toBeTruthy();
+      });
+      it('update the tooltip', function() {
+        return expect($.fn.qtip).toHaveBeenCalled();
+      });
+      return it('trigger seek event', function() {
+        expect('seek').toHaveBeenTriggeredOn(this.player);
+        return expect(this.time).toEqual(20);
+      });
+    });
+    describe('onChange', function() {
+      beforeEach(function() {
+        this.slider = new VideoProgressSlider(this.player);
+        return this.slider.onChange({}, {
+          value: 20
+        });
+      });
+      return it('update the tooltip', function() {
+        return expect($.fn.qtip).toHaveBeenCalled();
+      });
+    });
+    describe('onStop', function() {
+      beforeEach(function() {
+        var _this = this;
+        this.slider = new VideoProgressSlider(this.player);
+        this.time = null;
+        $(this.player).bind('seek', function(event, time) {
+          return _this.time = time;
+        });
+        spyOnEvent(this.player, 'seek');
+        spyOn(window, 'setTimeout');
+        return this.slider.onStop({}, {
+          value: 20
+        });
+      });
+      it('freeze the slider', function() {
+        return expect(this.slider.frozen).toBeTruthy();
+      });
+      it('trigger seek event', function() {
+        expect('seek').toHaveBeenTriggeredOn(this.player);
+        return expect(this.time).toEqual(20);
+      });
+      return it('set timeout to unfreeze the slider', function() {
+        expect(window.setTimeout).toHaveBeenCalledWith(jasmine.any(Function), 200);
+        window.setTimeout.mostRecentCall.args[0]();
+        return expect(this.slider.frozen).toBeFalsy();
+      });
+    });
+    return describe('updateTooltip', function() {
+      beforeEach(function() {
+        this.slider = new VideoProgressSlider(this.player);
+        return this.slider.updateTooltip(90);
+      });
+      return it('set the tooltip value', function() {
+        return expect($.fn.qtip).toHaveBeenCalledWith('option', 'content.text', '1:30');
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_speed_control_spec.coffee b/templates/coffee/spec/modules/video/video_speed_control_spec.coffee
new file mode 100644
index 0000000000..2aa342f8c2
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_speed_control_spec.coffee
@@ -0,0 +1,95 @@
+describe 'VideoSpeedControl', ->
+  beforeEach ->
+    @player = jasmine.stubVideoPlayer @
+    $('.speeds').remove()
+
+  afterEach ->
+
+  describe 'constructor', ->
+    describe 'always', ->
+      beforeEach ->
+        @speedControl = new VideoSpeedControl @player, @video.speeds
+
+      it 'add the video speed control to player', ->
+        expect($('.secondary-controls').html()).toContain '''
+          <div class="speeds">
+            <a href="#">
+              <h3>Speed</h3>
+              <p class="active">1.0x</p>
+            </a>
+            <ol class="video_speeds"><li data-speed="1.0" class="active"><a href="#">1.0x</a></li><li data-speed="0.75"><a href="#">0.75x</a></li></ol>
+          </div>
+        '''
+
+      it 'bind to player speedChange event', ->
+        expect($(@player)).toHandleWith 'speedChange', @speedControl.onSpeedChange
+
+      it 'bind to change video speed link', ->
+        expect($('.video_speeds a')).toHandleWith 'click', @speedControl.changeVideoSpeed
+
+    describe 'when running on touch based device', ->
+      beforeEach ->
+        spyOn(window, 'onTouchBasedDevice').andReturn true
+        $('.speeds').removeClass 'open'
+        @speedControl = new VideoSpeedControl @player, @video.speeds
+
+      it 'open the speed toggle on click', ->
+        $('.speeds').click()
+        expect($('.speeds')).toHaveClass 'open'
+        $('.speeds').click()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+    describe 'when running on non-touch based device', ->
+      beforeEach ->
+        spyOn(window, 'onTouchBasedDevice').andReturn false
+        $('.speeds').removeClass 'open'
+        @speedControl = new VideoSpeedControl @player, @video.speeds
+
+      it 'open the speed toggle on hover', ->
+        $('.speeds').mouseover()
+        expect($('.speeds')).toHaveClass 'open'
+        $('.speeds').mouseout()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+      it 'close the speed toggle on mouse out', ->
+        $('.speeds').mouseover().mouseout()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+      it 'close the speed toggle on click', ->
+        $('.speeds').mouseover().click()
+        expect($('.speeds')).not.toHaveClass 'open'
+
+  describe 'changeVideoSpeed', ->
+    beforeEach ->
+      @speedControl = new VideoSpeedControl @player, @video.speeds
+      @video.setSpeed '1.0'
+
+    describe 'when new speed is the same', ->
+      beforeEach ->
+        spyOnEvent @player, 'speedChange'
+        $('li[data-speed="1.0"] a').click()
+
+      it 'does not trigger speedChange event', ->
+        expect('speedChange').not.toHaveBeenTriggeredOn @player
+
+    describe 'when new speed is not the same', ->
+      beforeEach ->
+        @newSpeed = null
+        $(@player).bind 'speedChange', (event, newSpeed) => @newSpeed = newSpeed
+        spyOnEvent @player, 'speedChange'
+        $('li[data-speed="0.75"] a').click()
+
+      it 'trigger player speedChange event', ->
+        expect('speedChange').toHaveBeenTriggeredOn @player
+        expect(@newSpeed).toEqual 0.75
+
+  describe 'onSpeedChange', ->
+    beforeEach ->
+      @speedControl = new VideoSpeedControl @player, @video.speeds
+      $('li[data-speed="1.0"] a').addClass 'active'
+      @speedControl.setSpeed '0.75'
+
+    it 'set the new speed as active', ->
+      expect($('.video_speeds li[data-speed="1.0"]')).not.toHaveClass 'active'
+      expect($('.video_speeds li[data-speed="0.75"]')).toHaveClass 'active'
+      expect($('.speeds p.active')).toHaveHtml '0.75x'
diff --git a/templates/coffee/spec/modules/video/video_speed_control_spec.js b/templates/coffee/spec/modules/video/video_speed_control_spec.js
new file mode 100644
index 0000000000..db3e7c0552
--- /dev/null
+++ b/templates/coffee/spec/modules/video/video_speed_control_spec.js
@@ -0,0 +1,103 @@
+(function() {
+
+  describe('VideoSpeedControl', function() {
+    beforeEach(function() {
+      this.player = jasmine.stubVideoPlayer(this);
+      return $('.speeds').remove();
+    });
+    afterEach(function() {});
+    describe('constructor', function() {
+      describe('always', function() {
+        beforeEach(function() {
+          return this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
+        });
+        it('add the video speed control to player', function() {
+          return expect($('.secondary-controls').html()).toContain('<div class="speeds">\n  <a href="#">\n    <h3>Speed</h3>\n    <p class="active">1.0x</p>\n  </a>\n  <ol class="video_speeds"><li data-speed="1.0" class="active"><a href="#">1.0x</a></li><li data-speed="0.75"><a href="#">0.75x</a></li></ol>\n</div>');
+        });
+        it('bind to player speedChange event', function() {
+          return expect($(this.player)).toHandleWith('speedChange', this.speedControl.onSpeedChange);
+        });
+        return it('bind to change video speed link', function() {
+          return expect($('.video_speeds a')).toHandleWith('click', this.speedControl.changeVideoSpeed);
+        });
+      });
+      describe('when running on touch based device', function() {
+        beforeEach(function() {
+          spyOn(window, 'onTouchBasedDevice').andReturn(true);
+          $('.speeds').removeClass('open');
+          return this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
+        });
+        return it('open the speed toggle on click', function() {
+          $('.speeds').click();
+          expect($('.speeds')).toHaveClass('open');
+          $('.speeds').click();
+          return expect($('.speeds')).not.toHaveClass('open');
+        });
+      });
+      return describe('when running on non-touch based device', function() {
+        beforeEach(function() {
+          spyOn(window, 'onTouchBasedDevice').andReturn(false);
+          $('.speeds').removeClass('open');
+          return this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
+        });
+        it('open the speed toggle on hover', function() {
+          $('.speeds').mouseover();
+          expect($('.speeds')).toHaveClass('open');
+          $('.speeds').mouseout();
+          return expect($('.speeds')).not.toHaveClass('open');
+        });
+        it('close the speed toggle on mouse out', function() {
+          $('.speeds').mouseover().mouseout();
+          return expect($('.speeds')).not.toHaveClass('open');
+        });
+        return it('close the speed toggle on click', function() {
+          $('.speeds').mouseover().click();
+          return expect($('.speeds')).not.toHaveClass('open');
+        });
+      });
+    });
+    describe('changeVideoSpeed', function() {
+      beforeEach(function() {
+        this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
+        return this.video.setSpeed('1.0');
+      });
+      describe('when new speed is the same', function() {
+        beforeEach(function() {
+          spyOnEvent(this.player, 'speedChange');
+          return $('li[data-speed="1.0"] a').click();
+        });
+        return it('does not trigger speedChange event', function() {
+          return expect('speedChange').not.toHaveBeenTriggeredOn(this.player);
+        });
+      });
+      return describe('when new speed is not the same', function() {
+        beforeEach(function() {
+          var _this = this;
+          this.newSpeed = null;
+          $(this.player).bind('speedChange', function(event, newSpeed) {
+            return _this.newSpeed = newSpeed;
+          });
+          spyOnEvent(this.player, 'speedChange');
+          return $('li[data-speed="0.75"] a').click();
+        });
+        return it('trigger player speedChange event', function() {
+          expect('speedChange').toHaveBeenTriggeredOn(this.player);
+          return expect(this.newSpeed).toEqual(0.75);
+        });
+      });
+    });
+    return describe('onSpeedChange', function() {
+      beforeEach(function() {
+        this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
+        $('li[data-speed="1.0"] a').addClass('active');
+        return this.speedControl.setSpeed('0.75');
+      });
+      return it('set the new speed as active', function() {
+        expect($('.video_speeds li[data-speed="1.0"]')).not.toHaveClass('active');
+        expect($('.video_speeds li[data-speed="0.75"]')).toHaveClass('active');
+        return expect($('.speeds p.active')).toHaveHtml('0.75x');
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/modules/video_spec.coffee b/templates/coffee/spec/modules/video_spec.coffee
new file mode 100644
index 0000000000..a48cc5786e
--- /dev/null
+++ b/templates/coffee/spec/modules/video_spec.coffee
@@ -0,0 +1,121 @@
+describe 'Video', ->
+  beforeEach ->
+    loadFixtures 'video.html'
+    jasmine.stubRequests()
+
+  afterEach ->
+    window.player = undefined
+    window.onYouTubePlayerAPIReady = undefined
+
+  describe 'constructor', ->
+    beforeEach ->
+      $.cookie.andReturn '0.75'
+      window.player = 100
+
+    describe 'by default', ->
+      beforeEach ->
+        @video = new Video 'example', '.75:abc123,1.0:def456'
+
+      it 'reset the current video player', ->
+        expect(window.player).toBeNull()
+
+      it 'set the elements', ->
+        expect(@video.element).toBe '#video_example'
+
+      it 'parse the videos', ->
+        expect(@video.videos).toEqual
+          '0.75': 'abc123'
+          '1.0': 'def456'
+
+      it 'fetch the video metadata', ->
+        expect(@video.metadata).toEqual
+          abc123:
+            id: 'abc123'
+            duration: 100
+          def456:
+            id: 'def456'
+            duration: 200
+
+      it 'parse available video speeds', ->
+        expect(@video.speeds).toEqual ['0.75', '1.0']
+
+      it 'set current video speed via cookie', ->
+        expect(@video.speed).toEqual '0.75'
+
+      it 'store a reference for this video player in the element', ->
+        expect($('.video').data('video')).toEqual @video
+
+    describe 'when the Youtube API is already available', ->
+      beforeEach ->
+        @originalYT = window.YT
+        window.YT = { Player: true }
+        @stubVideoPlayer = jasmine.createSpy('VideoPlayer')
+        spyOn(window, 'VideoPlayer').andReturn(@stubVideoPlayer)
+        @video = new Video 'example', '.75:abc123,1.0:def456'
+
+      afterEach ->
+        window.YT = @originalYT
+
+      it 'create the Video Player', ->
+        expect(window.VideoPlayer).toHaveBeenCalledWith @video
+        expect(@video.player).toEqual @stubVideoPlayer
+
+    describe 'when the Youtube API is not ready', ->
+      beforeEach ->
+        @video = new Video 'example', '.75:abc123,1.0:def456'
+
+      it 'set the callback on the window object', ->
+        expect(window.onYouTubePlayerAPIReady).toEqual jasmine.any(Function)
+
+    describe 'when the Youtube API becoming ready', ->
+      beforeEach ->
+        @stubVideoPlayer = jasmine.createSpy('VideoPlayer')
+        spyOn(window, 'VideoPlayer').andReturn(@stubVideoPlayer)
+        @video = new Video 'example', '.75:abc123,1.0:def456'
+        window.onYouTubePlayerAPIReady()
+
+      it 'create the Video Player for all video elements', ->
+        expect(window.VideoPlayer).toHaveBeenCalledWith @video
+        expect(@video.player).toEqual @stubVideoPlayer
+
+  describe 'youtubeId', ->
+    beforeEach ->
+      $.cookie.andReturn '1.0'
+      @video = new Video 'example', '.75:abc123,1.0:def456'
+
+    describe 'with speed', ->
+      it 'return the video id for given speed', ->
+        expect(@video.youtubeId('0.75')).toEqual 'abc123'
+        expect(@video.youtubeId('1.0')).toEqual 'def456'
+
+    describe 'without speed', ->
+      it 'return the video id for current speed', ->
+        expect(@video.youtubeId()).toEqual 'def456'
+
+  describe 'setSpeed', ->
+    beforeEach ->
+      @video = new Video 'example', '.75:abc123,1.0:def456'
+
+    describe 'when new speed is available', ->
+      beforeEach ->
+        @video.setSpeed '0.75'
+
+      it 'set new speed', ->
+        expect(@video.speed).toEqual '0.75'
+
+      it 'save setting for new speed', ->
+        expect($.cookie).toHaveBeenCalledWith 'video_speed', '0.75', expires: 3650, path: '/'
+
+    describe 'when new speed is not available', ->
+      beforeEach ->
+        @video.setSpeed '1.75'
+
+      it 'set speed to 1.0x', ->
+        expect(@video.speed).toEqual '1.0'
+
+  describe 'getDuration', ->
+    beforeEach ->
+      @video = new Video 'example', '.75:abc123,1.0:def456'
+
+    it 'return duration for current video', ->
+      expect(@video.getDuration()).toEqual 200
diff --git a/templates/coffee/spec/modules/video_spec.js b/templates/coffee/spec/modules/video_spec.js
new file mode 100644
index 0000000000..664607880f
--- /dev/null
+++ b/templates/coffee/spec/modules/video_spec.js
@@ -0,0 +1,148 @@
+(function() {
+
+  describe('Video', function() {
+    beforeEach(function() {
+      loadFixtures('video.html');
+      return jasmine.stubRequests();
+    });
+    afterEach(function() {
+      window.player = void 0;
+      return window.onYouTubePlayerAPIReady = void 0;
+    });
+    describe('constructor', function() {
+      beforeEach(function() {
+        $.cookie.andReturn('0.75');
+        return window.player = 100;
+      });
+      describe('by default', function() {
+        beforeEach(function() {
+          return this.video = new Video('example', '.75:abc123,1.0:def456');
+        });
+        it('reset the current video player', function() {
+          return expect(window.player).toBeNull();
+        });
+        it('set the elements', function() {
+          return expect(this.video.element).toBe('#video_example');
+        });
+        it('parse the videos', function() {
+          return expect(this.video.videos).toEqual({
+            '0.75': 'abc123',
+            '1.0': 'def456'
+          });
+        });
+        it('fetch the video metadata', function() {
+          return expect(this.video.metadata).toEqual({
+            abc123: {
+              id: 'abc123',
+              duration: 100
+            },
+            def456: {
+              id: 'def456',
+              duration: 200
+            }
+          });
+        });
+        it('parse available video speeds', function() {
+          return expect(this.video.speeds).toEqual(['0.75', '1.0']);
+        });
+        it('set current video speed via cookie', function() {
+          return expect(this.video.speed).toEqual('0.75');
+        });
+        return it('store a reference for this video player in the element', function() {
+          return expect($('.video').data('video')).toEqual(this.video);
+        });
+      });
+      describe('when the Youtube API is already available', function() {
+        beforeEach(function() {
+          this.originalYT = window.YT;
+          window.YT = {
+            Player: true
+          };
+          this.stubVideoPlayer = jasmine.createSpy('VideoPlayer');
+          spyOn(window, 'VideoPlayer').andReturn(this.stubVideoPlayer);
+          return this.video = new Video('example', '.75:abc123,1.0:def456');
+        });
+        afterEach(function() {
+          return window.YT = this.originalYT;
+        });
+        return it('create the Video Player', function() {
+          expect(window.VideoPlayer).toHaveBeenCalledWith(this.video);
+          return expect(this.video.player).toEqual(this.stubVideoPlayer);
+        });
+      });
+      describe('when the Youtube API is not ready', function() {
+        beforeEach(function() {
+          return this.video = new Video('example', '.75:abc123,1.0:def456');
+        });
+        return it('set the callback on the window object', function() {
+          return expect(window.onYouTubePlayerAPIReady).toEqual(jasmine.any(Function));
+        });
+      });
+      return describe('when the Youtube API becoming ready', function() {
+        beforeEach(function() {
+          this.stubVideoPlayer = jasmine.createSpy('VideoPlayer');
+          spyOn(window, 'VideoPlayer').andReturn(this.stubVideoPlayer);
+          this.video = new Video('example', '.75:abc123,1.0:def456');
+          return window.onYouTubePlayerAPIReady();
+        });
+        return it('create the Video Player for all video elements', function() {
+          expect(window.VideoPlayer).toHaveBeenCalledWith(this.video);
+          return expect(this.video.player).toEqual(this.stubVideoPlayer);
+        });
+      });
+    });
+    describe('youtubeId', function() {
+      beforeEach(function() {
+        $.cookie.andReturn('1.0');
+        return this.video = new Video('example', '.75:abc123,1.0:def456');
+      });
+      describe('with speed', function() {
+        return it('return the video id for given speed', function() {
+          expect(this.video.youtubeId('0.75')).toEqual('abc123');
+          return expect(this.video.youtubeId('1.0')).toEqual('def456');
+        });
+      });
+      return describe('without speed', function() {
+        return it('return the video id for current speed', function() {
+          return expect(this.video.youtubeId()).toEqual('def456');
+        });
+      });
+    });
+    describe('setSpeed', function() {
+      beforeEach(function() {
+        return this.video = new Video('example', '.75:abc123,1.0:def456');
+      });
+      describe('when new speed is available', function() {
+        beforeEach(function() {
+          return this.video.setSpeed('0.75');
+        });
+        it('set new speed', function() {
+          return expect(this.video.speed).toEqual('0.75');
+        });
+        return it('save setting for new speed', function() {
+          return expect($.cookie).toHaveBeenCalledWith('video_speed', '0.75', {
+            expires: 3650,
+            path: '/'
+          });
+        });
+      });
+      return describe('when new speed is not available', function() {
+        beforeEach(function() {
+          return this.video.setSpeed('1.75');
+        });
+        return it('set speed to 1.0x', function() {
+          return expect(this.video.speed).toEqual('1.0');
+        });
+      });
+    });
+    return describe('getDuration', function() {
+      beforeEach(function() {
+        return this.video = new Video('example', '.75:abc123,1.0:def456');
+      });
+      return it('return duration for current video', function() {
+        return expect(this.video.getDuration()).toEqual(200);
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/spec/time_spec.coffee b/templates/coffee/spec/time_spec.coffee
new file mode 100644
index 0000000000..80891d58b5
--- /dev/null
+++ b/templates/coffee/spec/time_spec.coffee
@@ -0,0 +1,18 @@
+describe 'Time', ->
+  describe 'format', ->
+    describe 'with duration more than or equal to 1 hour', ->
+      it 'return a correct time format', ->
+        expect(Time.format(3600)).toEqual '1:00:00'
+        expect(Time.format(7272)).toEqual '2:01:12'
+
+    describe 'with duration less than 1 hour', ->
+      it 'return a correct time format', ->
+        expect(Time.format(1)).toEqual '0:01'
+        expect(Time.format(61)).toEqual '1:01'
+        expect(Time.format(3599)).toEqual '59:59'
+
+  describe 'convert', ->
+    it 'return a correct time based on speed modifier', ->
+      expect(Time.convert(0, 1, 1.5)).toEqual '0.000'
+      expect(Time.convert(100, 1, 1.5)).toEqual '66.667'
+      expect(Time.convert(100, 1.5, 1)).toEqual '150.000'
diff --git a/templates/coffee/spec/time_spec.js b/templates/coffee/spec/time_spec.js
new file mode 100644
index 0000000000..12b2673ccc
--- /dev/null
+++ b/templates/coffee/spec/time_spec.js
@@ -0,0 +1,28 @@
+(function() {
+
+  describe('Time', function() {
+    describe('format', function() {
+      describe('with duration more than or equal to 1 hour', function() {
+        return it('return a correct time format', function() {
+          expect(Time.format(3600)).toEqual('1:00:00');
+          return expect(Time.format(7272)).toEqual('2:01:12');
+        });
+      });
+      return describe('with duration less than 1 hour', function() {
+        return it('return a correct time format', function() {
+          expect(Time.format(1)).toEqual('0:01');
+          expect(Time.format(61)).toEqual('1:01');
+          return expect(Time.format(3599)).toEqual('59:59');
+        });
+      });
+    });
+    return describe('convert', function() {
+      return it('return a correct time based on speed modifier', function() {
+        expect(Time.convert(0, 1, 1.5)).toEqual('0.000');
+        expect(Time.convert(100, 1, 1.5)).toEqual('66.667');
+        return expect(Time.convert(100, 1.5, 1)).toEqual('150.000');
+      });
+    });
+  });
+
+}).call(this);
diff --git a/templates/coffee/src/histogram.coffee b/templates/coffee/src/histogram.coffee
index 0ef2d64764..59d06e25a0 100644
--- a/templates/coffee/src/histogram.coffee
+++ b/templates/coffee/src/histogram.coffee
@@ -25,11 +25,11 @@ class @Histogram
     ],
       xaxis:
         min: -1
-        max: Math.max $.map(@xTicks, (data) -> data[0] + 1)
+        max: Math.max.apply Math, $.map(@xTicks, (data) -> data[0] + 1)
         ticks: @xTicks
         tickLength: 0
       yaxis:
         min: 0.0
-        max: Math.max $.map(@yTicks, (data) -> data[0] * 1.1)
+        max: Math.max.apply Math, $.map(@yTicks, (data) -> data[0] * 1.1)
         ticks: @yTicks
         labelWidth: 50
diff --git a/templates/coffee/src/logger.coffee b/templates/coffee/src/logger.coffee
index 97d6deaacc..414dc4f187 100644
--- a/templates/coffee/src/logger.coffee
+++ b/templates/coffee/src/logger.coffee
@@ -14,7 +14,6 @@ class @Logger
           event: ''
           page: window.location.href
         async: false
-      return true
 
 # Keeping this for conpatibility issue only.
 @log_event = Logger.log
diff --git a/templates/coffee/src/modules/problem.coffee b/templates/coffee/src/modules/problem.coffee
index 21b63ff0d7..e1fac3a1a5 100644
--- a/templates/coffee/src/modules/problem.coffee
+++ b/templates/coffee/src/modules/problem.coffee
@@ -8,7 +8,7 @@ class @Problem
     $(selector, @element)
 
   bind: =>
-    MathJax.Hub.Queue ["Typeset",MathJax.Hub]
+    MathJax.Hub.Queue ["Typeset", MathJax.Hub]
     window.update_schematics()
     @$('section.action input:button').click @refreshAnswers
     @$('section.action input.check').click @check
@@ -43,15 +43,16 @@ class @Problem
       $.postWithPrefix "/modx/problem/#{@id}/problem_show", (response) =>
         $.each response, (key, value) =>
           if $.isArray(value)
-            $.each value, (index, answer_index) =>
-              @$("#label[for='input_#{key}_#{value[answer_index]}']").attr
+            for choice in value
+              @$("label[for='input_#{key}_#{choice}']").attr
                 correct_answer: 'true'
-          @$("#answer_#{key}").text(value)
+          else
+            @$("#answer_#{key}").text(value)
         @$('.show').val 'Hide Answer'
         @element.addClass 'showed'
     else
-      @$('[id^=answer_]').text('')
-      @$('[correct_answer]').attr(correct_answer: null)
+      @$('[id^=answer_]').text ''
+      @$('[correct_answer]').attr correct_answer: null
       @element.removeClass 'showed'
       @$('.show').val 'Show Answer'
 
diff --git a/templates/coffee/src/modules/sequence.coffee b/templates/coffee/src/modules/sequence.coffee
index 4fb6225bbc..0789c7c7f0 100644
--- a/templates/coffee/src/modules/sequence.coffee
+++ b/templates/coffee/src/modules/sequence.coffee
@@ -11,7 +11,6 @@ class @Sequence
   bind: ->
     @element.bind 'contentChanged', @toggleArrows
     @$('#sequence-list a').click @goto
-    @$('.sequence-nav li a').hover @navHover
 
   buildNavigation: ->
     $.each @elements, (index, item) =>
@@ -34,37 +33,34 @@ class @Sequence
       @$('.sequence-nav-buttons .next a').removeClass('disabled').click(@next)
 
   render: (new_position) ->
-    if @position != undefined
-      @mark_visited @position
-      $.postWithPrefix "/modx/#{@tag}/#{@id}/goto_position", position: new_position
-
     if @position != new_position
+      if @position != undefined
+        @mark_visited @position
+        $.postWithPrefix "/modx/#{@tag}/#{@id}/goto_position", position: new_position
+
       @mark_active new_position
       @$('#seq_content').html eval(@elements[new_position - 1].content)
 
-      MathJax.Hub.Queue(["Typeset",MathJax.Hub])
+      MathJax.Hub.Queue(["Typeset", MathJax.Hub])
       @position = new_position
       @element.trigger 'contentChanged'
 
-  navHover: (event) =>
-    $(event.target).siblings().toggleClass("shown")
-
   goto: (event) =>
     event.preventDefault()
     new_position = $(event.target).data('element')
-    log_event("seq_goto", old: @position, new: new_position, id: @id)
+    Logger.log "seq_goto", old: @position, new: new_position, id: @id
     @render new_position
 
   next: (event) =>
     event.preventDefault()
     new_position = @position + 1
-    log_event("seq_next", old: @position, new: new_position, id: @id)
+    Logger.log "seq_next", old: @position, new: new_position, id: @id
     @render new_position
 
   previous: (event) =>
     event.preventDefault()
     new_position = @position - 1
-    log_event("seq_prev", old: @position, new: new_position, id: @id)
+    Logger.log "seq_prev", old: @position, new: new_position, id: @id
     @render new_position
 
   link_for: (position) ->
diff --git a/templates/coffee/src/modules/tab_module.coffee b/templates/coffee/src/modules/tab.coffee
similarity index 100%
rename from templates/coffee/src/modules/tab_module.coffee
rename to templates/coffee/src/modules/tab.coffee
diff --git a/templates/coffee/src/modules/video.coffee b/templates/coffee/src/modules/video.coffee
index 9fd0605c97..888acba777 100644
--- a/templates/coffee/src/modules/video.coffee
+++ b/templates/coffee/src/modules/video.coffee
@@ -3,6 +3,8 @@ class @Video
     window.player = null
     @element = $("#video_#{@id}")
     @parseVideos videos
+    @fetchMetadata()
+    @parseSpeed()
     $("#video_#{@id}").data('video', this)
 
     if YT.Player
@@ -21,8 +23,6 @@ class @Video
       video = video.split(/:/)
       speed = parseFloat(video[0]).toFixed(2).replace /\.00$/, '.0'
       @videos[speed] = video[1]
-    @fetchMetadata()
-    @parseSpeed()
 
   parseSpeed: ->
     @setSpeed($.cookie('video_speed'))
diff --git a/templates/coffee/src/modules/video/video_caption.coffee b/templates/coffee/src/modules/video/video_caption.coffee
index 2e807fb93c..31a3d09e09 100644
--- a/templates/coffee/src/modules/video/video_caption.coffee
+++ b/templates/coffee/src/modules/video/video_caption.coffee
@@ -1,4 +1,4 @@
-class VideoCaption
+class @VideoCaption
   constructor: (@player, @youtubeId) ->
     @render()
     @bind()
@@ -85,7 +85,7 @@ class VideoCaption
     clearTimeout @frozen if @frozen
     @frozen = setTimeout @onMouseLeave, 10000
 
-  onMovement: (event) =>
+  onMovement: =>
     @onMouseEnter()
 
   onMouseLeave: =>
@@ -107,24 +107,23 @@ class VideoCaption
     @captionHeight() / 2 - element.height() / 2
 
   topSpacingHeight: ->
-    @calculateOffset(@$('.subtitles li:not(.spacing).first'))
+    @calculateOffset(@$('.subtitles li:not(.spacing):first'))
 
   bottomSpacingHeight: ->
-    @calculateOffset(@$('.subtitles li:not(.spacing).last'))
+    @calculateOffset(@$('.subtitles li:not(.spacing):last'))
 
   toggle: (event) =>
     event.preventDefault()
     if @player.element.hasClass('closed')
       @$('.hide-subtitles').attr('title', 'Turn off captions')
       @player.element.removeClass('closed')
+      @scrollCaption()
     else
       @$('.hide-subtitles').attr('title', 'Turn on captions')
       @player.element.addClass('closed')
-    @scrollCaption()
 
   captionHeight: ->
     if @player.element.hasClass('fullscreen')
       $(window).height() - @$('.video-controls').height()
     else
       @$('.video-wrapper').height()
-
diff --git a/templates/coffee/src/modules/video/video_control.coffee b/templates/coffee/src/modules/video/video_control.coffee
index 0f78dc3f84..c9bbf95c0a 100644
--- a/templates/coffee/src/modules/video/video_control.coffee
+++ b/templates/coffee/src/modules/video/video_control.coffee
@@ -1,4 +1,4 @@
-class VideoControl
+class @VideoControl
   constructor: (@player) ->
     @render()
     @bind()
@@ -36,7 +36,7 @@ class VideoControl
 
   togglePlayback: (event) =>
     event.preventDefault()
-    if $(event.target).hasClass('play')
-      $(@player).trigger('play')
-    else
+    if @player.isPlaying()
       $(@player).trigger('pause')
+    else
+      $(@player).trigger('play')
diff --git a/templates/coffee/src/modules/video/video_player.coffee b/templates/coffee/src/modules/video/video_player.coffee
index 2871f6ff0c..57d7f913b8 100644
--- a/templates/coffee/src/modules/video/video_player.coffee
+++ b/templates/coffee/src/modules/video/video_player.coffee
@@ -1,4 +1,4 @@
-class VideoPlayer
+class @VideoPlayer
   constructor: (@video) ->
     @currentTime = 0
     @element = $("#video_#{@video.id}")
@@ -18,17 +18,17 @@ class VideoPlayer
     $(document).keyup @bindExitFullScreen
 
     @$('.add-fullscreen').click @toggleFullScreen
-    @addToolTip unless onTouchBasedDevice()
+    @addToolTip() unless onTouchBasedDevice()
 
   bindExitFullScreen: (event) =>
     if @element.hasClass('fullscreen') && event.keyCode == 27
       @toggleFullScreen(event)
 
   render: ->
-    new VideoControl(this)
-    new VideoCaption(this, @video.youtubeId('1.0'))
-    new VideoSpeedControl(this, @video.speeds)
-    new VideoProgressSlider(this)
+    new VideoControl @
+    new VideoCaption @, @video.youtubeId('1.0')
+    new VideoSpeedControl @, @video.speeds
+    new VideoProgressSlider @
     @player = new YT.Player @video.id,
       playerVars:
         controls: 0
@@ -48,9 +48,9 @@ class VideoPlayer
         at: 'top center'
 
   onReady: =>
-    @setProgress(0, @duration())
     $(@).trigger('ready')
-    unless true || onTouchBasedDevice()
+    $(@).trigger('updatePlayTime', 0)
+    unless onTouchBasedDevice()
       $('.course-content .video:first').data('video').player.play()
 
   onStateChange: (event) =>
@@ -92,7 +92,6 @@ class VideoPlayer
       @player.loadVideoById(@video.youtubeId(), @currentTime)
     else
       @player.cueVideoById(@video.youtubeId(), @currentTime)
-      @setProgress(@currentTime, @duration())
     $(@).trigger('updatePlayTime', @currentTime)
 
   update: =>
@@ -100,13 +99,8 @@ class VideoPlayer
       $(@).trigger('updatePlayTime', @currentTime)
 
   onUpdatePlayTime: (event, time) =>
-    @setProgress(@currentTime) if time
-
-  setProgress: (time) =>
     progress = Time.format(time) + ' / ' + Time.format(@duration())
-    if @progress != progress
-      @$(".vidtime").html(progress)
-      @progress = progress
+    @$(".vidtime").html(progress)
 
   toggleFullScreen: (event) =>
     event.preventDefault()
diff --git a/templates/coffee/src/modules/video/video_progress_slider.coffee b/templates/coffee/src/modules/video/video_progress_slider.coffee
index 4eaba392ba..4dfd558e4c 100644
--- a/templates/coffee/src/modules/video/video_progress_slider.coffee
+++ b/templates/coffee/src/modules/video/video_progress_slider.coffee
@@ -1,4 +1,4 @@
-class VideoProgressSlider
+class @VideoProgressSlider
   constructor: (@player) ->
     @buildSlider()
     @buildHandle()
diff --git a/templates/coffee/src/modules/video/video_speed_control.coffee b/templates/coffee/src/modules/video/video_speed_control.coffee
index 3e0b9b7b33..3bb1ed3b7a 100644
--- a/templates/coffee/src/modules/video/video_speed_control.coffee
+++ b/templates/coffee/src/modules/video/video_speed_control.coffee
@@ -1,4 +1,4 @@
-class VideoSpeedControl
+class @VideoSpeedControl
   constructor: (@player, @speeds) ->
     @render()
     @bind()
@@ -13,8 +13,8 @@ class VideoSpeedControl
       @$('.speeds').click -> $(this).toggleClass('open')
     else
       @$('.speeds').mouseover -> $(this).addClass('open')
-      .mouseout -> $(this).removeClass('open')
-      .click (event) ->
+      @$('.speeds').mouseout -> $(this).removeClass('open')
+      @$('.speeds').click (event) ->
         event.preventDefault()
         $(this).removeClass('open')
 
diff --git a/templates/coffee/src/time.coffee b/templates/coffee/src/time.coffee
index 3e39820866..9173a7c0b2 100644
--- a/templates/coffee/src/time.coffee
+++ b/templates/coffee/src/time.coffee
@@ -1,5 +1,7 @@
 class @Time
   @format: (time) ->
+    pad = (number) -> if number < 10 then  "0#{number}" else number
+
     seconds = Math.floor time
     minutes = Math.floor seconds / 60
     hours = Math.floor minutes / 60
@@ -7,15 +9,9 @@ class @Time
     minutes = minutes % 60
 
     if hours
-      "#{hours}:#{@pad(minutes)}:#{@pad(seconds % 60)}"
+      "#{hours}:#{pad(minutes)}:#{pad(seconds % 60)}"
     else
-      "#{minutes}:#{@pad(seconds % 60)}"
-
-  @pad: (number) ->
-    if number < 10
-      "0#{number}"
-    else
-      number
+      "#{minutes}:#{pad(seconds % 60)}"
 
   @convert: (time, oldSpeed, newSpeed) ->
     (time * oldSpeed / newSpeed).toFixed(3)
diff --git a/templates/jasmine/base.html b/templates/jasmine/base.html
new file mode 100644
index 0000000000..f933fa1f81
--- /dev/null
+++ b/templates/jasmine/base.html
@@ -0,0 +1,68 @@
+<!doctype html>
+
+<html>
+<head>
+    <title>Jasmine Spec Runner</title>
+    <link rel="stylesheet" href="{{ STATIC_URL }}jasmine-latest/jasmine.css"
+        media="screen">
+
+    {# core files #}
+    <script  src="{{ STATIC_URL }}jasmine-latest/jasmine.js"></script>
+    <script  src="{{ STATIC_URL }}jasmine-latest/jasmine-html.js"></script>
+    <script  src="https://raw.github.com/sikachu/jasmine-jquery/master/lib/jasmine-jquery.js"></script>
+
+    {# source files #}
+    {% for url in suite.js_files %}
+    <script src="{{ url }}"></script>
+    {% endfor %}
+
+    {# static files #}
+    {% for url in suite.static_files %}
+    <script src="{{ STATIC_URL }}{{ url }}"></script>
+    {% endfor %}
+
+    {# spec files #}
+    {% for file in files %}
+    <script src="{% url jasmine_test file %}"></script>
+    {% endfor %}
+
+</head>
+<body>
+
+<h1>Jasmine Spec Runner</h1>
+
+<script>
+    {% block jasmine %}
+    (function() {
+        var jasmineEnv = jasmine.getEnv();
+        jasmineEnv.updateInterval = 1000;
+
+        var trivialReporter = new jasmine.TrivialReporter();
+
+        jasmineEnv.addReporter(trivialReporter);
+
+        jasmineEnv.specFilter = function(spec) {
+            return trivialReporter.specFilter(spec);
+        };
+
+        // Additional configuration can be done in this block
+        {% block jasmine_extra %}{% endblock %}
+
+        var currentWindowOnload = window.onload;
+
+        window.onload = function() {
+            if (currentWindowOnload) {
+                currentWindowOnload();
+            }
+            execJasmine();
+        };
+
+        function execJasmine() {
+            jasmineEnv.execute();
+        }
+    })();
+    {% endblock %}
+</script>
+
+</body>
+</html>

From 89194892e62e082283f05329ceadde8d750e03b9 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 30 May 2012 12:22:43 -0400
Subject: [PATCH 35/57] Move CoffeeScripts to asset pipeline

---
 envs/common.py                                |  12 +-
 requirements.txt                              |   1 +
 static/coffee/.gitignore                      |   1 +
 .../coffee/fixtures/items.json                |   0
 .../coffee/fixtures/problem.html              |   0
 .../coffee/fixtures/problem_content.html      |   0
 .../coffee/fixtures/sequence.html             |   0
 .../coffee/fixtures/tab.html                  |   0
 .../coffee/fixtures/video.html                |   0
 static/coffee/spec/calculator_spec.js         |  80 ----
 static/coffee/spec/courseware_spec.js         |  59 ---
 static/coffee/spec/feedback_form_spec.js      |  34 --
 static/coffee/spec/helper.js                  |  91 ----
 .../coffee/spec/histogram_spec.coffee         |   0
 .../coffee/spec/logger_spec.coffee            |   0
 .../coffee/spec/modules/problem_spec.coffee   |   0
 .../coffee/spec/modules/sequence_spec.coffee  |   0
 .../coffee/spec/modules/tab_spec.coffee       |   0
 .../modules/video/video_caption_spec.coffee   |   0
 .../modules/video/video_control_spec.coffee   |   0
 .../modules/video/video_player_spec.coffee    |   0
 .../video/video_progress_slider_spec.coffee   |   0
 .../video/video_speed_control_spec.coffee     |   0
 .../coffee/spec/modules/video_spec.coffee     |  13 +-
 .../coffee/spec/navigation_spec.coffee        |   0
 .../coffee/spec/time_spec.coffee              |   0
 .../coffee/src/histogram.coffee               |   0
 .../coffee/src/logger.coffee                  |   0
 .../coffee/src/modules/problem.coffee         |   0
 .../coffee/src/modules/sequence.coffee        |   0
 .../coffee/src/modules/tab.coffee             |   0
 .../coffee/src/modules/video.coffee           |   0
 .../src/modules/video/video_caption.coffee    |   0
 .../src/modules/video/video_control.coffee    |   0
 .../src/modules/video/video_player.coffee     |   0
 .../video/video_progress_slider.coffee        |   0
 .../modules/video/video_speed_control.coffee  |   0
 .../coffee/src/navigation.coffee              |   0
 {templates => static}/coffee/src/time.coffee  |   0
 static/sass/courseware/_video.scss            |  22 +-
 templates/coffee/spec/histogram_spec.js       |  62 ---
 templates/coffee/spec/logger_spec.js          |  46 --
 templates/coffee/spec/modules/problem_spec.js | 301 ------------
 .../coffee/spec/modules/sequence_spec.js      | 199 --------
 templates/coffee/spec/modules/tab_spec.js     |  55 ---
 .../spec/modules/video/video_caption_spec.js  | 317 -------------
 .../spec/modules/video/video_control_spec.js  |  72 ---
 .../spec/modules/video/video_player_spec.js   | 441 ------------------
 .../video/video_progress_slider_spec.js       | 154 ------
 .../modules/video/video_speed_control_spec.js | 103 ----
 templates/coffee/spec/modules/video_spec.js   | 148 ------
 templates/coffee/spec/navigation_spec.js      |  93 ----
 templates/coffee/spec/time_spec.js            |  28 --
 templates/jasmine/base.html                   |   9 +-
 templates/main.html                           |   4 -
 55 files changed, 34 insertions(+), 2311 deletions(-)
 create mode 100644 static/coffee/.gitignore
 rename {templates => static}/coffee/fixtures/items.json (100%)
 rename {templates => static}/coffee/fixtures/problem.html (100%)
 rename {templates => static}/coffee/fixtures/problem_content.html (100%)
 rename {templates => static}/coffee/fixtures/sequence.html (100%)
 rename {templates => static}/coffee/fixtures/tab.html (100%)
 rename {templates => static}/coffee/fixtures/video.html (100%)
 delete mode 100644 static/coffee/spec/calculator_spec.js
 delete mode 100644 static/coffee/spec/courseware_spec.js
 delete mode 100644 static/coffee/spec/feedback_form_spec.js
 delete mode 100644 static/coffee/spec/helper.js
 rename {templates => static}/coffee/spec/histogram_spec.coffee (100%)
 rename {templates => static}/coffee/spec/logger_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/problem_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/sequence_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/tab_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/video/video_caption_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/video/video_control_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/video/video_player_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/video/video_progress_slider_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/video/video_speed_control_spec.coffee (100%)
 rename {templates => static}/coffee/spec/modules/video_spec.coffee (93%)
 rename {templates => static}/coffee/spec/navigation_spec.coffee (100%)
 rename {templates => static}/coffee/spec/time_spec.coffee (100%)
 rename {templates => static}/coffee/src/histogram.coffee (100%)
 rename {templates => static}/coffee/src/logger.coffee (100%)
 rename {templates => static}/coffee/src/modules/problem.coffee (100%)
 rename {templates => static}/coffee/src/modules/sequence.coffee (100%)
 rename {templates => static}/coffee/src/modules/tab.coffee (100%)
 rename {templates => static}/coffee/src/modules/video.coffee (100%)
 rename {templates => static}/coffee/src/modules/video/video_caption.coffee (100%)
 rename {templates => static}/coffee/src/modules/video/video_control.coffee (100%)
 rename {templates => static}/coffee/src/modules/video/video_player.coffee (100%)
 rename {templates => static}/coffee/src/modules/video/video_progress_slider.coffee (100%)
 rename {templates => static}/coffee/src/modules/video/video_speed_control.coffee (100%)
 rename {templates => static}/coffee/src/navigation.coffee (100%)
 rename {templates => static}/coffee/src/time.coffee (100%)
 delete mode 100644 templates/coffee/spec/histogram_spec.js
 delete mode 100644 templates/coffee/spec/logger_spec.js
 delete mode 100644 templates/coffee/spec/modules/problem_spec.js
 delete mode 100644 templates/coffee/spec/modules/sequence_spec.js
 delete mode 100644 templates/coffee/spec/modules/tab_spec.js
 delete mode 100644 templates/coffee/spec/modules/video/video_caption_spec.js
 delete mode 100644 templates/coffee/spec/modules/video/video_control_spec.js
 delete mode 100644 templates/coffee/spec/modules/video/video_player_spec.js
 delete mode 100644 templates/coffee/spec/modules/video/video_progress_slider_spec.js
 delete mode 100644 templates/coffee/spec/modules/video/video_speed_control_spec.js
 delete mode 100644 templates/coffee/spec/modules/video_spec.js
 delete mode 100644 templates/coffee/spec/navigation_spec.js
 delete mode 100644 templates/coffee/spec/time_spec.js

diff --git a/envs/common.py b/envs/common.py
index af678f9a14..d6a9d0c889 100644
--- a/envs/common.py
+++ b/envs/common.py
@@ -20,6 +20,7 @@ Longer TODO:
 """
 import sys
 import tempfile
+import glob2
 
 import djcelery
 from path import path
@@ -285,13 +286,12 @@ PIPELINE_CSS = {
 
 PIPELINE_JS = {
     'application': {
-        'source_filenames': [
-            'coffee/src/calculator.coffee',
-            'coffee/src/courseware.coffee',
-            'coffee/src/feedback_form.coffee',
-            'coffee/src/main.coffee'
-        ],
+        'source_filenames': [path.replace('static/', '') for path in glob2.glob('static/coffee/src/**/*.coffee')],
         'output_filename': 'js/application.js'
+    },
+    'spec': {
+        'source_filenames': [path.replace('static/', '') for path in glob2.glob('static/coffee/spec/**/*.coffee')],
+        'output_filename': 'js/spec.js'
     }
 }
 
diff --git a/requirements.txt b/requirements.txt
index c05b9eb265..7acec6ea27 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -21,3 +21,4 @@ django-jasmine
 beautifulsoup
 requests
 newrelic
+glob2
diff --git a/static/coffee/.gitignore b/static/coffee/.gitignore
new file mode 100644
index 0000000000..a6c7c2852d
--- /dev/null
+++ b/static/coffee/.gitignore
@@ -0,0 +1 @@
+*.js
diff --git a/templates/coffee/fixtures/items.json b/static/coffee/fixtures/items.json
similarity index 100%
rename from templates/coffee/fixtures/items.json
rename to static/coffee/fixtures/items.json
diff --git a/templates/coffee/fixtures/problem.html b/static/coffee/fixtures/problem.html
similarity index 100%
rename from templates/coffee/fixtures/problem.html
rename to static/coffee/fixtures/problem.html
diff --git a/templates/coffee/fixtures/problem_content.html b/static/coffee/fixtures/problem_content.html
similarity index 100%
rename from templates/coffee/fixtures/problem_content.html
rename to static/coffee/fixtures/problem_content.html
diff --git a/templates/coffee/fixtures/sequence.html b/static/coffee/fixtures/sequence.html
similarity index 100%
rename from templates/coffee/fixtures/sequence.html
rename to static/coffee/fixtures/sequence.html
diff --git a/templates/coffee/fixtures/tab.html b/static/coffee/fixtures/tab.html
similarity index 100%
rename from templates/coffee/fixtures/tab.html
rename to static/coffee/fixtures/tab.html
diff --git a/templates/coffee/fixtures/video.html b/static/coffee/fixtures/video.html
similarity index 100%
rename from templates/coffee/fixtures/video.html
rename to static/coffee/fixtures/video.html
diff --git a/static/coffee/spec/calculator_spec.js b/static/coffee/spec/calculator_spec.js
deleted file mode 100644
index 4bc54700a5..0000000000
--- a/static/coffee/spec/calculator_spec.js
+++ /dev/null
@@ -1,80 +0,0 @@
-(function() {
-
-  describe('Calculator', function() {
-    beforeEach(function() {
-      loadFixtures('calculator.html');
-      return this.calculator = new Calculator;
-    });
-    describe('bind', function() {
-      beforeEach(function() {
-        return Calculator.bind();
-      });
-      it('bind the calculator button', function() {
-        return expect($('.calc')).toHandleWith('click', this.calculator.toggle);
-      });
-      it('bind the help button', function() {
-        expect($('div.help-wrapper a')).toHandleWith('mouseenter', this.calculator.helpToggle);
-        return expect($('div.help-wrapper a')).toHandleWith('mouseleave', this.calculator.helpToggle);
-      });
-      it('prevent default behavior on help button', function() {
-        $('div.help-wrapper a').click(function(e) {
-          return expect(e.isDefaultPrevented()).toBeTruthy();
-        });
-        return $('div.help-wrapper a').click();
-      });
-      it('bind the calculator submit', function() {
-        return expect($('form#calculator')).toHandleWith('submit', this.calculator.calculate);
-      });
-      return it('prevent default behavior on form submit', function() {
-        jasmine.stubRequests();
-        $('form#calculator').submit(function(e) {
-          expect(e.isDefaultPrevented()).toBeTruthy();
-          return e.preventDefault();
-        });
-        return $('form#calculator').submit();
-      });
-    });
-    describe('toggle', function() {
-      it('toggle the calculator and focus the input', function() {
-        spyOn($.fn, 'focus');
-        this.calculator.toggle();
-        expect($('li.calc-main')).toHaveClass('open');
-        return expect($('#calculator_wrapper #calculator_input').focus).toHaveBeenCalled();
-      });
-      return it('toggle the close button on the calculator button', function() {
-        this.calculator.toggle();
-        expect($('.calc')).toHaveClass('closed');
-        this.calculator.toggle();
-        return expect($('.calc')).not.toHaveClass('closed');
-      });
-    });
-    describe('helpToggle', function() {
-      return it('toggle the help overlay', function() {
-        this.calculator.helpToggle();
-        expect($('.help')).toHaveClass('shown');
-        this.calculator.helpToggle();
-        return expect($('.help')).not.toHaveClass('shown');
-      });
-    });
-    return describe('calculate', function() {
-      beforeEach(function() {
-        $('#calculator_input').val('1+2');
-        spyOn($, 'getWithPrefix').andCallFake(function(url, data, callback) {
-          return callback({
-            result: 3
-          });
-        });
-        return this.calculator.calculate();
-      });
-      it('send data to /calculate', function() {
-        return expect($.getWithPrefix).toHaveBeenCalledWith('/calculate', {
-          equation: '1+2'
-        }, jasmine.any(Function));
-      });
-      return it('update the calculator output', function() {
-        return expect($('#calculator_output').val()).toEqual('3');
-      });
-    });
-  });
-
-}).call(this);
diff --git a/static/coffee/spec/courseware_spec.js b/static/coffee/spec/courseware_spec.js
deleted file mode 100644
index 757943118c..0000000000
--- a/static/coffee/spec/courseware_spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-(function() {
-
-  describe('Courseware', function() {
-    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();
-      });
-    });
-    describe('bind', function() {
-      beforeEach(function() {
-        this.courseware = new Courseware;
-        return setFixtures("<div class=\"course-content\">\n  <div class=\"sequence\"></div>\n</div>");
-      });
-      return it('binds the content change event', function() {
-        this.courseware.bind();
-        return expect($('.course-content .sequence')).toHandleWith('contentChanged', this.courseware.render);
-      });
-    });
-    return describe('render', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        this.courseware = new Courseware;
-        spyOn(window, 'Histogram');
-        spyOn(window, 'Problem');
-        spyOn(window, 'Video');
-        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 id=\"problem_3\" class=\"problems-wrapper\" data-url=\"/example/url/\">\n    <div id=\"histogram_3\" class=\"histogram\" data-histogram=\"[[0, 1]]\" style=\"height: 20px; display: block;\">\n  </div>\n</div>");
-        return this.courseware.render();
-      });
-      it('detect the video elements and convert them', function() {
-        expect(window.Video).toHaveBeenCalledWith('1', '1.0:abc1234');
-        return expect(window.Video).toHaveBeenCalledWith('2', '1.0:def5678');
-      });
-      it('detect the problem element and convert it', function() {
-        return expect(window.Problem).toHaveBeenCalledWith('3', '/example/url/');
-      });
-      return it('detect the histrogram element and convert it', function() {
-        return expect(window.Histogram).toHaveBeenCalledWith('3', [[0, 1]]);
-      });
-    });
-  });
-
-}).call(this);
diff --git a/static/coffee/spec/feedback_form_spec.js b/static/coffee/spec/feedback_form_spec.js
deleted file mode 100644
index eb5546baa1..0000000000
--- a/static/coffee/spec/feedback_form_spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-(function() {
-
-  describe('FeedbackForm', function() {
-    beforeEach(function() {
-      return loadFixtures('feedback_form.html');
-    });
-    return describe('constructor', function() {
-      beforeEach(function() {
-        new FeedbackForm;
-        return spyOn($, 'postWithPrefix').andCallFake(function(url, data, callback, format) {
-          return callback();
-        });
-      });
-      it('binds to the #feedback_button', function() {
-        return expect($('#feedback_button')).toHandle('click');
-      });
-      it('post data to /send_feedback on click', function() {
-        $('#feedback_subject').val('Awesome!');
-        $('#feedback_message').val('This site is really good.');
-        $('#feedback_button').click();
-        return expect($.postWithPrefix).toHaveBeenCalledWith('/send_feedback', {
-          subject: 'Awesome!',
-          message: 'This site is really good.',
-          url: window.location.href
-        }, jasmine.any(Function), 'json');
-      });
-      return it('replace the form with a thank you message', function() {
-        $('#feedback_button').click();
-        return expect($('#feedback_div').html()).toEqual('Feedback submitted. Thank you');
-      });
-    });
-  });
-
-}).call(this);
diff --git a/static/coffee/spec/helper.js b/static/coffee/spec/helper.js
deleted file mode 100644
index 0abaa18090..0000000000
--- a/static/coffee/spec/helper.js
+++ /dev/null
@@ -1,91 +0,0 @@
-(function() {
-
-  jasmine.getFixtures().fixturesPath = "/_jasmine/fixtures/";
-
-  jasmine.stubbedMetadata = {
-    abc123: {
-      id: 'abc123',
-      duration: 100
-    },
-    def456: {
-      id: 'def456',
-      duration: 200
-    },
-    bogus: {
-      duration: 300
-    }
-  };
-
-  jasmine.stubbedCaption = {
-    start: [0, 10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000, 100000, 110000, 120000],
-    text: ['Caption at 0', 'Caption at 10000', 'Caption at 20000', 'Caption at 30000', 'Caption at 40000', 'Caption at 50000', 'Caption at 60000', 'Caption at 70000', 'Caption at 80000', 'Caption at 90000', 'Caption at 100000', 'Caption at 110000', 'Caption at 120000']
-  };
-
-  jasmine.stubRequests = function() {
-    return spyOn($, 'ajax').andCallFake(function(settings) {
-      var match;
-      if (match = settings.url.match(/youtube\.com\/.+\/videos\/(.+)\?v=2&alt=jsonc/)) {
-        return settings.success({
-          data: jasmine.stubbedMetadata[match[1]]
-        });
-      } else if (match = settings.url.match(/static\/subs\/(.+)\.srt\.sjson/)) {
-        return settings.success(jasmine.stubbedCaption);
-      } else if (settings.url === '/calculate' || settings.url === '/6002x/modx/sequential/1/goto_position' || settings.url.match(/event$/) || settings.url.match(/6002x\/modx\/problem\/.+\/problem_(check|reset|show|save)$/)) {
-
-      } else {
-        throw "External request attempted for " + settings.url + ", which is not defined.";
-      }
-    });
-  };
-
-  jasmine.stubYoutubePlayer = function() {
-    return YT.Player = function() {
-      return jasmine.createSpyObj('YT.Player', ['cueVideoById', 'getVideoEmbedCode', 'getCurrentTime', 'getPlayerState', 'loadVideoById', 'playVideo', 'pauseVideo', 'seekTo']);
-    };
-  };
-
-  jasmine.stubVideoPlayer = function(context, enableParts) {
-    var currentPartName, part, suite, _i, _len, _ref;
-    if (!$.isArray(enableParts)) {
-      enableParts = [enableParts];
-    }
-    suite = context.suite;
-    while (suite = suite.parentSuite) {
-      currentPartName = suite.description;
-    }
-    enableParts.push(currentPartName);
-    _ref = ['VideoCaption', 'VideoSpeedControl', 'VideoProgressSlider'];
-    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-      part = _ref[_i];
-      if (!($.inArray(part, enableParts) >= 0)) {
-        spyOn(window, part);
-      }
-    }
-    loadFixtures('video.html');
-    jasmine.stubRequests();
-    YT.Player = void 0;
-    context.video = new Video('example', '.75:abc123,1.0:def456');
-    jasmine.stubYoutubePlayer();
-    return new VideoPlayer(context.video);
-  };
-
-  spyOn(window, 'onunload');
-
-  window.YT = {
-    PlayerState: {
-      UNSTARTED: -1,
-      ENDED: 0,
-      PLAYING: 1,
-      PAUSED: 2,
-      BUFFERING: 3,
-      CUED: 5
-    }
-  };
-
-  $.cookie = jasmine.createSpy('jQuery.cookie').andReturn('1.0');
-
-  $.fn.qtip = jasmine.createSpy('jQuery.qtip');
-
-  $.fn.scrollTo = jasmine.createSpy('jQuery.scrollTo');
-
-}).call(this);
diff --git a/templates/coffee/spec/histogram_spec.coffee b/static/coffee/spec/histogram_spec.coffee
similarity index 100%
rename from templates/coffee/spec/histogram_spec.coffee
rename to static/coffee/spec/histogram_spec.coffee
diff --git a/templates/coffee/spec/logger_spec.coffee b/static/coffee/spec/logger_spec.coffee
similarity index 100%
rename from templates/coffee/spec/logger_spec.coffee
rename to static/coffee/spec/logger_spec.coffee
diff --git a/templates/coffee/spec/modules/problem_spec.coffee b/static/coffee/spec/modules/problem_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/problem_spec.coffee
rename to static/coffee/spec/modules/problem_spec.coffee
diff --git a/templates/coffee/spec/modules/sequence_spec.coffee b/static/coffee/spec/modules/sequence_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/sequence_spec.coffee
rename to static/coffee/spec/modules/sequence_spec.coffee
diff --git a/templates/coffee/spec/modules/tab_spec.coffee b/static/coffee/spec/modules/tab_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/tab_spec.coffee
rename to static/coffee/spec/modules/tab_spec.coffee
diff --git a/templates/coffee/spec/modules/video/video_caption_spec.coffee b/static/coffee/spec/modules/video/video_caption_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/video/video_caption_spec.coffee
rename to static/coffee/spec/modules/video/video_caption_spec.coffee
diff --git a/templates/coffee/spec/modules/video/video_control_spec.coffee b/static/coffee/spec/modules/video/video_control_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/video/video_control_spec.coffee
rename to static/coffee/spec/modules/video/video_control_spec.coffee
diff --git a/templates/coffee/spec/modules/video/video_player_spec.coffee b/static/coffee/spec/modules/video/video_player_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/video/video_player_spec.coffee
rename to static/coffee/spec/modules/video/video_player_spec.coffee
diff --git a/templates/coffee/spec/modules/video/video_progress_slider_spec.coffee b/static/coffee/spec/modules/video/video_progress_slider_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/video/video_progress_slider_spec.coffee
rename to static/coffee/spec/modules/video/video_progress_slider_spec.coffee
diff --git a/templates/coffee/spec/modules/video/video_speed_control_spec.coffee b/static/coffee/spec/modules/video/video_speed_control_spec.coffee
similarity index 100%
rename from templates/coffee/spec/modules/video/video_speed_control_spec.coffee
rename to static/coffee/spec/modules/video/video_speed_control_spec.coffee
diff --git a/templates/coffee/spec/modules/video_spec.coffee b/static/coffee/spec/modules/video_spec.coffee
similarity index 93%
rename from templates/coffee/spec/modules/video_spec.coffee
rename to static/coffee/spec/modules/video_spec.coffee
index a48cc5786e..134b38caff 100644
--- a/templates/coffee/spec/modules/video_spec.coffee
+++ b/static/coffee/spec/modules/video_spec.coffee
@@ -9,6 +9,7 @@ describe 'Video', ->
 
   describe 'constructor', ->
     beforeEach ->
+      @stubVideoPlayer = jasmine.createSpy('VideoPlayer')
       $.cookie.andReturn '0.75'
       window.player = 100
 
@@ -49,7 +50,6 @@ describe 'Video', ->
       beforeEach ->
         @originalYT = window.YT
         window.YT = { Player: true }
-        @stubVideoPlayer = jasmine.createSpy('VideoPlayer')
         spyOn(window, 'VideoPlayer').andReturn(@stubVideoPlayer)
         @video = new Video 'example', '.75:abc123,1.0:def456'
 
@@ -62,18 +62,27 @@ describe 'Video', ->
 
     describe 'when the Youtube API is not ready', ->
       beforeEach ->
+        @originalYT = window.YT
+        window.YT = {}
         @video = new Video 'example', '.75:abc123,1.0:def456'
 
+      afterEach ->
+        window.YT = @originalYT
+
       it 'set the callback on the window object', ->
         expect(window.onYouTubePlayerAPIReady).toEqual jasmine.any(Function)
 
     describe 'when the Youtube API becoming ready', ->
       beforeEach ->
-        @stubVideoPlayer = jasmine.createSpy('VideoPlayer')
+        @originalYT = window.YT
+        window.YT = {}
         spyOn(window, 'VideoPlayer').andReturn(@stubVideoPlayer)
         @video = new Video 'example', '.75:abc123,1.0:def456'
         window.onYouTubePlayerAPIReady()
 
+      afterEach ->
+        window.YT = @originalYT
+
       it 'create the Video Player for all video elements', ->
         expect(window.VideoPlayer).toHaveBeenCalledWith @video
         expect(@video.player).toEqual @stubVideoPlayer
diff --git a/templates/coffee/spec/navigation_spec.coffee b/static/coffee/spec/navigation_spec.coffee
similarity index 100%
rename from templates/coffee/spec/navigation_spec.coffee
rename to static/coffee/spec/navigation_spec.coffee
diff --git a/templates/coffee/spec/time_spec.coffee b/static/coffee/spec/time_spec.coffee
similarity index 100%
rename from templates/coffee/spec/time_spec.coffee
rename to static/coffee/spec/time_spec.coffee
diff --git a/templates/coffee/src/histogram.coffee b/static/coffee/src/histogram.coffee
similarity index 100%
rename from templates/coffee/src/histogram.coffee
rename to static/coffee/src/histogram.coffee
diff --git a/templates/coffee/src/logger.coffee b/static/coffee/src/logger.coffee
similarity index 100%
rename from templates/coffee/src/logger.coffee
rename to static/coffee/src/logger.coffee
diff --git a/templates/coffee/src/modules/problem.coffee b/static/coffee/src/modules/problem.coffee
similarity index 100%
rename from templates/coffee/src/modules/problem.coffee
rename to static/coffee/src/modules/problem.coffee
diff --git a/templates/coffee/src/modules/sequence.coffee b/static/coffee/src/modules/sequence.coffee
similarity index 100%
rename from templates/coffee/src/modules/sequence.coffee
rename to static/coffee/src/modules/sequence.coffee
diff --git a/templates/coffee/src/modules/tab.coffee b/static/coffee/src/modules/tab.coffee
similarity index 100%
rename from templates/coffee/src/modules/tab.coffee
rename to static/coffee/src/modules/tab.coffee
diff --git a/templates/coffee/src/modules/video.coffee b/static/coffee/src/modules/video.coffee
similarity index 100%
rename from templates/coffee/src/modules/video.coffee
rename to static/coffee/src/modules/video.coffee
diff --git a/templates/coffee/src/modules/video/video_caption.coffee b/static/coffee/src/modules/video/video_caption.coffee
similarity index 100%
rename from templates/coffee/src/modules/video/video_caption.coffee
rename to static/coffee/src/modules/video/video_caption.coffee
diff --git a/templates/coffee/src/modules/video/video_control.coffee b/static/coffee/src/modules/video/video_control.coffee
similarity index 100%
rename from templates/coffee/src/modules/video/video_control.coffee
rename to static/coffee/src/modules/video/video_control.coffee
diff --git a/templates/coffee/src/modules/video/video_player.coffee b/static/coffee/src/modules/video/video_player.coffee
similarity index 100%
rename from templates/coffee/src/modules/video/video_player.coffee
rename to static/coffee/src/modules/video/video_player.coffee
diff --git a/templates/coffee/src/modules/video/video_progress_slider.coffee b/static/coffee/src/modules/video/video_progress_slider.coffee
similarity index 100%
rename from templates/coffee/src/modules/video/video_progress_slider.coffee
rename to static/coffee/src/modules/video/video_progress_slider.coffee
diff --git a/templates/coffee/src/modules/video/video_speed_control.coffee b/static/coffee/src/modules/video/video_speed_control.coffee
similarity index 100%
rename from templates/coffee/src/modules/video/video_speed_control.coffee
rename to static/coffee/src/modules/video/video_speed_control.coffee
diff --git a/templates/coffee/src/navigation.coffee b/static/coffee/src/navigation.coffee
similarity index 100%
rename from templates/coffee/src/navigation.coffee
rename to static/coffee/src/navigation.coffee
diff --git a/templates/coffee/src/time.coffee b/static/coffee/src/time.coffee
similarity index 100%
rename from templates/coffee/src/time.coffee
rename to static/coffee/src/time.coffee
diff --git a/static/sass/courseware/_video.scss b/static/sass/courseware/_video.scss
index 38a00b0e16..9fc3b4eb3d 100644
--- a/static/sass/courseware/_video.scss
+++ b/static/sass/courseware/_video.scss
@@ -184,7 +184,18 @@ section.course-content {
             float: left;
             position: relative;
 
-            a {
+            &.open {
+              &>a {
+                background: url('../images/open-arrow.png') 10px center no-repeat;
+              }
+
+              ol.video_speeds {
+                display: block;
+                opacity: 1;
+              }
+            }
+
+            &>a {
               background: url('../images/closed-arrow.png') 10px center no-repeat;
               border-left: 1px solid #000;
               border-right: 1px solid #000;
@@ -201,15 +212,6 @@ section.course-content {
               -webkit-font-smoothing: antialiased;
               width: 110px;
 
-              &.open {
-                background: url('../images/open-arrow.png') 10px center no-repeat;
-
-                ol.video_speeds {
-                  display: block;
-                  opacity: 1;
-                }
-              }
-
               h3 {
                 color: #999;
                 float: left;
diff --git a/templates/coffee/spec/histogram_spec.js b/templates/coffee/spec/histogram_spec.js
deleted file mode 100644
index edfeec15d5..0000000000
--- a/templates/coffee/spec/histogram_spec.js
+++ /dev/null
@@ -1,62 +0,0 @@
-(function() {
-
-  describe('Histogram', function() {
-    beforeEach(function() {
-      return spyOn($, 'plot');
-    });
-    describe('constructor', function() {
-      return it('instantiate the data arrays', function() {
-        var histogram;
-        histogram = new Histogram(1, []);
-        expect(histogram.xTicks).toEqual([]);
-        expect(histogram.yTicks).toEqual([]);
-        return expect(histogram.data).toEqual([]);
-      });
-    });
-    describe('calculate', function() {
-      beforeEach(function() {
-        return this.histogram = new Histogram(1, [[1, 1], [2, 2], [3, 3]]);
-      });
-      it('store the correct value for data', function() {
-        return expect(this.histogram.data).toEqual([[1, Math.log(2)], [2, Math.log(3)], [3, Math.log(4)]]);
-      });
-      it('store the correct value for x ticks', function() {
-        return expect(this.histogram.xTicks).toEqual([[1, '1'], [2, '2'], [3, '3']]);
-      });
-      return it('store the correct value for y ticks', function() {
-        return expect(this.histogram.yTicks).toEqual;
-      });
-    });
-    return describe('render', function() {
-      return it('call flot with correct option', function() {
-        new Histogram(1, [[1, 1], [2, 2], [3, 3]]);
-        return expect($.plot).toHaveBeenCalledWith($("#histogram_1"), [
-          {
-            data: [[1, Math.log(2)], [2, Math.log(3)], [3, Math.log(4)]],
-            bars: {
-              show: true,
-              align: 'center',
-              lineWidth: 0,
-              fill: 1.0
-            },
-            color: "#b72121"
-          }
-        ], {
-          xaxis: {
-            min: -1,
-            max: 4,
-            ticks: [[1, '1'], [2, '2'], [3, '3']],
-            tickLength: 0
-          },
-          yaxis: {
-            min: 0.0,
-            max: Math.log(4) * 1.1,
-            ticks: [[Math.log(2), '1'], [Math.log(3), '2'], [Math.log(4), '3']],
-            labelWidth: 50
-          }
-        });
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/logger_spec.js b/templates/coffee/spec/logger_spec.js
deleted file mode 100644
index 86b184a873..0000000000
--- a/templates/coffee/spec/logger_spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-(function() {
-
-  describe('Logger', function() {
-    it('expose window.log_event', function() {
-      jasmine.stubRequests();
-      return expect(window.log_event).toBe(Logger.log);
-    });
-    describe('log', function() {
-      return it('send a request to log event', function() {
-        spyOn($, 'getWithPrefix');
-        Logger.log('example', 'data');
-        return expect($.getWithPrefix).toHaveBeenCalledWith('/event', {
-          event_type: 'example',
-          event: '"data"',
-          page: window.location.href
-        });
-      });
-    });
-    return describe('bind', function() {
-      beforeEach(function() {
-        Logger.bind();
-        return Courseware.prefix = '/6002x';
-      });
-      afterEach(function() {
-        return window.onunload = null;
-      });
-      it('bind the onunload event', function() {
-        return expect(window.onunload).toEqual(jasmine.any(Function));
-      });
-      return it('send a request to log event', function() {
-        spyOn($, 'ajax');
-        $(window).trigger('onunload');
-        return expect($.ajax).toHaveBeenCalledWith({
-          url: "" + Courseware.prefix + "/event",
-          data: {
-            event_type: 'page_close',
-            event: '',
-            page: window.location.href
-          },
-          async: false
-        });
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/problem_spec.js b/templates/coffee/spec/modules/problem_spec.js
deleted file mode 100644
index bfc1969399..0000000000
--- a/templates/coffee/spec/modules/problem_spec.js
+++ /dev/null
@@ -1,301 +0,0 @@
-(function() {
-
-  describe('Problem', function() {
-    beforeEach(function() {
-      window.MathJax = {
-        Hub: {
-          Queue: function() {}
-        }
-      };
-      window.update_schematics = function() {};
-      loadFixtures('problem.html');
-      spyOn(Logger, 'log');
-      return spyOn($.fn, 'load').andCallFake(function(url, callback) {
-        $(this).html(readFixtures('problem_content.html'));
-        return callback();
-      });
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        return this.problem = new Problem(1, '/problem/url/');
-      });
-      it('set the element', function() {
-        return expect(this.problem.element).toBe('#problem_1');
-      });
-      it('set the content url', function() {
-        return expect(this.problem.content_url).toEqual('/problem/url/problem_get?id=1');
-      });
-      return it('render the content', function() {
-        return expect($.fn.load).toHaveBeenCalledWith(this.problem.content_url, this.problem.bind);
-      });
-    });
-    describe('bind', function() {
-      beforeEach(function() {
-        spyOn(MathJax.Hub, 'Queue');
-        spyOn(window, 'update_schematics');
-        return this.problem = new Problem(1, '/problem/url/');
-      });
-      it('set mathjax typeset', function() {
-        return expect(MathJax.Hub.Queue).toHaveBeenCalled();
-      });
-      it('update schematics', function() {
-        return expect(window.update_schematics).toHaveBeenCalled();
-      });
-      it('bind answer refresh on button click', function() {
-        return expect($('section.action input:button')).toHandleWith('click', this.problem.refreshAnswers);
-      });
-      it('bind the check button', function() {
-        return expect($('section.action input.check')).toHandleWith('click', this.problem.check);
-      });
-      it('bind the reset button', function() {
-        return expect($('section.action input.reset')).toHandleWith('click', this.problem.reset);
-      });
-      it('bind the show button', function() {
-        return expect($('section.action input.show')).toHandleWith('click', this.problem.show);
-      });
-      return it('bind the save button', function() {
-        return expect($('section.action input.save')).toHandleWith('click', this.problem.save);
-      });
-    });
-    describe('render', function() {
-      beforeEach(function() {
-        this.problem = new Problem(1, '/problem/url/');
-        this.bind = this.problem.bind;
-        return spyOn(this.problem, 'bind');
-      });
-      describe('with content given', function() {
-        beforeEach(function() {
-          return this.problem.render('Hello World');
-        });
-        it('render the content', function() {
-          return expect(this.problem.element.html()).toEqual('Hello World');
-        });
-        return it('re-bind the content', function() {
-          return expect(this.problem.bind).toHaveBeenCalled();
-        });
-      });
-      return describe('with no content given', function() {
-        return it('load the content via ajax', function() {
-          return expect($.fn.load).toHaveBeenCalledWith(this.problem.content_url, this.bind);
-        });
-      });
-    });
-    describe('check', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        this.problem = new Problem(1, '/problem/url/');
-        return this.problem.answers = 'foo=1&bar=2';
-      });
-      it('log the problem_check event', function() {
-        this.problem.check();
-        return expect(Logger.log).toHaveBeenCalledWith('problem_check', 'foo=1&bar=2');
-      });
-      it('submit the answer for check', function() {
-        spyOn($, 'postWithPrefix');
-        this.problem.check();
-        return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_check', 'foo=1&bar=2', jasmine.any(Function));
-      });
-      describe('when the response is correct', function() {
-        return it('call render with returned content', function() {
-          spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
-            return callback({
-              success: 'correct',
-              contents: 'Correct!'
-            });
-          });
-          this.problem.check();
-          return expect(this.problem.element.html()).toEqual('Correct!');
-        });
-      });
-      describe('when the response is incorrect', function() {
-        return it('call render with returned content', function() {
-          spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
-            return callback({
-              success: 'incorrect',
-              contents: 'Correct!'
-            });
-          });
-          this.problem.check();
-          return expect(this.problem.element.html()).toEqual('Correct!');
-        });
-      });
-      return describe('when the response is undetermined', function() {
-        return it('alert the response', function() {
-          spyOn(window, 'alert');
-          spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
-            return callback({
-              success: 'Number Only!'
-            });
-          });
-          this.problem.check();
-          return expect(window.alert).toHaveBeenCalledWith('Number Only!');
-        });
-      });
-    });
-    describe('reset', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        return this.problem = new Problem(1, '/problem/url/');
-      });
-      it('log the problem_reset event', function() {
-        this.problem.answers = 'foo=1&bar=2';
-        this.problem.reset();
-        return expect(Logger.log).toHaveBeenCalledWith('problem_reset', 'foo=1&bar=2');
-      });
-      it('POST to the problem reset page', function() {
-        spyOn($, 'postWithPrefix');
-        this.problem.reset();
-        return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_reset', {
-          id: 1
-        }, jasmine.any(Function));
-      });
-      return it('render the returned content', function() {
-        spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
-          return callback("Reset!");
-        });
-        this.problem.reset();
-        return expect(this.problem.element.html()).toEqual('Reset!');
-      });
-    });
-    describe('show', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        this.problem = new Problem(1, '/problem/url/');
-        return this.problem.element.prepend('<div id="answer_1_1" /><div id="answer_1_2" />');
-      });
-      describe('when the answer has not yet shown', function() {
-        beforeEach(function() {
-          return this.problem.element.removeClass('showed');
-        });
-        it('log the problem_show event', function() {
-          this.problem.show();
-          return expect(Logger.log).toHaveBeenCalledWith('problem_show', {
-            problem: 1
-          });
-        });
-        it('fetch the answers', function() {
-          spyOn($, 'postWithPrefix');
-          this.problem.show();
-          return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_show', jasmine.any(Function));
-        });
-        it('show the answers', function() {
-          spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
-            return callback({
-              '1_1': 'One',
-              '1_2': 'Two'
-            });
-          });
-          this.problem.show();
-          expect($('#answer_1_1')).toHaveHtml('One');
-          return expect($('#answer_1_2')).toHaveHtml('Two');
-        });
-        it('toggle the show answer button', function() {
-          spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
-            return callback({});
-          });
-          this.problem.show();
-          return expect($('.show')).toHaveValue('Hide Answer');
-        });
-        it('add the showed class to element', function() {
-          spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
-            return callback({});
-          });
-          this.problem.show();
-          return expect(this.problem.element).toHaveClass('showed');
-        });
-        return describe('multiple choice question', function() {
-          beforeEach(function() {
-            return this.problem.element.prepend('<label for="input_1_1_1"><input type="checkbox" name="input_1_1" id="input_1_1_1" value="1"> One</label>\n<label for="input_1_1_2"><input type="checkbox" name="input_1_1" id="input_1_1_2" value="2"> Two</label>\n<label for="input_1_1_3"><input type="checkbox" name="input_1_1" id="input_1_1_3" value="3"> Three</label>\n<label for="input_1_2_1"><input type="radio" name="input_1_2" id="input_1_2_1" value="1"> Other</label>');
-          });
-          return it('set the correct_answer attribute on the choice', function() {
-            spyOn($, 'postWithPrefix').andCallFake(function(url, callback) {
-              return callback({
-                '1_1': [2, 3]
-              });
-            });
-            this.problem.show();
-            expect($('label[for="input_1_1_1"]')).not.toHaveAttr('correct_answer', 'true');
-            expect($('label[for="input_1_1_2"]')).toHaveAttr('correct_answer', 'true');
-            expect($('label[for="input_1_1_3"]')).toHaveAttr('correct_answer', 'true');
-            return expect($('label[for="input_1_2_1"]')).not.toHaveAttr('correct_answer', 'true');
-          });
-        });
-      });
-      return describe('when the answers are alreay shown', function() {
-        beforeEach(function() {
-          this.problem.element.addClass('showed');
-          this.problem.element.prepend('<label for="input_1_1_1" correct_answer="true">\n  <input type="checkbox" name="input_1_1" id="input_1_1_1" value="1" />\n  One\n</label>');
-          $('#answer_1_1').html('One');
-          return $('#answer_1_2').html('Two');
-        });
-        it('hide the answers', function() {
-          this.problem.show();
-          expect($('#answer_1_1')).toHaveHtml('');
-          expect($('#answer_1_2')).toHaveHtml('');
-          return expect($('label[for="input_1_1_1"]')).not.toHaveAttr('correct_answer');
-        });
-        it('toggle the show answer button', function() {
-          this.problem.show();
-          return expect($('.show')).toHaveValue('Show Answer');
-        });
-        return it('remove the showed class from element', function() {
-          this.problem.show();
-          return expect(this.problem.element).not.toHaveClass('showed');
-        });
-      });
-    });
-    describe('save', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        this.problem = new Problem(1, '/problem/url/');
-        return this.problem.answers = 'foo=1&bar=2';
-      });
-      it('log the problem_save event', function() {
-        this.problem.save();
-        return expect(Logger.log).toHaveBeenCalledWith('problem_save', 'foo=1&bar=2');
-      });
-      it('POST to save problem', function() {
-        spyOn($, 'postWithPrefix');
-        this.problem.save();
-        return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/problem/1/problem_save', 'foo=1&bar=2', jasmine.any(Function));
-      });
-      return it('alert to the user', function() {
-        spyOn(window, 'alert');
-        spyOn($, 'postWithPrefix').andCallFake(function(url, answers, callback) {
-          return callback({
-            success: 'OK'
-          });
-        });
-        this.problem.save();
-        return expect(window.alert).toHaveBeenCalledWith('Saved');
-      });
-    });
-    return describe('refreshAnswers', function() {
-      beforeEach(function() {
-        this.problem = new Problem(1, '/problem/url/');
-        this.problem.element.html('<textarea class="CodeMirror" />\n<input id="input_1_1" name="input_1_1" class="schematic" value="one" />\n<input id="input_1_2" name="input_1_2" value="two" />\n<input id="input_bogus_3" name="input_bogus_3" value="three" />');
-        this.stubSchematic = {
-          update_value: jasmine.createSpy('schematic')
-        };
-        this.stubCodeMirror = {
-          save: jasmine.createSpy('CodeMirror')
-        };
-        $('input.schematic').get(0).schematic = this.stubSchematic;
-        return $('textarea.CodeMirror').get(0).CodeMirror = this.stubCodeMirror;
-      });
-      it('update each schematic', function() {
-        this.problem.refreshAnswers();
-        return expect(this.stubSchematic.update_value).toHaveBeenCalled();
-      });
-      it('update each code block', function() {
-        this.problem.refreshAnswers();
-        return expect(this.stubCodeMirror.save).toHaveBeenCalled();
-      });
-      return it('serialize all answers', function() {
-        this.problem.refreshAnswers();
-        return expect(this.problem.answers).toEqual("input_1_1=one&input_1_2=two");
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/sequence_spec.js b/templates/coffee/spec/modules/sequence_spec.js
deleted file mode 100644
index 54d7888e22..0000000000
--- a/templates/coffee/spec/modules/sequence_spec.js
+++ /dev/null
@@ -1,199 +0,0 @@
-(function() {
-
-  describe('Sequence', function() {
-    beforeEach(function() {
-      window.MathJax = {
-        Hub: {
-          Queue: function() {}
-        }
-      };
-      spyOn(Logger, 'log');
-      loadFixtures('sequence.html');
-      return this.items = $.parseJSON(readFixtures('items.json'));
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        return this.sequence = new Sequence('1', this.items, 1);
-      });
-      it('set the element', function() {
-        return expect(this.sequence.element).toEqual($('#sequence_1'));
-      });
-      it('build the navigation', function() {
-        var classes, elements, titles;
-        classes = $('#sequence-list li>a').map(function() {
-          return $(this).attr('class');
-        }).get();
-        elements = $('#sequence-list li>a').map(function() {
-          return $(this).attr('data-element');
-        }).get();
-        titles = $('#sequence-list li>a>p').map(function() {
-          return $(this).html();
-        }).get();
-        expect(classes).toEqual(['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive']);
-        expect(elements).toEqual(['1', '2', '3']);
-        return expect(titles).toEqual(['Video 1', 'Video 2', 'Sample Problem']);
-      });
-      it('bind the page events', function() {
-        expect(this.sequence.element).toHandleWith('contentChanged', this.sequence.toggleArrows);
-        return expect($('#sequence-list a')).toHandleWith('click', this.sequence.goto);
-      });
-      return it('render the active sequence content', function() {
-        return expect($('#seq_content').html()).toEqual('Video 1');
-      });
-    });
-    describe('toggleArrows', function() {
-      beforeEach(function() {
-        return this.sequence = new Sequence('1', this.items, 1);
-      });
-      describe('when the first tab is active', function() {
-        beforeEach(function() {
-          this.sequence.position = 1;
-          return this.sequence.toggleArrows();
-        });
-        it('disable the previous button', function() {
-          return expect($('.sequence-nav-buttons .prev a')).toHaveClass('disabled');
-        });
-        return it('enable the next button', function() {
-          expect($('.sequence-nav-buttons .next a')).not.toHaveClass('disabled');
-          return expect($('.sequence-nav-buttons .next a')).toHandleWith('click', this.sequence.next);
-        });
-      });
-      describe('when the middle tab is active', function() {
-        beforeEach(function() {
-          this.sequence.position = 2;
-          return this.sequence.toggleArrows();
-        });
-        it('enable the previous button', function() {
-          expect($('.sequence-nav-buttons .prev a')).not.toHaveClass('disabled');
-          return expect($('.sequence-nav-buttons .prev a')).toHandleWith('click', this.sequence.previous);
-        });
-        return it('enable the next button', function() {
-          expect($('.sequence-nav-buttons .next a')).not.toHaveClass('disabled');
-          return expect($('.sequence-nav-buttons .next a')).toHandleWith('click', this.sequence.next);
-        });
-      });
-      return describe('when the last tab is active', function() {
-        beforeEach(function() {
-          this.sequence.position = 3;
-          return this.sequence.toggleArrows();
-        });
-        it('enable the previous button', function() {
-          expect($('.sequence-nav-buttons .prev a')).not.toHaveClass('disabled');
-          return expect($('.sequence-nav-buttons .prev a')).toHandleWith('click', this.sequence.previous);
-        });
-        return it('disable the next button', function() {
-          return expect($('.sequence-nav-buttons .next a')).toHaveClass('disabled');
-        });
-      });
-    });
-    describe('render', function() {
-      beforeEach(function() {
-        spyOn($, 'postWithPrefix');
-        this.sequence = new Sequence('1', this.items);
-        return spyOnEvent(this.sequence.element, 'contentChanged');
-      });
-      describe('with a different position than the current one', function() {
-        beforeEach(function() {
-          return this.sequence.render(1);
-        });
-        describe('with no previous position', function() {
-          return it('does not save the new position', function() {
-            return expect($.postWithPrefix).not.toHaveBeenCalled();
-          });
-        });
-        describe('with previous position', function() {
-          beforeEach(function() {
-            this.sequence.position = 2;
-            return this.sequence.render(1);
-          });
-          it('mark the previous tab as visited', function() {
-            return expect($('[data-element="2"]')).toHaveClass('seq_video_visited');
-          });
-          return it('save the new position', function() {
-            return expect($.postWithPrefix).toHaveBeenCalledWith('/modx/sequential/1/goto_position', {
-              position: 1
-            });
-          });
-        });
-        it('mark new tab as active', function() {
-          return expect($('[data-element="1"]')).toHaveClass('seq_video_active');
-        });
-        it('render the new content', function() {
-          return expect($('#seq_content').html()).toEqual('Video 1');
-        });
-        it('update the position', function() {
-          return expect(this.sequence.position).toEqual(1);
-        });
-        return it('trigger contentChanged event', function() {
-          return expect('contentChanged').toHaveBeenTriggeredOn(this.sequence.element);
-        });
-      });
-      return describe('with the same position as the current one', function() {
-        return it('should not trigger contentChanged event', function() {
-          this.sequence.position = 2;
-          this.sequence.render(2);
-          return expect('contentChanged').not.toHaveBeenTriggeredOn(this.sequence.element);
-        });
-      });
-    });
-    describe('goto', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        this.sequence = new Sequence('1', this.items, 2);
-        return $('[data-element="3"]').click();
-      });
-      it('log the sequence goto event', function() {
-        return expect(Logger.log).toHaveBeenCalledWith('seq_goto', {
-          old: 2,
-          "new": 3,
-          id: '1'
-        });
-      });
-      return it('call render on the right sequence', function() {
-        return expect($('#seq_content').html()).toEqual('Sample Problem');
-      });
-    });
-    describe('next', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        this.sequence = new Sequence('1', this.items, 2);
-        return $('.sequence-nav-buttons .next a').click();
-      });
-      it('log the next sequence event', function() {
-        return expect(Logger.log).toHaveBeenCalledWith('seq_next', {
-          old: 2,
-          "new": 3,
-          id: '1'
-        });
-      });
-      return it('call render on the next sequence', function() {
-        return expect($('#seq_content').html()).toEqual('Sample Problem');
-      });
-    });
-    describe('previous', function() {
-      beforeEach(function() {
-        jasmine.stubRequests();
-        this.sequence = new Sequence('1', this.items, 2);
-        return $('.sequence-nav-buttons .prev a').click();
-      });
-      it('log the previous sequence event', function() {
-        return expect(Logger.log).toHaveBeenCalledWith('seq_prev', {
-          old: 2,
-          "new": 1,
-          id: '1'
-        });
-      });
-      return it('call render on the previous sequence', function() {
-        return expect($('#seq_content').html()).toEqual('Video 1');
-      });
-    });
-    return describe('link_for', function() {
-      return it('return a link for specific position', function() {
-        var sequence;
-        sequence = new Sequence('1', this.items, 2);
-        return expect(sequence.link_for(2)).toBe('[data-element="2"]');
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/tab_spec.js b/templates/coffee/spec/modules/tab_spec.js
deleted file mode 100644
index 838b052a28..0000000000
--- a/templates/coffee/spec/modules/tab_spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-(function() {
-
-  describe('Tab', function() {
-    beforeEach(function() {
-      loadFixtures('tab.html');
-      return this.items = $.parseJSON(readFixtures('items.json'));
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        spyOn($.fn, 'tabs');
-        return this.tab = new Tab(1, this.items);
-      });
-      it('set the element', function() {
-        return expect(this.tab.element).toEqual($('#tab_1'));
-      });
-      it('build the tabs', function() {
-        var links;
-        links = $('.navigation li>a').map(function() {
-          return $(this).attr('href');
-        }).get();
-        return expect(links).toEqual(['#tab-1-0', '#tab-1-1', '#tab-1-2']);
-      });
-      it('build the container', function() {
-        var containers;
-        containers = $('section').map(function() {
-          return $(this).attr('id');
-        }).get();
-        return expect(containers).toEqual(['tab-1-0', 'tab-1-1', 'tab-1-2']);
-      });
-      return it('bind the tabs', function() {
-        return expect($.fn.tabs).toHaveBeenCalledWith({
-          show: this.tab.onShow
-        });
-      });
-    });
-    return describe('onShow', function() {
-      beforeEach(function() {
-        this.tab = new Tab(1, this.items);
-        return $('[href="#tab-1-0"]').click();
-      });
-      it('replace content in the container', function() {
-        $('[href="#tab-1-1"]').click();
-        expect($('#tab-1-0').html()).toEqual('');
-        expect($('#tab-1-1').html()).toEqual('Video 2');
-        return expect($('#tab-1-2').html()).toEqual('');
-      });
-      return it('trigger contentChanged event on the element', function() {
-        spyOnEvent(this.tab.element, 'contentChanged');
-        $('[href="#tab-1-1"]').click();
-        return expect('contentChanged').toHaveBeenTriggeredOn(this.tab.element);
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_caption_spec.js b/templates/coffee/spec/modules/video/video_caption_spec.js
deleted file mode 100644
index 176fc23ebc..0000000000
--- a/templates/coffee/spec/modules/video/video_caption_spec.js
+++ /dev/null
@@ -1,317 +0,0 @@
-(function() {
-
-  describe('VideoCaption', function() {
-    beforeEach(function() {
-      return this.player = jasmine.stubVideoPlayer(this);
-    });
-    afterEach(function() {
-      YT.Player = void 0;
-      return $.fn.scrollTo.reset();
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        spyOn($, 'getWithPrefix').andCallThrough();
-        return this.caption = new VideoCaption(this.player, 'def456');
-      });
-      it('set the player', function() {
-        return expect(this.caption.player).toEqual(this.player);
-      });
-      it('set the youtube id', function() {
-        return expect(this.caption.youtubeId).toEqual('def456');
-      });
-      it('create the caption element', function() {
-        return expect($('.video')).toContain('ol.subtitles');
-      });
-      it('add caption control to video player', function() {
-        return expect($('.video')).toContain('a.hide-subtitles');
-      });
-      it('fetch the caption', function() {
-        return expect($.getWithPrefix).toHaveBeenCalledWith(this.caption.captionURL(), jasmine.any(Function));
-      });
-      it('render the caption', function() {
-        return expect($('.subtitles').html()).toMatch(new RegExp('<li data-index="0" data-start="0">Caption at 0</li>\n<li data-index="1" data-start="10000">Caption at 10000</li>\n<li data-index="2" data-start="20000">Caption at 20000</li>\n<li data-index="3" data-start="30000">Caption at 30000</li>\n<li data-index="4" data-start="40000">Caption at 40000</li>\n<li data-index="5" data-start="50000">Caption at 50000</li>\n<li data-index="6" data-start="60000">Caption at 60000</li>\n<li data-index="7" data-start="70000">Caption at 70000</li>\n<li data-index="8" data-start="80000">Caption at 80000</li>\n<li data-index="9" data-start="90000">Caption at 90000</li>\n<li data-index="10" data-start="100000">Caption at 100000</li>\n<li data-index="11" data-start="110000">Caption at 110000</li>\n<li data-index="12" data-start="120000">Caption at 120000</li>'.replace(/\n/g, '')));
-      });
-      it('add a padding element to caption', function() {
-        expect($('.subtitles li:first')).toBe('.spacing');
-        return expect($('.subtitles li:last')).toBe('.spacing');
-      });
-      it('bind all the caption link', function() {
-        var _this = this;
-        return $('.subtitles li[data-index]').each(function(index, link) {
-          return expect($(link)).toHandleWith('click', _this.caption.seekPlayer);
-        });
-      });
-      it('bind window resize event', function() {
-        return expect($(window)).toHandleWith('resize', this.caption.onWindowResize);
-      });
-      it('bind player resize event', function() {
-        return expect($(this.player)).toHandleWith('resize', this.caption.onWindowResize);
-      });
-      it('bind player updatePlayTime event', function() {
-        return expect($(this.player)).toHandleWith('updatePlayTime', this.caption.onUpdatePlayTime);
-      });
-      it('bind the hide caption button', function() {
-        return expect($('.hide-subtitles')).toHandleWith('click', this.caption.toggle);
-      });
-      return it('bind the mouse movement', function() {
-        expect($('.subtitles')).toHandleWith('mouseenter', this.caption.onMouseEnter);
-        expect($('.subtitles')).toHandleWith('mouseleave', this.caption.onMouseLeave);
-        expect($('.subtitles')).toHandleWith('mousemove', this.caption.onMovement);
-        expect($('.subtitles')).toHandleWith('mousewheel', this.caption.onMovement);
-        return expect($('.subtitles')).toHandleWith('DOMMouseScroll', this.caption.onMovement);
-      });
-    });
-    describe('mouse movement', function() {
-      beforeEach(function() {
-        spyOn(window, 'setTimeout').andReturn(100);
-        spyOn(window, 'clearTimeout');
-        return this.caption = new VideoCaption(this.player, 'def456');
-      });
-      describe('when cursor is outside of the caption box', function() {
-        beforeEach(function() {
-          return $(window).trigger(jQuery.Event('mousemove'));
-        });
-        return it('does not set freezing timeout', function() {
-          return expect(this.caption.frozen).toBeFalsy();
-        });
-      });
-      describe('when cursor is in the caption box', function() {
-        beforeEach(function() {
-          return $('.subtitles').trigger(jQuery.Event('mouseenter'));
-        });
-        it('set the freezing timeout', function() {
-          return expect(this.caption.frozen).toEqual(100);
-        });
-        describe('when the cursor is moving', function() {
-          beforeEach(function() {
-            return $('.subtitles').trigger(jQuery.Event('mousemove'));
-          });
-          return it('reset the freezing timeout', function() {
-            return expect(window.clearTimeout).toHaveBeenCalledWith(100);
-          });
-        });
-        return describe('when the mouse is scrolling', function() {
-          beforeEach(function() {
-            return $('.subtitles').trigger(jQuery.Event('mousewheel'));
-          });
-          return it('reset the freezing timeout', function() {
-            return expect(window.clearTimeout).toHaveBeenCalledWith(100);
-          });
-        });
-      });
-      return describe('when cursor is moving out of the caption box', function() {
-        beforeEach(function() {
-          this.caption.frozen = 100;
-          return $.fn.scrollTo.reset();
-        });
-        describe('always', function() {
-          beforeEach(function() {
-            return $('.subtitles').trigger(jQuery.Event('mouseout'));
-          });
-          it('reset the freezing timeout', function() {
-            return expect(window.clearTimeout).toHaveBeenCalledWith(100);
-          });
-          return it('unfreeze the caption', function() {
-            return expect(this.caption.frozen).toBeNull();
-          });
-        });
-        describe('when the player is playing', function() {
-          beforeEach(function() {
-            spyOn(this.player, 'isPlaying').andReturn(true);
-            $('.subtitles li[data-index]:first').addClass('current');
-            return $('.subtitles').trigger(jQuery.Event('mouseout'));
-          });
-          return it('scroll the caption', function() {
-            return expect($.fn.scrollTo).toHaveBeenCalled();
-          });
-        });
-        return describe('when the player is not playing', function() {
-          beforeEach(function() {
-            spyOn(this.player, 'isPlaying').andReturn(false);
-            return $('.subtitles').trigger(jQuery.Event('mouseout'));
-          });
-          return it('does not scroll the caption', function() {
-            return expect($.fn.scrollTo).not.toHaveBeenCalled();
-          });
-        });
-      });
-    });
-    describe('search', function() {
-      beforeEach(function() {
-        return this.caption = new VideoCaption(this.player, 'def456');
-      });
-      return it('return a correct caption index', function() {
-        expect(this.caption.search(0)).toEqual(0);
-        expect(this.caption.search(9999)).toEqual(0);
-        expect(this.caption.search(10000)).toEqual(1);
-        expect(this.caption.search(15000)).toEqual(1);
-        expect(this.caption.search(120000)).toEqual(12);
-        return expect(this.caption.search(120001)).toEqual(12);
-      });
-    });
-    describe('onUpdatePlayTime', function() {
-      beforeEach(function() {
-        return this.caption = new VideoCaption(this.player, 'def456');
-      });
-      describe('when the video speed is 1.0x', function() {
-        beforeEach(function() {
-          this.video.setSpeed('1.0');
-          return this.caption.onUpdatePlayTime({}, 25.000);
-        });
-        return it('search the caption based on time', function() {
-          return expect(this.caption.currentIndex).toEqual(2);
-        });
-      });
-      describe('when the video speed is not 1.0x', function() {
-        beforeEach(function() {
-          this.video.setSpeed('0.75');
-          return this.caption.onUpdatePlayTime({}, 25.000);
-        });
-        return it('search the caption based on 1.0x speed', function() {
-          return expect(this.caption.currentIndex).toEqual(1);
-        });
-      });
-      describe('when the index is not the same', function() {
-        beforeEach(function() {
-          this.caption.currentIndex = 1;
-          $('.subtitles li[data-index=1]').addClass('current');
-          return this.caption.onUpdatePlayTime({}, 25.000);
-        });
-        it('deactivate the previous caption', function() {
-          return expect($('.subtitles li[data-index=1]')).not.toHaveClass('current');
-        });
-        it('activate new caption', function() {
-          return expect($('.subtitles li[data-index=2]')).toHaveClass('current');
-        });
-        it('save new index', function() {
-          return expect(this.caption.currentIndex).toEqual(2);
-        });
-        return it('scroll caption to new position', function() {
-          return expect($.fn.scrollTo).toHaveBeenCalled();
-        });
-      });
-      return describe('when the index is the same', function() {
-        beforeEach(function() {
-          this.caption.currentIndex = 1;
-          $('.subtitles li[data-index=1]').addClass('current');
-          return this.caption.onUpdatePlayTime({}, 15.000);
-        });
-        return it('does not change current subtitle', function() {
-          return expect($('.subtitles li[data-index=1]')).toHaveClass('current');
-        });
-      });
-    });
-    describe('onWindowResize', function() {
-      beforeEach(function() {
-        this.caption = new VideoCaption(this.player, 'def456');
-        $('.subtitles li[data-index=1]').addClass('current');
-        return this.caption.onWindowResize();
-      });
-      it('set the height of caption container', function() {
-        return expect(parseInt($('.subtitles').css('maxHeight'))).toEqual($('.video-wrapper').height());
-      });
-      it('set the height of caption spacing', function() {
-        expect(parseInt($('.subtitles .spacing:first').css('height'))).toEqual($('.video-wrapper').height() / 2 - $('.subtitles li:not(.spacing):first').height() / 2);
-        return expect(parseInt($('.subtitles .spacing:last').css('height'))).toEqual($('.video-wrapper').height() / 2 - $('.subtitles li:not(.spacing):last').height() / 2);
-      });
-      return it('scroll caption to new position', function() {
-        return expect($.fn.scrollTo).toHaveBeenCalled();
-      });
-    });
-    describe('scrollCaption', function() {
-      beforeEach(function() {
-        return this.caption = new VideoCaption(this.player, 'def456');
-      });
-      describe('when frozen', function() {
-        beforeEach(function() {
-          this.caption.frozen = true;
-          $('.subtitles li[data-index=1]').addClass('current');
-          return this.caption.scrollCaption();
-        });
-        return it('does not scroll the caption', function() {
-          return expect($.fn.scrollTo).not.toHaveBeenCalled();
-        });
-      });
-      return describe('when not frozen', function() {
-        beforeEach(function() {
-          return this.caption.frozen = false;
-        });
-        describe('when there is no current caption', function() {
-          beforeEach(function() {
-            return this.caption.scrollCaption();
-          });
-          return it('does not scroll the caption', function() {
-            return expect($.fn.scrollTo).not.toHaveBeenCalled();
-          });
-        });
-        return describe('when there is a current caption', function() {
-          beforeEach(function() {
-            $('.subtitles li[data-index=1]').addClass('current');
-            return this.caption.scrollCaption();
-          });
-          return it('scroll to current caption', function() {
-            return expect($.fn.scrollTo).toHaveBeenCalledWith($('.subtitles .current:first', this.player.element), {
-              offset: -($('.video-wrapper').height() / 2 - $('.subtitles .current:first').height() / 2)
-            });
-          });
-        });
-      });
-    });
-    describe('seekPlayer', function() {
-      beforeEach(function() {
-        var _this = this;
-        this.caption = new VideoCaption(this.player, 'def456');
-        this.time = null;
-        return $(this.player).bind('seek', function(event, time) {
-          return _this.time = time;
-        });
-      });
-      describe('when the video speed is 1.0x', function() {
-        beforeEach(function() {
-          this.video.setSpeed('1.0');
-          return $('.subtitles li[data-start="30000"]').click();
-        });
-        return it('trigger seek event with the correct time', function() {
-          return expect(this.time).toEqual(30.000);
-        });
-      });
-      return describe('when the video speed is not 1.0x', function() {
-        beforeEach(function() {
-          this.video.setSpeed('0.75');
-          return $('.subtitles li[data-start="30000"]').click();
-        });
-        return it('trigger seek event with the correct time', function() {
-          return expect(this.time).toEqual(40.000);
-        });
-      });
-    });
-    return describe('toggle', function() {
-      beforeEach(function() {
-        this.caption = new VideoCaption(this.player, 'def456');
-        return $('.subtitles li[data-index=1]').addClass('current');
-      });
-      describe('when the caption is visible', function() {
-        beforeEach(function() {
-          this.player.element.removeClass('closed');
-          return this.caption.toggle(jQuery.Event('click'));
-        });
-        return it('hide the caption', function() {
-          return expect(this.player.element).toHaveClass('closed');
-        });
-      });
-      return describe('when the caption is hidden', function() {
-        beforeEach(function() {
-          this.player.element.addClass('closed');
-          return this.caption.toggle(jQuery.Event('click'));
-        });
-        it('show the caption', function() {
-          return expect(this.player.element).not.toHaveClass('closed');
-        });
-        return it('scroll the caption', function() {
-          return expect($.fn.scrollTo).toHaveBeenCalled();
-        });
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_control_spec.js b/templates/coffee/spec/modules/video/video_control_spec.js
deleted file mode 100644
index f32e938783..0000000000
--- a/templates/coffee/spec/modules/video/video_control_spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-(function() {
-
-  describe('VideoControl', function() {
-    beforeEach(function() {
-      return this.player = jasmine.stubVideoPlayer(this);
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        return this.control = new VideoControl(this.player);
-      });
-      it('render the video controls', function() {
-        return expect($('.video-controls').html()).toContain('<div class="slider"></div>\n<div>\n  <ul class="vcr">\n    <li><a class="video_control play">Play</a></li>\n    <li>\n      <div class="vidtime">0:00 / 0:00</div>\n    </li>\n  </ul>\n  <div class="secondary-controls">\n    <a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>\n  </div>\n</div>');
-      });
-      it('bind player events', function() {
-        expect($(this.player)).toHandleWith('play', this.control.onPlay);
-        expect($(this.player)).toHandleWith('pause', this.control.onPause);
-        return expect($(this.player)).toHandleWith('ended', this.control.onPause);
-      });
-      return it('bind the playback button', function() {
-        return expect($('.video_control')).toHandleWith('click', this.control.togglePlayback);
-      });
-    });
-    describe('onPlay', function() {
-      beforeEach(function() {
-        this.control = new VideoControl(this.player);
-        return this.control.onPlay();
-      });
-      return it('switch playback button to play state', function() {
-        expect($('.video_control')).not.toHaveClass('play');
-        expect($('.video_control')).toHaveClass('pause');
-        return expect($('.video_control')).toHaveHtml('Pause');
-      });
-    });
-    describe('onPause', function() {
-      beforeEach(function() {
-        this.control = new VideoControl(this.player);
-        return this.control.onPause();
-      });
-      return it('switch playback button to pause state', function() {
-        expect($('.video_control')).not.toHaveClass('pause');
-        expect($('.video_control')).toHaveClass('play');
-        return expect($('.video_control')).toHaveHtml('Play');
-      });
-    });
-    return describe('togglePlayback', function() {
-      beforeEach(function() {
-        return this.control = new VideoControl(this.player);
-      });
-      describe('when the video is playing', function() {
-        beforeEach(function() {
-          spyOn(this.player, 'isPlaying').andReturn(true);
-          spyOnEvent(this.player, 'pause');
-          return this.control.togglePlayback(jQuery.Event('click'));
-        });
-        return it('trigger the pause event', function() {
-          return expect('pause').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-      return describe('when the video is paused', function() {
-        beforeEach(function() {
-          spyOn(this.player, 'isPlaying').andReturn(false);
-          spyOnEvent(this.player, 'play');
-          return this.control.togglePlayback(jQuery.Event('click'));
-        });
-        return it('trigger the play event', function() {
-          return expect('play').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_player_spec.js b/templates/coffee/spec/modules/video/video_player_spec.js
deleted file mode 100644
index 0937a3d92e..0000000000
--- a/templates/coffee/spec/modules/video/video_player_spec.js
+++ /dev/null
@@ -1,441 +0,0 @@
-(function() {
-
-  describe('VideoPlayer', function() {
-    beforeEach(function() {
-      return jasmine.stubVideoPlayer(this);
-    });
-    afterEach(function() {
-      return YT.Player = void 0;
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        spyOn(window, 'VideoControl');
-        spyOn(YT, 'Player');
-        $.fn.qtip.andCallFake(function() {
-          return $(this).data('qtip', true);
-        });
-        $('.video').append($('<div class="hide-subtitles" />'));
-        return this.player = new VideoPlayer(this.video);
-      });
-      it('instanticate current time to zero', function() {
-        return expect(this.player.currentTime).toEqual(0);
-      });
-      it('set the element', function() {
-        return expect(this.player.element).toBe('#video_example');
-      });
-      it('create video control', function() {
-        return expect(window.VideoControl).toHaveBeenCalledWith(this.player);
-      });
-      it('create video caption', function() {
-        return expect(window.VideoCaption).toHaveBeenCalledWith(this.player, 'def456');
-      });
-      it('create video speed control', function() {
-        return expect(window.VideoSpeedControl).toHaveBeenCalledWith(this.player, ['0.75', '1.0']);
-      });
-      it('create video progress slider', function() {
-        return expect(window.VideoProgressSlider).toHaveBeenCalledWith(this.player);
-      });
-      it('create Youtube player', function() {
-        return expect(YT.Player).toHaveBeenCalledWith('example', {
-          playerVars: {
-            controls: 0,
-            wmode: 'transparent',
-            rel: 0,
-            showinfo: 0,
-            enablejsapi: 1
-          },
-          videoId: 'def456',
-          events: {
-            onReady: this.player.onReady,
-            onStateChange: this.player.onStateChange
-          }
-        });
-      });
-      it('bind to seek event', function() {
-        return expect($(this.player)).toHandleWith('seek', this.player.onSeek);
-      });
-      it('bind to updatePlayTime event', function() {
-        return expect($(this.player)).toHandleWith('updatePlayTime', this.player.onUpdatePlayTime);
-      });
-      it('bidn to speedChange event', function() {
-        return expect($(this.player)).toHandleWith('speedChange', this.player.onSpeedChange);
-      });
-      it('bind to play event', function() {
-        return expect($(this.player)).toHandleWith('play', this.player.onPlay);
-      });
-      it('bind to paused event', function() {
-        return expect($(this.player)).toHandleWith('pause', this.player.onPause);
-      });
-      it('bind to ended event', function() {
-        return expect($(this.player)).toHandleWith('ended', this.player.onPause);
-      });
-      it('bind to key press', function() {
-        return expect($(document)).toHandleWith('keyup', this.player.bindExitFullScreen);
-      });
-      it('bind to fullscreen switching button', function() {
-        return expect($('.add-fullscreen')).toHandleWith('click', this.player.toggleFullScreen);
-      });
-      return describe('when not on a touch based device', function() {
-        return it('add the tooltip to fullscreen and subtitle button', function() {
-          expect($('.add-fullscreen')).toHaveData('qtip');
-          return expect($('.hide-subtitles')).toHaveData('qtip');
-        });
-      });
-    });
-    describe('onReady', function() {
-      beforeEach(function() {
-        this.video.embed();
-        this.player = this.video.player;
-        spyOnEvent(this.player, 'ready');
-        spyOnEvent(this.player, 'updatePlayTime');
-        return this.player.onReady();
-      });
-      it('reset the progress to zero', function() {
-        return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
-      });
-      it('trigger ready event on the player', function() {
-        return expect('ready').toHaveBeenTriggeredOn(this.player);
-      });
-      describe('when not on a touch based device', function() {
-        beforeEach(function() {
-          window.onTouchBasedDevice = function() {
-            return false;
-          };
-          spyOn(this.player, 'play');
-          return this.player.onReady();
-        });
-        return it('autoplay the first video', function() {
-          return expect(this.player.play).toHaveBeenCalled();
-        });
-      });
-      return describe('when on a touch based device', function() {
-        beforeEach(function() {
-          window.onTouchBasedDevice = function() {
-            return true;
-          };
-          spyOn(this.player, 'play');
-          return this.player.onReady();
-        });
-        return it('does not autoplay the first video', function() {
-          return expect(this.player.play).not.toHaveBeenCalled();
-        });
-      });
-    });
-    describe('onStateChange', function() {
-      beforeEach(function() {
-        return this.player = new VideoPlayer(this.video);
-      });
-      describe('when the video is playing', function() {
-        beforeEach(function() {
-          spyOnEvent(this.player, 'play');
-          return this.player.onStateChange({
-            data: YT.PlayerState.PLAYING
-          });
-        });
-        return it('trigger play event', function() {
-          return expect('play').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-      describe('when the video is paused', function() {
-        beforeEach(function() {
-          spyOnEvent(this.player, 'pause');
-          return this.player.onStateChange({
-            data: YT.PlayerState.PAUSED
-          });
-        });
-        return it('trigger pause event', function() {
-          return expect('pause').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-      return describe('when the video is ended', function() {
-        beforeEach(function() {
-          spyOnEvent(this.player, 'ended');
-          return this.player.onStateChange({
-            data: YT.PlayerState.ENDED
-          });
-        });
-        return it('trigger ended event', function() {
-          return expect('ended').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-    });
-    describe('onPlay', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        this.anotherPlayer = jasmine.createSpyObj('AnotherPlayer', ['pauseVideo']);
-        window.player = this.anotherPlayer;
-        spyOn(Logger, 'log');
-        spyOn(window, 'setInterval').andReturn(100);
-        this.player.player.getVideoEmbedCode.andReturn('embedCode');
-        return this.player.onPlay();
-      });
-      it('log the play_video event', function() {
-        return expect(Logger.log).toHaveBeenCalledWith('play_video', {
-          id: this.player.currentTime,
-          code: 'embedCode'
-        });
-      });
-      it('pause other video player', function() {
-        return expect(this.anotherPlayer.pauseVideo).toHaveBeenCalled();
-      });
-      it('set current video player as active player', function() {
-        return expect(window.player).toEqual(this.player.player);
-      });
-      return it('set update interval', function() {
-        expect(window.setInterval).toHaveBeenCalledWith(this.player.update, 200);
-        return expect(this.player.player.interval).toEqual(100);
-      });
-    });
-    describe('onPause', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        window.player = this.player.player;
-        spyOn(Logger, 'log');
-        spyOn(window, 'clearInterval');
-        this.player.player.interval = 100;
-        this.player.player.getVideoEmbedCode.andReturn('embedCode');
-        return this.player.onPause();
-      });
-      it('log the pause_video event', function() {
-        return expect(Logger.log).toHaveBeenCalledWith('pause_video', {
-          id: this.player.currentTime,
-          code: 'embedCode'
-        });
-      });
-      it('set current video player as inactive', function() {
-        return expect(window.player).toBeNull();
-      });
-      return it('clear update interval', function() {
-        expect(window.clearInterval).toHaveBeenCalledWith(100);
-        return expect(this.player.player.interval).toBeNull();
-      });
-    });
-    describe('onSeek', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        spyOn(window, 'clearInterval');
-        this.player.player.interval = 100;
-        return this.player.onSeek({}, 60);
-      });
-      it('seek the player', function() {
-        return expect(this.player.player.seekTo).toHaveBeenCalledWith(60, true);
-      });
-      describe('when the player is playing', function() {
-        beforeEach(function() {
-          this.player.player.getPlayerState.andReturn(YT.PlayerState.PLAYING);
-          return this.player.onSeek({}, 60);
-        });
-        return it('reset the update interval', function() {
-          return expect(window.clearInterval).toHaveBeenCalledWith(100);
-        });
-      });
-      return describe('when the player is not playing', function() {
-        beforeEach(function() {
-          this.player.player.getPlayerState.andReturn(YT.PlayerState.PAUSED);
-          spyOnEvent(this.player, 'updatePlayTime');
-          return this.player.onSeek({}, 60);
-        });
-        it('set the current time', function() {
-          return expect(this.player.currentTime).toEqual(60);
-        });
-        return it('trigger updatePlayTime event', function() {
-          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-    });
-    describe('onSpeedChange', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        this.player.currentTime = 60;
-        return spyOn(this.video, 'setSpeed').andCallThrough();
-      });
-      describe('always', function() {
-        beforeEach(function() {
-          return this.player.onSpeedChange({}, '0.75');
-        });
-        it('convert the current time to the new speed', function() {
-          return expect(this.player.currentTime).toEqual('80.000');
-        });
-        return it('set video speed to the new speed', function() {
-          return expect(this.video.setSpeed).toHaveBeenCalledWith('0.75');
-        });
-      });
-      describe('when the video is playing', function() {
-        beforeEach(function() {
-          this.player.player.getPlayerState.andReturn(YT.PlayerState.PLAYING);
-          spyOnEvent(this.player, 'updatePlayTime');
-          return this.player.onSpeedChange({}, '0.75');
-        });
-        it('load the video', function() {
-          return expect(this.player.player.loadVideoById).toHaveBeenCalledWith('abc123', '80.000');
-        });
-        return it('trigger updatePlayTime event', function() {
-          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-      return describe('when the video is not playing', function() {
-        beforeEach(function() {
-          this.player.player.getPlayerState.andReturn(YT.PlayerState.PAUSED);
-          spyOnEvent(this.player, 'updatePlayTime');
-          return this.player.onSpeedChange({}, '0.75');
-        });
-        it('cue the video', function() {
-          return expect(this.player.player.cueVideoById).toHaveBeenCalledWith('abc123', '80.000');
-        });
-        return it('trigger updatePlayTime event', function() {
-          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-    });
-    describe('update', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        return spyOnEvent(this.player, 'updatePlayTime');
-      });
-      describe('when the current time is unavailable from the player', function() {
-        beforeEach(function() {
-          this.player.player.getCurrentTime.andReturn(void 0);
-          return this.player.update();
-        });
-        return it('does not trigger updatePlayTime event', function() {
-          return expect('updatePlayTime').not.toHaveBeenTriggeredOn(this.player);
-        });
-      });
-      return describe('when the current time is available from the player', function() {
-        beforeEach(function() {
-          this.player.player.getCurrentTime.andReturn(60);
-          return this.player.update();
-        });
-        return it('trigger updatePlayTime event', function() {
-          return expect('updatePlayTime').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-    });
-    describe('onUpdatePlaytime', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        spyOn(this.video, 'getDuration').andReturn(1800);
-        return this.player.onUpdatePlayTime({}, 60);
-      });
-      return it('update the video playback time', function() {
-        return expect($('.vidtime')).toHaveHtml('1:00 / 30:00');
-      });
-    });
-    describe('toggleFullScreen', function() {
-      beforeEach(function() {
-        return this.player = new VideoPlayer(this.video);
-      });
-      describe('when the video player is not full screen', function() {
-        beforeEach(function() {
-          this.player.element.removeClass('fullscreen');
-          spyOnEvent(this.player, 'resize');
-          return this.player.toggleFullScreen(jQuery.Event("click"));
-        });
-        it('replace the full screen button tooltip', function() {
-          return expect($('.add-fullscreen')).toHaveAttr('title', 'Exit fill browser');
-        });
-        it('add a new exit from fullscreen button', function() {
-          return expect(this.player.element).toContain('a.exit');
-        });
-        it('add the fullscreen class', function() {
-          return expect(this.player.element).toHaveClass('fullscreen');
-        });
-        return it('trigger resize event', function() {
-          return expect('resize').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-      return describe('when the video player already full screen', function() {
-        beforeEach(function() {
-          this.player.element.addClass('fullscreen');
-          spyOnEvent(this.player, 'resize');
-          return this.player.toggleFullScreen(jQuery.Event("click"));
-        });
-        it('replace the full screen button tooltip', function() {
-          return expect($('.add-fullscreen')).toHaveAttr('title', 'Fill browser');
-        });
-        it('remove exit full screen button', function() {
-          return expect(this.player.element).not.toContain('a.exit');
-        });
-        it('remove the fullscreen class', function() {
-          return expect(this.player.element).not.toHaveClass('fullscreen');
-        });
-        return it('trigger resize event', function() {
-          return expect('resize').toHaveBeenTriggeredOn(this.player);
-        });
-      });
-    });
-    describe('play', function() {
-      beforeEach(function() {
-        return this.player = new VideoPlayer(this.video);
-      });
-      describe('when the player is not ready', function() {
-        beforeEach(function() {
-          this.player.player.playVideo = void 0;
-          return this.player.play();
-        });
-        return it('does nothing', function() {
-          return expect(this.player.player.playVideo).toBeUndefined();
-        });
-      });
-      return describe('when the player is ready', function() {
-        beforeEach(function() {
-          this.player.player.playVideo.andReturn(true);
-          return this.player.play();
-        });
-        return it('delegate to the Youtube player', function() {
-          return expect(this.player.player.playVideo).toHaveBeenCalled();
-        });
-      });
-    });
-    describe('isPlaying', function() {
-      beforeEach(function() {
-        return this.player = new VideoPlayer(this.video);
-      });
-      describe('when the video is playing', function() {
-        beforeEach(function() {
-          return this.player.player.getPlayerState.andReturn(YT.PlayerState.PLAYING);
-        });
-        return it('return true', function() {
-          return expect(this.player.isPlaying()).toBeTruthy();
-        });
-      });
-      return describe('when the video is not playing', function() {
-        beforeEach(function() {
-          return this.player.player.getPlayerState.andReturn(YT.PlayerState.PAUSED);
-        });
-        return it('return false', function() {
-          return expect(this.player.isPlaying()).toBeFalsy();
-        });
-      });
-    });
-    describe('pause', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        return this.player.pause();
-      });
-      return it('delegate to the Youtube player', function() {
-        return expect(this.player.player.pauseVideo).toHaveBeenCalled();
-      });
-    });
-    describe('duration', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        spyOn(this.video, 'getDuration');
-        return this.player.duration();
-      });
-      return it('delegate to the video', function() {
-        return expect(this.video.getDuration).toHaveBeenCalled();
-      });
-    });
-    return describe('currentSpeed', function() {
-      beforeEach(function() {
-        this.player = new VideoPlayer(this.video);
-        return this.video.speed = '3.0';
-      });
-      return it('delegate to the video', function() {
-        return expect(this.player.currentSpeed()).toEqual('3.0');
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_progress_slider_spec.js b/templates/coffee/spec/modules/video/video_progress_slider_spec.js
deleted file mode 100644
index 2699249e69..0000000000
--- a/templates/coffee/spec/modules/video/video_progress_slider_spec.js
+++ /dev/null
@@ -1,154 +0,0 @@
-(function() {
-
-  describe('VideoProgressSlider', function() {
-    beforeEach(function() {
-      return this.player = jasmine.stubVideoPlayer(this);
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        spyOn($.fn, 'slider').andCallThrough();
-        return this.slider = new VideoProgressSlider(this.player);
-      });
-      it('build the slider', function() {
-        expect(this.slider.slider).toBe('.slider');
-        return expect($.fn.slider).toHaveBeenCalledWith({
-          range: 'min',
-          change: this.slider.onChange,
-          slide: this.slider.onSlide,
-          stop: this.slider.onStop
-        });
-      });
-      it('build the seek handle', function() {
-        expect(this.slider.handle).toBe('.ui-slider-handle');
-        return expect($.fn.qtip).toHaveBeenCalledWith({
-          content: "0:00",
-          position: {
-            my: 'bottom center',
-            at: 'top center',
-            container: this.slider.handle
-          },
-          hide: {
-            delay: 700
-          },
-          style: {
-            classes: 'ui-tooltip-slider',
-            widget: true
-          }
-        });
-      });
-      return it('bind player events', function() {
-        return expect($(this.player)).toHandleWith('updatePlayTime', this.slider.onUpdatePlayTime);
-      });
-    });
-    describe('onReady', function() {
-      beforeEach(function() {
-        spyOn(this.player, 'duration').andReturn(120);
-        this.slider = new VideoProgressSlider(this.player);
-        return this.slider.onReady();
-      });
-      return it('set the max value to the length of video', function() {
-        return expect(this.slider.slider.slider('option', 'max')).toEqual(120);
-      });
-    });
-    describe('onUpdatePlayTime', function() {
-      beforeEach(function() {
-        this.slider = new VideoProgressSlider(this.player);
-        spyOn(this.player, 'duration').andReturn(120);
-        return spyOn($.fn, 'slider').andCallThrough();
-      });
-      describe('when frozen', function() {
-        beforeEach(function() {
-          this.slider.frozen = true;
-          return this.slider.onUpdatePlayTime({}, 20);
-        });
-        return it('does not update the slider', function() {
-          return expect($.fn.slider).not.toHaveBeenCalled();
-        });
-      });
-      return describe('when not frozen', function() {
-        beforeEach(function() {
-          this.slider.frozen = false;
-          return this.slider.onUpdatePlayTime({}, 20);
-        });
-        it('update the max value of the slider', function() {
-          return expect($.fn.slider).toHaveBeenCalledWith('option', 'max', 120);
-        });
-        return it('update current value of the slider', function() {
-          return expect($.fn.slider).toHaveBeenCalledWith('value', 20);
-        });
-      });
-    });
-    describe('onSlide', function() {
-      beforeEach(function() {
-        var _this = this;
-        this.slider = new VideoProgressSlider(this.player);
-        this.time = null;
-        $(this.player).bind('seek', function(event, time) {
-          return _this.time = time;
-        });
-        spyOnEvent(this.player, 'seek');
-        return this.slider.onSlide({}, {
-          value: 20
-        });
-      });
-      it('freeze the slider', function() {
-        return expect(this.slider.frozen).toBeTruthy();
-      });
-      it('update the tooltip', function() {
-        return expect($.fn.qtip).toHaveBeenCalled();
-      });
-      return it('trigger seek event', function() {
-        expect('seek').toHaveBeenTriggeredOn(this.player);
-        return expect(this.time).toEqual(20);
-      });
-    });
-    describe('onChange', function() {
-      beforeEach(function() {
-        this.slider = new VideoProgressSlider(this.player);
-        return this.slider.onChange({}, {
-          value: 20
-        });
-      });
-      return it('update the tooltip', function() {
-        return expect($.fn.qtip).toHaveBeenCalled();
-      });
-    });
-    describe('onStop', function() {
-      beforeEach(function() {
-        var _this = this;
-        this.slider = new VideoProgressSlider(this.player);
-        this.time = null;
-        $(this.player).bind('seek', function(event, time) {
-          return _this.time = time;
-        });
-        spyOnEvent(this.player, 'seek');
-        spyOn(window, 'setTimeout');
-        return this.slider.onStop({}, {
-          value: 20
-        });
-      });
-      it('freeze the slider', function() {
-        return expect(this.slider.frozen).toBeTruthy();
-      });
-      it('trigger seek event', function() {
-        expect('seek').toHaveBeenTriggeredOn(this.player);
-        return expect(this.time).toEqual(20);
-      });
-      return it('set timeout to unfreeze the slider', function() {
-        expect(window.setTimeout).toHaveBeenCalledWith(jasmine.any(Function), 200);
-        window.setTimeout.mostRecentCall.args[0]();
-        return expect(this.slider.frozen).toBeFalsy();
-      });
-    });
-    return describe('updateTooltip', function() {
-      beforeEach(function() {
-        this.slider = new VideoProgressSlider(this.player);
-        return this.slider.updateTooltip(90);
-      });
-      return it('set the tooltip value', function() {
-        return expect($.fn.qtip).toHaveBeenCalledWith('option', 'content.text', '1:30');
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/video/video_speed_control_spec.js b/templates/coffee/spec/modules/video/video_speed_control_spec.js
deleted file mode 100644
index db3e7c0552..0000000000
--- a/templates/coffee/spec/modules/video/video_speed_control_spec.js
+++ /dev/null
@@ -1,103 +0,0 @@
-(function() {
-
-  describe('VideoSpeedControl', function() {
-    beforeEach(function() {
-      this.player = jasmine.stubVideoPlayer(this);
-      return $('.speeds').remove();
-    });
-    afterEach(function() {});
-    describe('constructor', function() {
-      describe('always', function() {
-        beforeEach(function() {
-          return this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
-        });
-        it('add the video speed control to player', function() {
-          return expect($('.secondary-controls').html()).toContain('<div class="speeds">\n  <a href="#">\n    <h3>Speed</h3>\n    <p class="active">1.0x</p>\n  </a>\n  <ol class="video_speeds"><li data-speed="1.0" class="active"><a href="#">1.0x</a></li><li data-speed="0.75"><a href="#">0.75x</a></li></ol>\n</div>');
-        });
-        it('bind to player speedChange event', function() {
-          return expect($(this.player)).toHandleWith('speedChange', this.speedControl.onSpeedChange);
-        });
-        return it('bind to change video speed link', function() {
-          return expect($('.video_speeds a')).toHandleWith('click', this.speedControl.changeVideoSpeed);
-        });
-      });
-      describe('when running on touch based device', function() {
-        beforeEach(function() {
-          spyOn(window, 'onTouchBasedDevice').andReturn(true);
-          $('.speeds').removeClass('open');
-          return this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
-        });
-        return it('open the speed toggle on click', function() {
-          $('.speeds').click();
-          expect($('.speeds')).toHaveClass('open');
-          $('.speeds').click();
-          return expect($('.speeds')).not.toHaveClass('open');
-        });
-      });
-      return describe('when running on non-touch based device', function() {
-        beforeEach(function() {
-          spyOn(window, 'onTouchBasedDevice').andReturn(false);
-          $('.speeds').removeClass('open');
-          return this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
-        });
-        it('open the speed toggle on hover', function() {
-          $('.speeds').mouseover();
-          expect($('.speeds')).toHaveClass('open');
-          $('.speeds').mouseout();
-          return expect($('.speeds')).not.toHaveClass('open');
-        });
-        it('close the speed toggle on mouse out', function() {
-          $('.speeds').mouseover().mouseout();
-          return expect($('.speeds')).not.toHaveClass('open');
-        });
-        return it('close the speed toggle on click', function() {
-          $('.speeds').mouseover().click();
-          return expect($('.speeds')).not.toHaveClass('open');
-        });
-      });
-    });
-    describe('changeVideoSpeed', function() {
-      beforeEach(function() {
-        this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
-        return this.video.setSpeed('1.0');
-      });
-      describe('when new speed is the same', function() {
-        beforeEach(function() {
-          spyOnEvent(this.player, 'speedChange');
-          return $('li[data-speed="1.0"] a').click();
-        });
-        return it('does not trigger speedChange event', function() {
-          return expect('speedChange').not.toHaveBeenTriggeredOn(this.player);
-        });
-      });
-      return describe('when new speed is not the same', function() {
-        beforeEach(function() {
-          var _this = this;
-          this.newSpeed = null;
-          $(this.player).bind('speedChange', function(event, newSpeed) {
-            return _this.newSpeed = newSpeed;
-          });
-          spyOnEvent(this.player, 'speedChange');
-          return $('li[data-speed="0.75"] a').click();
-        });
-        return it('trigger player speedChange event', function() {
-          expect('speedChange').toHaveBeenTriggeredOn(this.player);
-          return expect(this.newSpeed).toEqual(0.75);
-        });
-      });
-    });
-    return describe('onSpeedChange', function() {
-      beforeEach(function() {
-        this.speedControl = new VideoSpeedControl(this.player, this.video.speeds);
-        $('li[data-speed="1.0"] a').addClass('active');
-        return this.speedControl.setSpeed('0.75');
-      });
-      return it('set the new speed as active', function() {
-        expect($('.video_speeds li[data-speed="1.0"]')).not.toHaveClass('active');
-        expect($('.video_speeds li[data-speed="0.75"]')).toHaveClass('active');
-        return expect($('.speeds p.active')).toHaveHtml('0.75x');
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/modules/video_spec.js b/templates/coffee/spec/modules/video_spec.js
deleted file mode 100644
index 664607880f..0000000000
--- a/templates/coffee/spec/modules/video_spec.js
+++ /dev/null
@@ -1,148 +0,0 @@
-(function() {
-
-  describe('Video', function() {
-    beforeEach(function() {
-      loadFixtures('video.html');
-      return jasmine.stubRequests();
-    });
-    afterEach(function() {
-      window.player = void 0;
-      return window.onYouTubePlayerAPIReady = void 0;
-    });
-    describe('constructor', function() {
-      beforeEach(function() {
-        $.cookie.andReturn('0.75');
-        return window.player = 100;
-      });
-      describe('by default', function() {
-        beforeEach(function() {
-          return this.video = new Video('example', '.75:abc123,1.0:def456');
-        });
-        it('reset the current video player', function() {
-          return expect(window.player).toBeNull();
-        });
-        it('set the elements', function() {
-          return expect(this.video.element).toBe('#video_example');
-        });
-        it('parse the videos', function() {
-          return expect(this.video.videos).toEqual({
-            '0.75': 'abc123',
-            '1.0': 'def456'
-          });
-        });
-        it('fetch the video metadata', function() {
-          return expect(this.video.metadata).toEqual({
-            abc123: {
-              id: 'abc123',
-              duration: 100
-            },
-            def456: {
-              id: 'def456',
-              duration: 200
-            }
-          });
-        });
-        it('parse available video speeds', function() {
-          return expect(this.video.speeds).toEqual(['0.75', '1.0']);
-        });
-        it('set current video speed via cookie', function() {
-          return expect(this.video.speed).toEqual('0.75');
-        });
-        return it('store a reference for this video player in the element', function() {
-          return expect($('.video').data('video')).toEqual(this.video);
-        });
-      });
-      describe('when the Youtube API is already available', function() {
-        beforeEach(function() {
-          this.originalYT = window.YT;
-          window.YT = {
-            Player: true
-          };
-          this.stubVideoPlayer = jasmine.createSpy('VideoPlayer');
-          spyOn(window, 'VideoPlayer').andReturn(this.stubVideoPlayer);
-          return this.video = new Video('example', '.75:abc123,1.0:def456');
-        });
-        afterEach(function() {
-          return window.YT = this.originalYT;
-        });
-        return it('create the Video Player', function() {
-          expect(window.VideoPlayer).toHaveBeenCalledWith(this.video);
-          return expect(this.video.player).toEqual(this.stubVideoPlayer);
-        });
-      });
-      describe('when the Youtube API is not ready', function() {
-        beforeEach(function() {
-          return this.video = new Video('example', '.75:abc123,1.0:def456');
-        });
-        return it('set the callback on the window object', function() {
-          return expect(window.onYouTubePlayerAPIReady).toEqual(jasmine.any(Function));
-        });
-      });
-      return describe('when the Youtube API becoming ready', function() {
-        beforeEach(function() {
-          this.stubVideoPlayer = jasmine.createSpy('VideoPlayer');
-          spyOn(window, 'VideoPlayer').andReturn(this.stubVideoPlayer);
-          this.video = new Video('example', '.75:abc123,1.0:def456');
-          return window.onYouTubePlayerAPIReady();
-        });
-        return it('create the Video Player for all video elements', function() {
-          expect(window.VideoPlayer).toHaveBeenCalledWith(this.video);
-          return expect(this.video.player).toEqual(this.stubVideoPlayer);
-        });
-      });
-    });
-    describe('youtubeId', function() {
-      beforeEach(function() {
-        $.cookie.andReturn('1.0');
-        return this.video = new Video('example', '.75:abc123,1.0:def456');
-      });
-      describe('with speed', function() {
-        return it('return the video id for given speed', function() {
-          expect(this.video.youtubeId('0.75')).toEqual('abc123');
-          return expect(this.video.youtubeId('1.0')).toEqual('def456');
-        });
-      });
-      return describe('without speed', function() {
-        return it('return the video id for current speed', function() {
-          return expect(this.video.youtubeId()).toEqual('def456');
-        });
-      });
-    });
-    describe('setSpeed', function() {
-      beforeEach(function() {
-        return this.video = new Video('example', '.75:abc123,1.0:def456');
-      });
-      describe('when new speed is available', function() {
-        beforeEach(function() {
-          return this.video.setSpeed('0.75');
-        });
-        it('set new speed', function() {
-          return expect(this.video.speed).toEqual('0.75');
-        });
-        return it('save setting for new speed', function() {
-          return expect($.cookie).toHaveBeenCalledWith('video_speed', '0.75', {
-            expires: 3650,
-            path: '/'
-          });
-        });
-      });
-      return describe('when new speed is not available', function() {
-        beforeEach(function() {
-          return this.video.setSpeed('1.75');
-        });
-        return it('set speed to 1.0x', function() {
-          return expect(this.video.speed).toEqual('1.0');
-        });
-      });
-    });
-    return describe('getDuration', function() {
-      beforeEach(function() {
-        return this.video = new Video('example', '.75:abc123,1.0:def456');
-      });
-      return it('return duration for current video', function() {
-        return expect(this.video.getDuration()).toEqual(200);
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/coffee/spec/navigation_spec.js b/templates/coffee/spec/navigation_spec.js
deleted file mode 100644
index cb51aacbf8..0000000000
--- a/templates/coffee/spec/navigation_spec.js
+++ /dev/null
@@ -1,93 +0,0 @@
-(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/spec/time_spec.js b/templates/coffee/spec/time_spec.js
deleted file mode 100644
index 12b2673ccc..0000000000
--- a/templates/coffee/spec/time_spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-(function() {
-
-  describe('Time', function() {
-    describe('format', function() {
-      describe('with duration more than or equal to 1 hour', function() {
-        return it('return a correct time format', function() {
-          expect(Time.format(3600)).toEqual('1:00:00');
-          return expect(Time.format(7272)).toEqual('2:01:12');
-        });
-      });
-      return describe('with duration less than 1 hour', function() {
-        return it('return a correct time format', function() {
-          expect(Time.format(1)).toEqual('0:01');
-          expect(Time.format(61)).toEqual('1:01');
-          return expect(Time.format(3599)).toEqual('59:59');
-        });
-      });
-    });
-    return describe('convert', function() {
-      return it('return a correct time based on speed modifier', function() {
-        expect(Time.convert(0, 1, 1.5)).toEqual('0.000');
-        expect(Time.convert(100, 1, 1.5)).toEqual('66.667');
-        return expect(Time.convert(100, 1.5, 1)).toEqual('150.000');
-      });
-    });
-  });
-
-}).call(this);
diff --git a/templates/jasmine/base.html b/templates/jasmine/base.html
index f933fa1f81..68329b2756 100644
--- a/templates/jasmine/base.html
+++ b/templates/jasmine/base.html
@@ -16,15 +16,12 @@
     <script src="{{ url }}"></script>
     {% endfor %}
 
+    {% load compressed %}
     {# static files #}
-    {% for url in suite.static_files %}
-    <script src="{{ STATIC_URL }}{{ url }}"></script>
-    {% endfor %}
+    {% compressed_js 'application' %}
 
     {# spec files #}
-    {% for file in files %}
-    <script src="{% url jasmine_test file %}"></script>
-    {% endfor %}
+    {% compressed_js 'spec' %}
 
 </head>
 <body>
diff --git a/templates/main.html b/templates/main.html
index 33ca0b85eb..e5626148fd 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -117,10 +117,6 @@
   <script type="text/javascript" src="${static.url('js/schematic.js')}"></script>
   <script type="text/javascript" src="${static.url('js/cktsim.js')}"></script>
   <script type="text/javascript" src="${static.url('js/jquery.scrollTo-1.4.2-min.js')}"></script>
-  <script type="text/javascript">
-    document.write('\x3Cscript type="text/javascript" src="' +
-        document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
-  </script>
   <%block name="js_extra"/>
 </body>
 </html>

From 6d835348630b16925e05655aa6c40669e75364f3 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 30 May 2012 16:26:36 -0400
Subject: [PATCH 36/57] Fix bug on flashing speed selector

---
 .../spec/modules/video/video_speed_control_spec.coffee    | 8 ++++----
 .../coffee/src/modules/video/video_speed_control.coffee   | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/static/coffee/spec/modules/video/video_speed_control_spec.coffee b/static/coffee/spec/modules/video/video_speed_control_spec.coffee
index 2aa342f8c2..9d52ac9b0d 100644
--- a/static/coffee/spec/modules/video/video_speed_control_spec.coffee
+++ b/static/coffee/spec/modules/video/video_speed_control_spec.coffee
@@ -46,17 +46,17 @@ describe 'VideoSpeedControl', ->
         @speedControl = new VideoSpeedControl @player, @video.speeds
 
       it 'open the speed toggle on hover', ->
-        $('.speeds').mouseover()
+        $('.speeds').mouseenter()
         expect($('.speeds')).toHaveClass 'open'
-        $('.speeds').mouseout()
+        $('.speeds').mouseleave()
         expect($('.speeds')).not.toHaveClass 'open'
 
       it 'close the speed toggle on mouse out', ->
-        $('.speeds').mouseover().mouseout()
+        $('.speeds').mouseenter().mouseleave()
         expect($('.speeds')).not.toHaveClass 'open'
 
       it 'close the speed toggle on click', ->
-        $('.speeds').mouseover().click()
+        $('.speeds').mouseenter().click()
         expect($('.speeds')).not.toHaveClass 'open'
 
   describe 'changeVideoSpeed', ->
diff --git a/static/coffee/src/modules/video/video_speed_control.coffee b/static/coffee/src/modules/video/video_speed_control.coffee
index 3bb1ed3b7a..203e3677a4 100644
--- a/static/coffee/src/modules/video/video_speed_control.coffee
+++ b/static/coffee/src/modules/video/video_speed_control.coffee
@@ -12,8 +12,10 @@ class @VideoSpeedControl
     if onTouchBasedDevice()
       @$('.speeds').click -> $(this).toggleClass('open')
     else
-      @$('.speeds').mouseover -> $(this).addClass('open')
-      @$('.speeds').mouseout -> $(this).removeClass('open')
+      @$('.speeds').mouseenter ->
+        $(this).addClass('open')
+      @$('.speeds').mouseleave ->
+        $(this).removeClass('open')
       @$('.speeds').click (event) ->
         event.preventDefault()
         $(this).removeClass('open')

From 0baa6293b55d7ca2a08e87dde289455ace06fa4c Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Wed, 30 May 2012 17:33:28 -0400
Subject: [PATCH 37/57] Fix some failing spec after sequence module change

---
 static/coffee/spec/helper.coffee                |  2 +-
 static/coffee/spec/modules/sequence_spec.coffee | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/static/coffee/spec/helper.coffee b/static/coffee/spec/helper.coffee
index c81cb83405..34e03e9d32 100644
--- a/static/coffee/spec/helper.coffee
+++ b/static/coffee/spec/helper.coffee
@@ -25,7 +25,7 @@ jasmine.stubRequests = ->
     else if match = settings.url.match /static\/subs\/(.+)\.srt\.sjson/
       settings.success jasmine.stubbedCaption
     else if settings.url == '/calculate' ||
-      settings.url == '/6002x/modx/sequential/1/goto_position' ||
+      settings.url == '/6002x/modx/sequence/1/goto_position' ||
       settings.url.match(/event$/) ||
       settings.url.match(/6002x\/modx\/problem\/.+\/problem_(check|reset|show|save)$/)
       # do nothing
diff --git a/static/coffee/spec/modules/sequence_spec.coffee b/static/coffee/spec/modules/sequence_spec.coffee
index 87cd2b54ed..6ff79c1805 100644
--- a/static/coffee/spec/modules/sequence_spec.coffee
+++ b/static/coffee/spec/modules/sequence_spec.coffee
@@ -9,7 +9,7 @@ describe 'Sequence', ->
 
   describe 'constructor', ->
     beforeEach ->
-      @sequence = new Sequence '1', @items, 1
+      @sequence = new Sequence '1', @items, 'sequence', 1
 
     it 'set the element', ->
       expect(@sequence.element).toEqual $('#sequence_1')
@@ -32,7 +32,7 @@ describe 'Sequence', ->
 
   describe 'toggleArrows', ->
     beforeEach ->
-      @sequence = new Sequence '1', @items, 1
+      @sequence = new Sequence '1', @items, 'sequence', 1
 
     describe 'when the first tab is active', ->
       beforeEach ->
@@ -74,7 +74,7 @@ describe 'Sequence', ->
   describe 'render', ->
     beforeEach ->
       spyOn $, 'postWithPrefix'
-      @sequence = new Sequence '1', @items
+      @sequence = new Sequence '1', @items, 'sequence'
       spyOnEvent @sequence.element, 'contentChanged'
 
     describe 'with a different position than the current one', ->
@@ -94,7 +94,7 @@ describe 'Sequence', ->
           expect($('[data-element="2"]')).toHaveClass 'seq_video_visited'
 
         it 'save the new position', ->
-          expect($.postWithPrefix).toHaveBeenCalledWith '/modx/sequential/1/goto_position', position: 1
+          expect($.postWithPrefix).toHaveBeenCalledWith '/modx/sequence/1/goto_position', position: 1
 
       it 'mark new tab as active', ->
         expect($('[data-element="1"]')).toHaveClass 'seq_video_active'
@@ -117,7 +117,7 @@ describe 'Sequence', ->
   describe 'goto', ->
     beforeEach ->
       jasmine.stubRequests()
-      @sequence = new Sequence '1', @items, 2
+      @sequence = new Sequence '1', @items, 'sequence', 2
       $('[data-element="3"]').click()
 
     it 'log the sequence goto event', ->
@@ -129,7 +129,7 @@ describe 'Sequence', ->
   describe 'next', ->
     beforeEach ->
       jasmine.stubRequests()
-      @sequence = new Sequence '1', @items, 2
+      @sequence = new Sequence '1', @items, 'sequence', 2
       $('.sequence-nav-buttons .next a').click()
 
     it 'log the next sequence event', ->
@@ -141,7 +141,7 @@ describe 'Sequence', ->
   describe 'previous', ->
     beforeEach ->
       jasmine.stubRequests()
-      @sequence = new Sequence '1', @items, 2
+      @sequence = new Sequence '1', @items, 'sequence', 2
       $('.sequence-nav-buttons .prev a').click()
 
     it 'log the previous sequence event', ->

From 92971127b3ac077a0f39b0529c731de67a4ad53b Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 31 May 2012 13:22:47 -0400
Subject: [PATCH 38/57] Minor code style and assets fix

* Change looping code style in seq_module
* Clone and keep the latest version of jasmine-jquery locally
* Use django-pipeline asset tags
---
 djangoapps/courseware/modules/seq_module.py |   4 +-
 static/js/jasmine-jquery.js                 | 315 ++++++++++++++++++++
 templates/jasmine/base.html                 |  11 +-
 3 files changed, 323 insertions(+), 7 deletions(-)
 create mode 100644 static/js/jasmine-jquery.js

diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index a9c6138cc9..063c37e5b3 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -56,8 +56,8 @@ class Module(XModule):
 
         self.contents = [j(self.render_function(e)) for e in self.xmltree]
 
-        for i in range(len(self.contents)):
-            self.contents[i]['title'] = titles[i]
+        for contents, title in zip(self.contents, titles):
+            contents['title'] = title
 
         for (content, element_class) in zip(self.contents, child_classes):
             new_class = 'other'
diff --git a/static/js/jasmine-jquery.js b/static/js/jasmine-jquery.js
new file mode 100644
index 0000000000..d516eb1080
--- /dev/null
+++ b/static/js/jasmine-jquery.js
@@ -0,0 +1,315 @@
+var readFixtures = function() {
+  return jasmine.getFixtures().proxyCallTo_('read', arguments);
+};
+
+var preloadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('preload', arguments);
+};
+
+var loadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('load', arguments);
+};
+
+var setFixtures = function(html) {
+  jasmine.getFixtures().set(html);
+};
+
+var sandbox = function(attributes) {
+  return jasmine.getFixtures().sandbox(attributes);
+};
+
+var spyOnEvent = function(selector, eventName) {
+  jasmine.JQuery.events.spyOn(selector, eventName);
+};
+
+jasmine.getFixtures = function() {
+  return jasmine.currentFixtures_ = jasmine.currentFixtures_ || new jasmine.Fixtures();
+};
+
+jasmine.Fixtures = function() {
+  this.containerId = 'jasmine-fixtures';
+  this.fixturesCache_ = {};
+  this.fixturesPath = 'spec/javascripts/fixtures';
+};
+
+jasmine.Fixtures.prototype.set = function(html) {
+  this.cleanUp();
+  this.createContainer_(html);
+};
+
+jasmine.Fixtures.prototype.preload = function() {
+  this.read.apply(this, arguments);
+};
+
+jasmine.Fixtures.prototype.load = function() {
+  this.cleanUp();
+  this.createContainer_(this.read.apply(this, arguments));
+};
+
+jasmine.Fixtures.prototype.read = function() {
+  var htmlChunks = [];
+
+  var fixtureUrls = arguments;
+  for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
+    htmlChunks.push(this.getFixtureHtml_(fixtureUrls[urlIndex]));
+  }
+
+  return htmlChunks.join('');
+};
+
+jasmine.Fixtures.prototype.clearCache = function() {
+  this.fixturesCache_ = {};
+};
+
+jasmine.Fixtures.prototype.cleanUp = function() {
+  jQuery('#' + this.containerId).remove();
+};
+
+jasmine.Fixtures.prototype.sandbox = function(attributes) {
+  var attributesToSet = attributes || {};
+  return jQuery('<div id="sandbox" />').attr(attributesToSet);
+};
+
+jasmine.Fixtures.prototype.createContainer_ = function(html) {
+  var container;
+  if(html instanceof jQuery) {
+    container = jQuery('<div id="' + this.containerId + '" />');
+    container.html(html);
+  } else {
+    container = '<div id="' + this.containerId + '">' + html + '</div>'
+  }
+  jQuery('body').append(container);
+};
+
+jasmine.Fixtures.prototype.getFixtureHtml_ = function(url) {
+  if (typeof this.fixturesCache_[url] == 'undefined') {
+    this.loadFixtureIntoCache_(url);
+  }
+  return this.fixturesCache_[url];
+};
+
+jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function(relativeUrl) {
+  var url = this.makeFixtureUrl_(relativeUrl);
+  var request = new XMLHttpRequest();
+  request.open("GET", url + "?" + new Date().getTime(), false);
+  request.send(null);
+  this.fixturesCache_[relativeUrl] = request.responseText;
+};
+
+jasmine.Fixtures.prototype.makeFixtureUrl_ = function(relativeUrl){
+  return this.fixturesPath.match('/$') ? this.fixturesPath + relativeUrl : this.fixturesPath + '/' + relativeUrl;
+};
+
+jasmine.Fixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) {
+  return this[methodName].apply(this, passedArguments);
+};
+
+
+jasmine.JQuery = function() {};
+
+jasmine.JQuery.browserTagCaseIndependentHtml = function(html) {
+  return jQuery('<div/>').append(html).html();
+};
+
+jasmine.JQuery.elementToString = function(element) {
+  var sample = $(element).get()[0]
+  if (sample == undefined || sample.cloneNode)
+    return jQuery('<div />').append($(element).clone()).html();
+  else
+    return element.toString();
+};
+
+jasmine.JQuery.matchersClass = {};
+
+(function(namespace) {
+  var data = {
+    spiedEvents: {},
+    handlers:    []
+  };
+
+  namespace.events = {
+    spyOn: function(selector, eventName) {
+      var handler = function(e) {
+        data.spiedEvents[[selector, eventName]] = e;
+      };
+      jQuery(selector).bind(eventName, handler);
+      data.handlers.push(handler);
+    },
+
+    wasTriggered: function(selector, eventName) {
+      return !!(data.spiedEvents[[selector, eventName]]);
+    },
+
+    wasPrevented: function(selector, eventName) {
+      return data.spiedEvents[[selector, eventName]].isDefaultPrevented();
+    },
+
+    cleanUp: function() {
+      data.spiedEvents = {};
+      data.handlers    = [];
+    }
+  }
+})(jasmine.JQuery);
+
+(function(){
+  var jQueryMatchers = {
+    toHaveClass: function(className) {
+      return this.actual.hasClass(className);
+    },
+
+    toBeVisible: function() {
+      return this.actual.is(':visible');
+    },
+
+    toBeHidden: function() {
+      return this.actual.is(':hidden');
+    },
+
+    toBeSelected: function() {
+      return this.actual.is(':selected');
+    },
+
+    toBeChecked: function() {
+      return this.actual.is(':checked');
+    },
+
+    toBeEmpty: function() {
+      return this.actual.is(':empty');
+    },
+
+    toExist: function() {
+      return $(document).find(this.actual).length;
+    },
+
+    toHaveAttr: function(attributeName, expectedAttributeValue) {
+      return hasProperty(this.actual.attr(attributeName), expectedAttributeValue);
+    },
+
+    toHaveProp: function(propertyName, expectedPropertyValue) {
+      return hasProperty(this.actual.prop(propertyName), expectedPropertyValue);
+    },
+
+    toHaveId: function(id) {
+      return this.actual.attr('id') == id;
+    },
+
+    toHaveHtml: function(html) {
+      return this.actual.html() == jasmine.JQuery.browserTagCaseIndependentHtml(html);
+    },
+
+    toHaveText: function(text) {
+      var trimmedText = $.trim(this.actual.text());
+      if (text && jQuery.isFunction(text.test)) {
+        return text.test(trimmedText);
+      } else {
+        return trimmedText == text;
+      }
+    },
+
+    toHaveValue: function(value) {
+      return this.actual.val() == value;
+    },
+
+    toHaveData: function(key, expectedValue) {
+      return hasProperty(this.actual.data(key), expectedValue);
+    },
+
+    toBe: function(selector) {
+      return this.actual.is(selector);
+    },
+
+    toContain: function(selector) {
+      return this.actual.find(selector).length;
+    },
+
+    toBeDisabled: function(selector){
+      return this.actual.is(':disabled');
+    },
+
+    toBeFocused: function(selector) {
+      return this.actual.is(':focus');
+    },
+
+    // tests the existence of a specific event binding
+    toHandle: function(eventName) {
+      var events = this.actual.data("events");
+      return events && events[eventName].length > 0;
+    },
+
+    // tests the existence of a specific event binding + handler
+    toHandleWith: function(eventName, eventHandler) {
+      var stack = this.actual.data("events")[eventName];
+      var i;
+      for (i = 0; i < stack.length; i++) {
+        if (stack[i].handler == eventHandler) {
+          return true;
+        }
+      }
+      return false;
+    }
+  };
+
+  var hasProperty = function(actualValue, expectedValue) {
+    if (expectedValue === undefined) {
+      return actualValue !== undefined;
+    }
+    return actualValue == expectedValue;
+  };
+
+  var bindMatcher = function(methodName) {
+    var builtInMatcher = jasmine.Matchers.prototype[methodName];
+
+    jasmine.JQuery.matchersClass[methodName] = function() {
+      if (this.actual
+          && (this.actual instanceof jQuery
+             || jasmine.isDomNode(this.actual))) {
+          this.actual = $(this.actual);
+          var result = jQueryMatchers[methodName].apply(this, arguments)
+          if (this.actual.get && !$.isWindow(this.actual.get()[0])) 
+            this.actual = jasmine.JQuery.elementToString(this.actual)
+        return result;
+      }
+
+      if (builtInMatcher) {
+        return builtInMatcher.apply(this, arguments);
+      }
+
+      return false;
+    };
+  };
+
+  for(var methodName in jQueryMatchers) {
+    bindMatcher(methodName);
+  }
+})();
+
+beforeEach(function() {
+  this.addMatchers(jasmine.JQuery.matchersClass);
+  this.addMatchers({
+    toHaveBeenTriggeredOn: function(selector) {
+      this.message = function() {
+        return [
+          "Expected event " + this.actual + " to have been triggered on " + selector,
+          "Expected event " + this.actual + " not to have been triggered on " + selector
+        ];
+      };
+      return jasmine.JQuery.events.wasTriggered($(selector), this.actual);
+    }
+  });
+  this.addMatchers({
+    toHaveBeenPreventedOn: function(selector) {
+      this.message = function() {
+        return [
+          "Expected event " + this.actual + " to have been prevented on " + selector,
+          "Expected event " + this.actual + " not to have been prevented on " + selector
+        ];
+      };
+      return jasmine.JQuery.events.wasPrevented(selector, this.actual);
+    }
+  });
+});
+
+afterEach(function() {
+  jasmine.getFixtures().cleanUp();
+  jasmine.JQuery.events.cleanUp();
+});
diff --git a/templates/jasmine/base.html b/templates/jasmine/base.html
index 68329b2756..33d26d47af 100644
--- a/templates/jasmine/base.html
+++ b/templates/jasmine/base.html
@@ -3,13 +3,14 @@
 <html>
 <head>
     <title>Jasmine Spec Runner</title>
-    <link rel="stylesheet" href="{{ STATIC_URL }}jasmine-latest/jasmine.css"
-        media="screen">
+
+    {% load staticfiles %}
+    <link rel="stylesheet" href="{% static 'jasmine-latest/jasmine.css' %}" media="screen">
 
     {# core files #}
-    <script  src="{{ STATIC_URL }}jasmine-latest/jasmine.js"></script>
-    <script  src="{{ STATIC_URL }}jasmine-latest/jasmine-html.js"></script>
-    <script  src="https://raw.github.com/sikachu/jasmine-jquery/master/lib/jasmine-jquery.js"></script>
+    <script  src="{% static 'jasmine-latest/jasmine.js' %}"></script>
+    <script  src="{% static 'jasmine-latest/jasmine-html.js' %}"></script>
+    <script  src="{% static 'js/jasmine-jquery.js' %}"></script>
 
     {# source files #}
     {% for url in suite.js_files %}

From 34dc32e5aaecd73f151a0cc65d36baff95df3cf4 Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Thu, 31 May 2012 13:44:45 -0400
Subject: [PATCH 39/57] Unstable state; need to merge from master

---
 djangoapps/courseware/module_render.py        | 90 +++++++++++++++++--
 djangoapps/courseware/modules/capa_module.py  |  3 +
 djangoapps/courseware/modules/html_module.py  |  3 +
 .../courseware/modules/schematic_module.py    |  3 +
 djangoapps/courseware/modules/seq_module.py   |  6 +-
 .../courseware/modules/template_module.py     |  3 +
 .../courseware/modules/vertical_module.py     |  3 +
 djangoapps/courseware/modules/video_module.py |  3 +
 djangoapps/courseware/modules/x_module.py     | 49 +++++++---
 djangoapps/courseware/views.py                | 74 +--------------
 run.sh                                        |  2 +-
 11 files changed, 147 insertions(+), 92 deletions(-)

diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index 278d19fd2c..ed3429d747 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -78,9 +78,8 @@ def grade_histogram(module_id):
         return []
     return grades
 
-def render_x_module(user, request, xml_module, module_object_preload):
-    ''' Generic module for extensions. This renders to HTML. '''
-    # Check if problem has an instance in DB
+
+def get_module(user, request, xml_module, module_object_preload):
     module_type=xml_module.tag
     module_class=courseware.modules.get_module_class(module_type)
     module_id=xml_module.get('id') #module_class.id_attribute) or "" 
@@ -128,6 +127,15 @@ def render_x_module(user, request, xml_module, module_object_preload):
         smod.save()
         module_object_preload.append(smod)
 
+    return smod
+
+def render_x_module(user, request, xml_module, module_object_preload):
+    ''' Generic module for extensions. This renders to HTML. '''
+    if module==None :
+        return {"content":""}
+
+    smod = get_module(user, request, xml_module, module_object_preload)
+
     # Grab content
     content = instance.get_html()
     init_js = instance.get_init_js()
@@ -153,6 +161,78 @@ def render_x_module(user, request, xml_module, module_object_preload):
 
 def render_module(user, request, module, module_object_preload):
     ''' Generic dispatch for internal modules. '''
-    if module==None :
-        return {"content":""}
     return render_x_module(user, request, module, module_object_preload)
+
+
+def modx_dispatch(request, module=None, dispatch=None, id=None):
+    ''' Generic view for extensions. '''
+    if not request.user.is_authenticated():
+        return redirect('/')
+
+    # Grab the student information for the module from the database
+    s = StudentModule.objects.filter(student=request.user, 
+                                     module_id=id)
+    #s = StudentModule.get_with_caching(request.user, id)
+    if len(s) == 0 or s is None:
+        log.debug("Couldnt find module for user and id " + str(module) + " " + str(request.user) + " "+ str(id))
+        raise Http404
+    s = s[0]
+
+    oldgrade = s.grade
+    oldstate = s.state
+
+    dispatch=dispatch.split('?')[0]
+
+    ajax_url = settings.MITX_ROOT_URL + '/modx/'+module+'/'+id+'/'
+
+    # get coursename if stored
+    coursename = multicourse_settings.get_coursename_from_request(request)
+
+    if coursename and settings.ENABLE_MULTICOURSE:
+        xp = multicourse_settings.get_course_xmlpath(coursename)	# path to XML for the course
+        data_root = settings.DATA_DIR + xp
+    else:
+        data_root = settings.DATA_DIR
+
+    # Grab the XML corresponding to the request from course.xml
+    try:
+        xml = content_parser.module_xml(request.user, module, 'id', id, coursename)
+    except:
+        log.exception("Unable to load module during ajax call")
+        if accepts(request, 'text/html'):
+            return render_to_response("module-error.html", {})
+        else:
+            response = HttpResponse(json.dumps({'success': "We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible"}))
+        return response
+
+    # Create the module
+    system = I4xSystem(track_function = make_track_function(request), 
+                       render_function = None, 
+                       ajax_url = ajax_url,
+                       filestore = OSFS(data_root),
+                       )
+
+    try:
+        instance=courseware.modules.get_module_class(module)(system, 
+                                                             xml, 
+                                                             id, 
+                                                             state=oldstate)
+    except:
+        log.exception("Unable to load module instance during ajax call")
+        if accepts(request, 'text/html'):
+            return render_to_response("module-error.html", {})
+        else:
+            response = HttpResponse(json.dumps({'success': "We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible"}))
+        return response
+
+    # Let the module handle the AJAX
+    ajax_return=instance.handle_ajax(dispatch, request.POST)
+    # Save the state back to the database
+    s.state=instance.get_state()
+    if instance.get_score(): 
+        s.grade=instance.get_score()['score']
+    if s.grade != oldgrade or s.state != oldstate:
+        s.save()
+    # Return whatever the module wanted to return to the client/caller
+    return HttpResponse(ajax_return)
+
diff --git a/djangoapps/courseware/modules/capa_module.py b/djangoapps/courseware/modules/capa_module.py
index 7d42cfb250..058b5f5454 100644
--- a/djangoapps/courseware/modules/capa_module.py
+++ b/djangoapps/courseware/modules/capa_module.py
@@ -31,6 +31,9 @@ class ComplexEncoder(json.JSONEncoder):
             return "{real:.7g}{imag:+.7g}*j".format(real = obj.real,imag = obj.imag)
         return json.JSONEncoder.default(self, obj)
 
+class ModuleDescriptor(XModuleDescriptor):
+    pass
+
 class Module(XModule):
     ''' Interface between capa_problem and x_module. Originally a hack
     meant to be refactored out, but it seems to be serving a useful
diff --git a/djangoapps/courseware/modules/html_module.py b/djangoapps/courseware/modules/html_module.py
index 77bcbb4bbc..3b62df0390 100644
--- a/djangoapps/courseware/modules/html_module.py
+++ b/djangoapps/courseware/modules/html_module.py
@@ -5,6 +5,9 @@ from mitxmako.shortcuts import render_to_response, render_to_string
 from x_module import XModule
 from lxml import etree
 
+class ModuleDescriptor(XModuleDescriptor):
+    pass
+
 class Module(XModule):
     id_attribute = 'filename'
 
diff --git a/djangoapps/courseware/modules/schematic_module.py b/djangoapps/courseware/modules/schematic_module.py
index 5fef265e01..1643737e4a 100644
--- a/djangoapps/courseware/modules/schematic_module.py
+++ b/djangoapps/courseware/modules/schematic_module.py
@@ -6,6 +6,9 @@ from mitxmako.shortcuts import render_to_response, render_to_string
 
 from x_module import XModule
 
+class ModuleDescriptor(XModuleDescriptor):
+    pass
+
 class Module(XModule):
     id_attribute = 'id'
 
diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index af41d0e8da..42508295db 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -10,6 +10,9 @@ from x_module import XModule
 # OBSOLETE: This obsoletes 'type'
 class_priority = ['video', 'problem']
 
+class ModuleDescriptor(XModuleDescriptor):
+    pass
+
 class Module(XModule):
     ''' Layout module which lays out content in a temporal sequence
     '''
@@ -66,8 +69,7 @@ class Module(XModule):
         self.titles = json.dumps(["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") != None]) \
                            for e in self.xmltree])
 
-        self.contents = [j(self.render_function(e)) \
-                             for e in self.xmltree]
+        self.contents = self.rendered_children(self)
 
         print self.titles
 
diff --git a/djangoapps/courseware/modules/template_module.py b/djangoapps/courseware/modules/template_module.py
index a8899f985c..c779691cc1 100644
--- a/djangoapps/courseware/modules/template_module.py
+++ b/djangoapps/courseware/modules/template_module.py
@@ -6,6 +6,9 @@ from mitxmako.shortcuts import render_to_response, render_to_string
 from x_module import XModule
 from lxml import etree
 
+class ModuleDescriptor(XModuleDescriptor):
+    pass
+
 class Module(XModule):
     def get_state(self):
         return json.dumps({ })
diff --git a/djangoapps/courseware/modules/vertical_module.py b/djangoapps/courseware/modules/vertical_module.py
index e57a58e33e..519ed755ea 100644
--- a/djangoapps/courseware/modules/vertical_module.py
+++ b/djangoapps/courseware/modules/vertical_module.py
@@ -5,6 +5,9 @@ from mitxmako.shortcuts import render_to_response, render_to_string
 from x_module import XModule
 from lxml import etree
 
+class ModuleDescriptor(XModuleDescriptor):
+    pass
+
 class Module(XModule):
     id_attribute = 'id'
 
diff --git a/djangoapps/courseware/modules/video_module.py b/djangoapps/courseware/modules/video_module.py
index c678838f2b..12136cf7f2 100644
--- a/djangoapps/courseware/modules/video_module.py
+++ b/djangoapps/courseware/modules/video_module.py
@@ -9,6 +9,9 @@ from x_module import XModule
 
 log = logging.getLogger("mitx.courseware.modules")
 
+class ModuleDescriptor(XModuleDescriptor):
+    pass
+
 class Module(XModule):
     id_attribute = 'youtube'
     video_time = 0
diff --git a/djangoapps/courseware/modules/x_module.py b/djangoapps/courseware/modules/x_module.py
index b475fd0280..ae6822da1d 100644
--- a/djangoapps/courseware/modules/x_module.py
+++ b/djangoapps/courseware/modules/x_module.py
@@ -24,6 +24,21 @@ class XModule(object):
             or a CAPA input type '''
         return ['xmodule']
 
+    def get_name():
+        name = self.__xmltree.get(name)
+        if name: 
+            return name
+        else: 
+            raise "We should iterate through children and find a default name"
+
+    def rendered_children(self):
+        '''
+        Render all children. 
+        This really ought to return a list of xmodules, instead of dictionaries
+        '''
+        children = [render_function(e) for e in self.__xmltree]
+        return children            
+
     def __init__(self, system = None, xml = None, item_id = None, 
                  json = None, track_url=None, state=None):
         ''' In most cases, you must pass state or xml'''
@@ -38,6 +53,8 @@ class XModule(object):
         self.json = json
         self.item_id = item_id
         self.state = state
+        
+        self.__xmltree = etree.fromstring(xml) # PRIVATE
 
         if system: 
             ## These are temporary; we really should go 
@@ -102,14 +119,24 @@ class XModule(object):
             get is a dictionary-like object ''' 
         return ""
 
-    ### Functions used in the CMS
+
+class XModuleDescriptor(object):
+    def __init__(self, xml = None, json = None):
+        if not xml and not json:
+            raise "XModuleDescriptor must be initalized with XML or JSON"
+        if not xml:
+            raise NotImplementedError("Code does not have support for JSON yet")
+        
+        self.xml = xml
+        self.json = json
+
     def get_xml(self):
         ''' For conversions between JSON and legacy XML representations.
         '''
         if self.xml: 
             return self.xml
         else: 
-            raise NotImplementedError
+            raise NotImplementedError("JSON->XML Translation not implemented")
 
     def get_json(self):
         ''' For conversions between JSON and legacy XML representations.
@@ -118,14 +145,14 @@ class XModule(object):
             raise NotImplementedError
             return self.json # TODO: Return context as well -- files, etc. 
         else: 
-            raise NotImplementedError
+            raise NotImplementedError("XML->JSON Translation not implemented")
 
-    def handle_cms_json(self):
-        raise NotImplementedError
+    #def handle_cms_json(self):
+    #    raise NotImplementedError
 
-    def render(self, size):
-        ''' Size: [thumbnail, small, full] 
-        Small ==> what we drag around
-        Full ==> what we edit
-        '''
-        raise NotImplementedError
+    #def render(self, size):
+    #    ''' Size: [thumbnail, small, full] 
+    #    Small ==> what we drag around
+    #    Full ==> what we edit
+    #    '''
+    #    raise NotImplementedError
diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index 014f759ed1..228a33461b 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -16,7 +16,7 @@ from django.views.decorators.cache import cache_control
 
 from lxml import etree
 
-from module_render import render_module, make_track_function, I4xSystem
+from module_render import render_module, make_track_function, I4xSystem, modx_dispatch
 from models import StudentModule
 from student.models import UserProfile
 from util.views import accepts
@@ -237,78 +237,6 @@ def index(request, course=None, chapter="Using the System", section="Hints"):
     return result
 
 
-def modx_dispatch(request, module=None, dispatch=None, id=None):
-    ''' Generic view for extensions. '''
-    if not request.user.is_authenticated():
-        return redirect('/')
-
-    # Grab the student information for the module from the database
-    s = StudentModule.objects.filter(student=request.user, 
-                                     module_id=id)
-    #s = StudentModule.get_with_caching(request.user, id)
-    if len(s) == 0 or s is None:
-        log.debug("Couldnt find module for user and id " + str(module) + " " + str(request.user) + " "+ str(id))
-        raise Http404
-    s = s[0]
-
-    oldgrade = s.grade
-    oldstate = s.state
-
-    dispatch=dispatch.split('?')[0]
-
-    ajax_url = settings.MITX_ROOT_URL + '/modx/'+module+'/'+id+'/'
-
-    # get coursename if stored
-    coursename = multicourse_settings.get_coursename_from_request(request)
-
-    if coursename and settings.ENABLE_MULTICOURSE:
-        xp = multicourse_settings.get_course_xmlpath(coursename)	# path to XML for the course
-        data_root = settings.DATA_DIR + xp
-    else:
-        data_root = settings.DATA_DIR
-
-    # Grab the XML corresponding to the request from course.xml
-    try:
-        xml = content_parser.module_xml(request.user, module, 'id', id, coursename)
-    except:
-        log.exception("Unable to load module during ajax call")
-        if accepts(request, 'text/html'):
-            return render_to_response("module-error.html", {})
-        else:
-            response = HttpResponse(json.dumps({'success': "We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible"}))
-        return response
-
-    # Create the module
-    system = I4xSystem(track_function = make_track_function(request), 
-                       render_function = None, 
-                       ajax_url = ajax_url,
-                       filestore = OSFS(data_root),
-                       )
-
-    try:
-        instance=courseware.modules.get_module_class(module)(system, 
-                                                             xml, 
-                                                             id, 
-                                                             state=oldstate)
-    except:
-        log.exception("Unable to load module instance during ajax call")
-        if accepts(request, 'text/html'):
-            return render_to_response("module-error.html", {})
-        else:
-            response = HttpResponse(json.dumps({'success': "We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible"}))
-        return response
-
-    # Let the module handle the AJAX
-    ajax_return=instance.handle_ajax(dispatch, request.POST)
-    # Save the state back to the database
-    s.state=instance.get_state()
-    if instance.get_score(): 
-        s.grade=instance.get_score()['score']
-    if s.grade != oldgrade or s.state != oldstate:
-        s.save()
-    # Return whatever the module wanted to return to the client/caller
-    return HttpResponse(ajax_return)
-
 def quickedit(request, id=None):
     '''
     quick-edit capa problem.
diff --git a/run.sh b/run.sh
index d63ed291f0..0c65a4a72c 100755
--- a/run.sh
+++ b/run.sh
@@ -1 +1 @@
-django-admin.py runserver --settings=envs.dev --pythonpath=. 
+django-admin runserver --settings=envs.dev --pythonpath=. 

From a385dc4d2e5a53ecb79ad4b4bf612745a35d09d3 Mon Sep 17 00:00:00 2001
From: John Jarvis <jrjarvis@mitx.mit.edu>
Date: Thu, 31 May 2012 14:34:50 -0400
Subject: [PATCH 40/57] added install.txt, updated env script for better error
 handling

---
 install.txt | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 install.txt

diff --git a/install.txt b/install.txt
new file mode 100644
index 0000000000..70c8655306
--- /dev/null
+++ b/install.txt
@@ -0,0 +1,74 @@
+This document describes how to set up the MITx development environment
+for both Linux (Ubuntu) and MacOS (OSX Lion). 
+
+There is also a script "create-dev-env.sh" that automates these steps.
+
+1) Make an mitx_all directory and clone the repos
+  (download and install git and mercurial if you don't have them already)
+
+    mkdir ~/mitx_all
+    cd ~/mitx_all
+    git clone git@github.com:MITx/mitx.git
+    git clone git@github.com:MITx/askbot-devel 
+    hg clone ssh://hg-content@gp.mitx.mit.edu/data 
+
+2) Install OSX dependencies (Mac users only)
+
+    a) Install the brew utility if necessary
+    /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)"
+
+    b) Install the brew package list
+    cat ~/mitx_all/mitx/brew-formulas.txt | xargs brew install
+
+    c) Install python pip if necessary
+    sudo easy_install pip  
+
+    d) Install python virtualenv if necessary
+    sudo pip install virtualenv virtualenvwrapper
+
+3) Install Ubuntu dependencies (Linux users only)
+    
+    sudo apt-get install curl python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor coffeescript
+
+
+4) Install rvm, ruby, and libraries
+
+    echo "export rvm_path=$HOME/mitx_all/ruby" > $HOME/.rvmrc
+    curl -sL get.rvm.io | bash -s stable
+    source ~/mitx_all/ruby/scripts/rvm
+    rvm install 1.9.3
+    gem install bundler
+    cd ~/mitx_all/mitx
+    bundle install
+   
+5) Install python libraries
+    
+    source ~/mitx_all/python/bin/activate
+    cd ~/mitx_all
+    pip install -r askbot-devel/askbot_requirements.txt 
+    pip install -r askbot-devel/askbot_requirements_dev.txt 
+    pip install -r mitx/pre-requirements.txt 
+    pip install -r mitx/requirements.txt 
+
+6) Create log and db dirs
+
+    mkdir ~/mitx_all/log
+    mkdir ~/mitx_all/db
+
+7) Start the dev server
+
+   To start using Django you will need
+   to activate the local Python and Ruby
+   environment:
+
+        $ source ~/mitx_all/ruby/scripts/rvm
+        $ source ~/mitx_all/python/bin/activate
+  
+   To initialize and start a local instance of Django:
+        
+        $ cd ~/mitx_all/mitx
+        $ django-admin.py syncdb --settings=envs.dev --pythonpath=.
+        $ django-admin.py migrate --settings=envs.dev --pythonpath=.
+        $ django-admin.py runserver --settings=envs.dev --pythonpath=.   
+ 
+

From 178cdc877e3d83b107d11f72956761c42995096d Mon Sep 17 00:00:00 2001
From: John Jarvis <jrjarvis@mitx.mit.edu>
Date: Thu, 31 May 2012 14:36:23 -0400
Subject: [PATCH 41/57] removing mercurial from brew install list

---
 brew-formulas.txt |  1 -
 create-dev-env.sh | 76 +++++++++++++++++++++++++++++++++--------------
 2 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/brew-formulas.txt b/brew-formulas.txt
index 5f76861eda..61e3d33e3a 100644
--- a/brew-formulas.txt
+++ b/brew-formulas.txt
@@ -3,7 +3,6 @@ sqlite
 gdbm 
 pkg-config 
 gfortran 
-mercurial 
 python 
 yuicompressor 
 node
diff --git a/create-dev-env.sh b/create-dev-env.sh
index 1b3c272bb3..7190d81a73 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -1,6 +1,21 @@
 #!/bin/bash
 set -e
+trap "ouch" ERR
 
+ouch() {
+    printf '\E[31m'
+
+    cat<<EOL
+    
+    !! ERROR !!
+
+    The last command did not complete successfully, 
+    see $LOG for more details or trying running the
+    script again with the -v flag.  
+
+EOL
+
+}
 error() {
       printf '\E[31m'; echo "$@"; printf '\E[0m' 
 }
@@ -31,7 +46,24 @@ info() {
 EO
 }
 
-
+clone_repos() {
+    cd "$BASE"
+    output "Cloning mitx"
+    if [[ -d "$BASE/mitx" ]]; then
+        mv "$BASE/mitx" "${BASE}/mitx.bak.$$"
+    fi
+    git clone git@github.com:MITx/mitx.git >>$LOG 
+    output "Cloning askbot-devel"
+    if [[ -d "$BASE/askbot-devel" ]]; then
+        mv "$BASE/askbot-devel" "${BASE}/askbot-devel.bak.$$"
+    fi
+    git clone git@github.com:MITx/askbot-devel >>$LOG 
+    output "Cloning data"
+    if [[ -d "$BASE/data" ]]; then
+        mv "$BASE/data" "${BASE}/data.bak.$$"
+    fi
+    hg clone ssh://hg-content@gp.mitx.mit.edu/data >>$LOG 
+}
 
 PROG=${0##*/}
 BASE="$HOME/mitx_all"
@@ -40,8 +72,8 @@ RUBY_DIR="$BASE/ruby"
 RUBY_VER="1.9.3"
 NUMPY_VER="1.6.2"
 SCIPY_VER="0.10.1"
+BREW_FILE="$BASE/mitx/brew-formulas.txt"
 LOG="/var/tmp/install.log"
-BREW_PKGS="$BASE/mit/brew-formulas.txt"
 APT_PKGS="curl git mercurial python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor coffeescript"
 
 if [[ $EUID -eq 0 ]]; then
@@ -49,7 +81,6 @@ if [[ $EUID -eq 0 ]]; then
     usage
     exit 1
 fi
-
 ARGS=$(getopt "cvh" "$*")
 if [[ $? != 0 ]]; then
     usage
@@ -121,11 +152,12 @@ case `uname -s` in
                 output "Installing ubuntu requirements"
                 sudo apt-get -y update
                 sudo apt-get -y install $APT_PKGS 
+                clone_repos
                 ;;
             *)
                 error "Unsupported distribution - $distro"
                 exit 1
-                ;;
+               ;;
         esac
         ;;
     Darwin)
@@ -133,9 +165,24 @@ case `uname -s` in
             output "Installing brew"
             /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/master/Library/Contributions/install_homebrew.rb)" 
         } 
+        command -v git &>/dev/null || {
+            output "Installing git"
+            brew install git >> $LOG
+        }
+        command -v hg &>/dev/null || {
+            output "Installaing mercurial"
+            brew install mercurial >> $LOG
+        }
+
+        clone_repos
+
         output "Installing OSX requirements"
+        if [[ ! -r $BREW_FILE ]]; then
+            error "$BREW_FILE does not exist, needed to install brew deps"
+            exit 1
+        fi
         # brew errors if the package is already installed
-        for pkg in $(cat $BREW_PKGS); do
+        for pkg in $(cat $BREW_FILE); do
             grep $pkg <(brew list) &>/dev/null || {
                 output "Installing $pkg"
                 brew install $pkg  >>$LOG 
@@ -156,22 +203,6 @@ case `uname -s` in
         ;;
 esac
 
-cd "$BASE"
-output "Cloning mitx, askbot and data repos"
-if [[ -d "$BASE/mitx" ]]; then
-    mv "$BASE/mitx" "${BASE}/mitx.bak.$$"
-fi
-git clone git@github.com:MITx/mitx.git >>$LOG 
-if [[ -d "$BASE/askbot-devel" ]]; then
-    mv "$BASE/askbot-devel" "${BASE}/askbot-devel.bak.$$"
-fi
-git clone git@github.com:MITx/askbot-devel >>$LOG 
-if [[ -d "$BASE/data" ]]; then
-    mv "$BASE/data" "${BASE}/data.bak.$$"
-fi
-hg clone ssh://hg-content@gp.mitx.mit.edu/data >>$LOG 
-
-
 output "Installing rvm and ruby"
 curl -sL get.rvm.io | bash -s stable
 source $RUBY_DIR/scripts/rvm
@@ -181,7 +212,8 @@ source $PYTHON_DIR/bin/activate
 output "Installing gem bundler"
 gem install bundler
 output "Installing ruby packages"
-cd $BASE/mitx
+# hack :(
+cd $BASE/mitx  || true
 bundle install
 
 cd $BASE

From 6c4a3cf618155ecc18673bb53ddccfb6a81c9297 Mon Sep 17 00:00:00 2001
From: John Jarvis <jrjarvis@mitx.mit.edu>
Date: Thu, 31 May 2012 14:54:38 -0400
Subject: [PATCH 42/57] updating for coffeescript

---
 create-dev-env.sh | 5 +++++
 install.txt       | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/create-dev-env.sh b/create-dev-env.sh
index 7190d81a73..a45fc0dba0 100755
--- a/create-dev-env.sh
+++ b/create-dev-env.sh
@@ -196,6 +196,11 @@ case `uname -s` in
             output "Installing virtualenv"
             sudo pip install virtualenv virtualenvwrapper >> $LOG
         }
+        command -v coffee &>/dev/null || {
+            output "Installing coffee script"
+            curl http://npmjs.org/install.sh | sh
+            npm install -g coffee-script
+        }
         ;;
     *)
         error "Unsupported platform"
diff --git a/install.txt b/install.txt
index 70c8655306..fa82b11a5c 100644
--- a/install.txt
+++ b/install.txt
@@ -26,6 +26,10 @@ There is also a script "create-dev-env.sh" that automates these steps.
     d) Install python virtualenv if necessary
     sudo pip install virtualenv virtualenvwrapper
 
+    e) Install coffee script
+    curl http://npmjs.org/install.sh | sh
+    npm install -g coffee-script
+
 3) Install Ubuntu dependencies (Linux users only)
     
     sudo apt-get install curl python-virtualenv build-essential python-dev gfortran liblapack-dev libfreetype6-dev libpng12-dev libxml2-dev libxslt-dev yui-compressor coffeescript

From 98d8f4b55bb6ca17e0545ce262213f15cff0f2bf Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Thu, 31 May 2012 21:12:08 -0400
Subject: [PATCH 43/57] Unstable commit; syncing computers

---
 djangoapps/courseware/module_render.py            | 6 +++---
 djangoapps/courseware/modules/capa_module.py      | 2 +-
 djangoapps/courseware/modules/html_module.py      | 2 +-
 djangoapps/courseware/modules/schematic_module.py | 2 +-
 djangoapps/courseware/modules/seq_module.py       | 4 ++--
 djangoapps/courseware/modules/template_module.py  | 2 +-
 djangoapps/courseware/modules/vertical_module.py  | 2 +-
 djangoapps/courseware/modules/video_module.py     | 2 +-
 djangoapps/courseware/modules/x_module.py         | 4 +++-
 9 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index 1e12e182cd..e9303bb18b 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -128,14 +128,14 @@ def get_module(user, request, xml_module, module_object_preload):
         smod.save()
         module_object_preload.append(smod)
 
-    return smod
+    return (instance, smod)
 
 def render_x_module(user, request, xml_module, module_object_preload):
     ''' Generic module for extensions. This renders to HTML. '''
-    if module==None :
+    if xml_module==None :
         return {"content":""}
 
-    smod = get_module(user, request, xml_module, module_object_preload)
+    (instance, smod) = get_module(user, request, xml_module, module_object_preload)
 
     # Grab content
     content = instance.get_html()
diff --git a/djangoapps/courseware/modules/capa_module.py b/djangoapps/courseware/modules/capa_module.py
index 3c357ee47e..9e2a62aca0 100644
--- a/djangoapps/courseware/modules/capa_module.py
+++ b/djangoapps/courseware/modules/capa_module.py
@@ -18,7 +18,7 @@ from lxml import etree
 ## TODO: Abstract out from Django
 from mitxmako.shortcuts import render_to_string
 
-from x_module import XModule
+from x_module import XModule, XModuleDescriptor
 from courseware.capa.capa_problem import LoncapaProblem, StudentInputError
 import courseware.content_parser as content_parser
 from multicourse import multicourse_settings
diff --git a/djangoapps/courseware/modules/html_module.py b/djangoapps/courseware/modules/html_module.py
index 3b62df0390..bf60174e18 100644
--- a/djangoapps/courseware/modules/html_module.py
+++ b/djangoapps/courseware/modules/html_module.py
@@ -2,7 +2,7 @@ import json
 
 from mitxmako.shortcuts import render_to_response, render_to_string
 
-from x_module import XModule
+from x_module import XModule, XModuleDescriptor
 from lxml import etree
 
 class ModuleDescriptor(XModuleDescriptor):
diff --git a/djangoapps/courseware/modules/schematic_module.py b/djangoapps/courseware/modules/schematic_module.py
index 1643737e4a..a6459b5e6e 100644
--- a/djangoapps/courseware/modules/schematic_module.py
+++ b/djangoapps/courseware/modules/schematic_module.py
@@ -4,7 +4,7 @@ import json
 from django.conf import settings
 from mitxmako.shortcuts import render_to_response, render_to_string
 
-from x_module import XModule
+from x_module import XModule, XModuleDescriptor
 
 class ModuleDescriptor(XModuleDescriptor):
     pass
diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index 648582a166..f8ab6b9166 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -4,7 +4,7 @@ from lxml import etree
 
 from mitxmako.shortcuts import render_to_string
 
-from x_module import XModule
+from x_module import XModule, XModuleDescriptor
 
 # HACK: This shouldn't be hard-coded to two types
 # OBSOLETE: This obsoletes 'type'
@@ -57,7 +57,7 @@ class Module(XModule):
         titles = ["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") != None]) \
                        for e in self.xmltree]
 
-        self.contents = self.rendered_children(self)
+        self.contents = self.rendered_children()
 
         for contents, title in zip(self.contents, titles):
             contents['title'] = title
diff --git a/djangoapps/courseware/modules/template_module.py b/djangoapps/courseware/modules/template_module.py
index c779691cc1..938b5c4497 100644
--- a/djangoapps/courseware/modules/template_module.py
+++ b/djangoapps/courseware/modules/template_module.py
@@ -3,7 +3,7 @@ import os
 
 from mitxmako.shortcuts import render_to_response, render_to_string
 
-from x_module import XModule
+from x_module import XModule, XModuleDescriptor
 from lxml import etree
 
 class ModuleDescriptor(XModuleDescriptor):
diff --git a/djangoapps/courseware/modules/vertical_module.py b/djangoapps/courseware/modules/vertical_module.py
index 5f208bb796..0819fb9f1b 100644
--- a/djangoapps/courseware/modules/vertical_module.py
+++ b/djangoapps/courseware/modules/vertical_module.py
@@ -2,7 +2,7 @@ import json
 
 from mitxmako.shortcuts import render_to_response, render_to_string
 
-from x_module import XModule
+from x_module import XModule, XModuleDescriptor
 from lxml import etree
 
 class ModuleDescriptor(XModuleDescriptor):
diff --git a/djangoapps/courseware/modules/video_module.py b/djangoapps/courseware/modules/video_module.py
index 0f80a79e41..95c7102fed 100644
--- a/djangoapps/courseware/modules/video_module.py
+++ b/djangoapps/courseware/modules/video_module.py
@@ -5,7 +5,7 @@ from lxml import etree
 
 from mitxmako.shortcuts import render_to_response, render_to_string
 
-from x_module import XModule
+from x_module import XModule, XModuleDescriptor
 
 log = logging.getLogger("mitx.courseware.modules")
 
diff --git a/djangoapps/courseware/modules/x_module.py b/djangoapps/courseware/modules/x_module.py
index e77f4e36f6..93489fab04 100644
--- a/djangoapps/courseware/modules/x_module.py
+++ b/djangoapps/courseware/modules/x_module.py
@@ -1,3 +1,5 @@
+from lxml import etree
+
 import courseware.progress
 
 def dummy_track(event_type, event):
@@ -36,7 +38,7 @@ class XModule(object):
         Render all children. 
         This really ought to return a list of xmodules, instead of dictionaries
         '''
-        children = [render_function(e) for e in self.__xmltree]
+        children = [self.render_function(e) for e in self.__xmltree]
         return children            
 
     def __init__(self, system = None, xml = None, item_id = None, 

From 7567e5ebf9a49ebfbdb5a9e7b8f409afae170811 Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Fri, 1 Jun 2012 10:29:12 -0400
Subject: [PATCH 44/57] Working snapshot. Simple get_children. get_module taken
 out of render_module.

---
 djangoapps/courseware/module_render.py      | 5 +++--
 djangoapps/courseware/modules/seq_module.py | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index e9303bb18b..26948023dd 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -18,6 +18,7 @@ from models import StudentModule
 from multicourse import multicourse_settings
 
 import courseware.modules
+import courseware.content_parser as content_parser
 
 log = logging.getLogger("mitx.courseware")
 
@@ -128,14 +129,14 @@ def get_module(user, request, xml_module, module_object_preload):
         smod.save()
         module_object_preload.append(smod)
 
-    return (instance, smod)
+    return (instance, smod, module_type)
 
 def render_x_module(user, request, xml_module, module_object_preload):
     ''' Generic module for extensions. This renders to HTML. '''
     if xml_module==None :
         return {"content":""}
 
-    (instance, smod) = get_module(user, request, xml_module, module_object_preload)
+    (instance, smod, module_type) = get_module(user, request, xml_module, module_object_preload)
 
     # Grab content
     content = instance.get_html()
diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index f8ab6b9166..8726df2e41 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -58,6 +58,7 @@ class Module(XModule):
                        for e in self.xmltree]
 
         self.contents = self.rendered_children()
+        self.contents = [j(m) for m in self.contents]
 
         for contents, title in zip(self.contents, titles):
             contents['title'] = title

From 71e25d9b4b677a53a7032ca81e0611a997399d63 Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Fri, 1 Jun 2012 12:02:40 -0400
Subject: [PATCH 45/57] According to the elementtree spec, elements with no
 children test as false. We only want to skip checking for module ids if the
 module is actually not found

---
 djangoapps/courseware/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index 014f759ed1..8c61e1c121 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -202,7 +202,7 @@ def index(request, course=None, chapter="Using the System", section="Hints"):
         module = etree.XML(etree.tostring(module_wrapper[0])) # Copy the element out of the tree
 
     module_ids = []
-    if module:
+    if module is not None:
         module_ids = module.xpath("//@id", 
                                   course=course, chapter=chapter, section=section)
 

From d20147932edff1b78e651e6b163645276ba4f48f Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Fri, 1 Jun 2012 12:06:31 -0400
Subject: [PATCH 46/57] Fix problem with sequence navigation on iOS

* Add `touch-based-device` class to the <body> when running on iOS.
* Do not show the tooltip if we're on the iOS.
---
 static/coffee/src/main.coffee             | 2 ++
 static/sass/courseware/_sequence-nav.scss | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/static/coffee/src/main.coffee b/static/coffee/src/main.coffee
index 733322b9bb..9f3c759a9a 100644
--- a/static/coffee/src/main.coffee
+++ b/static/coffee/src/main.coffee
@@ -12,6 +12,8 @@ $ ->
   window.onTouchBasedDevice = ->
     navigator.userAgent.match /iPhone|iPod|iPad/i
 
+  $('body').addClass 'touch-based-device' if onTouchBasedDevice()
+
   $("a[rel*=leanModal]").leanModal()
   $('#csrfmiddlewaretoken').attr 'value', $.cookie('csrftoken')
 
diff --git a/static/sass/courseware/_sequence-nav.scss b/static/sass/courseware/_sequence-nav.scss
index 0e541e7f07..2be435c350 100644
--- a/static/sass/courseware/_sequence-nav.scss
+++ b/static/sass/courseware/_sequence-nav.scss
@@ -123,7 +123,7 @@ nav.sequence-nav {
           background-position: center;
         }
 
-       p {
+        p {
           background: #333;
           color: #fff;
           display: none;
@@ -231,6 +231,10 @@ nav.sequence-nav {
       }
     }
   }
+
+  body.touch-based-device & ol li a:hover p {
+    display: none;
+  }
 }
 
 
@@ -304,3 +308,4 @@ section.course-content {
     }
   }
 }
+

From b574dcb8e8b339f9b19a31dfa9ab11dac6046c49 Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Fri, 1 Jun 2012 12:18:43 -0400
Subject: [PATCH 47/57] Check for None with is rather than ==

---
 djangoapps/courseware/capa/capa_problem.py    |  2 +-
 djangoapps/courseware/capa/inputtypes.py      |  2 +-
 djangoapps/courseware/capa/responsetypes.py   | 12 ++++++------
 djangoapps/courseware/content_parser.py       |  2 +-
 djangoapps/courseware/grades.py               |  2 +-
 djangoapps/courseware/module_render.py        |  2 +-
 djangoapps/courseware/modules/capa_module.py  |  4 ++--
 djangoapps/courseware/modules/seq_module.py   |  4 ++--
 djangoapps/courseware/modules/video_module.py |  2 +-
 djangoapps/courseware/views.py                |  4 ++--
 djangoapps/simplewiki/views.py                |  2 +-
 templates/video.html                          |  2 +-
 12 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/djangoapps/courseware/capa/capa_problem.py b/djangoapps/courseware/capa/capa_problem.py
index 565e82a577..4c74d5315f 100644
--- a/djangoapps/courseware/capa/capa_problem.py
+++ b/djangoapps/courseware/capa/capa_problem.py
@@ -91,7 +91,7 @@ class LoncapaProblem(object):
         self.problem_id = id
         self.system = system
 
-        if seed != None:
+        if seed is not None:
             self.seed = seed
 
         if state:
diff --git a/djangoapps/courseware/capa/inputtypes.py b/djangoapps/courseware/capa/inputtypes.py
index d50e41a5a3..e535ec400e 100644
--- a/djangoapps/courseware/capa/inputtypes.py
+++ b/djangoapps/courseware/capa/inputtypes.py
@@ -133,7 +133,7 @@ class SimpleInput():# XModule
 
 
 def register_render_function(fn, names=None, cls=SimpleInput):
-    if names == None:
+    if names is None:
         SimpleInput.xml_tags[fn.__name__] = fn
     else:
         raise NotImplementedError
diff --git a/djangoapps/courseware/capa/responsetypes.py b/djangoapps/courseware/capa/responsetypes.py
index 3159b70d5c..d35d526b30 100644
--- a/djangoapps/courseware/capa/responsetypes.py
+++ b/djangoapps/courseware/capa/responsetypes.py
@@ -109,7 +109,7 @@ class MultipleChoiceResponse(GenericResponse):
             if rtype not in ["MultipleChoice"]:
                 response.set("type", "MultipleChoice")		# force choicegroup to be MultipleChoice if not valid
             for choice in list(response):
-                if choice.get("name") == None:
+                if choice.get("name") is None:
                     choice.set("name", "choice_"+str(i))
                     i+=1
                 else:
@@ -121,7 +121,7 @@ class TrueFalseResponse(MultipleChoiceResponse):
         for response in self.xml.xpath("choicegroup"):
             response.set("type", "TrueFalse")
             for choice in list(response):
-                if choice.get("name") == None:
+                if choice.get("name") is None:
                     choice.set("name", "choice_"+str(i))
                     i+=1
                 else:
@@ -292,7 +292,7 @@ def sympy_check2():
                 self.code = ''
             else:
                 answer_src = answer.get('src')
-                if answer_src != None:
+                if answer_src is not None:
                     self.code = open(settings.DATA_DIR+'src/'+answer_src).read()
                 else:
                     self.code = answer.text
@@ -418,7 +418,7 @@ class ExternalResponse(GenericResponse):
                            id=xml.get('id'))[0]
 
         answer_src = answer.get('src')
-        if answer_src != None:
+        if answer_src is not None:
             self.code = open(settings.DATA_DIR+'src/'+answer_src).read()
         else:
             self.code = answer.text
@@ -489,7 +489,7 @@ class FormulaResponse(GenericResponse):
 
         self.context = context
         ts = xml.get('type')
-        if ts == None:
+        if ts is None:
             typeslist = []
         else:
             typeslist = ts.split(',')
@@ -558,7 +558,7 @@ class SchematicResponse(GenericResponse):
         answer = xml.xpath('//*[@id=$id]//answer',
                            id=xml.get('id'))[0]
         answer_src = answer.get('src')
-        if answer_src != None:
+        if answer_src is not None:
             self.code = self.system.filestore.open('src/'+answer_src).read() # Untested; never used
         else:
             self.code = answer.text
diff --git a/djangoapps/courseware/content_parser.py b/djangoapps/courseware/content_parser.py
index 9d8811307f..06c07bff64 100644
--- a/djangoapps/courseware/content_parser.py
+++ b/djangoapps/courseware/content_parser.py
@@ -126,7 +126,7 @@ def propogate_downward_tag(element, attribute_name, parent_attribute = None):
     child (A) already has that attribute, A will keep the same attribute and
     all of A's children will inherit A's attribute. This is a recursive call.'''
     
-    if (parent_attribute == None): #This is the entry call. Select all elements with this attribute
+    if (parent_attribute is None): #This is the entry call. Select all elements with this attribute
         all_attributed_elements = element.xpath("//*[@" + attribute_name +"]")
         for attributed_element in all_attributed_elements:
             attribute_value = attributed_element.get(attribute_name)
diff --git a/djangoapps/courseware/grades.py b/djangoapps/courseware/grades.py
index 2013dc28b5..ca4d00a0db 100644
--- a/djangoapps/courseware/grades.py
+++ b/djangoapps/courseware/grades.py
@@ -190,7 +190,7 @@ def get_score(user, problem, cache, coursename=None):
             correct=float(response.grade)
         
     # Grab max grade from cache, or if it doesn't exist, compute and save to DB
-    if id in cache and response.max_grade != None:
+    if id in cache and response.max_grade is not None:
         total = response.max_grade
     else:
         ## HACK 1: We shouldn't specifically reference capa_module
diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index 510d26033c..ba550fe935 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -75,7 +75,7 @@ def grade_histogram(module_id):
 
     grades = list(cursor.fetchall())
     grades.sort(key=lambda x:x[0]) # Probably not necessary
-    if (len(grades) == 1 and grades[0][0] == None):
+    if (len(grades) == 1 and grades[0][0] is None):
         return []
     return grades
 
diff --git a/djangoapps/courseware/modules/capa_module.py b/djangoapps/courseware/modules/capa_module.py
index b54b028c11..25874c32b5 100644
--- a/djangoapps/courseware/modules/capa_module.py
+++ b/djangoapps/courseware/modules/capa_module.py
@@ -97,7 +97,7 @@ class Module(XModule):
             reset_button = False
 
         # We don't need a "save" button if infinite number of attempts and non-randomized
-        if self.max_attempts == None and self.rerandomize != "always":
+        if self.max_attempts is None and self.rerandomize != "always":
             save_button = False
 
         # Check if explanation is available, and if so, give a link
@@ -222,7 +222,7 @@ class Module(XModule):
         ''' Is the student still allowed to submit answers? '''
         if self.attempts == self.max_attempts:
             return True
-        if self.close_date != None and datetime.datetime.utcnow() > self.close_date:
+        if self.close_date is not None and datetime.datetime.utcnow() > self.close_date:
             return True
 
         return False
diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index 063c37e5b3..deec191173 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -51,7 +51,7 @@ class Module(XModule):
         ## Returns a set of all types of all sub-children
         child_classes = [set([i.tag for i in e.iter()]) for e in self.xmltree]
 
-        titles = ["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") != None]) \
+        titles = ["\n".join([i.get("name").strip() for i in e.iter() if i.get("name") is not None]) \
                        for e in self.xmltree]
 
         self.contents = [j(self.render_function(e)) for e in self.xmltree]
@@ -91,7 +91,7 @@ class Module(XModule):
 
         self.position = 1
 
-        if state != None:
+        if state is not None:
             state = json.loads(state)
             if 'position' in state: self.position = int(state['position'])
 
diff --git a/djangoapps/courseware/modules/video_module.py b/djangoapps/courseware/modules/video_module.py
index 80a1ce2f80..41c76fc717 100644
--- a/djangoapps/courseware/modules/video_module.py
+++ b/djangoapps/courseware/modules/video_module.py
@@ -47,7 +47,7 @@ class Module(XModule):
         self.youtube = xmltree.get('youtube')
         self.name = xmltree.get('name')
         self.position = 0
-        if state != None:
+        if state is not None:
             state = json.loads(state)
             if 'position' in state:
                 self.position = int(float(state['position']))
diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index 8c61e1c121..0a4fc53fff 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -57,7 +57,7 @@ def profile(request, student_id = None):
     ''' User profile. Show username, location, etc, as well as grades .
         We need to allow the user to change some of these settings .'''
 
-    if student_id == None:
+    if student_id is None:
         student = request.user
     else: 
         if 'course_admin' not in content_parser.user_groups(request.user):
@@ -194,7 +194,7 @@ def index(request, course=None, chapter="Using the System", section="Hints"):
     else:
         module_wrapper = dom_module[0]
 
-    if module_wrapper == None:
+    if module_wrapper is None:
         module = None
     elif module_wrapper.get("src"):
         module = content_parser.section_file(user=user, section=module_wrapper.get("src"), coursename=course)
diff --git a/djangoapps/simplewiki/views.py b/djangoapps/simplewiki/views.py
index 34a81e6b57..167ce27d95 100644
--- a/djangoapps/simplewiki/views.py
+++ b/djangoapps/simplewiki/views.py
@@ -482,7 +482,7 @@ def check_permissions(request, article, check_read=False, check_write=False, che
     
     locked_err = check_locked and article.locked
     
-    if revision == None:
+    if revision is None:
         revision = article.current_revision
     deleted_err = check_deleted and not (revision.deleted == 0)
     if (request.user.is_superuser):
diff --git a/templates/video.html b/templates/video.html
index 54d6f8fa37..f49b5b56c2 100644
--- a/templates/video.html
+++ b/templates/video.html
@@ -1,4 +1,4 @@
-% if name is not UNDEFINED and name != None:
+% if name is not UNDEFINED and name is not None:
   <h1> ${name} </h1>
 % endif
 

From be1e308dc9e4c18ec70a581774103e4574c1eb99 Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Fri, 1 Jun 2012 12:56:20 -0400
Subject: [PATCH 48/57] Cale's fix for eval/extra json encode

---
 djangoapps/courseware/modules/seq_module.py | 15 +++------------
 static/coffee/src/modules/sequence.coffee   |  2 +-
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index 8726df2e41..1c97d6d006 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -41,11 +41,9 @@ class Module(XModule):
         if self.rendered:
             return
         def j(m):
-            ''' jsonify contents so it can be embedded in a js array
-            We also need to split </script> tags so they don't break
-            mid-string'''
-            content=json.dumps(m['content'])
-            content=content.replace('</script>', '<"+"/script>')
+            ''' Split </script> tags -- browsers handle this as end
+            of script, even if it occurs mid-string'''
+            content=m['content'].replace('</script>', '<"+"/script>')
 
             return {'content':content,
                     'type': m['type']}
@@ -76,13 +74,6 @@ class Module(XModule):
                 'titles':titles,
                 'tag':self.xmltree.tag}
 
-        # TODO/BUG: Destroy JavaScript should only be called for the active view
-        # This calls it for all the views
-        # 
-        # To fix this, we'd probably want to have some way of assigning unique
-        # IDs to sequences. 
-        destroy_js="".join([e['destroy_js'] for e in self.contents if 'destroy_js' in e])
-
         if self.xmltree.tag in ['sequential', 'videosequence']:
             self.content=render_to_string('seq_module.html',params)
         if self.xmltree.tag == 'tab':
diff --git a/static/coffee/src/modules/sequence.coffee b/static/coffee/src/modules/sequence.coffee
index 0789c7c7f0..56a9b551bf 100644
--- a/static/coffee/src/modules/sequence.coffee
+++ b/static/coffee/src/modules/sequence.coffee
@@ -39,7 +39,7 @@ class @Sequence
         $.postWithPrefix "/modx/#{@tag}/#{@id}/goto_position", position: new_position
 
       @mark_active new_position
-      @$('#seq_content').html eval(@elements[new_position - 1].content)
+      @$('#seq_content').html @elements[new_position - 1].content
 
       MathJax.Hub.Queue(["Typeset", MathJax.Hub])
       @position = new_position

From bb18c854f79c135b72f3327ca6a3e7280139b193 Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 31 May 2012 17:14:34 -0400
Subject: [PATCH 49/57] Trigger a pause event when user click Youtube logo

This will make sure that the play button is in the paused state.

Fixes https://www.pivotaltracker.com/story/show/26236143
---
 static/coffee/spec/modules/video/video_player_spec.coffee | 8 ++++++++
 static/coffee/src/modules/video/video_player.coffee       | 5 ++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/static/coffee/spec/modules/video/video_player_spec.coffee b/static/coffee/spec/modules/video/video_player_spec.coffee
index 309afcd002..26f5e3b5ed 100644
--- a/static/coffee/spec/modules/video/video_player_spec.coffee
+++ b/static/coffee/spec/modules/video/video_player_spec.coffee
@@ -126,6 +126,14 @@ describe 'VideoPlayer', ->
       it 'trigger pause event', ->
         expect('pause').toHaveBeenTriggeredOn @player
 
+    describe 'when the video is unstarted', ->
+      beforeEach ->
+        spyOnEvent @player, 'pause'
+        @player.onStateChange data: YT.PlayerState.UNSTARTED
+
+      it 'trigger pause event', ->
+        expect('pause').toHaveBeenTriggeredOn @player
+
     describe 'when the video is ended', ->
       beforeEach ->
         spyOnEvent @player, 'ended'
diff --git a/static/coffee/src/modules/video/video_player.coffee b/static/coffee/src/modules/video/video_player.coffee
index 57d7f913b8..28f87b2d53 100644
--- a/static/coffee/src/modules/video/video_player.coffee
+++ b/static/coffee/src/modules/video/video_player.coffee
@@ -1,5 +1,8 @@
 class @VideoPlayer
   constructor: (@video) ->
+    # Define a missing constant of Youtube API
+    YT.PlayerState.UNSTARTED = -1
+
     @currentTime = 0
     @element = $("#video_#{@video.id}")
     @render()
@@ -57,7 +60,7 @@ class @VideoPlayer
     switch event.data
       when YT.PlayerState.PLAYING
         $(@).trigger('play')
-      when YT.PlayerState.PAUSED
+      when YT.PlayerState.PAUSED, YT.PlayerState.UNSTARTED
         $(@).trigger('pause')
       when YT.PlayerState.ENDED
         $(@).trigger('ended')

From d7043ea27f16be73da1ca579195b7386452ac3bf Mon Sep 17 00:00:00 2001
From: Prem Sichanugrist <psichanugrist@thoughtbot.com>
Date: Thu, 31 May 2012 16:33:28 -0400
Subject: [PATCH 50/57] Fix page jumping bug when click on the speeds list

---
 static/coffee/src/modules/video/video_speed_control.coffee | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/static/coffee/src/modules/video/video_speed_control.coffee b/static/coffee/src/modules/video/video_speed_control.coffee
index 203e3677a4..6f7631a0ad 100644
--- a/static/coffee/src/modules/video/video_speed_control.coffee
+++ b/static/coffee/src/modules/video/video_speed_control.coffee
@@ -10,7 +10,9 @@ class @VideoSpeedControl
     $(@player).bind('speedChange', @onSpeedChange)
     @$('.video_speeds a').click @changeVideoSpeed
     if onTouchBasedDevice()
-      @$('.speeds').click -> $(this).toggleClass('open')
+      @$('.speeds').click (event) ->
+        event.preventDefault()
+        $(this).toggleClass('open')
     else
       @$('.speeds').mouseenter ->
         $(this).addClass('open')

From 0a8a7795ff14abff49dc45bf8cc196847a16a932 Mon Sep 17 00:00:00 2001
From: Piotr Mitros <pmitros@mitx.mit.edu>
Date: Fri, 1 Jun 2012 16:02:23 -0400
Subject: [PATCH 51/57] Fixed run script

---
 run.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/run.sh b/run.sh
index 0c65a4a72c..3e273657dc 100755
--- a/run.sh
+++ b/run.sh
@@ -1 +1 @@
-django-admin runserver --settings=envs.dev --pythonpath=. 
+django-admin.py runserver --settings=envs.dev --pythonpath=.  || django-admin runserver --settings=envs.dev --pythonpath=.
\ No newline at end of file

From 794022733df0f6d865b1cbc823f31e3b08fc34b0 Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Fri, 1 Jun 2012 16:34:00 -0400
Subject: [PATCH 52/57] Do json dumping and </script> replacement as close to
 the template as possible

---
 djangoapps/courseware/modules/seq_module.py | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/djangoapps/courseware/modules/seq_module.py b/djangoapps/courseware/modules/seq_module.py
index 5abe56231c..3604fa0a6a 100644
--- a/djangoapps/courseware/modules/seq_module.py
+++ b/djangoapps/courseware/modules/seq_module.py
@@ -40,15 +40,6 @@ class Module(XModule):
     def render(self):
         if self.rendered:
             return
-        def j(m):
-            ''' Split </script> tags -- browsers handle this as end
-            of script, even if it occurs mid-string'''
-            content=m['content'].replace('</script>', '<"+"/script>')
-
-            return {'content':content,
-                    'type': m['type']}
-
-
         ## Returns a set of all types of all sub-children
         child_classes = [set([i.tag for i in e.iter()]) for e in self.xmltree]
 
@@ -56,7 +47,6 @@ class Module(XModule):
                        for e in self.xmltree]
 
         self.contents = self.rendered_children()
-        self.contents = [j(m) for m in self.contents]
 
         for contents, title in zip(self.contents, titles):
             contents['title'] = title
@@ -68,7 +58,10 @@ class Module(XModule):
                     new_class = c
             content['type'] = new_class
 
-        params={'items':self.contents,
+        # Split </script> tags -- browsers handle this as end
+        # of script, even if it occurs mid-string. Do this after json.dumps()ing
+        # so that we can be sure of the quotations being used
+        params={'items':json.dumps(self.contents).replace('</script>', '<"+"/script>'),
                 'id':self.item_id,
                 'position': self.position,
                 'titles':titles,

From d49d0b9119f7b8b39df04775971ddbe1d240461d Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Fri, 1 Jun 2012 16:37:03 -0400
Subject: [PATCH 53/57] Remove render_module in favor of render_x_module

---
 djangoapps/courseware/module_render.py | 6 +-----
 djangoapps/courseware/views.py         | 6 +++---
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index 88e464be59..de8364b752 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -110,7 +110,7 @@ def get_module(user, request, xml_module, module_object_preload):
     ajax_url = settings.MITX_ROOT_URL + '/modx/'+module_type+'/'+module_id+'/'
     
     system = I4xSystem(track_function = make_track_function(request), 
-                       render_function = lambda x: render_module(user, request, x, module_object_preload), 
+                       render_function = lambda x: render_x_module(user, request, x, module_object_preload), 
                        ajax_url = ajax_url,
                        filestore = OSFS(data_root),
                        )
@@ -155,10 +155,6 @@ def render_x_module(user, request, xml_module, module_object_preload):
 
     return content
 
-def render_module(user, request, module, module_object_preload):
-    ''' Generic dispatch for internal modules. '''
-    return render_x_module(user, request, module, module_object_preload)
-
 
 def modx_dispatch(request, module=None, dispatch=None, id=None):
     ''' Generic view for extensions. '''
diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index a098753728..869b3f96ae 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -16,7 +16,7 @@ from django.views.decorators.cache import cache_control
 
 from lxml import etree
 
-from module_render import render_module, make_track_function, I4xSystem, modx_dispatch
+from module_render import render_x_module, make_track_function, I4xSystem
 from models import StudentModule
 from student.models import UserProfile
 from util.views import accepts
@@ -129,7 +129,7 @@ def render_section(request, section):
         module_object_preload = []
     
     try:
-        module = render_module(user, request, dom, module_object_preload)
+        module = render_x_module(user, request, dom, module_object_preload)
     except:
         log.exception("Unable to load module")
         context.update({
@@ -219,7 +219,7 @@ def index(request, course=None, chapter="Using the System", section="Hints"):
     }
 
     try:
-        module = render_module(user, request, module, module_object_preload)
+        module = render_x_module(user, request, module, module_object_preload)
     except:
         log.exception("Unable to load module")
         context.update({

From b2477de7b490abacbc2b3bbf3d8f338aedeb7646 Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Fri, 1 Jun 2012 16:37:11 -0400
Subject: [PATCH 54/57] Remove unused imports

---
 djangoapps/courseware/views.py | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index 869b3f96ae..8b34e8b26d 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -1,6 +1,5 @@
 import logging
 import urllib
-import json
 
 from fs.osfs import OSFS
 
@@ -8,7 +7,7 @@ from django.conf import settings
 from django.core.context_processors import csrf
 from django.contrib.auth.models import User
 from django.contrib.auth.decorators import login_required
-from django.http import Http404, HttpResponse
+from django.http import Http404
 from django.shortcuts import redirect
 from mitxmako.shortcuts import render_to_response, render_to_string
 #from django.views.decorators.csrf import ensure_csrf_cookie
@@ -19,7 +18,6 @@ from lxml import etree
 from module_render import render_x_module, make_track_function, I4xSystem
 from models import StudentModule
 from student.models import UserProfile
-from util.views import accepts
 from multicourse import multicourse_settings
 
 import courseware.content_parser as content_parser

From 0ad31f556fbf8137c27f2e28e6281c0ff0e3d4c3 Mon Sep 17 00:00:00 2001
From: Bridger Maxwell <bridgeyman@gmail.com>
Date: Fri, 1 Jun 2012 17:22:34 -0400
Subject: [PATCH 55/57] The modx_dispatch import hack is added back in. Without
 it, the urls.py file was broken.

---
 djangoapps/courseware/views.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index 8b34e8b26d..5ef1ac231d 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -16,6 +16,7 @@ from django.views.decorators.cache import cache_control
 from lxml import etree
 
 from module_render import render_x_module, make_track_function, I4xSystem
+from module_render import modx_dispatch #Note that this is not used in this file, but urls refers to courseware.views.modx_dispatch
 from models import StudentModule
 from student.models import UserProfile
 from multicourse import multicourse_settings

From e24df47b0b07d702a0e6bdf5ec01536d1ca5c2e7 Mon Sep 17 00:00:00 2001
From: Bridger Maxwell <bridgeyman@gmail.com>
Date: Fri, 1 Jun 2012 17:34:04 -0400
Subject: [PATCH 56/57] Small bug fix causing crash when generating problem
 histogram.

---
 djangoapps/courseware/module_render.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/djangoapps/courseware/module_render.py b/djangoapps/courseware/module_render.py
index de8364b752..250a4ea055 100644
--- a/djangoapps/courseware/module_render.py
+++ b/djangoapps/courseware/module_render.py
@@ -143,6 +143,7 @@ def render_x_module(user, request, xml_module, module_object_preload):
 
     # special extra information about each problem, only for users who are staff 
     if user.is_staff:
+        module_id = xml_module.get('id')
         histogram = grade_histogram(module_id)
         render_histogram = len(histogram) > 0
         content=content+render_to_string("staff_problem_info.html", {'xml':etree.tostring(xml_module), 

From 7cf4b1597cba25fe5233ab24fa913b7c68fee506 Mon Sep 17 00:00:00 2001
From: Calen Pennington <calen.pennington@gmail.com>
Date: Mon, 4 Jun 2012 09:19:00 -0400
Subject: [PATCH 57/57] Be more direct about where modx_dispatch is located and
 where it is used

---
 djangoapps/courseware/views.py | 1 -
 urls.py                        | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/djangoapps/courseware/views.py b/djangoapps/courseware/views.py
index 5ef1ac231d..8b34e8b26d 100644
--- a/djangoapps/courseware/views.py
+++ b/djangoapps/courseware/views.py
@@ -16,7 +16,6 @@ from django.views.decorators.cache import cache_control
 from lxml import etree
 
 from module_render import render_x_module, make_track_function, I4xSystem
-from module_render import modx_dispatch #Note that this is not used in this file, but urls refers to courseware.views.modx_dispatch
 from models import StudentModule
 from student.models import UserProfile
 from multicourse import multicourse_settings
diff --git a/urls.py b/urls.py
index 2e6e85a88f..71aa0a6c65 100644
--- a/urls.py
+++ b/urls.py
@@ -54,7 +54,7 @@ if settings.COURSEWARE_ENABLED:
         url(r'^courseware/(?P<course>[^/]*)/(?P<chapter>[^/]*)/$', 'courseware.views.index', name="courseware_chapter"),
         url(r'^courseware/(?P<course>[^/]*)/$', 'courseware.views.index', name="courseware_course"),
         url(r'^section/(?P<section>[^/]*)/$', 'courseware.views.render_section'),
-        url(r'^modx/(?P<module>[^/]*)/(?P<id>[^/]*)/(?P<dispatch>[^/]*)$', 'courseware.views.modx_dispatch'), #reset_problem'),
+        url(r'^modx/(?P<module>[^/]*)/(?P<id>[^/]*)/(?P<dispatch>[^/]*)$', 'courseware.module_render.modx_dispatch'), #reset_problem'),
         url(r'^profile$', 'courseware.views.profile'),
         url(r'^profile/(?P<student_id>[^/]*)/$', 'courseware.views.profile'),
         url(r'^change_setting$', 'student.views.change_setting'),