From 9ff641c11d4e2f215e6e6d5a0ca63ee2c0917dca Mon Sep 17 00:00:00 2001
From: Fergal Moran <fergal.moran@gmail.com>
Date: Mon, 29 Apr 2013 11:25:19 +0100
Subject: [PATCH] Various changes to user profile editing

---
 .gitignore                                    |    2 +-
 spa/ajax.py                                   |    8 +-
 spa/api/v1/ActivityResource.py                |    2 +
 spa/api/v1/CommentResource.py                 |    2 +
 spa/api/v1/UserResource.py                    |  121 +-
 spa/management/commands/deletefailed.py       |   20 +-
 spa/management/commands/deleteorphanmp3.py    |   28 +-
 spa/middleware/stripwhitespace.py             |   78 +-
 .../0006_auto__chg_field_userprofile_user.py  |  219 ++
 spa/models/UserProfile.py                     |   10 +-
 spa/models/managers/__init__.py               |    2 +-
 spa/templates.py                              |    4 +
 static/css/bootstrap-timepicker.css           |  182 +-
 static/css/deepsouthsounds.css                |   11 +
 static/js/app/app.js                          |    8 +-
 static/js/app/models/activity.js              |   36 +-
 static/js/app/models/user.js                  |   11 +-
 static/js/app/views/mix.js                    |    2 +-
 static/js/app/views/user.js                   |  116 +-
 static/js/libs/ICanHaz.js                     | 1039 +++----
 .../js/libs/backbone/backbone.marionette.js   | 2388 +++++++++++++++++
 static/js/libs/backbone/backbone.mine.js      |    5 +-
 static/js/libs/backbone/backbone.syphon.js    |  471 ++++
 static/js/libs/backbone/underscore.js         | 1239 ++++++++-
 templates/base.html                           |    3 +-
 templates/boiler/robots.txt                   |    8 +-
 templates/boiler/test.html                    |   42 +-
 templates/boiler/test2.html                   |   42 +-
 templates/inc/activity.html                   |   30 +-
 templates/javascript/settings.js              |    1 +
 templates/views/UserView.html                 |  157 +-
 31 files changed, 5344 insertions(+), 943 deletions(-)
 create mode 100755 spa/migrations/0006_auto__chg_field_userprofile_user.py
 create mode 100755 static/js/libs/backbone/backbone.marionette.js
 create mode 100755 static/js/libs/backbone/backbone.syphon.js

diff --git a/.gitignore b/.gitignore
index 2f152b7..6f838f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ tags
 .tags_sorted_by_file
 .idea
 *.pyc
+*.swp
 media/*
 build/*
 _working/*
@@ -13,4 +14,3 @@ dss.conf
 dss/debugsettings.py
 mysql
 test.py
-
diff --git a/spa/ajax.py b/spa/ajax.py
index d459dd7..653d5d9 100644
--- a/spa/ajax.py
+++ b/spa/ajax.py
@@ -209,7 +209,7 @@ def upload_release_image(request, release_id):
                 release.save()
                 return HttpResponse(_get_json("Success"))
     except Exception, ex:
-        logger.exception("Error uploading avatar")
+        logger.exception("Error uploading release image")
     return HttpResponse(_get_json("Failed"))
 
 
@@ -223,17 +223,17 @@ def upload_image(request, mix_id):
                 mix.save()
                 return HttpResponse(_get_json("Success"))
     except Exception, ex:
-        logger.exception("Error uploading avatar")
+        logger.exception("Error uploading image")
     return HttpResponse(_get_json("Failed"))
 
 
 @csrf_exempt
 def upload_avatar_image(request):
     try:
-        if 'Filedata' in request.FILES:
+        if 'avatar_image' in request.FILES:
             profile = request.user.get_profile()
             if profile:
-                profile.avatar_image = request.FILES['Filedata']
+                profile.avatar_image = request.FILES['avatar_image']
                 profile.save()
                 return HttpResponse(_get_json("Success"))
     except Exception, ex:
diff --git a/spa/api/v1/ActivityResource.py b/spa/api/v1/ActivityResource.py
index d8f88c7..ca11c05 100644
--- a/spa/api/v1/ActivityResource.py
+++ b/spa/api/v1/ActivityResource.py
@@ -49,5 +49,7 @@ class ActivityResource(BackboneCompatibleResource):
         return [i for i in data['objects'] if i is not None and i.obj.user is not None and i.obj.get_object_name is not None and i.obj.get_object_url is not None]
     """
 
+    """
     def dehydrate_date(self, bundle):
         return self.humanize_date(bundle.obj.date)
+    """
\ No newline at end of file
diff --git a/spa/api/v1/CommentResource.py b/spa/api/v1/CommentResource.py
index 6be427d..1784db4 100644
--- a/spa/api/v1/CommentResource.py
+++ b/spa/api/v1/CommentResource.py
@@ -22,8 +22,10 @@ class CommentResource(BackboneCompatibleResource):
         bundle.data['user'] = {'pk': request.user.pk}
         return super(CommentResource, self).obj_create(bundle, request, user=request.user)
 
+    """
     def dehydrate_date_created(self, bundle):
         return self.humanize_date(bundle.obj.date_created)
+    """
 
     def dehydrate(self, bundle):
         bundle.data['avatar_image'] = bundle.obj.user.get_profile().get_small_profile_image()
diff --git a/spa/api/v1/UserResource.py b/spa/api/v1/UserResource.py
index a2096ce..5ac4313 100644
--- a/spa/api/v1/UserResource.py
+++ b/spa/api/v1/UserResource.py
@@ -1,71 +1,88 @@
-from django.conf.urls import url
+from django.contrib.auth.models import User
+from tastypie import fields
 from tastypie.authentication import Authentication
-from tastypie.authorization import Authorization
-from tastypie.constants import ALL, ALL_WITH_RELATIONS
+from tastypie.authorization import DjangoAuthorization
 from spa.api.v1.BackboneCompatibleResource import BackboneCompatibleResource
 from spa.models import UserProfile
 
 
-class UserResource(BackboneCompatibleResource):
+class UserProfileResource(BackboneCompatibleResource):
     class Meta:
         queryset = UserProfile.objects.all()
-        excludes = []
-        authorization = Authorization()
-        authentication = Authentication()
+        resource_name = 'profile'
+        include_resource_uri = False
+        include_absolute_url = False
         always_return_data = True
-        filtering = {
-            'user': ALL_WITH_RELATIONS,
-            'username': ALL,
-            'id': ALL,
-        }
+        authorization = DjangoAuthorization()
+        authentication = Authentication()
 
-    def prepend_urls(self):
-        return [
-            url(r"^(?P<resource_name>%s)/(?P<slug>[\w\d_.-]+)/$" % self._meta.resource_name, self.wrap_view('dispatch_detail'), name="api_dispatch_detail"),
-        ]
+    def _hydrateBitmapOption(self, source, comparator):
+        return "checked" if (source & comparator) != 0 else ""
 
-    def authorized_read_list(self, object_list, bundle):
-        return object_list.filter(user_id=bundle.request.user.id)
 
-    def authorized_read_detail(self, object_list, bundle):
-        return object_list.only('description')
+    def hydrate(self, bundle):
+        if 'activity_sharing_likes' in bundle.data:
+            likes = UserProfile.ACTIVITY_SHARE_LIKES if bundle.data['activity_sharing_likes'] else 0
+            favourites = UserProfile.ACTIVITY_SHARE_FAVOURITES if bundle.data['activity_sharing_favourites'] else 0
+            comments = UserProfile.ACTIVITY_SHARE_COMMENTS if bundle.data['activity_sharing_comments'] else 0
+            bundle.data['activity_sharing'] = (likes | favourites | comments)
+            del bundle.data['activity_sharing_likes']
+            del bundle.data['activity_sharing_favourites']
+            del bundle.data['activity_sharing_comments']
+
+        if 'activity_sharing_networks_facebook' in bundle.data:
+            facebook = UserProfile.ACTIVITY_SHARE_NETWORK_FACEBOOK if bundle.data['activity_sharing_networks_facebook'] else 0
+            twitter = UserProfile.ACTIVITY_SHARE_NETWORK_TWITTER if bundle.data['activity_sharing_networks_twitter'] else 0
+            bundle.data['activity_sharing_networks'] = (facebook | twitter)
+            del bundle.data['activity_sharing_networks_facebook']
+            del bundle.data['activity_sharing_networks_twitter']
+
+        return bundle
+
+    def obj_update(self, bundle, skip_errors=False, **kwargs):
+        """
+            This feels extremely hacky - but for some reason, deleting from the bundle
+            in hydrate is not preventing the fields from being serialized at the ORM
+        """
+        if 'activity_sharing_networks_facebook' in kwargs: del kwargs['activity_sharing_networks_facebook']
+        if 'activity_sharing_networks_twitter' in kwargs: del kwargs['activity_sharing_networks_twitter']
+        if 'activity_sharing_likes' in kwargs: del kwargs['activity_sharing_likes']
+        if 'activity_sharing_favourites' in kwargs: del kwargs['activity_sharing_favourites']
+        if 'activity_sharing_comments' in kwargs: del kwargs['activity_sharing_comments']
+
+        return super(UserProfileResource, self).obj_update(bundle, skip_errors, **kwargs)
 
     def dehydrate(self, bundle):
-
-        #set the "me" user only properties
+        del bundle.data['activity_sharing']
+        del bundle.data['activity_sharing_networks']
         if bundle.obj.user.id == bundle.request.user.id:
-            bundle.data['email'] = bundle.obj.email
-            if bundle.obj.activity_sharing is not None:
-                bundle.data['activity_share_likes'] = \
-                    (bundle.obj.activity_sharing & UserProfile.ACTIVITY_SHARE_LIKES) != 0
-                bundle.data['activity_share_favourites'] = \
-                    (bundle.obj.activity_sharing & UserProfile.ACTIVITY_SHARE_FAVOURITES) != 0
-                bundle.data['activity_share_comments'] = \
-                    (bundle.obj.activity_sharing & UserProfile.ACTIVITY_SHARE_COMMENTS) != 0
-            else:
-                bundle.data['activity_share_likes'] = 0
-                bundle.data['activity_share_favourites'] = 0
-                bundle.data['activity_share_comments'] = 0
+            bundle.data['activity_sharing_likes'] = \
+                self._hydrateBitmapOption(bundle.obj.activity_sharing, UserProfile.ACTIVITY_SHARE_LIKES)
+            bundle.data['activity_sharing_favourites'] = \
+                self._hydrateBitmapOption(bundle.obj.activity_sharing, UserProfile.ACTIVITY_SHARE_FAVOURITES)
+            bundle.data['activity_sharing_comments'] = \
+                self._hydrateBitmapOption(bundle.obj.activity_sharing, UserProfile.ACTIVITY_SHARE_COMMENTS)
 
-            if bundle.obj.activity_sharing_networks is not None:
-                bundle.data['activity_share_networks_facebook'] = \
-                    (bundle.obj.activity_sharing_networks & UserProfile.ACTIVITY_SHARE_NETWORK_FACEBOOK) != 0
-                bundle.data['activity_share_networks_twitter'] = \
-                    (bundle.obj.activity_sharing_networks & UserProfile.ACTIVITY_SHARE_NETWORK_TWITTER) != 0
-            else:
-                bundle.data['activity_share_networks_facebook'] = 0
-                bundle.data['activity_share_networks_facebook'] = 0
-        else:
-            del bundle.data['activity_sharing']
-            del bundle.data['activity_sharing_networks']
-
-        bundle.data['first_name'] = bundle.obj.first_name
-        bundle.data['last_name'] = bundle.obj.last_name
+            bundle.data['activity_sharing_networks_facebook'] = \
+                self._hydrateBitmapOption(bundle.obj.activity_sharing_networks, UserProfile.ACTIVITY_SHARE_NETWORK_FACEBOOK)
+            bundle.data['activity_sharing_networks_twitter'] = \
+                self._hydrateBitmapOption(bundle.obj.activity_sharing_networks, UserProfile.ACTIVITY_SHARE_NETWORK_TWITTER)
 
         return bundle
 
-    def hydrate_slug(self, bundle):
-        if bundle.data['slug'] == '':
-            bundle.data['slug'] = None
-        return bundle
+class UserResource(BackboneCompatibleResource):
+    profile = fields.ToOneField(UserProfileResource, attribute='userprofile', related_name='user', full=True)
 
+    class Meta:
+        queryset = User.objects.all()
+        resource_name = 'user'
+        excludes = ['is_active', 'is_staff', 'is_superuser', 'password']
+        authorization = DjangoAuthorization()
+        authentication = Authentication()
+
+    def dehydrate(self, bundle):
+        if bundle.obj.id != bundle.request.user.id:
+            del bundle.data['email']
+            del bundle.data['username']
+
+        return bundle
diff --git a/spa/management/commands/deletefailed.py b/spa/management/commands/deletefailed.py
index 609509e..7db8534 100644
--- a/spa/management/commands/deletefailed.py
+++ b/spa/management/commands/deletefailed.py
@@ -1,10 +1,10 @@
-from django.core.management.base import NoArgsCommand
-from spa.models import Mix
-
-
-class Command(NoArgsCommand):
-    def handle(self, *args, **options):
-        candidates = Mix.objects.filter(waveform_generated=False)
-        for mix in candidates:
-            print "Deleting: %s" % mix.title
-            mix.delete()
+from django.core.management.base import NoArgsCommand
+from spa.models import Mix
+
+
+class Command(NoArgsCommand):
+    def handle(self, *args, **options):
+        candidates = Mix.objects.filter(waveform_generated=False)
+        for mix in candidates:
+            print "Deleting: %s" % mix.title
+            mix.delete()
diff --git a/spa/management/commands/deleteorphanmp3.py b/spa/management/commands/deleteorphanmp3.py
index 50cc744..32c1084 100644
--- a/spa/management/commands/deleteorphanmp3.py
+++ b/spa/management/commands/deleteorphanmp3.py
@@ -1,14 +1,14 @@
-import os
-import shutil
-from django.core.management.base import NoArgsCommand
-from spa.models import Mix
-
-
-class Command(NoArgsCommand):
-    def handle(self, *args, **options):
-        candidates = Mix.objects.all()
-        for mix in candidates:
-            file = mix.get_absolute_path(prefix="expired/")
-            if os.path.exists(file):
-                new = mix.get_absolute_path()
-                shutil.move(file, new)
+import os
+import shutil
+from django.core.management.base import NoArgsCommand
+from spa.models import Mix
+
+
+class Command(NoArgsCommand):
+    def handle(self, *args, **options):
+        candidates = Mix.objects.all()
+        for mix in candidates:
+            file = mix.get_absolute_path(prefix="expired/")
+            if os.path.exists(file):
+                new = mix.get_absolute_path()
+                shutil.move(file, new)
diff --git a/spa/middleware/stripwhitespace.py b/spa/middleware/stripwhitespace.py
index f1450a8..18c765a 100644
--- a/spa/middleware/stripwhitespace.py
+++ b/spa/middleware/stripwhitespace.py
@@ -1,39 +1,39 @@
-"""
-Tightens up response content by removed superflous line breaks and whitespace.
-By Doug Van Horn
-
----- CHANGES ----
-v1.1 - 31st May 2011
-Cal Leeming [Simplicity Media Ltd]
-Modified regex to strip leading/trailing white space from every line, not just those with blank \n.
-
----- TODO ----
-* Ensure whitespace isn't stripped from within <pre> or <code> or <textarea> tags.
-
-"""
-
-import re
-
-class StripWhitespaceMiddleware(object):
-    """
-    Strips leading and trailing whitespace from response content.
-    """
-
-    def __init__(self):
-        self.whitespace = re.compile('^\s*\n', re.MULTILINE)
-        # self.whitespace_lead = re.compile('^\s+', re.MULTILINE)
-        # self.whitespace_trail = re.compile('\s+$', re.MULTILINE)
-
-
-    def process_response(self, request, response):
-        if "text" in response['Content-Type']:
-            if hasattr(self, 'whitespace_lead'):
-                response.content = self.whitespace_lead.sub('', response.content)
-            if hasattr(self, 'whitespace_trail'):
-                response.content = self.whitespace_trail.sub('\n', response.content)
-            # Uncomment the next line to remove empty lines
-            if hasattr(self, 'whitespace'):
-                response.content = self.whitespace.sub('', response.content)
-            return response
-        else:
-            return response    
+"""
+Tightens up response content by removed superflous line breaks and whitespace.
+By Doug Van Horn
+
+---- CHANGES ----
+v1.1 - 31st May 2011
+Cal Leeming [Simplicity Media Ltd]
+Modified regex to strip leading/trailing white space from every line, not just those with blank \n.
+
+---- TODO ----
+* Ensure whitespace isn't stripped from within <pre> or <code> or <textarea> tags.
+
+"""
+
+import re
+
+class StripWhitespaceMiddleware(object):
+    """
+    Strips leading and trailing whitespace from response content.
+    """
+
+    def __init__(self):
+        self.whitespace = re.compile('^\s*\n', re.MULTILINE)
+        # self.whitespace_lead = re.compile('^\s+', re.MULTILINE)
+        # self.whitespace_trail = re.compile('\s+$', re.MULTILINE)
+
+
+    def process_response(self, request, response):
+        if "text" in response['Content-Type']:
+            if hasattr(self, 'whitespace_lead'):
+                response.content = self.whitespace_lead.sub('', response.content)
+            if hasattr(self, 'whitespace_trail'):
+                response.content = self.whitespace_trail.sub('\n', response.content)
+            # Uncomment the next line to remove empty lines
+            if hasattr(self, 'whitespace'):
+                response.content = self.whitespace.sub('', response.content)
+            return response
+        else:
+            return response    
diff --git a/spa/migrations/0006_auto__chg_field_userprofile_user.py b/spa/migrations/0006_auto__chg_field_userprofile_user.py
new file mode 100755
index 0000000..09c0264
--- /dev/null
+++ b/spa/migrations/0006_auto__chg_field_userprofile_user.py
@@ -0,0 +1,219 @@
+# -*- coding: utf-8 -*-
+import datetime
+from south.db import db
+from south.v2 import SchemaMigration
+from django.db import models
+
+
+class Migration(SchemaMigration):
+
+    def forwards(self, orm):
+
+        # Changing field 'UserProfile.user'
+        db.alter_column(u'spa_userprofile', 'user_id', self.gf('django.db.models.fields.related.OneToOneField')(unique=True, to=orm['auth.User']))
+
+    def backwards(self, orm):
+
+        # Changing field 'UserProfile.user'
+        db.alter_column(u'spa_userprofile', 'user_id', self.gf('django.db.models.fields.related.ForeignKey')(to=orm['auth.User'], unique=True))
+
+    models = {
+        u'auth.group': {
+            'Meta': {'object_name': 'Group'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '80'}),
+            'permissions': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Permission']", 'symmetrical': 'False', 'blank': 'True'})
+        },
+        u'auth.permission': {
+            'Meta': {'ordering': "(u'content_type__app_label', u'content_type__model', u'codename')", 'unique_together': "((u'content_type', u'codename'),)", 'object_name': 'Permission'},
+            'codename': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'content_type': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['contenttypes.ContentType']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '50'})
+        },
+        u'auth.user': {
+            'Meta': {'object_name': 'User'},
+            'date_joined': ('django.db.models.fields.DateTimeField', [], {'default': 'datetime.datetime.now'}),
+            'email': ('django.db.models.fields.EmailField', [], {'max_length': '75', 'blank': 'True'}),
+            'first_name': ('django.db.models.fields.CharField', [], {'max_length': '30', 'blank': 'True'}),
+            'groups': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Group']", 'symmetrical': 'False', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'is_active': ('django.db.models.fields.BooleanField', [], {'default': 'True'}),
+            'is_staff': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'is_superuser': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'last_login': ('django.db.models.fields.DateTimeField', [], {'default': 'datetime.datetime.now'}),
+            'last_name': ('django.db.models.fields.CharField', [], {'max_length': '30', 'blank': 'True'}),
+            'password': ('django.db.models.fields.CharField', [], {'max_length': '128'}),
+            'user_permissions': ('django.db.models.fields.related.ManyToManyField', [], {'to': u"orm['auth.Permission']", 'symmetrical': 'False', 'blank': 'True'}),
+            'username': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '30'})
+        },
+        u'contenttypes.contenttype': {
+            'Meta': {'ordering': "('name',)", 'unique_together': "(('app_label', 'model'),)", 'object_name': 'ContentType', 'db_table': "'django_content_type'"},
+            'app_label': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'model': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '100'})
+        },
+        'spa._activity': {
+            'Meta': {'object_name': '_Activity'},
+            'date': ('django.db.models.fields.DateTimeField', [], {'auto_now': 'True', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'uid': ('django.db.models.fields.CharField', [], {'max_length': '50', 'null': 'True', 'blank': 'True'}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['auth.User']", 'null': 'True'})
+        },
+        'spa._lookup': {
+            'Meta': {'object_name': '_Lookup'},
+            'description': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'})
+        },
+        'spa.chatmessage': {
+            'Meta': {'object_name': 'ChatMessage'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'message': ('django.db.models.fields.TextField', [], {}),
+            'timestamp': ('django.db.models.fields.DateTimeField', [], {'auto_now_add': 'True', 'blank': 'True'}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'blank': 'True', 'related_name': "'chat_messages'", 'null': 'True', 'to': "orm['spa.UserProfile']"})
+        },
+        'spa.comment': {
+            'Meta': {'object_name': 'Comment'},
+            'comment': ('django.db.models.fields.CharField', [], {'max_length': '1024'}),
+            'date_created': ('django.db.models.fields.DateTimeField', [], {'auto_now': 'True', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'mix': ('django.db.models.fields.related.ForeignKey', [], {'blank': 'True', 'related_name': "'comments'", 'null': 'True', 'to': "orm['spa.Mix']"}),
+            'time_index': ('django.db.models.fields.IntegerField', [], {}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['auth.User']"})
+        },
+        'spa.event': {
+            'Meta': {'object_name': 'Event'},
+            'attendees': ('django.db.models.fields.related.ManyToManyField', [], {'related_name': "'attendees'", 'symmetrical': 'False', 'to': u"orm['auth.User']"}),
+            'date_created': ('django.db.models.fields.DateField', [], {'default': 'datetime.datetime(2013, 4, 24, 0, 0)'}),
+            'event_date': ('django.db.models.fields.DateField', [], {'default': 'datetime.datetime(2013, 4, 24, 0, 0)'}),
+            'event_description': ('tinymce.models.HTMLField', [], {}),
+            'event_recurrence': ('django.db.models.fields.related.ForeignKey', [], {'to': "orm['spa.Recurrence']"}),
+            'event_time': ('django.db.models.fields.TimeField', [], {'default': 'datetime.datetime(2013, 4, 24, 0, 0)'}),
+            'event_title': ('django.db.models.fields.CharField', [], {'max_length': '250'}),
+            'event_venue': ('django.db.models.fields.related.ForeignKey', [], {'to': "orm['spa.Venue']"}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'})
+        },
+        'spa.genre': {
+            'Meta': {'object_name': 'Genre'},
+            'description': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'slug': ('django.db.models.fields.CharField', [], {'max_length': '100', 'null': 'True'})
+        },
+        'spa.label': {
+            'Meta': {'object_name': 'Label'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'name': ('django.db.models.fields.CharField', [], {'max_length': '100'})
+        },
+        'spa.mix': {
+            'Meta': {'object_name': 'Mix'},
+            'description': ('django.db.models.fields.TextField', [], {}),
+            'download_allowed': ('django.db.models.fields.BooleanField', [], {'default': 'False'}),
+            'download_url': ('django.db.models.fields.CharField', [], {'max_length': '255'}),
+            'duration': ('django.db.models.fields.IntegerField', [], {'null': 'True', 'blank': 'True'}),
+            'genres': ('django.db.models.fields.related.ManyToManyField', [], {'to': "orm['spa.Genre']", 'symmetrical': 'False'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'is_active': ('django.db.models.fields.BooleanField', [], {'default': 'True'}),
+            'is_featured': ('django.db.models.fields.BooleanField', [], {'default': 'True'}),
+            'local_file': ('django.db.models.fields.files.FileField', [], {'max_length': '100', 'blank': 'True'}),
+            'mix_image': ('django.db.models.fields.files.ImageField', [], {'max_length': '100', 'blank': 'True'}),
+            'slug': ('django.db.models.fields.SlugField', [], {'max_length': '50'}),
+            'stream_url': ('django.db.models.fields.CharField', [], {'max_length': '255'}),
+            'title': ('django.db.models.fields.CharField', [], {'max_length': '50'}),
+            'uid': ('django.db.models.fields.CharField', [], {'unique': 'True', 'max_length': '38', 'blank': 'True'}),
+            'upload_date': ('django.db.models.fields.DateTimeField', [], {'default': 'datetime.datetime(2013, 4, 24, 0, 0)'}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': "orm['spa.UserProfile']"}),
+            'waveform_generated': ('django.db.models.fields.BooleanField', [], {'default': 'False'})
+        },
+        'spa.mixdownload': {
+            'Meta': {'object_name': 'MixDownload', '_ormbases': ['spa._Activity']},
+            u'_activity_ptr': ('django.db.models.fields.related.OneToOneField', [], {'to': "orm['spa._Activity']", 'unique': 'True', 'primary_key': 'True'}),
+            'mix': ('django.db.models.fields.related.ForeignKey', [], {'related_name': "'downloads'", 'to': "orm['spa.Mix']"})
+        },
+        'spa.mixfavourite': {
+            'Meta': {'object_name': 'MixFavourite', '_ormbases': ['spa._Activity']},
+            u'_activity_ptr': ('django.db.models.fields.related.OneToOneField', [], {'to': "orm['spa._Activity']", 'unique': 'True', 'primary_key': 'True'}),
+            'mix': ('django.db.models.fields.related.ForeignKey', [], {'related_name': "'favourites'", 'to': "orm['spa.Mix']"})
+        },
+        'spa.mixlike': {
+            'Meta': {'object_name': 'MixLike', '_ormbases': ['spa._Activity']},
+            u'_activity_ptr': ('django.db.models.fields.related.OneToOneField', [], {'to': "orm['spa._Activity']", 'unique': 'True', 'primary_key': 'True'}),
+            'mix': ('django.db.models.fields.related.ForeignKey', [], {'related_name': "'likes'", 'to': "orm['spa.Mix']"})
+        },
+        'spa.mixplay': {
+            'Meta': {'object_name': 'MixPlay', '_ormbases': ['spa._Activity']},
+            u'_activity_ptr': ('django.db.models.fields.related.OneToOneField', [], {'to': "orm['spa._Activity']", 'unique': 'True', 'primary_key': 'True'}),
+            'mix': ('django.db.models.fields.related.ForeignKey', [], {'related_name': "'plays'", 'to': "orm['spa.Mix']"})
+        },
+        'spa.purchaselink': {
+            'Meta': {'object_name': 'PurchaseLink'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'provider': ('django.db.models.fields.CharField', [], {'max_length': '255'}),
+            'track': ('django.db.models.fields.related.ForeignKey', [], {'related_name': "'purchase_link'", 'to': "orm['spa.Tracklist']"}),
+            'url': ('django.db.models.fields.URLField', [], {'max_length': '200'})
+        },
+        'spa.recurrence': {
+            'Meta': {'object_name': 'Recurrence', '_ormbases': ['spa._Lookup']},
+            u'_lookup_ptr': ('django.db.models.fields.related.OneToOneField', [], {'to': "orm['spa._Lookup']", 'unique': 'True', 'primary_key': 'True'})
+        },
+        'spa.release': {
+            'Meta': {'object_name': 'Release'},
+            'embed_code': ('django.db.models.fields.TextField', [], {'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'is_active': ('django.db.models.fields.BooleanField', [], {'default': 'True'}),
+            'release_artist': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'release_date': ('django.db.models.fields.DateField', [], {'default': 'datetime.datetime(2013, 4, 24, 0, 0)'}),
+            'release_description': ('django.db.models.fields.TextField', [], {}),
+            'release_image': ('django.db.models.fields.files.ImageField', [], {'max_length': '100', 'blank': 'True'}),
+            'release_label': ('django.db.models.fields.related.ForeignKey', [], {'to': "orm['spa.Label']"}),
+            'release_title': ('django.db.models.fields.CharField', [], {'max_length': '100'}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': "orm['spa.UserProfile']"})
+        },
+        'spa.releaseaudio': {
+            'Meta': {'object_name': 'ReleaseAudio'},
+            'description': ('django.db.models.fields.TextField', [], {}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'local_file': ('django.db.models.fields.files.FileField', [], {'max_length': '100'}),
+            'release': ('django.db.models.fields.related.ForeignKey', [], {'blank': 'True', 'related_name': "'release_audio'", 'null': 'True', 'to': "orm['spa.Release']"})
+        },
+        'spa.tracklist': {
+            'Meta': {'object_name': 'Tracklist'},
+            'artist': ('django.db.models.fields.CharField', [], {'max_length': '255'}),
+            'description': ('django.db.models.fields.CharField', [], {'max_length': '255'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'index': ('django.db.models.fields.SmallIntegerField', [], {}),
+            'label': ('django.db.models.fields.CharField', [], {'max_length': '255'}),
+            'mix': ('django.db.models.fields.related.ForeignKey', [], {'related_name': "'tracklist'", 'to': "orm['spa.Mix']"}),
+            'remixer': ('django.db.models.fields.CharField', [], {'max_length': '255'}),
+            'timeindex': ('django.db.models.fields.TimeField', [], {'null': 'True'}),
+            'title': ('django.db.models.fields.CharField', [], {'max_length': '255'})
+        },
+        'spa.userfollows': {
+            'Meta': {'object_name': 'UserFollows'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'user_from': ('django.db.models.fields.related.OneToOneField', [], {'related_name': "'followers'", 'unique': 'True', 'to': "orm['spa.UserProfile']"}),
+            'user_to': ('django.db.models.fields.related.OneToOneField', [], {'related_name': "'following'", 'unique': 'True', 'to': "orm['spa.UserProfile']"})
+        },
+        'spa.userprofile': {
+            'Meta': {'object_name': 'UserProfile'},
+            'activity_sharing': ('django.db.models.fields.IntegerField', [], {'default': '0'}),
+            'activity_sharing_networks': ('django.db.models.fields.IntegerField', [], {'default': '0'}),
+            'avatar_image': ('django.db.models.fields.files.ImageField', [], {'max_length': '100', 'blank': 'True'}),
+            'avatar_type': ('django.db.models.fields.CharField', [], {'default': "'social'", 'max_length': '15'}),
+            'description': ('django.db.models.fields.CharField', [], {'max_length': '2048', 'blank': 'True'}),
+            'display_name': ('django.db.models.fields.CharField', [], {'max_length': '35', 'blank': 'True'}),
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'slug': ('django.db.models.fields.SlugField', [], {'default': 'None', 'max_length': '50', 'null': 'True', 'blank': 'True'}),
+            'user': ('django.db.models.fields.related.OneToOneField', [], {'related_name': "'userprofile'", 'unique': 'True', 'to': u"orm['auth.User']"})
+        },
+        'spa.venue': {
+            'Meta': {'object_name': 'Venue'},
+            u'id': ('django.db.models.fields.AutoField', [], {'primary_key': 'True'}),
+            'user': ('django.db.models.fields.related.ForeignKey', [], {'to': u"orm['auth.User']"}),
+            'venue_address': ('django.db.models.fields.CharField', [], {'max_length': '1024'}),
+            'venue_image': ('django.db.models.fields.files.ImageField', [], {'max_length': '100', 'blank': 'True'}),
+            'venue_name': ('django.db.models.fields.CharField', [], {'max_length': '250'})
+        }
+    }
+
+    complete_apps = ['spa']
\ No newline at end of file
diff --git a/spa/models/UserProfile.py b/spa/models/UserProfile.py
index d14a3c5..9337aff 100644
--- a/spa/models/UserProfile.py
+++ b/spa/models/UserProfile.py
@@ -30,7 +30,7 @@ class UserProfile(_BaseModel):
     ACTIVITY_SHARE_NETWORK_TWITTER = 2
 
     # This field is required.
-    user = models.ForeignKey(User, unique=True)
+    user = models.OneToOneField(User, unique=True, related_name='userprofile')
     avatar_type = models.CharField(max_length=15, default='social')
     avatar_image = models.ImageField(blank=True, upload_to=avatar_name)
     display_name = models.CharField(blank=True, max_length=35)
@@ -43,19 +43,15 @@ class UserProfile(_BaseModel):
     def __unicode__(self):
         return "%s - %s" % (self.user.get_full_name(), self.slug)
 
-    def save(self, force_insert=False, force_update=False, using=None):
+    def save(self, force_insert=False, force_update=False, using=None, update_fields=None):
         """
         Save Photo after ensuring it is not blank.  Resize as needed.
         """
-
-        if not force_insert and not self.id:
-            return
-
         if self.slug is None or self.slug == '':
             self.slug = unique_slugify(self, self.get_username())
             print "Slugified: %s" % self.slug
 
-        return super(UserProfile, self).save(force_insert, force_update, using)
+        return super(UserProfile, self).save(force_insert, force_update, using, update_fields)
 
     def get_username(self):
         return self.user.username
diff --git a/spa/models/managers/__init__.py b/spa/models/managers/__init__.py
index 6d4caf8..8133f5e 100644
--- a/spa/models/managers/__init__.py
+++ b/spa/models/managers/__init__.py
@@ -1 +1 @@
-__author__ = 'fergalm'
+__author__ = 'fergalm'
diff --git a/spa/templates.py b/spa/templates.py
index 71a0be3..54f2dab 100644
--- a/spa/templates.py
+++ b/spa/templates.py
@@ -7,6 +7,7 @@ from spa.models import UserProfile
 
 __author__ = 'fergalm'
 
+
 @not_minified_response
 def get_template(request, template_name):
     #Temporary hack here to create user profiles for zombie users
@@ -29,6 +30,9 @@ def get_template_ex(request, template_name):
 
 
 def get_javascript(request, template_name):
+    localsettings.JS_SETTINGS.update({
+        'CURRENT_USER_ID': request.user.id or -1
+    })
     return render_to_response(
         'javascript/%s.js' % template_name,
         localsettings.JS_SETTINGS,
diff --git a/static/css/bootstrap-timepicker.css b/static/css/bootstrap-timepicker.css
index c98cd63..de8a353 100644
--- a/static/css/bootstrap-timepicker.css
+++ b/static/css/bootstrap-timepicker.css
@@ -1,91 +1,91 @@
-
-.bootstrap-timepicker.dropdown-menu {
-    border-radius: 4px 4px 4px 4px;
-    display: none;
-    left: 0;
-    margin-top: 1px;
-    padding: 4px;
-    top: 0;
-}
-.bootstrap-timepicker.dropdown-menu.open {
-    display: inline-block;
-}
-.bootstrap-timepicker.dropdown-menu:before {
-    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    content: "";
-    left: 6px;
-    position: absolute;
-    top: -7px;
-}
-.bootstrap-timepicker.dropdown-menu:after {
-    border-bottom: 6px solid #FFFFFF;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    content: "";
-    left: 7px;
-    position: absolute;
-    top: -6px;
-}
-.bootstrap-timepicker.modal {
-    margin-left: -100px;
-    margin-top: 0;
-    top: 30%;
-    width: 200px;
-}
-.bootstrap-timepicker.modal .modal-content {
-    padding: 0;
-}
-.bootstrap-timepicker table {
-    margin: 0;
-    width: 100%;
-}
-.bootstrap-timepicker table td {
-    height: 30px;
-    margin: 0;
-    padding: 2px;
-    text-align: center;
-    width: 49%;
-}
-.bootstrap-timepicker table.show-meridian td, .bootstrap-timepicker table.show-seconds td {
-    width: 32%;
-}
-.bootstrap-timepicker table.show-seconds.show-meridian td {
-    width: 23.5%;
-}
-.bootstrap-timepicker table td.separator {
-    width: 2% !important;
-}
-.bootstrap-timepicker table td span {
-    width: 100%;
-}
-.bootstrap-timepicker table td a {
-    border: 1px solid transparent;
-    display: inline-block;
-    margin: 0;
-    outline: 0 none;
-    padding: 8px 0;
-    width: 90%;
-}
-.bootstrap-timepicker table td a:hover {
-    background-color: #EEEEEE;
-    border-color: #DDDDDD;
-    border-radius: 4px 4px 4px 4px;
-}
-.bootstrap-timepicker table td a i {
-    margin-top: 2px;
-}
-.bootstrap-timepicker table td input {
-    margin: 0;
-    text-align: center;
-    width: 25px;
-}
-.bootstrap-timepicker-component .add-on {
-    cursor: pointer;
-}
-.bootstrap-timepicker-component .add-on i {
-    display: block;
-    height: 16px;
-    width: 16px;
-}
+
+.bootstrap-timepicker.dropdown-menu {
+    border-radius: 4px 4px 4px 4px;
+    display: none;
+    left: 0;
+    margin-top: 1px;
+    padding: 4px;
+    top: 0;
+}
+.bootstrap-timepicker.dropdown-menu.open {
+    display: inline-block;
+}
+.bootstrap-timepicker.dropdown-menu:before {
+    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+    left: 6px;
+    position: absolute;
+    top: -7px;
+}
+.bootstrap-timepicker.dropdown-menu:after {
+    border-bottom: 6px solid #FFFFFF;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    content: "";
+    left: 7px;
+    position: absolute;
+    top: -6px;
+}
+.bootstrap-timepicker.modal {
+    margin-left: -100px;
+    margin-top: 0;
+    top: 30%;
+    width: 200px;
+}
+.bootstrap-timepicker.modal .modal-content {
+    padding: 0;
+}
+.bootstrap-timepicker table {
+    margin: 0;
+    width: 100%;
+}
+.bootstrap-timepicker table td {
+    height: 30px;
+    margin: 0;
+    padding: 2px;
+    text-align: center;
+    width: 49%;
+}
+.bootstrap-timepicker table.show-meridian td, .bootstrap-timepicker table.show-seconds td {
+    width: 32%;
+}
+.bootstrap-timepicker table.show-seconds.show-meridian td {
+    width: 23.5%;
+}
+.bootstrap-timepicker table td.separator {
+    width: 2% !important;
+}
+.bootstrap-timepicker table td span {
+    width: 100%;
+}
+.bootstrap-timepicker table td a {
+    border: 1px solid transparent;
+    display: inline-block;
+    margin: 0;
+    outline: 0 none;
+    padding: 8px 0;
+    width: 90%;
+}
+.bootstrap-timepicker table td a:hover {
+    background-color: #EEEEEE;
+    border-color: #DDDDDD;
+    border-radius: 4px 4px 4px 4px;
+}
+.bootstrap-timepicker table td a i {
+    margin-top: 2px;
+}
+.bootstrap-timepicker table td input {
+    margin: 0;
+    text-align: center;
+    width: 25px;
+}
+.bootstrap-timepicker-component .add-on {
+    cursor: pointer;
+}
+.bootstrap-timepicker-component .add-on i {
+    display: block;
+    height: 16px;
+    width: 16px;
+}
diff --git a/static/css/deepsouthsounds.css b/static/css/deepsouthsounds.css
index 19e6f90..9c07426 100644
--- a/static/css/deepsouthsounds.css
+++ b/static/css/deepsouthsounds.css
@@ -391,3 +391,14 @@ div.event-content td {
     position: relative;
     top: 1px;
 }
+.dss-option-table td{
+    text-align: center;
+    vertical-align: middle;
+}
+#div_avatar_image_upload{
+    width: 100%;
+    text-align: center;
+}
+#div_avatar_image{
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/static/js/app/app.js b/static/js/app/app.js
index d18153a..720138c 100644
--- a/static/js/app/app.js
+++ b/static/js/app/app.js
@@ -221,14 +221,16 @@ var AppRouter = Backbone.Router.extend({
         alert("Connecting accounts");
     },
     userDetails: function () {
-        var user = new User();
+        var user = new User({
+            id: com.podnoms.settings.currentUser
+        });
         $('#site-content-fill').html('');
         user.fetch({
             success: function () {
                 var content = new UserView({
                     model: user
-                }).el;
-                $('#content').html(content);
+                });
+                $('#content').html(content.render().el);
             }
         });
     }
diff --git a/static/js/app/models/activity.js b/static/js/app/models/activity.js
index e491e54..8f83b0d 100644
--- a/static/js/app/models/activity.js
+++ b/static/js/app/models/activity.js
@@ -1,19 +1,19 @@
-/** @license
-
- ----------------------------------------------
-
- Copyright (c) 2012, Fergal Moran. All rights reserved.
- Code provided under the BSD License:
-
- */
-var Activity = DSSModel.extend({
-    urlRoot:com.podnoms.settings.urlRoot + "activity/"
-});
-
-var ActivityCollection = TastypieCollection.extend({
-    model: Activity,
-    url:com.podnoms.settings.urlRoot + "activity/",
-    comparator: function (activity) {
-        return -activity.get("id");
-    }
+/** @license
+
+ ----------------------------------------------
+
+ Copyright (c) 2012, Fergal Moran. All rights reserved.
+ Code provided under the BSD License:
+
+ */
+var Activity = DSSModel.extend({
+    urlRoot:com.podnoms.settings.urlRoot + "activity/"
+});
+
+var ActivityCollection = TastypieCollection.extend({
+    model: Activity,
+    url:com.podnoms.settings.urlRoot + "activity/",
+    comparator: function (activity) {
+        return -activity.get("id");
+    }
 });
\ No newline at end of file
diff --git a/static/js/app/models/user.js b/static/js/app/models/user.js
index 0e15abb..33e969e 100644
--- a/static/js/app/models/user.js
+++ b/static/js/app/models/user.js
@@ -8,8 +8,17 @@
  */
 var User = DSSModel.extend({
     urlRoot:com.podnoms.settings.urlRoot + "user/",
-    isValid:function () {
+    isValid: function () {
         this.errors = {};
         return "";
+    },
+    avatarGravatar: function(){
+        return this.get('profile').avatar_type == 'gravatar';
+    },
+    avatarSocial: function(){
+        return this.get('profile').avatar_type == 'social';
+    },
+    avatarCustom: function(){
+        return this.get('profile').avatar_type == 'custom';
     }
 });
diff --git a/static/js/app/views/mix.js b/static/js/app/views/mix.js
index 1ed36ba..6dbd592 100644
--- a/static/js/app/views/mix.js
+++ b/static/js/app/views/mix.js
@@ -235,7 +235,7 @@ window.MixCreateView = DSSEditableView.extend({
     },
     checkRedirect: function () {
         if (this.state == 2) {
-            Backbone.history.navigate('/mix/' + this.model.get('id'), {trigger: true});
+            Backbone.history.navigate('/mix/' + this.model.get('slug'), {trigger: true});
         }
     },
     initialize: function () {
diff --git a/static/js/app/views/user.js b/static/js/app/views/user.js
index 60cab8a..cf5ed82 100644
--- a/static/js/app/views/user.js
+++ b/static/js/app/views/user.js
@@ -6,77 +6,81 @@
  Code provided under the BSD License:
 
  */
-window.UserView = DSSEditableView.extend({
-    events:{
-        "click #save-changes":"saveChanges",
-        "click input[type=radio]":"selectAvatar",
-        "change input":"changed",
-        "change textarea":"changed",
-        "change select":"changed",
-        "change .switch":"changeSwitch"
-    },
-    initialize:function () {
-        this.render();
-    },
-    render:function () {
-        var model = this.model;
-        $(this.el).html(this.template({"item":this.model.toJSON()}));
-        $('.switch', this.el).each(function (item) {
-            var val = model.get(this.id) ? "on" : "off";
-            $(this).attr('checked', val == "on");
-            $(this).iphoneSwitch(
-                val,
-                function (obj) {
-                },
-                function (obj) {
-                },
-                {
-                    speed:250,
-                    use_images:true,
-                    track_bg_color:'#333',
-                    sync_checkbox:true
-                }
-            );
-        });
-        $("#div_avatar_image", this.el).hide();
-        var avatarType = this.model.get('avatar_type');
-        if (!com.podnoms.utils.isEmpty(avatarType))
-            $('#' + this.model.get('avatar_type'), this.el).attr('checked', 'checked');
 
-        //console.clear();
+UserView = DSSEditableView.extend({
+    events: {
+        "click #save-changes": "saveChanges",
+        "change input[type=radio]": "selectAvatar"
+    },
+    initialize: function () {
+    },
+    render: function () {
+        ich.addTemplate('user', this.template());
+        var renderedTemplate = ich.user(this.model.toJSON());
+        $(this.el).html(renderedTemplate);
+
+        $("#div_avatar_image_upload", this.el).hide();
+        var avatarType = this.model.get('profile').avatar_type;
+        if (!com.podnoms.utils.isEmpty(avatarType)){
+            $('#avatar_' + avatarType, this.el).attr('checked', true);
+            if (avatarType == 'custom') {
+                $("#div_avatar_image_upload", this.el).show();
+                $('#file_upload').uploadifive({
+                        'uploadScript': 'ajax/upload_avatar_image/'
+                });
+            }
+        }
         return this;
     },
-    saveChanges:function () {
-        var model = this.model;
+    saveChanges: function () {
+        var data = Backbone.Syphon.serialize(this);
+        this.model.set(data);
+        var ref = this;
         this._saveChanges({
-            success:function () {
-                com.podnoms.utils.showAlert("Success", "Successfully updated yourself");
-                Backbone.history.navigate('/', {trigger:true});
+            success: function () {
+                if (ref.model.get('profile').avatar_type == 'custom'){
+                        $.ajaxFileUpload({
+                            url: '/ajax/upload_avatar_image/',
+                            secureuri: false,
+                            fileElementId: 'avatar_image',
+                            success: function (data, status) {
+                                if (typeof(data.error) != 'undefined') {
+                                    if (data.error != '') {
+                                        alert(data.error);
+                                    } else {
+                                        alert(data.msg);
+                                    }
+                                } else {
+                                    com.podnoms.utils.showAlert("Success", "Successfully updated yourself");
+                                    Backbone.history.navigate('/', {trigger:true});
+                                }
+                            },
+                            error: function (data, status, e) {
+                                alert(e);
+                            }
+                        });
+                }else{
+                        com.podnoms.utils.showAlert("Success", "Successfully updated yourself");
+                        Backbone.history.navigate('/', {trigger:true});
+                }
             },
-            error:function () {
+            error: function () {
                 com.podnoms.utils.showError("Error", "There was an error updating your info. Please try again later.");
             }
         });
         return false;
     },
-    changeSwitch:function (evt) {
-        var bit = $(evt.currentTarget).data('bitflag');
-        var coalesce = $(evt.currentTarget).data('coalesce');
-        if ($(evt.currentTarget).attr('checked')) {
-            this.model.set(coalesce, this.model.get(coalesce) | bit);
-        } else {
-            this.model.set(coalesce, this.model.get(coalesce) & ~bit);
-        }
-        this.model.save();
-    },
-    selectAvatar:function (evt) {
+
+    selectAvatar: function (evt) {
         var type = $(evt.currentTarget).val();
         this.model.set('avatar_type', type);
         if (type == 'custom') {
-            $("#div_avatar_image", this.el).show();
+            $("#div_avatar_image_upload", this.el).show();
             $('#file_upload').uploadifive({
-                'uploadScript':'ajax/upload_avatar_image/'
+                'uploadScript': 'ajax/upload_avatar_image/'
             });
+        }else{
+            $("#div_avatar_image_upload", this.el).hide();
         }
     }
 });
diff --git a/static/js/libs/ICanHaz.js b/static/js/libs/ICanHaz.js
index c131265..d24deb6 100644
--- a/static/js/libs/ICanHaz.js
+++ b/static/js/libs/ICanHaz.js
@@ -1,543 +1,552 @@
 /*!
- ICanHaz.js version 0.10 -- by @HenrikJoreteg
- More info at: http://icanhazjs.com
- */
+ICanHaz.js version 0.10.2 -- by @HenrikJoreteg
+More info at: http://icanhazjs.com
+*/
 (function () {
+/*
+  mustache.js — Logic-less templates in JavaScript
+
+  See http://mustache.github.com/ for more info.
+*/
+
+var Mustache = function () {
+  var _toString = Object.prototype.toString;
+
+  Array.isArray = Array.isArray || function (obj) {
+    return _toString.call(obj) == "[object Array]";
+  }
+
+  var _trim = String.prototype.trim, trim;
+
+  if (_trim) {
+    trim = function (text) {
+      return text == null ? "" : _trim.call(text);
+    }
+  } else {
+    var trimLeft, trimRight;
+
+    // IE doesn't match non-breaking spaces with \s.
+    if ((/\S/).test("\xA0")) {
+      trimLeft = /^[\s\xA0]+/;
+      trimRight = /[\s\xA0]+$/;
+    } else {
+      trimLeft = /^\s+/;
+      trimRight = /\s+$/;
+    }
+
+    trim = function (text) {
+      return text == null ? "" :
+        text.toString().replace(trimLeft, "").replace(trimRight, "");
+    }
+  }
+
+  var escapeMap = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': '&quot;',
+    "'": '&#39;'
+  };
+
+  function escapeHTML(string) {
+    return String(string).replace(/&(?!\w+;)|[<>"']/g, function (s) {
+      return escapeMap[s] || s;
+    });
+  }
+
+  var regexCache = {};
+  var Renderer = function () {};
+
+  Renderer.prototype = {
+    otag: "{{",
+    ctag: "}}",
+    pragmas: {},
+    buffer: [],
+    pragmas_implemented: {
+      "IMPLICIT-ITERATOR": true
+    },
+    context: {},
+
+    render: function (template, context, partials, in_recursion) {
+      // reset buffer & set context
+      if (!in_recursion) {
+        this.context = context;
+        this.buffer = []; // TODO: make this non-lazy
+      }
+
+      // fail fast
+      if (!this.includes("", template)) {
+        if (in_recursion) {
+          return template;
+        } else {
+          this.send(template);
+          return;
+        }
+      }
+
+      // get the pragmas together
+      template = this.render_pragmas(template);
+
+      // render the template
+      var html = this.render_section(template, context, partials);
+
+      // render_section did not find any sections, we still need to render the tags
+      if (html === false) {
+        html = this.render_tags(template, context, partials, in_recursion);
+      }
+
+      if (in_recursion) {
+        return html;
+      } else {
+        this.sendLines(html);
+      }
+    },
+
     /*
-     mustache.js — Logic-less templates in JavaScript
+      Sends parsed lines
+    */
+    send: function (line) {
+      if (line !== "") {
+        this.buffer.push(line);
+      }
+    },
 
-     See http://mustache.github.com/ for more info.
-     */
-
-    var Mustache = function () {
-        var _toString = Object.prototype.toString;
-
-        Array.isArray = Array.isArray || function (obj) {
-            return _toString.call(obj) == "[object Array]";
+    sendLines: function (text) {
+      if (text) {
+        var lines = text.split("\n");
+        for (var i = 0; i < lines.length; i++) {
+          this.send(lines[i]);
         }
+      }
+    },
 
-        var _trim = String.prototype.trim, trim;
+    /*
+      Looks for %PRAGMAS
+    */
+    render_pragmas: function (template) {
+      // no pragmas
+      if (!this.includes("%", template)) {
+        return template;
+      }
 
-        if (_trim) {
-            trim = function (text) {
-                return text == null ? "" : _trim.call(text);
-            }
-        } else {
-            var trimLeft, trimRight;
+      var that = this;
+      var regex = this.getCachedRegex("render_pragmas", function (otag, ctag) {
+        return new RegExp(otag + "%([\\w-]+) ?([\\w]+=[\\w]+)?" + ctag, "g");
+      });
 
-            // IE doesn't match non-breaking spaces with \s.
-            if ((/\S/).test("\xA0")) {
-                trimLeft = /^[\s\xA0]+/;
-                trimRight = /[\s\xA0]+$/;
-            } else {
-                trimLeft = /^\s+/;
-                trimRight = /\s+$/;
-            }
-
-            trim = function (text) {
-                return text == null ? "" :
-                    text.toString().replace(trimLeft, "").replace(trimRight, "");
-            }
+      return template.replace(regex, function (match, pragma, options) {
+        if (!that.pragmas_implemented[pragma]) {
+          throw({message:
+            "This implementation of mustache doesn't understand the '" +
+            pragma + "' pragma"});
         }
+        that.pragmas[pragma] = {};
+        if (options) {
+          var opts = options.split("=");
+          that.pragmas[pragma][opts[0]] = opts[1];
+        }
+        return "";
+        // ignore unknown pragmas silently
+      });
+    },
 
-        var escapeMap = {
-            "&":"&amp;",
-            "<":"&lt;",
-            ">":"&gt;",
-            '"':'&quot;',
-            "'":'&#39;'
-        };
+    /*
+      Tries to find a partial in the curent scope and render it
+    */
+    render_partial: function (name, context, partials) {
+      name = trim(name);
+      if (!partials || partials[name] === undefined) {
+        throw({message: "unknown_partial '" + name + "'"});
+      }
+      if (!context || typeof context[name] != "object") {
+        return this.render(partials[name], context, partials, true);
+      }
+      return this.render(partials[name], context[name], partials, true);
+    },
 
-        function escapeHTML(string) {
-            return String(string).replace(/&(?!\w+;)|[<>"']/g, function (s) {
-                return escapeMap[s] || s;
+    /*
+      Renders inverted (^) and normal (#) sections
+    */
+    render_section: function (template, context, partials) {
+      if (!this.includes("#", template) && !this.includes("^", template)) {
+        // did not render anything, there were no sections
+        return false;
+      }
+
+      var that = this;
+
+      var regex = this.getCachedRegex("render_section", function (otag, ctag) {
+        // This regex matches _the first_ section ({{#foo}}{{/foo}}), and captures the remainder
+        return new RegExp(
+          "^([\\s\\S]*?)" +         // all the crap at the beginning that is not {{*}} ($1)
+
+          otag +                    // {{
+          "(\\^|\\#)\\s*(.+)\\s*" + //  #foo (# == $2, foo == $3)
+          ctag +                    // }}
+
+          "\n*([\\s\\S]*?)" +       // between the tag ($2). leading newlines are dropped
+
+          otag +                    // {{
+          "\\/\\s*\\3\\s*" +        //  /foo (backreference to the opening tag).
+          ctag +                    // }}
+
+          "\\s*([\\s\\S]*)$",       // everything else in the string ($4). leading whitespace is dropped.
+
+        "g");
+      });
+
+
+      // for each {{#foo}}{{/foo}} section do...
+      return template.replace(regex, function (match, before, type, name, content, after) {
+        // before contains only tags, no sections
+        var renderedBefore = before ? that.render_tags(before, context, partials, true) : "",
+
+        // after may contain both sections and tags, so use full rendering function
+            renderedAfter = after ? that.render(after, context, partials, true) : "",
+
+        // will be computed below
+            renderedContent,
+
+            value = that.find(name, context);
+
+        if (type === "^") { // inverted section
+          if (!value || Array.isArray(value) && value.length === 0) {
+            // false or empty list, render it
+            renderedContent = that.render(content, context, partials, true);
+          } else {
+            renderedContent = "";
+          }
+        } else if (type === "#") { // normal section
+          if (Array.isArray(value)) { // Enumerable, Let's loop!
+            renderedContent = that.map(value, function (row) {
+              return that.render(content, that.create_context(row), partials, true);
+            }).join("");
+          } else if (that.is_object(value)) { // Object, Use it as subcontext!
+            renderedContent = that.render(content, that.create_context(value),
+              partials, true);
+          } else if (typeof value == "function") {
+            // higher order section
+            renderedContent = value.call(context, content, function (text) {
+              return that.render(text, context, partials, true);
             });
+          } else if (value) { // boolean section
+            renderedContent = that.render(content, context, partials, true);
+          } else {
+            renderedContent = "";
+          }
         }
 
-        var regexCache = {};
-        var Renderer = function () {
-        };
+        return renderedBefore + renderedContent + renderedAfter;
+      });
+    },
 
-        Renderer.prototype = {
-            otag:"{{",
-            ctag:"}}",
-            pragmas:{},
-            buffer:[],
-            pragmas_implemented:{
-                "IMPLICIT-ITERATOR":true
-            },
-            context:{},
+    /*
+      Replace {{foo}} and friends with values from our view
+    */
+    render_tags: function (template, context, partials, in_recursion) {
+      // tit for tat
+      var that = this;
 
-            render:function (template, context, partials, in_recursion) {
-                // reset buffer & set context
-                if (!in_recursion) {
-                    this.context = context;
-                    this.buffer = []; // TODO: make this non-lazy
-                }
-
-                // fail fast
-                if (!this.includes("", template)) {
-                    if (in_recursion) {
-                        return template;
-                    } else {
-                        this.send(template);
-                        return;
-                    }
-                }
-
-                // get the pragmas together
-                template = this.render_pragmas(template);
-
-                // render the template
-                var html = this.render_section(template, context, partials);
-
-                // render_section did not find any sections, we still need to render the tags
-                if (html === false) {
-                    html = this.render_tags(template, context, partials, in_recursion);
-                }
-
-                if (in_recursion) {
-                    return html;
-                } else {
-                    this.sendLines(html);
-                }
-            },
-
-            /*
-             Sends parsed lines
-             */
-            send:function (line) {
-                if (line !== "") {
-                    this.buffer.push(line);
-                }
-            },
-
-            sendLines:function (text) {
-                if (text) {
-                    var lines = text.split("\n");
-                    for (var i = 0; i < lines.length; i++) {
-                        this.send(lines[i]);
-                    }
-                }
-            },
-
-            /*
-             Looks for %PRAGMAS
-             */
-            render_pragmas:function (template) {
-                // no pragmas
-                if (!this.includes("%", template)) {
-                    return template;
-                }
-
-                var that = this;
-                var regex = this.getCachedRegex("render_pragmas", function (otag, ctag) {
-                    return new RegExp(otag + "%([\\w-]+) ?([\\w]+=[\\w]+)?" + ctag, "g");
-                });
-
-                return template.replace(regex, function (match, pragma, options) {
-                    if (!that.pragmas_implemented[pragma]) {
-                        throw({message:"This implementation of mustache doesn't understand the '" +
-                            pragma + "' pragma"});
-                    }
-                    that.pragmas[pragma] = {};
-                    if (options) {
-                        var opts = options.split("=");
-                        that.pragmas[pragma][opts[0]] = opts[1];
-                    }
-                    return "";
-                    // ignore unknown pragmas silently
-                });
-            },
-
-            /*
-             Tries to find a partial in the curent scope and render it
-             */
-            render_partial:function (name, context, partials) {
-                name = trim(name);
-                if (!partials || partials[name] === undefined) {
-                    throw({message:"unknown_partial '" + name + "'"});
-                }
-                if (!context || typeof context[name] != "object") {
-                    return this.render(partials[name], context, partials, true);
-                }
-                return this.render(partials[name], context[name], partials, true);
-            },
-
-            /*
-             Renders inverted (^) and normal (#) sections
-             */
-            render_section:function (template, context, partials) {
-                if (!this.includes("#", template) && !this.includes("^", template)) {
-                    // did not render anything, there were no sections
-                    return false;
-                }
-
-                var that = this;
-
-                var regex = this.getCachedRegex("render_section", function (otag, ctag) {
-                    // This regex matches _the first_ section ({{#foo}}{{/foo}}), and captures the remainder
-                    return new RegExp(
-                        "^([\\s\\S]*?)" + // all the crap at the beginning that is not {{*}} ($1)
-
-                            otag + // {{
-                            "(\\^|\\#)\\s*(.+)\\s*" + //  #foo (# == $2, foo == $3)
-                            ctag + // }}
-
-                            "\n*([\\s\\S]*?)" + // between the tag ($2). leading newlines are dropped
-
-                            otag + // {{
-                            "\\/\\s*\\3\\s*" + //  /foo (backreference to the opening tag).
-                            ctag + // }}
-
-                            "\\s*([\\s\\S]*)$", // everything else in the string ($4). leading whitespace is dropped.
-
-                        "g");
-                });
-
-
-                // for each {{#foo}}{{/foo}} section do...
-                return template.replace(regex, function (match, before, type, name, content, after) {
-                    // before contains only tags, no sections
-                    var renderedBefore = before ? that.render_tags(before, context, partials, true) : "",
-
-                    // after may contain both sections and tags, so use full rendering function
-                        renderedAfter = after ? that.render(after, context, partials, true) : "",
-
-                    // will be computed below
-                        renderedContent,
-
-                        value = that.find(name, context);
-
-                    if (type === "^") { // inverted section
-                        if (!value || Array.isArray(value) && value.length === 0) {
-                            // false or empty list, render it
-                            renderedContent = that.render(content, context, partials, true);
-                        } else {
-                            renderedContent = "";
-                        }
-                    } else if (type === "#") { // normal section
-                        if (Array.isArray(value)) { // Enumerable, Let's loop!
-                            renderedContent = that.map(value,function (row) {
-                                return that.render(content, that.create_context(row), partials, true);
-                            }).join("");
-                        } else if (that.is_object(value)) { // Object, Use it as subcontext!
-                            renderedContent = that.render(content, that.create_context(value),
-                                partials, true);
-                        } else if (typeof value == "function") {
-                            // higher order section
-                            renderedContent = value.call(context, content, function (text) {
-                                return that.render(text, context, partials, true);
-                            });
-                        } else if (value) { // boolean section
-                            renderedContent = that.render(content, context, partials, true);
-                        } else {
-                            renderedContent = "";
-                        }
-                    }
-
-                    return renderedBefore + renderedContent + renderedAfter;
-                });
-            },
-
-            /*
-             Replace {{foo}} and friends with values from our view
-             */
-            render_tags:function (template, context, partials, in_recursion) {
-                // tit for tat
-                var that = this;
-
-                var new_regex = function () {
-                    return that.getCachedRegex("render_tags", function (otag, ctag) {
-                        return new RegExp(otag + "(=|!|>|&|\\{|%)?([^#\\^]+?)\\1?" + ctag + "+", "g");
-                    });
-                };
-
-                var regex = new_regex();
-                var tag_replace_callback = function (match, operator, name) {
-                    switch (operator) {
-                        case "!": // ignore comments
-                            return "";
-                        case "=": // set new delimiters, rebuild the replace regexp
-                            that.set_delimiters(name);
-                            regex = new_regex();
-                            return "";
-                        case ">": // render partial
-                            return that.render_partial(name, context, partials);
-                        case "{": // the triple mustache is unescaped
-                        case "&": // & operator is an alternative unescape method
-                            return that.find(name, context);
-                        default: // escape the value
-                            return escapeHTML(that.find(name, context));
-                    }
-                };
-                var lines = template.split("\n");
-                for (var i = 0; i < lines.length; i++) {
-                    lines[i] = lines[i].replace(regex, tag_replace_callback, this);
-                    if (!in_recursion) {
-                        this.send(lines[i]);
-                    }
-                }
-
-                if (in_recursion) {
-                    return lines.join("\n");
-                }
-            },
-
-            set_delimiters:function (delimiters) {
-                var dels = delimiters.split(" ");
-                this.otag = this.escape_regex(dels[0]);
-                this.ctag = this.escape_regex(dels[1]);
-            },
-
-            escape_regex:function (text) {
-                // thank you Simon Willison
-                if (!arguments.callee.sRE) {
-                    var specials = [
-                        '/', '.', '*', '+', '?', '|',
-                        '(', ')', '[', ']', '{', '}', '\\'
-                    ];
-                    arguments.callee.sRE = new RegExp(
-                        '(\\' + specials.join('|\\') + ')', 'g'
-                    );
-                }
-                return text.replace(arguments.callee.sRE, '\\$1');
-            },
-
-            /*
-             find `name` in current `context`. That is find me a value
-             from the view object
-             */
-            find:function (name, context) {
-                name = trim(name);
-
-                // Checks whether a value is thruthy or false or 0
-                function is_kinda_truthy(bool) {
-                    return bool === false || bool === 0 || bool;
-                }
-
-                var value;
-
-                // check for dot notation eg. foo.bar
-                if (name.match(/([a-z_]+)\./ig)) {
-                    var childValue = this.walk_context(name, context);
-                    if (is_kinda_truthy(childValue)) {
-                        value = childValue;
-                    }
-                } else {
-                    if (is_kinda_truthy(context[name])) {
-                        value = context[name];
-                    } else if (is_kinda_truthy(this.context[name])) {
-                        value = this.context[name];
-                    }
-                }
-
-                if (typeof value == "function") {
-                    return value.apply(context);
-                }
-                if (value !== undefined) {
-                    return value;
-                }
-                // silently ignore unkown variables
-                return "";
-            },
-
-            walk_context:function (name, context) {
-                var path = name.split('.');
-                // if the var doesn't exist in current context, check the top level context
-                var value_context = (context[path[0]] != undefined) ? context : this.context;
-                var value = value_context[path.shift()];
-                while (value != undefined && path.length > 0) {
-                    value_context = value;
-                    value = value[path.shift()];
-                }
-                // if the value is a function, call it, binding the correct context
-                if (typeof value == "function") {
-                    return value.apply(value_context);
-                }
-                return value;
-            },
-
-            // Utility methods
-
-            /* includes tag */
-            includes:function (needle, haystack) {
-                return haystack.indexOf(this.otag + needle) != -1;
-            },
-
-            // by @langalex, support for arrays of strings
-            create_context:function (_context) {
-                if (this.is_object(_context)) {
-                    return _context;
-                } else {
-                    var iterator = ".";
-                    if (this.pragmas["IMPLICIT-ITERATOR"]) {
-                        iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator;
-                    }
-                    var ctx = {};
-                    ctx[iterator] = _context;
-                    return ctx;
-                }
-            },
-
-            is_object:function (a) {
-                return a && typeof a == "object";
-            },
-
-            /*
-             Why, why, why? Because IE. Cry, cry cry.
-             */
-            map:function (array, fn) {
-                if (typeof array.map == "function") {
-                    return array.map(fn);
-                } else {
-                    var r = [];
-                    var l = array.length;
-                    for (var i = 0; i < l; i++) {
-                        r.push(fn(array[i]));
-                    }
-                    return r;
-                }
-            },
-
-            getCachedRegex:function (name, generator) {
-                var byOtag = regexCache[this.otag];
-                if (!byOtag) {
-                    byOtag = regexCache[this.otag] = {};
-                }
-
-                var byCtag = byOtag[this.ctag];
-                if (!byCtag) {
-                    byCtag = byOtag[this.ctag] = {};
-                }
-
-                var regex = byCtag[name];
-                if (!regex) {
-                    regex = byCtag[name] = generator(this.otag, this.ctag);
-                }
-
-                return regex;
-            }
-        };
-
-        return({
-            name:"mustache.js",
-            version:"0.4.0",
-
-            /*
-             Turns a template and view into HTML
-             */
-            to_html:function (template, view, partials, send_fun) {
-                var renderer = new Renderer();
-                if (send_fun) {
-                    renderer.send = send_fun;
-                }
-                renderer.render(template, view || {}, partials);
-                if (!send_fun) {
-                    return renderer.buffer.join("\n");
-                }
-            }
+      var new_regex = function () {
+        return that.getCachedRegex("render_tags", function (otag, ctag) {
+          return new RegExp(otag + "(=|!|>|&|\\{|%)?([^#\\^]+?)\\1?" + ctag + "+", "g");
         });
-    }();
-    /*!
-     ICanHaz.js -- by @HenrikJoreteg
-     */
-    /*global  */
-    (function () {
-        function trim(stuff) {
-            if (''.trim) return stuff.trim();
-            else return stuff.replace(/^\s+/, '').replace(/\s+$/, '');
+      };
+
+      var regex = new_regex();
+      var tag_replace_callback = function (match, operator, name) {
+        switch(operator) {
+        case "!": // ignore comments
+          return "";
+        case "=": // set new delimiters, rebuild the replace regexp
+          that.set_delimiters(name);
+          regex = new_regex();
+          return "";
+        case ">": // render partial
+          return that.render_partial(name, context, partials);
+        case "{": // the triple mustache is unescaped
+        case "&": // & operator is an alternative unescape method
+          return that.find(name, context);
+        default: // escape the value
+          return escapeHTML(that.find(name, context));
         }
+      };
+      var lines = template.split("\n");
+      for(var i = 0; i < lines.length; i++) {
+        lines[i] = lines[i].replace(regex, tag_replace_callback, this);
+        if (!in_recursion) {
+          this.send(lines[i]);
+        }
+      }
 
-        var ich = {
-            VERSION:"0.10",
-            templates:{},
+      if (in_recursion) {
+        return lines.join("\n");
+      }
+    },
 
-            // grab jquery or zepto if it's there
-            $:(typeof window !== 'undefined') ? window.jQuery || window.Zepto || null : null,
+    set_delimiters: function (delimiters) {
+      var dels = delimiters.split(" ");
+      this.otag = this.escape_regex(dels[0]);
+      this.ctag = this.escape_regex(dels[1]);
+    },
 
-            // public function for adding templates
-            // can take a name and template string arguments
-            // or can take an object with name/template pairs
-            // We're enforcing uniqueness to avoid accidental template overwrites.
-            // If you want a different template, it should have a different name.
-            addTemplate:function (name, templateString) {
-                if (typeof name === 'object') {
-                    for (var template in name) {
-                        this.addTemplate(template, name[template]);
-                    }
-                    return;
-                }
-                if (ich[name]) {
-                    console.error("Invalid name: " + name + ".");
-                } else if (ich.templates[name]) {
-                    console.error("Template \"" + name + "  \" exists");
-                } else {
-                    ich.templates[name] = templateString;
-                    ich[name] = function (data, raw) {
-                        data = data || {};
-                        var result = Mustache.to_html(ich.templates[name], data, ich.templates);
-                        return (ich.$ && !raw) ? ich.$(result) : result;
-                    };
-                }
-            },
-
-            // clears all retrieval functions and empties cache
-            clearAll:function () {
-                for (var key in ich.templates) {
-                    delete ich[key];
-                }
-                ich.templates = {};
-            },
-
-            // clears/grabs
-            refresh:function () {
-                ich.clearAll();
-                ich.grabTemplates();
-            },
-
-            // grabs templates from the DOM and caches them.
-            // Loop through and add templates.
-            // Whitespace at beginning and end of all templates inside <script> tags will
-            // be trimmed. If you want whitespace around a partial, add it in the parent,
-            // not the partial. Or do it explicitly using <br/> or &nbsp;
-            grabTemplates:function () {
-                var i,
-                    scripts = document.getElementsByTagName('script'),
-                    script,
-                    trash = [];
-                for (i = 0, l = scripts.length; i < l; i++) {
-                    script = scripts[i];
-                    if (script && script.innerHTML && script.id && (script.type === "text/html" || script.type === "text/x-icanhaz")) {
-                        ich.addTemplate(script.id, trim(script.innerHTML));
-                        trash.unshift(script);
-                    }
-                }
-                for (i = 0, l = trash.length; i < l; i++) {
-                    trash[i].parentNode.removeChild(trash[i]);
+    escape_regex: function (text) {
+      // thank you Simon Willison
+      if (!arguments.callee.sRE) {
+        var specials = [
+          '/', '.', '*', '+', '?', '|',
+          '(', ')', '[', ']', '{', '}', '\\'
+        ];
+        arguments.callee.sRE = new RegExp(
+          '(\\' + specials.join('|\\') + ')', 'g'
+        );
+      }
+      return text.replace(arguments.callee.sRE, '\\$1');
+    },
+
+    /*
+      find `name` in current `context`. That is find me a value
+      from the view object
+    */
+    find: function (name, context) {
+      name = trim(name);
+
+      // Checks whether a value is thruthy or false or 0
+      function is_kinda_truthy(bool) {
+        return bool === false || bool === 0 || bool;
+      }
+
+      var value;
+
+      // check for dot notation eg. foo.bar
+      if (name.match(/([a-z_]+)\./ig)) {
+        var childValue = this.walk_context(name, context);
+        if (is_kinda_truthy(childValue)) {
+          value = childValue;
+        }
+      } else {
+        if (is_kinda_truthy(context[name])) {
+          value = context[name];
+        } else if (is_kinda_truthy(this.context[name])) {
+          value = this.context[name];
+        }
+      }
+
+      if (typeof value == "function") {
+        return value.apply(context);
+      }
+      if (value !== undefined) {
+        return value;
+      }
+      // silently ignore unkown variables
+      return "";
+    },
+
+    walk_context: function (name, context) {
+      var path = name.split('.');
+      // if the var doesn't exist in current context, check the top level context
+      var value_context = (context[path[0]] != undefined) ? context : this.context;
+      var value = value_context[path.shift()];
+      while (value != undefined && path.length > 0) {
+        value_context = value;
+        value = value[path.shift()];
+      }
+      // if the value is a function, call it, binding the correct context
+      if (typeof value == "function") {
+        return value.apply(value_context);
+      }
+      return value;
+    },
+
+    // Utility methods
+
+    /* includes tag */
+    includes: function (needle, haystack) {
+      return haystack.indexOf(this.otag + needle) != -1;
+    },
+
+    // by @langalex, support for arrays of strings
+    create_context: function (_context) {
+      if (this.is_object(_context)) {
+        return _context;
+      } else {
+        var iterator = ".";
+        if (this.pragmas["IMPLICIT-ITERATOR"]) {
+          iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator;
+        }
+        var ctx = {};
+        ctx[iterator] = _context;
+        return ctx;
+      }
+    },
+
+    is_object: function (a) {
+      return a && typeof a == "object";
+    },
+
+    /*
+      Why, why, why? Because IE. Cry, cry cry.
+    */
+    map: function (array, fn) {
+      if (typeof array.map == "function") {
+        return array.map(fn);
+      } else {
+        var r = [];
+        var l = array.length;
+        for(var i = 0; i < l; i++) {
+          r.push(fn(array[i]));
+        }
+        return r;
+      }
+    },
+
+    getCachedRegex: function (name, generator) {
+      var byOtag = regexCache[this.otag];
+      if (!byOtag) {
+        byOtag = regexCache[this.otag] = {};
+      }
+
+      var byCtag = byOtag[this.ctag];
+      if (!byCtag) {
+        byCtag = byOtag[this.ctag] = {};
+      }
+
+      var regex = byCtag[name];
+      if (!regex) {
+        regex = byCtag[name] = generator(this.otag, this.ctag);
+      }
+
+      return regex;
+    }
+  };
+
+  return({
+    name: "mustache.js",
+    version: "0.4.0",
+
+    /*
+      Turns a template and view into HTML
+    */
+    to_html: function (template, view, partials, send_fun) {
+      var renderer = new Renderer();
+      if (send_fun) {
+        renderer.send = send_fun;
+      }
+      renderer.render(template, view || {}, partials);
+      if (!send_fun) {
+        return renderer.buffer.join("\n");
+      }
+    }
+  });
+}();
+/*!
+  ICanHaz.js -- by @HenrikJoreteg
+*/
+/*global  */
+(function () {
+    function trim(stuff) {
+        if (''.trim) return stuff.trim();
+        else return stuff.replace(/^\s+/, '').replace(/\s+$/, '');
+    }
+
+    // Establish the root object, `window` in the browser, or `global` on the server.
+    var root = this;
+
+    var ich = {
+        VERSION: "0.10.2",
+        templates: {},
+
+        // grab jquery or zepto if it's there
+        $: (typeof window !== 'undefined') ? window.jQuery || window.Zepto || null : null,
+
+        // public function for adding templates
+        // can take a name and template string arguments
+        // or can take an object with name/template pairs
+        // We're enforcing uniqueness to avoid accidental template overwrites.
+        // If you want a different template, it should have a different name.
+        addTemplate: function (name, templateString) {
+            if (typeof name === 'object') {
+                for (var template in name) {
+                    this.addTemplate(template, name[template]);
                 }
+                return;
             }
-        };
-
-        // Use CommonJS if applicable
-        if (typeof require !== 'undefined') {
-            module.exports = ich;
-        } else {
-            // else attach it to the window
-            window.ich = ich;
-        }
-
-        if (typeof document !== 'undefined') {
-            if (ich.$) {
-                ich.$(function () {
-                    ich.grabTemplates();
-                });
+            if (ich[name]) {
+                console.error("Invalid name: " + name + ".");
+            } else if (ich.templates[name]) {
+                console.error("Template \"" + name + "  \" exists");
             } else {
-                document.addEventListener('DOMContentLoaded', function () {
-                    ich.grabTemplates();
-                }, true);
+                ich.templates[name] = templateString;
+                ich[name] = function (data, raw) {
+                    data = data || {};
+                    var result = Mustache.to_html(ich.templates[name], data, ich.templates);
+                    return (ich.$ && !raw) ? ich.$(trim(result)) : result;
+                };
+            }
+        },
+
+        // clears all retrieval functions and empties cache
+        clearAll: function () {
+            for (var key in ich.templates) {
+                delete ich[key];
+            }
+            ich.templates = {};
+        },
+
+        // clears/grabs
+        refresh: function () {
+            ich.clearAll();
+            ich.grabTemplates();
+        },
+
+        // grabs templates from the DOM and caches them.
+        // Loop through and add templates.
+        // Whitespace at beginning and end of all templates inside <script> tags will
+        // be trimmed. If you want whitespace around a partial, add it in the parent,
+        // not the partial. Or do it explicitly using <br/> or &nbsp;
+        grabTemplates: function () {
+            var i,
+                l,
+                scripts = document.getElementsByTagName('script'),
+                script,
+                trash = [];
+            for (i = 0, l = scripts.length; i < l; i++) {
+                script = scripts[i];
+                if (script && script.innerHTML && script.id && (script.type === "text/html" || script.type === "text/x-icanhaz")) {
+                    ich.addTemplate(script.id, trim(script.innerHTML));
+                    trash.unshift(script);
+                }
+            }
+            for (i = 0, l = trash.length; i < l; i++) {
+                trash[i].parentNode.removeChild(trash[i]);
             }
         }
+    };
+
+    // Export the ICanHaz object for **Node.js**, with
+    // backwards-compatibility for the old `require()` API. If we're in
+    // the browser, add `ich` as a global object via a string identifier,
+    // for Closure Compiler "advanced" mode.
+    if (typeof exports !== 'undefined') {
+        if (typeof module !== 'undefined' && module.exports) {
+            exports = module.exports = ich;
+        }
+        exports.ich = ich;
+    } else {
+        root['ich'] = ich;
+    }
+
+    if (typeof document !== 'undefined') {
+        if (ich.$) {
+            ich.$(function () {
+                ich.grabTemplates();
+            });
+        } else {
+            document.addEventListener('DOMContentLoaded', function () {
+                ich.grabTemplates();
+            }, true);
+        }
+    }
 
-    })();
 })();
+})();
\ No newline at end of file
diff --git a/static/js/libs/backbone/backbone.marionette.js b/static/js/libs/backbone/backbone.marionette.js
new file mode 100755
index 0000000..eca567d
--- /dev/null
+++ b/static/js/libs/backbone/backbone.marionette.js
@@ -0,0 +1,2388 @@
+// MarionetteJS (Backbone.Marionette)
+// ----------------------------------
+// v1.0.2
+//
+// Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+//
+// http://marionettejs.com
+
+
+/*!
+ * Includes BabySitter
+ * https://github.com/marionettejs/backbone.babysitter/
+ *
+ * Includes Wreqr
+ * https://github.com/marionettejs/backbone.wreqr/
+ */
+
+// Backbone.BabySitter
+// -------------------
+// v0.0.5
+//
+// Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+//
+// http://github.com/babysitterjs/backbone.babysitter
+
+// Backbone.ChildViewContainer
+// ---------------------------
+//
+// Provide a container to store, retrieve and
+// shut down child views.
+
+Backbone.ChildViewContainer = (function (Backbone, _) {
+
+    // Container Constructor
+    // ---------------------
+
+    var Container = function (initialViews) {
+        this._views = {};
+        this._indexByModel = {};
+        this._indexByCollection = {};
+        this._indexByCustom = {};
+        this._updateLength();
+
+        this._addInitialViews(initialViews);
+    };
+
+    // Container Methods
+    // -----------------
+
+    _.extend(Container.prototype, {
+
+        // Add a view to this container. Stores the view
+        // by `cid` and makes it searchable by the model
+        // and/or collection of the view. Optionally specify
+        // a custom key to store an retrieve the view.
+        add: function (view, customIndex) {
+            var viewCid = view.cid;
+
+            // store the view
+            this._views[viewCid] = view;
+
+            // index it by model
+            if (view.model) {
+                this._indexByModel[view.model.cid] = viewCid;
+            }
+
+            // index it by collection
+            if (view.collection) {
+                this._indexByCollection[view.collection.cid] = viewCid;
+            }
+
+            // index by custom
+            if (customIndex) {
+                this._indexByCustom[customIndex] = viewCid;
+            }
+
+            this._updateLength();
+        },
+
+        // Find a view by the model that was attached to
+        // it. Uses the model's `cid` to find it, and
+        // retrieves the view by it's `cid` from the result
+        findByModel: function (model) {
+            var viewCid = this._indexByModel[model.cid];
+            return this.findByCid(viewCid);
+        },
+
+        // Find a view by the collection that was attached to
+        // it. Uses the collection's `cid` to find it, and
+        // retrieves the view by it's `cid` from the result
+        findByCollection: function (col) {
+            var viewCid = this._indexByCollection[col.cid];
+            return this.findByCid(viewCid);
+        },
+
+        // Find a view by a custom indexer.
+        findByCustom: function (index) {
+            var viewCid = this._indexByCustom[index];
+            return this.findByCid(viewCid);
+        },
+
+        // Find by index. This is not guaranteed to be a
+        // stable index.
+        findByIndex: function (index) {
+            return _.values(this._views)[index];
+        },
+
+        // retrieve a view by it's `cid` directly
+        findByCid: function (cid) {
+            return this._views[cid];
+        },
+
+        // Remove a view
+        remove: function (view) {
+            var viewCid = view.cid;
+
+            // delete model index
+            if (view.model) {
+                delete this._indexByModel[view.model.cid];
+            }
+
+            // delete collection index
+            if (view.collection) {
+                delete this._indexByCollection[view.collection.cid];
+            }
+
+            // delete custom index
+            var cust;
+
+            for (var key in this._indexByCustom) {
+                if (this._indexByCustom.hasOwnProperty(key)) {
+                    if (this._indexByCustom[key] === viewCid) {
+                        cust = key;
+                        break;
+                    }
+                }
+            }
+
+            if (cust) {
+                delete this._indexByCustom[cust];
+            }
+
+            // remove the view from the container
+            delete this._views[viewCid];
+
+            // update the length
+            this._updateLength();
+        },
+
+        // Call a method on every view in the container,
+        // passing parameters to the call method one at a
+        // time, like `function.call`.
+        call: function (method, args) {
+            args = Array.prototype.slice.call(arguments, 1);
+            this.apply(method, args);
+        },
+
+        // Apply a method on every view in the container,
+        // passing parameters to the call method one at a
+        // time, like `function.apply`.
+        apply: function (method, args) {
+            var view;
+
+            // fix for IE < 9
+            args = args || [];
+
+            _.each(this._views, function (view, key) {
+                if (_.isFunction(view[method])) {
+                    view[method].apply(view, args);
+                }
+            });
+
+        },
+
+        // Update the `.length` attribute on this container
+        _updateLength: function () {
+            this.length = _.size(this._views);
+        },
+
+        // set up an initial list of views
+        _addInitialViews: function (views) {
+            if (!views) {
+                return;
+            }
+
+            var view, i,
+                length = views.length;
+
+            for (i = 0; i < length; i++) {
+                view = views[i];
+                this.add(view);
+            }
+        }
+    });
+
+    // Borrowing this code from Backbone.Collection:
+    // http://backbonejs.org/docs/backbone.html#section-106
+    //
+    // Mix in methods from Underscore, for iteration, and other
+    // collection related features.
+    var methods = ['forEach', 'each', 'map', 'find', 'detect', 'filter',
+        'select', 'reject', 'every', 'all', 'some', 'any', 'include',
+        'contains', 'invoke', 'toArray', 'first', 'initial', 'rest',
+        'last', 'without', 'isEmpty', 'pluck'];
+
+    _.each(methods, function (method) {
+        Container.prototype[method] = function () {
+            var views = _.values(this._views);
+            var args = [views].concat(_.toArray(arguments));
+            return _[method].apply(_, args);
+        };
+    });
+
+    // return the public API
+    return Container;
+})(Backbone, _);
+
+// Backbone.Wreqr (Backbone.Marionette)
+// ----------------------------------
+// v0.2.0
+//
+// Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+//
+// http://github.com/marionettejs/backbone.wreqr
+
+
+Backbone.Wreqr = (function (Backbone, Marionette, _) {
+    "use strict";
+    var Wreqr = {};
+
+    // Handlers
+// --------
+// A registry of functions to call, given a name
+
+    Wreqr.Handlers = (function (Backbone, _) {
+        "use strict";
+
+        // Constructor
+        // -----------
+
+        var Handlers = function (options) {
+            this.options = options;
+            this._wreqrHandlers = {};
+
+            if (_.isFunction(this.initialize)) {
+                this.initialize(options);
+            }
+        };
+
+        Handlers.extend = Backbone.Model.extend;
+
+        // Instance Members
+        // ----------------
+
+        _.extend(Handlers.prototype, Backbone.Events, {
+
+            // Add multiple handlers using an object literal configuration
+            setHandlers: function (handlers) {
+                _.each(handlers, function (handler, name) {
+                    var context = null;
+
+                    if (_.isObject(handler) && !_.isFunction(handler)) {
+                        context = handler.context;
+                        handler = handler.callback;
+                    }
+
+                    this.setHandler(name, handler, context);
+                }, this);
+            },
+
+            // Add a handler for the given name, with an
+            // optional context to run the handler within
+            setHandler: function (name, handler, context) {
+                var config = {
+                    callback: handler,
+                    context: context
+                };
+
+                this._wreqrHandlers[name] = config;
+
+                this.trigger("handler:add", name, handler, context);
+            },
+
+            // Determine whether or not a handler is registered
+            hasHandler: function (name) {
+                return !!this._wreqrHandlers[name];
+            },
+
+            // Get the currently registered handler for
+            // the specified name. Throws an exception if
+            // no handler is found.
+            getHandler: function (name) {
+                var config = this._wreqrHandlers[name];
+
+                if (!config) {
+                    throw new Error("Handler not found for '" + name + "'");
+                }
+
+                return function () {
+                    var args = Array.prototype.slice.apply(arguments);
+                    return config.callback.apply(config.context, args);
+                };
+            },
+
+            // Remove a handler for the specified name
+            removeHandler: function (name) {
+                delete this._wreqrHandlers[name];
+            },
+
+            // Remove all handlers from this registry
+            removeAllHandlers: function () {
+                this._wreqrHandlers = {};
+            }
+        });
+
+        return Handlers;
+    })(Backbone, _);
+
+    // Wreqr.CommandStorage
+// --------------------
+//
+// Store and retrieve commands for execution.
+    Wreqr.CommandStorage = (function () {
+        "use strict";
+
+        // Constructor function
+        var CommandStorage = function (options) {
+            this.options = options;
+            this._commands = {};
+
+            if (_.isFunction(this.initialize)) {
+                this.initialize(options);
+            }
+        };
+
+        // Instance methods
+        _.extend(CommandStorage.prototype, Backbone.Events, {
+
+            // Get an object literal by command name, that contains
+            // the `commandName` and the `instances` of all commands
+            // represented as an array of arguments to process
+            getCommands: function (commandName) {
+                var commands = this._commands[commandName];
+
+                // we don't have it, so add it
+                if (!commands) {
+
+                    // build the configuration
+                    commands = {
+                        command: commandName,
+                        instances: []
+                    };
+
+                    // store it
+                    this._commands[commandName] = commands;
+                }
+
+                return commands;
+            },
+
+            // Add a command by name, to the storage and store the
+            // args for the command
+            addCommand: function (commandName, args) {
+                var command = this.getCommands(commandName);
+                command.instances.push(args);
+            },
+
+            // Clear all commands for the given `commandName`
+            clearCommands: function (commandName) {
+                var command = this.getCommands(commandName);
+                command.instances = [];
+            }
+        });
+
+        return CommandStorage;
+    })();
+
+    // Wreqr.Commands
+// --------------
+//
+// A simple command pattern implementation. Register a command
+// handler and execute it.
+    Wreqr.Commands = (function (Wreqr) {
+        "use strict";
+
+        return Wreqr.Handlers.extend({
+            // default storage type
+            storageType: Wreqr.CommandStorage,
+
+            constructor: function (options) {
+                this.options = options || {};
+
+                this._initializeStorage(this.options);
+                this.on("handler:add", this._executeCommands, this);
+
+                var args = Array.prototype.slice.call(arguments);
+                Wreqr.Handlers.prototype.constructor.apply(this, args);
+            },
+
+            // Execute a named command with the supplied args
+            execute: function (name, args) {
+                name = arguments[0];
+                args = Array.prototype.slice.call(arguments, 1);
+
+                if (this.hasHandler(name)) {
+                    this.getHandler(name).apply(this, args);
+                } else {
+                    this.storage.addCommand(name, args);
+                }
+
+            },
+
+            // Internal method to handle bulk execution of stored commands
+            _executeCommands: function (name, handler, context) {
+                var command = this.storage.getCommands(name);
+
+                // loop through and execute all the stored command instances
+                _.each(command.instances, function (args) {
+                    handler.apply(context, args);
+                });
+
+                this.storage.clearCommands(name);
+            },
+
+            // Internal method to initialize storage either from the type's
+            // `storageType` or the instance `options.storageType`.
+            _initializeStorage: function (options) {
+                var storage;
+
+                var StorageType = options.storageType || this.storageType;
+                if (_.isFunction(StorageType)) {
+                    storage = new StorageType();
+                } else {
+                    storage = StorageType;
+                }
+
+                this.storage = storage;
+            }
+        });
+
+    })(Wreqr);
+
+    // Wreqr.RequestResponse
+// ---------------------
+//
+// A simple request/response implementation. Register a
+// request handler, and return a response from it
+    Wreqr.RequestResponse = (function (Wreqr) {
+        "use strict";
+
+        return Wreqr.Handlers.extend({
+            request: function () {
+                var name = arguments[0];
+                var args = Array.prototype.slice.call(arguments, 1);
+
+                return this.getHandler(name).apply(this, args);
+            }
+        });
+
+    })(Wreqr);
+
+    // Event Aggregator
+// ----------------
+// A pub-sub object that can be used to decouple various parts
+// of an application through event-driven architecture.
+
+    Wreqr.EventAggregator = (function (Backbone, _) {
+        "use strict";
+        var EA = function () {
+        };
+
+        // Copy the `extend` function used by Backbone's classes
+        EA.extend = Backbone.Model.extend;
+
+        // Copy the basic Backbone.Events on to the event aggregator
+        _.extend(EA.prototype, Backbone.Events);
+
+        return EA;
+    })(Backbone, _);
+
+
+    return Wreqr;
+})(Backbone, Backbone.Marionette, _);
+
+var Marionette = (function (global, Backbone, _) {
+    "use strict";
+
+    // Define and export the Marionette namespace
+    var Marionette = {};
+    Backbone.Marionette = Marionette;
+
+    // Get the DOM manipulator for later use
+    Marionette.$ = Backbone.$;
+
+// Helpers
+// -------
+
+// For slicing `arguments` in functions
+    var protoSlice = Array.prototype.slice;
+
+    function slice(args) {
+        return protoSlice.call(args);
+    }
+
+    function throwError(message, name) {
+        var error = new Error(message);
+        error.name = name || 'Error';
+        throw error;
+    }
+
+// Marionette.extend
+// -----------------
+
+// Borrow the Backbone `extend` method so we can use it as needed
+    Marionette.extend = Backbone.Model.extend;
+
+// Marionette.getOption
+// --------------------
+
+// Retrieve an object, function or other value from a target
+// object or it's `options`, with `options` taking precedence.
+    Marionette.getOption = function (target, optionName) {
+        if (!target || !optionName) {
+            return;
+        }
+        var value;
+
+        if (target.options && (optionName in target.options) && (target.options[optionName] !== undefined)) {
+            value = target.options[optionName];
+        } else {
+            value = target[optionName];
+        }
+
+        return value;
+    };
+
+// Trigger an event and a corresponding method name. Examples:
+//
+// `this.triggerMethod("foo")` will trigger the "foo" event and
+// call the "onFoo" method.
+//
+// `this.triggerMethod("foo:bar") will trigger the "foo:bar" event and
+// call the "onFooBar" method.
+    Marionette.triggerMethod = (function () {
+
+        // split the event name on the :
+        var splitter = /(^|:)(\w)/gi;
+
+        // take the event section ("section1:section2:section3")
+        // and turn it in to uppercase name
+        function getEventName(match, prefix, eventName) {
+            return eventName.toUpperCase();
+        }
+
+        // actual triggerMethod name
+        var triggerMethod = function (event) {
+            // get the method name from the event name
+            var methodName = 'on' + event.replace(splitter, getEventName);
+            var method = this[methodName];
+
+            // trigger the event
+            this.trigger.apply(this, arguments);
+
+            // call the onMethodName if it exists
+            if (_.isFunction(method)) {
+                // pass all arguments, except the event name
+                return method.apply(this, _.tail(arguments));
+            }
+        };
+
+        return triggerMethod;
+    })();
+
+// DOMRefresh
+// ----------
+//
+// Monitor a view's state, and after it has been rendered and shown
+// in the DOM, trigger a "dom:refresh" event every time it is
+// re-rendered.
+
+    Marionette.MonitorDOMRefresh = (function () {
+        // track when the view has been rendered
+        function handleShow(view) {
+            view._isShown = true;
+            triggerDOMRefresh(view);
+        }
+
+        // track when the view has been shown in the DOM,
+        // using a Marionette.Region (or by other means of triggering "show")
+        function handleRender(view) {
+            view._isRendered = true;
+            triggerDOMRefresh(view);
+        }
+
+        // Trigger the "dom:refresh" event and corresponding "onDomRefresh" method
+        function triggerDOMRefresh(view) {
+            if (view._isShown && view._isRendered) {
+                if (_.isFunction(view.triggerMethod)) {
+                    view.triggerMethod("dom:refresh");
+                }
+            }
+        }
+
+        // Export public API
+        return function (view) {
+            view.listenTo(view, "show", function () {
+                handleShow(view);
+            });
+
+            view.listenTo(view, "render", function () {
+                handleRender(view);
+            });
+        };
+    })();
+
+
+// Marionette.bindEntityEvents & unbindEntityEvents
+// ---------------------------
+//
+// These methods are used to bind/unbind a backbone "entity" (collection/model)
+// to methods on a target object.
+//
+// The first parameter, `target`, must have a `listenTo` method from the
+// EventBinder object.
+//
+// The second parameter is the entity (Backbone.Model or Backbone.Collection)
+// to bind the events from.
+//
+// The third parameter is a hash of { "event:name": "eventHandler" }
+// configuration. Multiple handlers can be separated by a space. A
+// function can be supplied instead of a string handler name.
+
+    (function (Marionette) {
+        "use strict";
+
+        // Bind the event to handlers specified as a string of
+        // handler names on the target object
+        function bindFromStrings(target, entity, evt, methods) {
+            var methodNames = methods.split(/\s+/);
+
+            _.each(methodNames, function (methodName) {
+
+                var method = target[methodName];
+                if (!method) {
+                    throwError("Method '" + methodName + "' was configured as an event handler, but does not exist.");
+                }
+
+                target.listenTo(entity, evt, method, target);
+            });
+        }
+
+        // Bind the event to a supplied callback function
+        function bindToFunction(target, entity, evt, method) {
+            target.listenTo(entity, evt, method, target);
+        }
+
+        // Bind the event to handlers specified as a string of
+        // handler names on the target object
+        function unbindFromStrings(target, entity, evt, methods) {
+            var methodNames = methods.split(/\s+/);
+
+            _.each(methodNames, function (methodName) {
+                var method = target[method];
+                target.stopListening(entity, evt, method, target);
+            });
+        }
+
+        // Bind the event to a supplied callback function
+        function unbindToFunction(target, entity, evt, method) {
+            target.stopListening(entity, evt, method, target);
+        }
+
+
+        // generic looping function
+        function iterateEvents(target, entity, bindings, functionCallback, stringCallback) {
+            if (!entity || !bindings) {
+                return;
+            }
+
+            // allow the bindings to be a function
+            if (_.isFunction(bindings)) {
+                bindings = bindings.call(target);
+            }
+
+            // iterate the bindings and bind them
+            _.each(bindings, function (methods, evt) {
+
+                // allow for a function as the handler,
+                // or a list of event names as a string
+                if (_.isFunction(methods)) {
+                    functionCallback(target, entity, evt, methods);
+                } else {
+                    stringCallback(target, entity, evt, methods);
+                }
+
+            });
+        }
+
+        // Export Public API
+        Marionette.bindEntityEvents = function (target, entity, bindings) {
+            iterateEvents(target, entity, bindings, bindToFunction, bindFromStrings);
+        };
+
+        Marionette.unbindEntityEvents = function (target, entity, bindings) {
+            iterateEvents(target, entity, bindings, unbindToFunction, unbindFromStrings);
+        };
+
+    })(Marionette);
+
+
+// Callbacks
+// ---------
+
+// A simple way of managing a collection of callbacks
+// and executing them at a later point in time, using jQuery's
+// `Deferred` object.
+    Marionette.Callbacks = function () {
+        this._deferred = Marionette.$.Deferred();
+        this._callbacks = [];
+    };
+
+    _.extend(Marionette.Callbacks.prototype, {
+
+        // Add a callback to be executed. Callbacks added here are
+        // guaranteed to execute, even if they are added after the
+        // `run` method is called.
+        add: function (callback, contextOverride) {
+            this._callbacks.push({cb: callback, ctx: contextOverride});
+
+            this._deferred.done(function (context, options) {
+                if (contextOverride) {
+                    context = contextOverride;
+                }
+                callback.call(context, options);
+            });
+        },
+
+        // Run all registered callbacks with the context specified.
+        // Additional callbacks can be added after this has been run
+        // and they will still be executed.
+        run: function (options, context) {
+            this._deferred.resolve(context, options);
+        },
+
+        // Resets the list of callbacks to be run, allowing the same list
+        // to be run multiple times - whenever the `run` method is called.
+        reset: function () {
+            var callbacks = this._callbacks;
+            this._deferred = Marionette.$.Deferred();
+            this._callbacks = [];
+
+            _.each(callbacks, function (cb) {
+                this.add(cb.cb, cb.ctx);
+            }, this);
+        }
+    });
+
+
+// Marionette Controller
+// ---------------------
+//
+// A multi-purpose object to use as a controller for
+// modules and routers, and as a mediator for workflow
+// and coordination of other objects, views, and more.
+    Marionette.Controller = function (options) {
+        this.triggerMethod = Marionette.triggerMethod;
+        this.options = options || {};
+
+        if (_.isFunction(this.initialize)) {
+            this.initialize(this.options);
+        }
+    };
+
+    Marionette.Controller.extend = Marionette.extend;
+
+// Controller Methods
+// --------------
+
+// Ensure it can trigger events with Backbone.Events
+    _.extend(Marionette.Controller.prototype, Backbone.Events, {
+        close: function () {
+            this.stopListening();
+            this.triggerMethod("close");
+            this.unbind();
+        }
+    });
+
+// Region
+// ------
+//
+// Manage the visual regions of your composite application. See
+// http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
+
+    Marionette.Region = function (options) {
+        this.options = options || {};
+
+        this.el = Marionette.getOption(this, "el");
+
+        if (!this.el) {
+            var err = new Error("An 'el' must be specified for a region.");
+            err.name = "NoElError";
+            throw err;
+        }
+
+        if (this.initialize) {
+            var args = Array.prototype.slice.apply(arguments);
+            this.initialize.apply(this, args);
+        }
+    };
+
+
+// Region Type methods
+// -------------------
+
+    _.extend(Marionette.Region, {
+
+        // Build an instance of a region by passing in a configuration object
+        // and a default region type to use if none is specified in the config.
+        //
+        // The config object should either be a string as a jQuery DOM selector,
+        // a Region type directly, or an object literal that specifies both
+        // a selector and regionType:
+        //
+        // ```js
+        // {
+        //   selector: "#foo",
+        //   regionType: MyCustomRegion
+        // }
+        // ```
+        //
+        buildRegion: function (regionConfig, defaultRegionType) {
+            var regionIsString = (typeof regionConfig === "string");
+            var regionSelectorIsString = (typeof regionConfig.selector === "string");
+            var regionTypeIsUndefined = (typeof regionConfig.regionType === "undefined");
+            var regionIsType = (typeof regionConfig === "function");
+
+            if (!regionIsType && !regionIsString && !regionSelectorIsString) {
+                throw new Error("Region must be specified as a Region type, a selector string or an object with selector property");
+            }
+
+            var selector, RegionType;
+
+            // get the selector for the region
+
+            if (regionIsString) {
+                selector = regionConfig;
+            }
+
+            if (regionConfig.selector) {
+                selector = regionConfig.selector;
+            }
+
+            // get the type for the region
+
+            if (regionIsType) {
+                RegionType = regionConfig;
+            }
+
+            if (!regionIsType && regionTypeIsUndefined) {
+                RegionType = defaultRegionType;
+            }
+
+            if (regionConfig.regionType) {
+                RegionType = regionConfig.regionType;
+            }
+
+            // build the region instance
+            var region = new RegionType({
+                el: selector
+            });
+
+            // override the `getEl` function if we have a parentEl
+            // this must be overridden to ensure the selector is found
+            // on the first use of the region. if we try to assign the
+            // region's `el` to `parentEl.find(selector)` in the object
+            // literal to build the region, the element will not be
+            // guaranteed to be in the DOM already, and will cause problems
+            if (regionConfig.parentEl) {
+
+                region.getEl = function (selector) {
+                    var parentEl = regionConfig.parentEl;
+                    if (_.isFunction(parentEl)) {
+                        parentEl = parentEl();
+                    }
+                    return parentEl.find(selector);
+                };
+            }
+
+            return region;
+        }
+
+    });
+
+// Region Instance Methods
+// -----------------------
+
+    _.extend(Marionette.Region.prototype, Backbone.Events, {
+
+        // Displays a backbone view instance inside of the region.
+        // Handles calling the `render` method for you. Reads content
+        // directly from the `el` attribute. Also calls an optional
+        // `onShow` and `close` method on your view, just after showing
+        // or just before closing the view, respectively.
+        show: function (view) {
+
+            this.ensureEl();
+
+            if (view !== this.currentView) {
+                this.close();
+                view.render();
+                this.open(view);
+            } else {
+                view.render();
+            }
+
+            Marionette.triggerMethod.call(view, "show");
+            Marionette.triggerMethod.call(this, "show", view);
+
+            this.currentView = view;
+        },
+
+        ensureEl: function () {
+            if (!this.$el || this.$el.length === 0) {
+                this.$el = this.getEl(this.el);
+            }
+        },
+
+        // Override this method to change how the region finds the
+        // DOM element that it manages. Return a jQuery selector object.
+        getEl: function (selector) {
+            return Marionette.$(selector);
+        },
+
+        // Override this method to change how the new view is
+        // appended to the `$el` that the region is managing
+        open: function (view) {
+            this.$el.empty().append(view.el);
+        },
+
+        // Close the current view, if there is one. If there is no
+        // current view, it does nothing and returns immediately.
+        close: function () {
+            var view = this.currentView;
+            if (!view || view.isClosed) {
+                return;
+            }
+
+            // call 'close' or 'remove', depending on which is found
+            if (view.close) {
+                view.close();
+            }
+            else if (view.remove) {
+                view.remove();
+            }
+
+            Marionette.triggerMethod.call(this, "close");
+
+            delete this.currentView;
+        },
+
+        // Attach an existing view to the region. This
+        // will not call `render` or `onShow` for the new view,
+        // and will not replace the current HTML for the `el`
+        // of the region.
+        attachView: function (view) {
+            this.currentView = view;
+        },
+
+        // Reset the region by closing any existing view and
+        // clearing out the cached `$el`. The next time a view
+        // is shown via this region, the region will re-query the
+        // DOM for the region's `el`.
+        reset: function () {
+            this.close();
+            delete this.$el;
+        }
+    });
+
+// Copy the `extend` function used by Backbone's classes
+    Marionette.Region.extend = Marionette.extend;
+
+// Marionette.RegionManager
+// ------------------------
+//
+// Manage one or more related `Marionette.Region` objects.
+    Marionette.RegionManager = (function (Marionette) {
+
+        var RegionManager = Marionette.Controller.extend({
+            constructor: function (options) {
+                this._regions = {};
+                Marionette.Controller.prototype.constructor.call(this, options);
+            },
+
+            // Add multiple regions using an object literal, where
+            // each key becomes the region name, and each value is
+            // the region definition.
+            addRegions: function (regionDefinitions, defaults) {
+                var regions = {};
+
+                _.each(regionDefinitions, function (definition, name) {
+                    if (typeof definition === "string") {
+                        definition = { selector: definition };
+                    }
+
+                    if (definition.selector) {
+                        definition = _.defaults({}, definition, defaults);
+                    }
+
+                    var region = this.addRegion(name, definition);
+                    regions[name] = region;
+                }, this);
+
+                return regions;
+            },
+
+            // Add an individual region to the region manager,
+            // and return the region instance
+            addRegion: function (name, definition) {
+                var region;
+
+                var isObject = _.isObject(definition);
+                var isString = _.isString(definition);
+                var hasSelector = !!definition.selector;
+
+                if (isString || (isObject && hasSelector)) {
+                    region = Marionette.Region.buildRegion(definition, Marionette.Region);
+                } else if (_.isFunction(definition)) {
+                    region = Marionette.Region.buildRegion(definition, Marionette.Region);
+                } else {
+                    region = definition;
+                }
+
+                this._store(name, region);
+                this.triggerMethod("region:add", name, region);
+                return region;
+            },
+
+            // Get a region by name
+            get: function (name) {
+                return this._regions[name];
+            },
+
+            // Remove a region by name
+            removeRegion: function (name) {
+                var region = this._regions[name];
+                this._remove(name, region);
+            },
+
+            // Close all regions in the region manager, and
+            // remove them
+            removeRegions: function () {
+                _.each(this._regions, function (region, name) {
+                    this._remove(name, region);
+                }, this);
+            },
+
+            // Close all regions in the region manager, but
+            // leave them attached
+            closeRegions: function () {
+                _.each(this._regions, function (region, name) {
+                    region.close();
+                }, this);
+            },
+
+            // Close all regions and shut down the region
+            // manager entirely
+            close: function () {
+                this.removeRegions();
+                var args = Array.prototype.slice.call(arguments);
+                Marionette.Controller.prototype.close.apply(this, args);
+            },
+
+            // internal method to store regions
+            _store: function (name, region) {
+                this._regions[name] = region;
+                this.length = _.size(this._regions);
+            },
+
+            // internal method to remove a region
+            _remove: function (name, region) {
+                region.close();
+                delete this._regions[name];
+                this.triggerMethod("region:remove", name, region);
+            }
+
+        });
+
+        // Borrowing this code from Backbone.Collection:
+        // http://backbonejs.org/docs/backbone.html#section-106
+        //
+        // Mix in methods from Underscore, for iteration, and other
+        // collection related features.
+        var methods = ['forEach', 'each', 'map', 'find', 'detect', 'filter',
+            'select', 'reject', 'every', 'all', 'some', 'any', 'include',
+            'contains', 'invoke', 'toArray', 'first', 'initial', 'rest',
+            'last', 'without', 'isEmpty', 'pluck'];
+
+        _.each(methods, function (method) {
+            RegionManager.prototype[method] = function () {
+                var regions = _.values(this._regions);
+                var args = [regions].concat(_.toArray(arguments));
+                return _[method].apply(_, args);
+            };
+        });
+
+        return RegionManager;
+    })(Marionette);
+
+
+// Template Cache
+// --------------
+
+// Manage templates stored in `<script>` blocks,
+// caching them for faster access.
+    Marionette.TemplateCache = function (templateId) {
+        this.templateId = templateId;
+    };
+
+// TemplateCache object-level methods. Manage the template
+// caches from these method calls instead of creating
+// your own TemplateCache instances
+    _.extend(Marionette.TemplateCache, {
+        templateCaches: {},
+
+        // Get the specified template by id. Either
+        // retrieves the cached version, or loads it
+        // from the DOM.
+        get: function (templateId) {
+            var cachedTemplate = this.templateCaches[templateId];
+
+            if (!cachedTemplate) {
+                cachedTemplate = new Marionette.TemplateCache(templateId);
+                this.templateCaches[templateId] = cachedTemplate;
+            }
+
+            return cachedTemplate.load();
+        },
+
+        // Clear templates from the cache. If no arguments
+        // are specified, clears all templates:
+        // `clear()`
+        //
+        // If arguments are specified, clears each of the
+        // specified templates from the cache:
+        // `clear("#t1", "#t2", "...")`
+        clear: function () {
+            var i;
+            var args = slice(arguments);
+            var length = args.length;
+
+            if (length > 0) {
+                for (i = 0; i < length; i++) {
+                    delete this.templateCaches[args[i]];
+                }
+            } else {
+                this.templateCaches = {};
+            }
+        }
+    });
+
+// TemplateCache instance methods, allowing each
+// template cache object to manage it's own state
+// and know whether or not it has been loaded
+    _.extend(Marionette.TemplateCache.prototype, {
+
+        // Internal method to load the template
+        load: function () {
+            // Guard clause to prevent loading this template more than once
+            if (this.compiledTemplate) {
+                return this.compiledTemplate;
+            }
+
+            // Load the template and compile it
+            var template = this.loadTemplate(this.templateId);
+            this.compiledTemplate = this.compileTemplate(template);
+
+            return this.compiledTemplate;
+        },
+
+        // Load a template from the DOM, by default. Override
+        // this method to provide your own template retrieval
+        // For asynchronous loading with AMD/RequireJS, consider
+        // using a template-loader plugin as described here:
+        // https://github.com/marionettejs/backbone.marionette/wiki/Using-marionette-with-requirejs
+        loadTemplate: function (templateId) {
+            var template = Marionette.$(templateId).html();
+
+            if (!template || template.length === 0) {
+                throwError("Could not find template: '" + templateId + "'", "NoTemplateError");
+            }
+
+            return template;
+        },
+
+        // Pre-compile the template before caching it. Override
+        // this method if you do not need to pre-compile a template
+        // (JST / RequireJS for example) or if you want to change
+        // the template engine used (Handebars, etc).
+        compileTemplate: function (rawTemplate) {
+            return _.template(rawTemplate);
+        }
+    });
+
+
+// Renderer
+// --------
+
+// Render a template with data by passing in the template
+// selector and the data to render.
+    Marionette.Renderer = {
+
+        // Render a template with data. The `template` parameter is
+        // passed to the `TemplateCache` object to retrieve the
+        // template function. Override this method to provide your own
+        // custom rendering and template handling for all of Marionette.
+        render: function (template, data) {
+            var templateFunc = typeof template === 'function' ? template : Marionette.TemplateCache.get(template);
+            return templateFunc(data);
+        }
+    };
+
+
+// Marionette.View
+// ---------------
+
+// The core view type that other Marionette views extend from.
+    Marionette.View = Backbone.View.extend({
+
+        constructor: function () {
+            _.bindAll(this, "render");
+
+            var args = Array.prototype.slice.apply(arguments);
+            Backbone.View.prototype.constructor.apply(this, args);
+
+            Marionette.MonitorDOMRefresh(this);
+            this.listenTo(this, "show", this.onShowCalled, this);
+        },
+
+        // import the "triggerMethod" to trigger events with corresponding
+        // methods if the method exists
+        triggerMethod: Marionette.triggerMethod,
+
+        // Get the template for this view
+        // instance. You can set a `template` attribute in the view
+        // definition or pass a `template: "whatever"` parameter in
+        // to the constructor options.
+        getTemplate: function () {
+            return Marionette.getOption(this, "template");
+        },
+
+        // Mix in template helper methods. Looks for a
+        // `templateHelpers` attribute, which can either be an
+        // object literal, or a function that returns an object
+        // literal. All methods and attributes from this object
+        // are copies to the object passed in.
+        mixinTemplateHelpers: function (target) {
+            target = target || {};
+            var templateHelpers = this.templateHelpers;
+            if (_.isFunction(templateHelpers)) {
+                templateHelpers = templateHelpers.call(this);
+            }
+            return _.extend(target, templateHelpers);
+        },
+
+        // Configure `triggers` to forward DOM events to view
+        // events. `triggers: {"click .foo": "do:foo"}`
+        configureTriggers: function () {
+            if (!this.triggers) {
+                return;
+            }
+
+            var triggerEvents = {};
+
+            // Allow `triggers` to be configured as a function
+            var triggers = _.result(this, "triggers");
+
+            // Configure the triggers, prevent default
+            // action and stop propagation of DOM events
+            _.each(triggers, function (value, key) {
+
+                // build the event handler function for the DOM event
+                triggerEvents[key] = function (e) {
+
+                    // stop the event in it's tracks
+                    if (e && e.preventDefault) {
+                        e.preventDefault();
+                    }
+                    if (e && e.stopPropagation) {
+                        e.stopPropagation();
+                    }
+
+                    // build the args for the event
+                    var args = {
+                        view: this,
+                        model: this.model,
+                        collection: this.collection
+                    };
+
+                    // trigger the event
+                    this.triggerMethod(value, args);
+                };
+
+            }, this);
+
+            return triggerEvents;
+        },
+
+        // Overriding Backbone.View's delegateEvents to handle
+        // the `triggers`, `modelEvents`, and `collectionEvents` configuration
+        delegateEvents: function (events) {
+            this._delegateDOMEvents(events);
+            Marionette.bindEntityEvents(this, this.model, Marionette.getOption(this, "modelEvents"));
+            Marionette.bindEntityEvents(this, this.collection, Marionette.getOption(this, "collectionEvents"));
+        },
+
+        // internal method to delegate DOM events and triggers
+        _delegateDOMEvents: function (events) {
+            events = events || this.events;
+            if (_.isFunction(events)) {
+                events = events.call(this);
+            }
+
+            var combinedEvents = {};
+            var triggers = this.configureTriggers();
+            _.extend(combinedEvents, events, triggers);
+
+            Backbone.View.prototype.delegateEvents.call(this, combinedEvents);
+        },
+
+        // Overriding Backbone.View's undelegateEvents to handle unbinding
+        // the `triggers`, `modelEvents`, and `collectionEvents` config
+        undelegateEvents: function () {
+            var args = Array.prototype.slice.call(arguments);
+            Backbone.View.prototype.undelegateEvents.apply(this, args);
+
+            Marionette.unbindEntityEvents(this, this.model, Marionette.getOption(this, "modelEvents"));
+            Marionette.unbindEntityEvents(this, this.collection, Marionette.getOption(this, "collectionEvents"));
+        },
+
+        // Internal method, handles the `show` event.
+        onShowCalled: function () {
+        },
+
+        // Default `close` implementation, for removing a view from the
+        // DOM and unbinding it. Regions will call this method
+        // for you. You can specify an `onClose` method in your view to
+        // add custom code that is called after the view is closed.
+        close: function () {
+            if (this.isClosed) {
+                return;
+            }
+
+            // allow the close to be stopped by returning `false`
+            // from the `onBeforeClose` method
+            var shouldClose = this.triggerMethod("before:close");
+            if (shouldClose === false) {
+                return;
+            }
+
+            // mark as closed before doing the actual close, to
+            // prevent infinite loops within "close" event handlers
+            // that are trying to close other views
+            this.isClosed = true;
+            this.triggerMethod("close");
+
+            // unbind UI elements
+            this.unbindUIElements();
+
+            // remove the view from the DOM
+            this.remove();
+        },
+
+        // This method binds the elements specified in the "ui" hash inside the view's code with
+        // the associated jQuery selectors.
+        bindUIElements: function () {
+            if (!this.ui) {
+                return;
+            }
+
+            // store the ui hash in _uiBindings so they can be reset later
+            // and so re-rendering the view will be able to find the bindings
+            if (!this._uiBindings) {
+                this._uiBindings = this.ui;
+            }
+
+            // get the bindings result, as a function or otherwise
+            var bindings = _.result(this, "_uiBindings");
+
+            // empty the ui so we don't have anything to start with
+            this.ui = {};
+
+            // bind each of the selectors
+            _.each(_.keys(bindings), function (key) {
+                var selector = bindings[key];
+                this.ui[key] = this.$(selector);
+            }, this);
+        },
+
+        // This method unbinds the elements specified in the "ui" hash
+        unbindUIElements: function () {
+            if (!this.ui) {
+                return;
+            }
+
+            // delete all of the existing ui bindings
+            _.each(this.ui, function ($el, name) {
+                delete this.ui[name];
+            }, this);
+
+            // reset the ui element to the original bindings configuration
+            this.ui = this._uiBindings;
+            delete this._uiBindings;
+        }
+    });
+
+// Item View
+// ---------
+
+// A single item view implementation that contains code for rendering
+// with underscore.js templates, serializing the view's model or collection,
+// and calling several methods on extended views, such as `onRender`.
+    Marionette.ItemView = Marionette.View.extend({
+        constructor: function () {
+            Marionette.View.prototype.constructor.apply(this, slice(arguments));
+        },
+
+        // Serialize the model or collection for the view. If a model is
+        // found, `.toJSON()` is called. If a collection is found, `.toJSON()`
+        // is also called, but is used to populate an `items` array in the
+        // resulting data. If both are found, defaults to the model.
+        // You can override the `serializeData` method in your own view
+        // definition, to provide custom serialization for your view's data.
+        serializeData: function () {
+            var data = {};
+
+            if (this.model) {
+                data = this.model.toJSON();
+            }
+            else if (this.collection) {
+                data = { items: this.collection.toJSON() };
+            }
+
+            return data;
+        },
+
+        // Render the view, defaulting to underscore.js templates.
+        // You can override this in your view definition to provide
+        // a very specific rendering for your view. In general, though,
+        // you should override the `Marionette.Renderer` object to
+        // change how Marionette renders views.
+        render: function () {
+            this.isClosed = false;
+
+            this.triggerMethod("before:render", this);
+            this.triggerMethod("item:before:render", this);
+
+            var data = this.serializeData();
+            data = this.mixinTemplateHelpers(data);
+
+            var template = this.getTemplate();
+            var html = Marionette.Renderer.render(template, data);
+            this.$el.html(html);
+            this.bindUIElements();
+
+            this.triggerMethod("render", this);
+            this.triggerMethod("item:rendered", this);
+
+            return this;
+        },
+
+        // Override the default close event to add a few
+        // more events that are triggered.
+        close: function () {
+            if (this.isClosed) {
+                return;
+            }
+
+            this.triggerMethod('item:before:close');
+
+            Marionette.View.prototype.close.apply(this, slice(arguments));
+
+            this.triggerMethod('item:closed');
+        }
+    });
+
+// Collection View
+// ---------------
+
+// A view that iterates over a Backbone.Collection
+// and renders an individual ItemView for each model.
+    Marionette.CollectionView = Marionette.View.extend({
+        // used as the prefix for item view events
+        // that are forwarded through the collectionview
+        itemViewEventPrefix: "itemview",
+
+        // constructor
+        constructor: function (options) {
+            this._initChildViewStorage();
+
+            Marionette.View.prototype.constructor.apply(this, slice(arguments));
+
+            this._initialEvents();
+        },
+
+        // Configured the initial events that the collection view
+        // binds to. Override this method to prevent the initial
+        // events, or to add your own initial events.
+        _initialEvents: function () {
+            if (this.collection) {
+                this.listenTo(this.collection, "add", this.addChildView, this);
+                this.listenTo(this.collection, "remove", this.removeItemView, this);
+                this.listenTo(this.collection, "reset", this.render, this);
+            }
+        },
+
+        // Handle a child item added to the collection
+        addChildView: function (item, collection, options) {
+            this.closeEmptyView();
+            var ItemView = this.getItemView(item);
+            var index = this.collection.indexOf(item);
+            this.addItemView(item, ItemView, index);
+        },
+
+        // Override from `Marionette.View` to guarantee the `onShow` method
+        // of child views is called.
+        onShowCalled: function () {
+            this.children.each(function (child) {
+                Marionette.triggerMethod.call(child, "show");
+            });
+        },
+
+        // Internal method to trigger the before render callbacks
+        // and events
+        triggerBeforeRender: function () {
+            this.triggerMethod("before:render", this);
+            this.triggerMethod("collection:before:render", this);
+        },
+
+        // Internal method to trigger the rendered callbacks and
+        // events
+        triggerRendered: function () {
+            this.triggerMethod("render", this);
+            this.triggerMethod("collection:rendered", this);
+        },
+
+        // Render the collection of items. Override this method to
+        // provide your own implementation of a render function for
+        // the collection view.
+        render: function () {
+            this.isClosed = false;
+            this.triggerBeforeRender();
+            this._renderChildren();
+            this.triggerRendered();
+            return this;
+        },
+
+        // Internal method. Separated so that CompositeView can have
+        // more control over events being triggered, around the rendering
+        // process
+        _renderChildren: function () {
+            this.closeEmptyView();
+            this.closeChildren();
+
+            if (this.collection && this.collection.length > 0) {
+                this.showCollection();
+            } else {
+                this.showEmptyView();
+            }
+        },
+
+        // Internal method to loop through each item in the
+        // collection view and show it
+        showCollection: function () {
+            var ItemView;
+            this.collection.each(function (item, index) {
+                ItemView = this.getItemView(item);
+                this.addItemView(item, ItemView, index);
+            }, this);
+        },
+
+        // Internal method to show an empty view in place of
+        // a collection of item views, when the collection is
+        // empty
+        showEmptyView: function () {
+            var EmptyView = Marionette.getOption(this, "emptyView");
+
+            if (EmptyView && !this._showingEmptyView) {
+                this._showingEmptyView = true;
+                var model = new Backbone.Model();
+                this.addItemView(model, EmptyView, 0);
+            }
+        },
+
+        // Internal method to close an existing emptyView instance
+        // if one exists. Called when a collection view has been
+        // rendered empty, and then an item is added to the collection.
+        closeEmptyView: function () {
+            if (this._showingEmptyView) {
+                this.closeChildren();
+                delete this._showingEmptyView;
+            }
+        },
+
+        // Retrieve the itemView type, either from `this.options.itemView`
+        // or from the `itemView` in the object definition. The "options"
+        // takes precedence.
+        getItemView: function (item) {
+            var itemView = Marionette.getOption(this, "itemView");
+
+            if (!itemView) {
+                throwError("An `itemView` must be specified", "NoItemViewError");
+            }
+
+            return itemView;
+        },
+
+        // Render the child item's view and add it to the
+        // HTML for the collection view.
+        addItemView: function (item, ItemView, index) {
+            // get the itemViewOptions if any were specified
+            var itemViewOptions = Marionette.getOption(this, "itemViewOptions");
+            if (_.isFunction(itemViewOptions)) {
+                itemViewOptions = itemViewOptions.call(this, item, index);
+            }
+
+            // build the view
+            var view = this.buildItemView(item, ItemView, itemViewOptions);
+
+            // set up the child view event forwarding
+            this.addChildViewEventForwarding(view);
+
+            // this view is about to be added
+            this.triggerMethod("before:item:added", view);
+
+            // Store the child view itself so we can properly
+            // remove and/or close it later
+            this.children.add(view);
+
+            // Render it and show it
+            this.renderItemView(view, index);
+
+            // call the "show" method if the collection view
+            // has already been shown
+            if (this._isShown) {
+                Marionette.triggerMethod.call(view, "show");
+            }
+
+            // this view was added
+            this.triggerMethod("after:item:added", view);
+        },
+
+        // Set up the child view event forwarding. Uses an "itemview:"
+        // prefix in front of all forwarded events.
+        addChildViewEventForwarding: function (view) {
+            var prefix = Marionette.getOption(this, "itemViewEventPrefix");
+
+            // Forward all child item view events through the parent,
+            // prepending "itemview:" to the event name
+            this.listenTo(view, "all", function () {
+                var args = slice(arguments);
+                args[0] = prefix + ":" + args[0];
+                args.splice(1, 0, view);
+
+                Marionette.triggerMethod.apply(this, args);
+            }, this);
+        },
+
+        // render the item view
+        renderItemView: function (view, index) {
+            view.render();
+            this.appendHtml(this, view, index);
+        },
+
+        // Build an `itemView` for every model in the collection.
+        buildItemView: function (item, ItemViewType, itemViewOptions) {
+            var options = _.extend({model: item}, itemViewOptions);
+            return new ItemViewType(options);
+        },
+
+        // get the child view by item it holds, and remove it
+        removeItemView: function (item) {
+            var view = this.children.findByModel(item);
+            this.removeChildView(view);
+            this.checkEmpty();
+        },
+
+        // Remove the child view and close it
+        removeChildView: function (view) {
+
+            // shut down the child view properly,
+            // including events that the collection has from it
+            if (view) {
+                this.stopListening(view);
+
+                // call 'close' or 'remove', depending on which is found
+                if (view.close) {
+                    view.close();
+                }
+                else if (view.remove) {
+                    view.remove();
+                }
+
+                this.children.remove(view);
+            }
+
+            this.triggerMethod("item:removed", view);
+        },
+
+        // helper to show the empty view if the collection is empty
+        checkEmpty: function () {
+            // check if we're empty now, and if we are, show the
+            // empty view
+            if (!this.collection || this.collection.length === 0) {
+                this.showEmptyView();
+            }
+        },
+
+        // Append the HTML to the collection's `el`.
+        // Override this method to do something other
+        // then `.append`.
+        appendHtml: function (collectionView, itemView, index) {
+            collectionView.$el.append(itemView.el);
+        },
+
+        // Internal method to set up the `children` object for
+        // storing all of the child views
+        _initChildViewStorage: function () {
+            this.children = new Backbone.ChildViewContainer();
+        },
+
+        // Handle cleanup and other closing needs for
+        // the collection of views.
+        close: function () {
+            if (this.isClosed) {
+                return;
+            }
+
+            this.triggerMethod("collection:before:close");
+            this.closeChildren();
+            this.triggerMethod("collection:closed");
+
+            Marionette.View.prototype.close.apply(this, slice(arguments));
+        },
+
+        // Close the child views that this collection view
+        // is holding on to, if any
+        closeChildren: function () {
+            this.children.each(function (child) {
+                this.removeChildView(child);
+            }, this);
+            this.checkEmpty();
+        }
+    });
+
+
+// Composite View
+// --------------
+
+// Used for rendering a branch-leaf, hierarchical structure.
+// Extends directly from CollectionView and also renders an
+// an item view as `modelView`, for the top leaf
+    Marionette.CompositeView = Marionette.CollectionView.extend({
+        constructor: function (options) {
+            Marionette.CollectionView.apply(this, slice(arguments));
+
+            this.itemView = this.getItemView();
+        },
+
+        // Configured the initial events that the composite view
+        // binds to. Override this method to prevent the initial
+        // events, or to add your own initial events.
+        _initialEvents: function () {
+            if (this.collection) {
+                this.listenTo(this.collection, "add", this.addChildView, this);
+                this.listenTo(this.collection, "remove", this.removeItemView, this);
+                this.listenTo(this.collection, "reset", this._renderChildren, this);
+            }
+        },
+
+        // Retrieve the `itemView` to be used when rendering each of
+        // the items in the collection. The default is to return
+        // `this.itemView` or Marionette.CompositeView if no `itemView`
+        // has been defined
+        getItemView: function (item) {
+            var itemView = Marionette.getOption(this, "itemView") || this.constructor;
+
+            if (!itemView) {
+                throwError("An `itemView` must be specified", "NoItemViewError");
+            }
+
+            return itemView;
+        },
+
+        // Serialize the collection for the view.
+        // You can override the `serializeData` method in your own view
+        // definition, to provide custom serialization for your view's data.
+        serializeData: function () {
+            var data = {};
+
+            if (this.model) {
+                data = this.model.toJSON();
+            }
+
+            return data;
+        },
+
+        // Renders the model once, and the collection once. Calling
+        // this again will tell the model's view to re-render itself
+        // but the collection will not re-render.
+        render: function () {
+            this.isRendered = true;
+            this.isClosed = false;
+            this.resetItemViewContainer();
+
+            this.triggerBeforeRender();
+            var html = this.renderModel();
+            this.$el.html(html);
+            // the ui bindings is done here and not at the end of render since they
+            // will not be available until after the model is rendered, but should be
+            // available before the collection is rendered.
+            this.bindUIElements();
+            this.triggerMethod("composite:model:rendered");
+
+            this._renderChildren();
+
+            this.triggerMethod("composite:rendered");
+            this.triggerRendered();
+            return this;
+        },
+
+        _renderChildren: function () {
+            if (this.isRendered) {
+                Marionette.CollectionView.prototype._renderChildren.call(this);
+                this.triggerMethod("composite:collection:rendered");
+            }
+        },
+
+        // Render an individual model, if we have one, as
+        // part of a composite view (branch / leaf). For example:
+        // a treeview.
+        renderModel: function () {
+            var data = {};
+            data = this.serializeData();
+            data = this.mixinTemplateHelpers(data);
+
+            var template = this.getTemplate();
+            return Marionette.Renderer.render(template, data);
+        },
+
+        // Appends the `el` of itemView instances to the specified
+        // `itemViewContainer` (a jQuery selector). Override this method to
+        // provide custom logic of how the child item view instances have their
+        // HTML appended to the composite view instance.
+        appendHtml: function (cv, iv) {
+            var $container = this.getItemViewContainer(cv);
+            $container.append(iv.el);
+        },
+
+        // Internal method to ensure an `$itemViewContainer` exists, for the
+        // `appendHtml` method to use.
+        getItemViewContainer: function (containerView) {
+            if ("$itemViewContainer" in containerView) {
+                return containerView.$itemViewContainer;
+            }
+
+            var container;
+            if (containerView.itemViewContainer) {
+
+                var selector = _.result(containerView, "itemViewContainer");
+                container = containerView.$(selector);
+                if (container.length <= 0) {
+                    throwError("The specified `itemViewContainer` was not found: " + containerView.itemViewContainer, "ItemViewContainerMissingError");
+                }
+
+            } else {
+                container = containerView.$el;
+            }
+
+            containerView.$itemViewContainer = container;
+            return container;
+        },
+
+        // Internal method to reset the `$itemViewContainer` on render
+        resetItemViewContainer: function () {
+            if (this.$itemViewContainer) {
+                delete this.$itemViewContainer;
+            }
+        }
+    });
+
+
+// Layout
+// ------
+
+// Used for managing application layouts, nested layouts and
+// multiple regions within an application or sub-application.
+//
+// A specialized view type that renders an area of HTML and then
+// attaches `Region` instances to the specified `regions`.
+// Used for composite view management and sub-application areas.
+    Marionette.Layout = Marionette.ItemView.extend({
+        regionType: Marionette.Region,
+
+        // Ensure the regions are available when the `initialize` method
+        // is called.
+        constructor: function (options) {
+            options = options || {};
+
+            this._firstRender = true;
+            this._initializeRegions(options);
+
+            Marionette.ItemView.call(this, options);
+        },
+
+        // Layout's render will use the existing region objects the
+        // first time it is called. Subsequent calls will close the
+        // views that the regions are showing and then reset the `el`
+        // for the regions to the newly rendered DOM elements.
+        render: function () {
+
+            if (this._firstRender) {
+                // if this is the first render, don't do anything to
+                // reset the regions
+                this._firstRender = false;
+            } else if (this.isClosed) {
+                // a previously closed layout means we need to
+                // completely re-initialize the regions
+                this._initializeRegions();
+            } else {
+                // If this is not the first render call, then we need to
+                // re-initializing the `el` for each region
+                this._reInitializeRegions();
+            }
+
+            var args = Array.prototype.slice.apply(arguments);
+            var result = Marionette.ItemView.prototype.render.apply(this, args);
+
+            return result;
+        },
+
+        // Handle closing regions, and then close the view itself.
+        close: function () {
+            if (this.isClosed) {
+                return;
+            }
+            this.regionManager.close();
+            var args = Array.prototype.slice.apply(arguments);
+            Marionette.ItemView.prototype.close.apply(this, args);
+        },
+
+        // Add a single region, by name, to the layout
+        addRegion: function (name, definition) {
+            var regions = {};
+            regions[name] = definition;
+            return this.addRegions(regions)[name];
+        },
+
+        // Add multiple regions as a {name: definition, name2: def2} object literal
+        addRegions: function (regions) {
+            this.regions = _.extend(this.regions || {}, regions);
+            return this._buildRegions(regions);
+        },
+
+        // Remove a single region from the Layout, by name
+        removeRegion: function (name) {
+            return this.regionManager.removeRegion(name);
+        },
+
+        // internal method to build regions
+        _buildRegions: function (regions) {
+            var that = this;
+
+            var defaults = {
+                parentEl: function () {
+                    return that.$el;
+                }
+            };
+
+            return this.regionManager.addRegions(regions, defaults);
+        },
+
+        // Internal method to initialize the regions that have been defined in a
+        // `regions` attribute on this layout.
+        _initializeRegions: function (options) {
+            var regions;
+            this._initRegionManager();
+
+            if (_.isFunction(this.regions)) {
+                regions = this.regions(options);
+            } else {
+                regions = this.regions || {};
+            }
+
+            this.addRegions(regions);
+        },
+
+        // Internal method to re-initialize all of the regions by updating the `el` that
+        // they point to
+        _reInitializeRegions: function () {
+            this.regionManager.closeRegions();
+            this.regionManager.each(function (region) {
+                region.reset();
+            });
+        },
+
+        // Internal method to initialize the region manager
+        // and all regions in it
+        _initRegionManager: function () {
+            this.regionManager = new Marionette.RegionManager();
+
+            this.listenTo(this.regionManager, "region:add", function (name, region) {
+                this[name] = region;
+                this.trigger("region:add", name, region);
+            });
+
+            this.listenTo(this.regionManager, "region:remove", function (name, region) {
+                delete this[name];
+                this.trigger("region:remove", name, region);
+            });
+        }
+    });
+
+
+// AppRouter
+// ---------
+
+// Reduce the boilerplate code of handling route events
+// and then calling a single method on another object.
+// Have your routers configured to call the method on
+// your object, directly.
+//
+// Configure an AppRouter with `appRoutes`.
+//
+// App routers can only take one `controller` object.
+// It is recommended that you divide your controller
+// objects in to smaller pieces of related functionality
+// and have multiple routers / controllers, instead of
+// just one giant router and controller.
+//
+// You can also add standard routes to an AppRouter.
+
+    Marionette.AppRouter = Backbone.Router.extend({
+
+        constructor: function (options) {
+            Backbone.Router.prototype.constructor.apply(this, slice(arguments));
+
+            this.options = options;
+
+            if (this.appRoutes) {
+                var controller = Marionette.getOption(this, "controller");
+                this.processAppRoutes(controller, this.appRoutes);
+            }
+        },
+
+        // Internal method to process the `appRoutes` for the
+        // router, and turn them in to routes that trigger the
+        // specified method on the specified `controller`.
+        processAppRoutes: function (controller, appRoutes) {
+            var routeNames = _.keys(appRoutes).reverse(); // Backbone requires reverted order of routes
+
+            _.each(routeNames, function (route) {
+                var methodName = appRoutes[route];
+                var method = controller[methodName];
+
+                if (!method) {
+                    throw new Error("Method '" + methodName + "' was not found on the controller");
+                }
+
+                this.route(route, methodName, _.bind(method, controller));
+            }, this);
+        }
+    });
+
+
+// Application
+// -----------
+
+// Contain and manage the composite application as a whole.
+// Stores and starts up `Region` objects, includes an
+// event aggregator as `app.vent`
+    Marionette.Application = function (options) {
+        this._initRegionManager();
+        this._initCallbacks = new Marionette.Callbacks();
+        this.vent = new Backbone.Wreqr.EventAggregator();
+        this.commands = new Backbone.Wreqr.Commands();
+        this.reqres = new Backbone.Wreqr.RequestResponse();
+        this.submodules = {};
+
+        _.extend(this, options);
+
+        this.triggerMethod = Marionette.triggerMethod;
+    };
+
+    _.extend(Marionette.Application.prototype, Backbone.Events, {
+        // Command execution, facilitated by Backbone.Wreqr.Commands
+        execute: function () {
+            var args = Array.prototype.slice.apply(arguments);
+            this.commands.execute.apply(this.commands, args);
+        },
+
+        // Request/response, facilitated by Backbone.Wreqr.RequestResponse
+        request: function () {
+            var args = Array.prototype.slice.apply(arguments);
+            return this.reqres.request.apply(this.reqres, args);
+        },
+
+        // Add an initializer that is either run at when the `start`
+        // method is called, or run immediately if added after `start`
+        // has already been called.
+        addInitializer: function (initializer) {
+            this._initCallbacks.add(initializer);
+        },
+
+        // kick off all of the application's processes.
+        // initializes all of the regions that have been added
+        // to the app, and runs all of the initializer functions
+        start: function (options) {
+            this.triggerMethod("initialize:before", options);
+            this._initCallbacks.run(options, this);
+            this.triggerMethod("initialize:after", options);
+
+            this.triggerMethod("start", options);
+        },
+
+        // Add regions to your app.
+        // Accepts a hash of named strings or Region objects
+        // addRegions({something: "#someRegion"})
+        // addRegions({something: Region.extend({el: "#someRegion"}) });
+        addRegions: function (regions) {
+            return this._regionManager.addRegions(regions);
+        },
+
+        // Removes a region from your app.
+        // Accepts the regions name
+        // removeRegion('myRegion')
+        removeRegion: function (region) {
+            this._regionManager.removeRegion(region);
+        },
+
+        // Create a module, attached to the application
+        module: function (moduleNames, moduleDefinition) {
+            // slice the args, and add this application object as the
+            // first argument of the array
+            var args = slice(arguments);
+            args.unshift(this);
+
+            // see the Marionette.Module object for more information
+            return Marionette.Module.create.apply(Marionette.Module, args);
+        },
+
+        // Internal method to set up the region manager
+        _initRegionManager: function () {
+            this._regionManager = new Marionette.RegionManager();
+
+            this.listenTo(this._regionManager, "region:add", function (name, region) {
+                this[name] = region;
+            });
+
+            this.listenTo(this._regionManager, "region:remove", function (name, region) {
+                delete this[name];
+            });
+        }
+    });
+
+// Copy the `extend` function used by Backbone's classes
+    Marionette.Application.extend = Marionette.extend;
+
+// Module
+// ------
+
+// A simple module system, used to create privacy and encapsulation in
+// Marionette applications
+    Marionette.Module = function (moduleName, app) {
+        this.moduleName = moduleName;
+
+        // store sub-modules
+        this.submodules = {};
+
+        this._setupInitializersAndFinalizers();
+
+        // store the configuration for this module
+        this.app = app;
+        this.startWithParent = true;
+
+        this.triggerMethod = Marionette.triggerMethod;
+    };
+
+// Extend the Module prototype with events / listenTo, so that the module
+// can be used as an event aggregator or pub/sub.
+    _.extend(Marionette.Module.prototype, Backbone.Events, {
+
+        // Initializer for a specific module. Initializers are run when the
+        // module's `start` method is called.
+        addInitializer: function (callback) {
+            this._initializerCallbacks.add(callback);
+        },
+
+        // Finalizers are run when a module is stopped. They are used to teardown
+        // and finalize any variables, references, events and other code that the
+        // module had set up.
+        addFinalizer: function (callback) {
+            this._finalizerCallbacks.add(callback);
+        },
+
+        // Start the module, and run all of its initializers
+        start: function (options) {
+            // Prevent re-starting a module that is already started
+            if (this._isInitialized) {
+                return;
+            }
+
+            // start the sub-modules (depth-first hierarchy)
+            _.each(this.submodules, function (mod) {
+                // check to see if we should start the sub-module with this parent
+                if (mod.startWithParent) {
+                    mod.start(options);
+                }
+            });
+
+            // run the callbacks to "start" the current module
+            this.triggerMethod("before:start", options);
+
+            this._initializerCallbacks.run(options, this);
+            this._isInitialized = true;
+
+            this.triggerMethod("start", options);
+        },
+
+        // Stop this module by running its finalizers and then stop all of
+        // the sub-modules for this module
+        stop: function () {
+            // if we are not initialized, don't bother finalizing
+            if (!this._isInitialized) {
+                return;
+            }
+            this._isInitialized = false;
+
+            Marionette.triggerMethod.call(this, "before:stop");
+
+            // stop the sub-modules; depth-first, to make sure the
+            // sub-modules are stopped / finalized before parents
+            _.each(this.submodules, function (mod) {
+                mod.stop();
+            });
+
+            // run the finalizers
+            this._finalizerCallbacks.run(undefined, this);
+
+            // reset the initializers and finalizers
+            this._initializerCallbacks.reset();
+            this._finalizerCallbacks.reset();
+
+            Marionette.triggerMethod.call(this, "stop");
+        },
+
+        // Configure the module with a definition function and any custom args
+        // that are to be passed in to the definition function
+        addDefinition: function (moduleDefinition, customArgs) {
+            this._runModuleDefinition(moduleDefinition, customArgs);
+        },
+
+        // Internal method: run the module definition function with the correct
+        // arguments
+        _runModuleDefinition: function (definition, customArgs) {
+            if (!definition) {
+                return;
+            }
+
+            // build the correct list of arguments for the module definition
+            var args = _.flatten([
+                this,
+                this.app,
+                Backbone,
+                Marionette,
+                Marionette.$, _,
+                customArgs
+            ]);
+
+            definition.apply(this, args);
+        },
+
+        // Internal method: set up new copies of initializers and finalizers.
+        // Calling this method will wipe out all existing initializers and
+        // finalizers.
+        _setupInitializersAndFinalizers: function () {
+            this._initializerCallbacks = new Marionette.Callbacks();
+            this._finalizerCallbacks = new Marionette.Callbacks();
+        }
+    });
+
+// Type methods to create modules
+    _.extend(Marionette.Module, {
+
+        // Create a module, hanging off the app parameter as the parent object.
+        create: function (app, moduleNames, moduleDefinition) {
+            var module = app;
+
+            // get the custom args passed in after the module definition and
+            // get rid of the module name and definition function
+            var customArgs = slice(arguments);
+            customArgs.splice(0, 3);
+
+            // split the module names and get the length
+            moduleNames = moduleNames.split(".");
+            var length = moduleNames.length;
+
+            // store the module definition for the last module in the chain
+            var moduleDefinitions = [];
+            moduleDefinitions[length - 1] = moduleDefinition;
+
+            // Loop through all the parts of the module definition
+            _.each(moduleNames, function (moduleName, i) {
+                var parentModule = module;
+                module = this._getModule(parentModule, moduleName, app);
+                this._addModuleDefinition(parentModule, module, moduleDefinitions[i], customArgs);
+            }, this);
+
+            // Return the last module in the definition chain
+            return module;
+        },
+
+        _getModule: function (parentModule, moduleName, app, def, args) {
+            // Get an existing module of this name if we have one
+            var module = parentModule[moduleName];
+
+            if (!module) {
+                // Create a new module if we don't have one
+                module = new Marionette.Module(moduleName, app);
+                parentModule[moduleName] = module;
+                // store the module on the parent
+                parentModule.submodules[moduleName] = module;
+            }
+
+            return module;
+        },
+
+        _addModuleDefinition: function (parentModule, module, def, args) {
+            var fn;
+            var startWithParent;
+
+            if (_.isFunction(def)) {
+                // if a function is supplied for the module definition
+                fn = def;
+                startWithParent = true;
+
+            } else if (_.isObject(def)) {
+                // if an object is supplied
+                fn = def.define;
+                startWithParent = def.startWithParent;
+
+            } else {
+                // if nothing is supplied
+                startWithParent = true;
+            }
+
+            // add module definition if needed
+            if (fn) {
+                module.addDefinition(fn, args);
+            }
+
+            // `and` the two together, ensuring a single `false` will prevent it
+            // from starting with the parent
+            module.startWithParent = module.startWithParent && startWithParent;
+
+            // setup auto-start if needed
+            if (module.startWithParent && !module.startWithParentIsConfigured) {
+
+                // only configure this once
+                module.startWithParentIsConfigured = true;
+
+                // add the module initializer config
+                parentModule.addInitializer(function (options) {
+                    if (module.startWithParent) {
+                        module.start(options);
+                    }
+                });
+
+            }
+
+        }
+    });
+
+
+    return Marionette;
+})(this, Backbone, _);
\ No newline at end of file
diff --git a/static/js/libs/backbone/backbone.mine.js b/static/js/libs/backbone/backbone.mine.js
index 7f92344..a8bd38d 100644
--- a/static/js/libs/backbone/backbone.mine.js
+++ b/static/js/libs/backbone/backbone.mine.js
@@ -56,7 +56,7 @@ window.DSSModel = window.TastypieModel.extend({
     }
 });
 
-window.DSSEditableView = Backbone.View.extend({
+window.DSSEditableView = Backbone.Marionette.ItemView.extend({
     events: {
         "change input": "changed",
         "change textarea": "changed"
@@ -71,6 +71,9 @@ window.DSSEditableView = Backbone.View.extend({
         }
     },
     changed: function (evt) {
+        //change handler for the form to update the model
+        //with the new values
+        return;
         var changed = evt.currentTarget;
         //$("#" + changed.id)
         if (!com.podnoms.utils.isEmpty(changed.id)) {
diff --git a/static/js/libs/backbone/backbone.syphon.js b/static/js/libs/backbone/backbone.syphon.js
new file mode 100755
index 0000000..13aa4a9
--- /dev/null
+++ b/static/js/libs/backbone/backbone.syphon.js
@@ -0,0 +1,471 @@
+// Backbone.Syphon, v0.4.1
+// Copyright (c)2012 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+// http://github.com/derickbailey/backbone.syphon
+Backbone.Syphon = (function (Backbone, $, _) {
+    var Syphon = {};
+
+    // Ignore Element Types
+    // --------------------
+
+    // Tell Syphon to ignore all elements of these types. You can
+    // push new types to ignore directly in to this array.
+    Syphon.ignoredTypes = ["button", "submit", "reset", "fieldset"];
+
+    // Syphon
+    // ------
+
+    // Get a JSON object that represents
+    // all of the form inputs, in this view.
+    // Alternately, pass a form element directly
+    // in place of the view.
+    Syphon.serialize = function (view, options) {
+        var data = {};
+
+        // Build the configuration
+        var config = buildConfig(options);
+
+        // Get all of the elements to process
+        var elements = getInputElements(view, config);
+
+        // Process all of the elements
+        _.each(elements, function (el) {
+            var $el = $(el);
+            var type = getElementType($el);
+
+            // Get the key for the input
+            var keyExtractor = config.keyExtractors.get(type);
+            var key = keyExtractor($el);
+
+            // Get the value for the input
+            var inputReader = config.inputReaders.get(type);
+            var value = inputReader($el);
+
+            // Get the key assignment validator and make sure
+            // it's valid before assigning the value to the key
+            var validKeyAssignment = config.keyAssignmentValidators.get(type);
+            if (validKeyAssignment($el, key, value)) {
+                var keychain = config.keySplitter(key);
+                data = assignKeyValue(data, keychain, value);
+            }
+        });
+
+        // Done; send back the results.
+        return data;
+    };
+
+    // Use the given JSON object to populate
+    // all of the form inputs, in this view.
+    // Alternately, pass a form element directly
+    // in place of the view.
+    Syphon.deserialize = function (view, data, options) {
+        // Build the configuration
+        var config = buildConfig(options);
+
+        // Get all of the elements to process
+        var elements = getInputElements(view, config);
+
+        // Flatten the data structure that we are deserializing
+        var flattenedData = flattenData(config, data);
+
+        // Process all of the elements
+        _.each(elements, function (el) {
+            var $el = $(el);
+            var type = getElementType($el);
+
+            // Get the key for the input
+            var keyExtractor = config.keyExtractors.get(type);
+            var key = keyExtractor($el);
+
+            // Get the input writer and the value to write
+            var inputWriter = config.inputWriters.get(type);
+            var value = flattenedData[key];
+
+            // Write the value to the input
+            inputWriter($el, value);
+        });
+    };
+
+    // Helpers
+    // -------
+
+    // Retrieve all of the form inputs
+    // from the form
+    var getInputElements = function (view, config) {
+        var form = getForm(view);
+        var elements = form.elements;
+
+        elements = _.reject(elements, function (el) {
+            var reject;
+            var type = getElementType(el);
+            var extractor = config.keyExtractors.get(type);
+            var identifier = extractor($(el));
+
+            var foundInIgnored = _.include(config.ignoredTypes, type);
+            var foundInInclude = _.include(config.include, identifier);
+            var foundInExclude = _.include(config.exclude, identifier);
+
+            if (foundInInclude) {
+                reject = false;
+            } else {
+                if (config.include) {
+                    reject = true;
+                } else {
+                    reject = (foundInExclude || foundInIgnored);
+                }
+            }
+
+            return reject;
+        });
+
+        return elements;
+    };
+
+    // Determine what type of element this is. It
+    // will either return the `type` attribute of
+    // an `<input>` element, or the `tagName` of
+    // the element when the element is not an `<input>`.
+    var getElementType = function (el) {
+        var typeAttr;
+        var $el = $(el);
+        var tagName = $el[0].tagName;
+        var type = tagName;
+
+        if (tagName.toLowerCase() === "input") {
+            typeAttr = $el.attr("type");
+            if (typeAttr) {
+                type = typeAttr;
+            } else {
+                type = "text";
+            }
+        }
+
+        // Always return the type as lowercase
+        // so it can be matched to lowercase
+        // type registrations.
+        return type.toLowerCase();
+    };
+
+    // If a form element is given, just return it.
+    // Otherwise, get the form element from the view.
+    var getForm = function (viewOrForm) {
+        if (_.isUndefined(viewOrForm.$el) && viewOrForm.tagName.toLowerCase() === 'form') {
+            return viewOrForm;
+        } else {
+            return viewOrForm.$el.is("form") ? viewOrForm.el : viewOrForm.$("form")[0];
+        }
+    };
+
+    // Build a configuration object and initialize
+    // default values.
+    var buildConfig = function (options) {
+        var config = _.clone(options) || {};
+
+        config.ignoredTypes = _.clone(Syphon.ignoredTypes);
+        config.inputReaders = config.inputReaders || Syphon.InputReaders;
+        config.inputWriters = config.inputWriters || Syphon.InputWriters;
+        config.keyExtractors = config.keyExtractors || Syphon.KeyExtractors;
+        config.keySplitter = config.keySplitter || Syphon.KeySplitter;
+        config.keyJoiner = config.keyJoiner || Syphon.KeyJoiner;
+        config.keyAssignmentValidators = config.keyAssignmentValidators || Syphon.KeyAssignmentValidators;
+
+        return config;
+    };
+
+    // Assigns `value` to a parsed JSON key.
+    //
+    // The first parameter is the object which will be
+    // modified to store the key/value pair.
+    //
+    // The second parameter accepts an array of keys as a
+    // string with an option array containing a
+    // single string as the last option.
+    //
+    // The third parameter is the value to be assigned.
+    //
+    // Examples:
+    //
+    // `["foo", "bar", "baz"] => {foo: {bar: {baz: "value"}}}`
+    //
+    // `["foo", "bar", ["baz"]] => {foo: {bar: {baz: ["value"]}}}`
+    //
+    // When the final value is an array with a string, the key
+    // becomes an array, and values are pushed in to the array,
+    // allowing multiple fields with the same name to be
+    // assigned to the array.
+    var assignKeyValue = function (obj, keychain, value) {
+        if (!keychain) {
+            return obj;
+        }
+
+        var key = keychain.shift();
+
+        // build the current object we need to store data
+        if (!obj[key]) {
+            obj[key] = _.isArray(key) ? [] : {};
+        }
+
+        // if it's the last key in the chain, assign the value directly
+        if (keychain.length === 0) {
+            if (_.isArray(obj[key])) {
+                obj[key].push(value);
+            } else {
+                obj[key] = value;
+            }
+        }
+
+        // recursive parsing of the array, depth-first
+        if (keychain.length > 0) {
+            assignKeyValue(obj[key], keychain, value);
+        }
+
+        return obj;
+    };
+
+    // Flatten the data structure in to nested strings, using the
+    // provided `KeyJoiner` function.
+    //
+    // Example:
+    //
+    // This input:
+    //
+    // ```js
+    // {
+    //   widget: "wombat",
+    //   foo: {
+    //     bar: "baz",
+    //     baz: {
+    //       quux: "qux"
+    //     },
+    //     quux: ["foo", "bar"]
+    //   }
+    // }
+    // ```
+    //
+    // With a KeyJoiner that uses [ ] square brackets,
+    // should produce this output:
+    //
+    // ```js
+    // {
+    //  "widget": "wombat",
+    //  "foo[bar]": "baz",
+    //  "foo[baz][quux]": "qux",
+    //  "foo[quux]": ["foo", "bar"]
+    // }
+    // ```
+    var flattenData = function (config, data, parentKey) {
+        var flatData = {};
+
+        _.each(data, function (value, keyName) {
+            var hash = {};
+
+            // If there is a parent key, join it with
+            // the current, child key.
+            if (parentKey) {
+                keyName = config.keyJoiner(parentKey, keyName);
+            }
+
+            if (_.isArray(value)) {
+                keyName += "[]";
+                hash[keyName] = value;
+            } else if (_.isObject(value)) {
+                hash = flattenData(config, value, keyName);
+            } else {
+                hash[keyName] = value;
+            }
+
+            // Store the resulting key/value pairs in the
+            // final flattened data object
+            _.extend(flatData, hash);
+        });
+
+        return flatData;
+    };
+
+    return Syphon;
+})(Backbone, jQuery, _);
+
+// Type Registry
+// -------------
+
+// Type Registries allow you to register something to
+// an input type, and retrieve either the item registered
+// for a specific type or the default registration
+Backbone.Syphon.TypeRegistry = function () {
+    this.registeredTypes = {};
+};
+
+// Borrow Backbone's `extend` keyword for our TypeRegistry
+Backbone.Syphon.TypeRegistry.extend = Backbone.Model.extend;
+
+_.extend(Backbone.Syphon.TypeRegistry.prototype, {
+
+    // Get the registered item by type. If nothing is
+    // found for the specified type, the default is
+    // returned.
+    get: function (type) {
+        var item = this.registeredTypes[type];
+
+        if (!item) {
+            item = this.registeredTypes["default"];
+        }
+
+        return item;
+    },
+
+    // Register a new item for a specified type
+    register: function (type, item) {
+        this.registeredTypes[type] = item;
+    },
+
+    // Register a default item to be used when no
+    // item for a specified type is found
+    registerDefault: function (item) {
+        this.registeredTypes["default"] = item;
+    },
+
+    // Remove an item from a given type registration
+    unregister: function (type) {
+        if (this.registeredTypes[type]) {
+            delete this.registeredTypes[type];
+        }
+    }
+});
+
+
+// Key Extractors
+// --------------
+
+// Key extractors produce the "key" in `{key: "value"}`
+// pairs, when serializing.
+Backbone.Syphon.KeyExtractorSet = Backbone.Syphon.TypeRegistry.extend();
+
+// Built-in Key Extractors
+Backbone.Syphon.KeyExtractors = new Backbone.Syphon.KeyExtractorSet();
+
+// The default key extractor, which uses the
+// input element's "id" attribute
+Backbone.Syphon.KeyExtractors.registerDefault(function ($el) {
+    return $el.prop("name");
+});
+
+
+// Input Readers
+// -------------
+
+// Input Readers are used to extract the value from
+// an input element, for the serialized object result
+Backbone.Syphon.InputReaderSet = Backbone.Syphon.TypeRegistry.extend();
+
+// Built-in Input Readers
+Backbone.Syphon.InputReaders = new Backbone.Syphon.InputReaderSet();
+
+// The default input reader, which uses an input
+// element's "value"
+Backbone.Syphon.InputReaders.registerDefault(function ($el) {
+    return $el.val();
+});
+
+// Checkbox reader, returning a boolean value for
+// whether or not the checkbox is checked.
+Backbone.Syphon.InputReaders.register("checkbox", function ($el) {
+    var checked = $el.prop("checked");
+    return checked;
+});
+
+
+// Input Writers
+// -------------
+
+// Input Writers are used to insert a value from an
+// object into an input element.
+Backbone.Syphon.InputWriterSet = Backbone.Syphon.TypeRegistry.extend();
+
+// Built-in Input Writers
+Backbone.Syphon.InputWriters = new Backbone.Syphon.InputWriterSet();
+
+// The default input writer, which sets an input
+// element's "value"
+Backbone.Syphon.InputWriters.registerDefault(function ($el, value) {
+    $el.val(value);
+});
+
+// Checkbox writer, set whether or not the checkbox is checked
+// depending on the boolean value.
+Backbone.Syphon.InputWriters.register("checkbox", function ($el, value) {
+    $el.prop("checked", value);
+});
+
+// Radio button writer, set whether or not the radio button is
+// checked.  The button should only be checked if it's value
+// equals the given value.
+Backbone.Syphon.InputWriters.register("radio", function ($el, value) {
+    $el.prop("checked", $el.val() === value);
+});
+
+// Key Assignment Validators
+// -------------------------
+
+// Key Assignment Validators are used to determine whether or not a
+// key should be assigned to a value, after the key and value have been
+// extracted from the element. This is the last opportunity to prevent
+// bad data from getting serialized to your object.
+
+Backbone.Syphon.KeyAssignmentValidatorSet = Backbone.Syphon.TypeRegistry.extend();
+
+// Build-in Key Assignment Validators
+Backbone.Syphon.KeyAssignmentValidators = new Backbone.Syphon.KeyAssignmentValidatorSet();
+
+// Everything is valid by default
+Backbone.Syphon.KeyAssignmentValidators.registerDefault(function () {
+    return true;
+});
+
+// But only the "checked" radio button for a given
+// radio button group is valid
+Backbone.Syphon.KeyAssignmentValidators.register("radio", function ($el, key, value) {
+    return $el.prop("checked");
+});
+
+
+// Backbone.Syphon.KeySplitter
+// ---------------------------
+
+// This function is used to split DOM element keys in to an array
+// of parts, which are then used to create a nested result structure.
+// returning `["foo", "bar"]` results in `{foo: { bar: "value" }}`.
+//
+// Override this method to use a custom key splitter, such as:
+// `<input name="foo.bar.baz">`, `return key.split(".")`
+Backbone.Syphon.KeySplitter = function (key) {
+    var matches = key.match(/[^\[\]]+/g);
+
+    if (key.indexOf("[]") === key.length - 2) {
+        lastKey = matches.pop();
+        matches.push([lastKey]);
+    }
+
+    return matches;
+}
+
+
+// Backbone.Syphon.KeyJoiner
+// -------------------------
+
+// Take two segments of a key and join them together, to create the
+// de-normalized key name, when deserializing a data structure back
+// in to a form.
+//
+// Example: 
+//
+// With this data strucutre `{foo: { bar: {baz: "value", quux: "another"} } }`,
+// the key joiner will be called with these parameters, and assuming the
+// join happens with "[ ]" square brackets, the specified output:
+// 
+// `KeyJoiner("foo", "bar")` //=> "foo[bar]"
+// `KeyJoiner("foo[bar]", "baz")` //=> "foo[bar][baz]"
+// `KeyJoiner("foo[bar]", "quux")` //=> "foo[bar][quux]"
+
+Backbone.Syphon.KeyJoiner = function (parentKey, childKey) {
+    return parentKey + "[" + childKey + "]";
+}
\ No newline at end of file
diff --git a/static/js/libs/backbone/underscore.js b/static/js/libs/backbone/underscore.js
index d558ad2..c8a9cc7 100644
--- a/static/js/libs/backbone/underscore.js
+++ b/static/js/libs/backbone/underscore.js
@@ -1,2 +1,1239 @@
 // Underscore.js 1.4.4
-(function(){var n=this,t=n._,r={},e=Array.prototype,u=Object.prototype,i=Function.prototype,a=e.push,o=e.slice,c=e.concat,l=u.toString,f=u.hasOwnProperty,s=e.forEach,p=e.map,h=e.reduce,v=e.reduceRight,d=e.filter,g=e.every,m=e.some,y=e.indexOf,b=e.lastIndexOf,x=Array.isArray,_=Object.keys,j=i.bind,w=function(n){return n instanceof w?n:this instanceof w?(this._wrapped=n,void 0):new w(n)};"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=w),exports._=w):n._=w,w.VERSION="1.4.4";var A=w.each=w.forEach=function(n,t,e){if(null!=n)if(s&&n.forEach===s)n.forEach(t,e);else if(n.length===+n.length){for(var u=0,i=n.length;i>u;u++)if(t.call(e,n[u],u,n)===r)return}else for(var a in n)if(w.has(n,a)&&t.call(e,n[a],a,n)===r)return};w.map=w.collect=function(n,t,r){var e=[];return null==n?e:p&&n.map===p?n.map(t,r):(A(n,function(n,u,i){e[e.length]=t.call(r,n,u,i)}),e)};var O="Reduce of empty array with no initial value";w.reduce=w.foldl=w.inject=function(n,t,r,e){var u=arguments.length>2;if(null==n&&(n=[]),h&&n.reduce===h)return e&&(t=w.bind(t,e)),u?n.reduce(t,r):n.reduce(t);if(A(n,function(n,i,a){u?r=t.call(e,r,n,i,a):(r=n,u=!0)}),!u)throw new TypeError(O);return r},w.reduceRight=w.foldr=function(n,t,r,e){var u=arguments.length>2;if(null==n&&(n=[]),v&&n.reduceRight===v)return e&&(t=w.bind(t,e)),u?n.reduceRight(t,r):n.reduceRight(t);var i=n.length;if(i!==+i){var a=w.keys(n);i=a.length}if(A(n,function(o,c,l){c=a?a[--i]:--i,u?r=t.call(e,r,n[c],c,l):(r=n[c],u=!0)}),!u)throw new TypeError(O);return r},w.find=w.detect=function(n,t,r){var e;return E(n,function(n,u,i){return t.call(r,n,u,i)?(e=n,!0):void 0}),e},w.filter=w.select=function(n,t,r){var e=[];return null==n?e:d&&n.filter===d?n.filter(t,r):(A(n,function(n,u,i){t.call(r,n,u,i)&&(e[e.length]=n)}),e)},w.reject=function(n,t,r){return w.filter(n,function(n,e,u){return!t.call(r,n,e,u)},r)},w.every=w.all=function(n,t,e){t||(t=w.identity);var u=!0;return null==n?u:g&&n.every===g?n.every(t,e):(A(n,function(n,i,a){return(u=u&&t.call(e,n,i,a))?void 0:r}),!!u)};var E=w.some=w.any=function(n,t,e){t||(t=w.identity);var u=!1;return null==n?u:m&&n.some===m?n.some(t,e):(A(n,function(n,i,a){return u||(u=t.call(e,n,i,a))?r:void 0}),!!u)};w.contains=w.include=function(n,t){return null==n?!1:y&&n.indexOf===y?n.indexOf(t)!=-1:E(n,function(n){return n===t})},w.invoke=function(n,t){var r=o.call(arguments,2),e=w.isFunction(t);return w.map(n,function(n){return(e?t:n[t]).apply(n,r)})},w.pluck=function(n,t){return w.map(n,function(n){return n[t]})},w.where=function(n,t,r){return w.isEmpty(t)?r?null:[]:w[r?"find":"filter"](n,function(n){for(var r in t)if(t[r]!==n[r])return!1;return!0})},w.findWhere=function(n,t){return w.where(n,t,!0)},w.max=function(n,t,r){if(!t&&w.isArray(n)&&n[0]===+n[0]&&65535>n.length)return Math.max.apply(Math,n);if(!t&&w.isEmpty(n))return-1/0;var e={computed:-1/0,value:-1/0};return A(n,function(n,u,i){var a=t?t.call(r,n,u,i):n;a>=e.computed&&(e={value:n,computed:a})}),e.value},w.min=function(n,t,r){if(!t&&w.isArray(n)&&n[0]===+n[0]&&65535>n.length)return Math.min.apply(Math,n);if(!t&&w.isEmpty(n))return 1/0;var e={computed:1/0,value:1/0};return A(n,function(n,u,i){var a=t?t.call(r,n,u,i):n;e.computed>a&&(e={value:n,computed:a})}),e.value},w.shuffle=function(n){var t,r=0,e=[];return A(n,function(n){t=w.random(r++),e[r-1]=e[t],e[t]=n}),e};var k=function(n){return w.isFunction(n)?n:function(t){return t[n]}};w.sortBy=function(n,t,r){var e=k(t);return w.pluck(w.map(n,function(n,t,u){return{value:n,index:t,criteria:e.call(r,n,t,u)}}).sort(function(n,t){var r=n.criteria,e=t.criteria;if(r!==e){if(r>e||r===void 0)return 1;if(e>r||e===void 0)return-1}return n.index<t.index?-1:1}),"value")};var F=function(n,t,r,e){var u={},i=k(t||w.identity);return A(n,function(t,a){var o=i.call(r,t,a,n);e(u,o,t)}),u};w.groupBy=function(n,t,r){return F(n,t,r,function(n,t,r){(w.has(n,t)?n[t]:n[t]=[]).push(r)})},w.countBy=function(n,t,r){return F(n,t,r,function(n,t){w.has(n,t)||(n[t]=0),n[t]++})},w.sortedIndex=function(n,t,r,e){r=null==r?w.identity:k(r);for(var u=r.call(e,t),i=0,a=n.length;a>i;){var o=i+a>>>1;u>r.call(e,n[o])?i=o+1:a=o}return i},w.toArray=function(n){return n?w.isArray(n)?o.call(n):n.length===+n.length?w.map(n,w.identity):w.values(n):[]},w.size=function(n){return null==n?0:n.length===+n.length?n.length:w.keys(n).length},w.first=w.head=w.take=function(n,t,r){return null==n?void 0:null==t||r?n[0]:o.call(n,0,t)},w.initial=function(n,t,r){return o.call(n,0,n.length-(null==t||r?1:t))},w.last=function(n,t,r){return null==n?void 0:null==t||r?n[n.length-1]:o.call(n,Math.max(n.length-t,0))},w.rest=w.tail=w.drop=function(n,t,r){return o.call(n,null==t||r?1:t)},w.compact=function(n){return w.filter(n,w.identity)};var R=function(n,t,r){return A(n,function(n){w.isArray(n)?t?a.apply(r,n):R(n,t,r):r.push(n)}),r};w.flatten=function(n,t){return R(n,t,[])},w.without=function(n){return w.difference(n,o.call(arguments,1))},w.uniq=w.unique=function(n,t,r,e){w.isFunction(t)&&(e=r,r=t,t=!1);var u=r?w.map(n,r,e):n,i=[],a=[];return A(u,function(r,e){(t?e&&a[a.length-1]===r:w.contains(a,r))||(a.push(r),i.push(n[e]))}),i},w.union=function(){return w.uniq(c.apply(e,arguments))},w.intersection=function(n){var t=o.call(arguments,1);return w.filter(w.uniq(n),function(n){return w.every(t,function(t){return w.indexOf(t,n)>=0})})},w.difference=function(n){var t=c.apply(e,o.call(arguments,1));return w.filter(n,function(n){return!w.contains(t,n)})},w.zip=function(){for(var n=o.call(arguments),t=w.max(w.pluck(n,"length")),r=Array(t),e=0;t>e;e++)r[e]=w.pluck(n,""+e);return r},w.object=function(n,t){if(null==n)return{};for(var r={},e=0,u=n.length;u>e;e++)t?r[n[e]]=t[e]:r[n[e][0]]=n[e][1];return r},w.indexOf=function(n,t,r){if(null==n)return-1;var e=0,u=n.length;if(r){if("number"!=typeof r)return e=w.sortedIndex(n,t),n[e]===t?e:-1;e=0>r?Math.max(0,u+r):r}if(y&&n.indexOf===y)return n.indexOf(t,r);for(;u>e;e++)if(n[e]===t)return e;return-1},w.lastIndexOf=function(n,t,r){if(null==n)return-1;var e=null!=r;if(b&&n.lastIndexOf===b)return e?n.lastIndexOf(t,r):n.lastIndexOf(t);for(var u=e?r:n.length;u--;)if(n[u]===t)return u;return-1},w.range=function(n,t,r){1>=arguments.length&&(t=n||0,n=0),r=arguments[2]||1;for(var e=Math.max(Math.ceil((t-n)/r),0),u=0,i=Array(e);e>u;)i[u++]=n,n+=r;return i},w.bind=function(n,t){if(n.bind===j&&j)return j.apply(n,o.call(arguments,1));var r=o.call(arguments,2);return function(){return n.apply(t,r.concat(o.call(arguments)))}},w.partial=function(n){var t=o.call(arguments,1);return function(){return n.apply(this,t.concat(o.call(arguments)))}},w.bindAll=function(n){var t=o.call(arguments,1);return 0===t.length&&(t=w.functions(n)),A(t,function(t){n[t]=w.bind(n[t],n)}),n},w.memoize=function(n,t){var r={};return t||(t=w.identity),function(){var e=t.apply(this,arguments);return w.has(r,e)?r[e]:r[e]=n.apply(this,arguments)}},w.delay=function(n,t){var r=o.call(arguments,2);return setTimeout(function(){return n.apply(null,r)},t)},w.defer=function(n){return w.delay.apply(w,[n,1].concat(o.call(arguments,1)))},w.throttle=function(n,t){var r,e,u,i,a=0,o=function(){a=new Date,u=null,i=n.apply(r,e)};return function(){var c=new Date,l=t-(c-a);return r=this,e=arguments,0>=l?(clearTimeout(u),u=null,a=c,i=n.apply(r,e)):u||(u=setTimeout(o,l)),i}},w.debounce=function(n,t,r){var e,u;return function(){var i=this,a=arguments,o=function(){e=null,r||(u=n.apply(i,a))},c=r&&!e;return clearTimeout(e),e=setTimeout(o,t),c&&(u=n.apply(i,a)),u}},w.once=function(n){var t,r=!1;return function(){return r?t:(r=!0,t=n.apply(this,arguments),n=null,t)}},w.wrap=function(n,t){return function(){var r=[n];return a.apply(r,arguments),t.apply(this,r)}},w.compose=function(){var n=arguments;return function(){for(var t=arguments,r=n.length-1;r>=0;r--)t=[n[r].apply(this,t)];return t[0]}},w.after=function(n,t){return 0>=n?t():function(){return 1>--n?t.apply(this,arguments):void 0}},w.keys=_||function(n){if(n!==Object(n))throw new TypeError("Invalid object");var t=[];for(var r in n)w.has(n,r)&&(t[t.length]=r);return t},w.values=function(n){var t=[];for(var r in n)w.has(n,r)&&t.push(n[r]);return t},w.pairs=function(n){var t=[];for(var r in n)w.has(n,r)&&t.push([r,n[r]]);return t},w.invert=function(n){var t={};for(var r in n)w.has(n,r)&&(t[n[r]]=r);return t},w.functions=w.methods=function(n){var t=[];for(var r in n)w.isFunction(n[r])&&t.push(r);return t.sort()},w.extend=function(n){return A(o.call(arguments,1),function(t){if(t)for(var r in t)n[r]=t[r]}),n},w.pick=function(n){var t={},r=c.apply(e,o.call(arguments,1));return A(r,function(r){r in n&&(t[r]=n[r])}),t},w.omit=function(n){var t={},r=c.apply(e,o.call(arguments,1));for(var u in n)w.contains(r,u)||(t[u]=n[u]);return t},w.defaults=function(n){return A(o.call(arguments,1),function(t){if(t)for(var r in t)null==n[r]&&(n[r]=t[r])}),n},w.clone=function(n){return w.isObject(n)?w.isArray(n)?n.slice():w.extend({},n):n},w.tap=function(n,t){return t(n),n};var I=function(n,t,r,e){if(n===t)return 0!==n||1/n==1/t;if(null==n||null==t)return n===t;n instanceof w&&(n=n._wrapped),t instanceof w&&(t=t._wrapped);var u=l.call(n);if(u!=l.call(t))return!1;switch(u){case"[object String]":return n==t+"";case"[object Number]":return n!=+n?t!=+t:0==n?1/n==1/t:n==+t;case"[object Date]":case"[object Boolean]":return+n==+t;case"[object RegExp]":return n.source==t.source&&n.global==t.global&&n.multiline==t.multiline&&n.ignoreCase==t.ignoreCase}if("object"!=typeof n||"object"!=typeof t)return!1;for(var i=r.length;i--;)if(r[i]==n)return e[i]==t;r.push(n),e.push(t);var a=0,o=!0;if("[object Array]"==u){if(a=n.length,o=a==t.length)for(;a--&&(o=I(n[a],t[a],r,e)););}else{var c=n.constructor,f=t.constructor;if(c!==f&&!(w.isFunction(c)&&c instanceof c&&w.isFunction(f)&&f instanceof f))return!1;for(var s in n)if(w.has(n,s)&&(a++,!(o=w.has(t,s)&&I(n[s],t[s],r,e))))break;if(o){for(s in t)if(w.has(t,s)&&!a--)break;o=!a}}return r.pop(),e.pop(),o};w.isEqual=function(n,t){return I(n,t,[],[])},w.isEmpty=function(n){if(null==n)return!0;if(w.isArray(n)||w.isString(n))return 0===n.length;for(var t in n)if(w.has(n,t))return!1;return!0},w.isElement=function(n){return!(!n||1!==n.nodeType)},w.isArray=x||function(n){return"[object Array]"==l.call(n)},w.isObject=function(n){return n===Object(n)},A(["Arguments","Function","String","Number","Date","RegExp"],function(n){w["is"+n]=function(t){return l.call(t)=="[object "+n+"]"}}),w.isArguments(arguments)||(w.isArguments=function(n){return!(!n||!w.has(n,"callee"))}),"function"!=typeof/./&&(w.isFunction=function(n){return"function"==typeof n}),w.isFinite=function(n){return isFinite(n)&&!isNaN(parseFloat(n))},w.isNaN=function(n){return w.isNumber(n)&&n!=+n},w.isBoolean=function(n){return n===!0||n===!1||"[object Boolean]"==l.call(n)},w.isNull=function(n){return null===n},w.isUndefined=function(n){return n===void 0},w.has=function(n,t){return f.call(n,t)},w.noConflict=function(){return n._=t,this},w.identity=function(n){return n},w.times=function(n,t,r){for(var e=Array(n),u=0;n>u;u++)e[u]=t.call(r,u);return e},w.random=function(n,t){return null==t&&(t=n,n=0),n+Math.floor(Math.random()*(t-n+1))};var M={escape:{"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","/":"&#x2F;"}};M.unescape=w.invert(M.escape);var S={escape:RegExp("["+w.keys(M.escape).join("")+"]","g"),unescape:RegExp("("+w.keys(M.unescape).join("|")+")","g")};w.each(["escape","unescape"],function(n){w[n]=function(t){return null==t?"":(""+t).replace(S[n],function(t){return M[n][t]})}}),w.result=function(n,t){if(null==n)return null;var r=n[t];return w.isFunction(r)?r.call(n):r},w.mixin=function(n){A(w.functions(n),function(t){var r=w[t]=n[t];w.prototype[t]=function(){var n=[this._wrapped];return a.apply(n,arguments),D.call(this,r.apply(w,n))}})};var N=0;w.uniqueId=function(n){var t=++N+"";return n?n+t:t},w.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var T=/(.)^/,q={"'":"'","\\":"\\","\r":"r","\n":"n","	":"t","\u2028":"u2028","\u2029":"u2029"},B=/\\|'|\r|\n|\t|\u2028|\u2029/g;w.template=function(n,t,r){var e;r=w.defaults({},r,w.templateSettings);var u=RegExp([(r.escape||T).source,(r.interpolate||T).source,(r.evaluate||T).source].join("|")+"|$","g"),i=0,a="__p+='";n.replace(u,function(t,r,e,u,o){return a+=n.slice(i,o).replace(B,function(n){return"\\"+q[n]}),r&&(a+="'+\n((__t=("+r+"))==null?'':_.escape(__t))+\n'"),e&&(a+="'+\n((__t=("+e+"))==null?'':__t)+\n'"),u&&(a+="';\n"+u+"\n__p+='"),i=o+t.length,t}),a+="';\n",r.variable||(a="with(obj||{}){\n"+a+"}\n"),a="var __t,__p='',__j=Array.prototype.join,"+"print=function(){__p+=__j.call(arguments,'');};\n"+a+"return __p;\n";try{e=Function(r.variable||"obj","_",a)}catch(o){throw o.source=a,o}if(t)return e(t,w);var c=function(n){return e.call(this,n,w)};return c.source="function("+(r.variable||"obj")+"){\n"+a+"}",c},w.chain=function(n){return w(n).chain()};var D=function(n){return this._chain?w(n).chain():n};w.mixin(w),A(["pop","push","reverse","shift","sort","splice","unshift"],function(n){var t=e[n];w.prototype[n]=function(){var r=this._wrapped;return t.apply(r,arguments),"shift"!=n&&"splice"!=n||0!==r.length||delete r[0],D.call(this,r)}}),A(["concat","join","slice"],function(n){var t=e[n];w.prototype[n]=function(){return D.call(this,t.apply(this._wrapped,arguments))}}),w.extend(w.prototype,{chain:function(){return this._chain=!0,this},value:function(){return this._wrapped}})}).call(this);
\ No newline at end of file
+// ===================
+
+// > http://underscorejs.org
+// > (c) 2009-2013 Jeremy Ashkenas, DocumentCloud Inc.
+// > Underscore may be freely distributed under the MIT license.
+
+// Baseline setup
+// --------------
+(function () {
+
+    // Establish the root object, `window` in the browser, or `global` on the server.
+    var root = this;
+
+    // Save the previous value of the `_` variable.
+    var previousUnderscore = root._;
+
+    // Establish the object that gets returned to break out of a loop iteration.
+    var breaker = {};
+
+    // Save bytes in the minified (but not gzipped) version:
+    var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
+
+    // Create quick reference variables for speed access to core prototypes.
+    var push = ArrayProto.push,
+        slice = ArrayProto.slice,
+        concat = ArrayProto.concat,
+        toString = ObjProto.toString,
+        hasOwnProperty = ObjProto.hasOwnProperty;
+
+    // All **ECMAScript 5** native function implementations that we hope to use
+    // are declared here.
+    var
+        nativeForEach = ArrayProto.forEach,
+        nativeMap = ArrayProto.map,
+        nativeReduce = ArrayProto.reduce,
+        nativeReduceRight = ArrayProto.reduceRight,
+        nativeFilter = ArrayProto.filter,
+        nativeEvery = ArrayProto.every,
+        nativeSome = ArrayProto.some,
+        nativeIndexOf = ArrayProto.indexOf,
+        nativeLastIndexOf = ArrayProto.lastIndexOf,
+        nativeIsArray = Array.isArray,
+        nativeKeys = Object.keys,
+        nativeBind = FuncProto.bind;
+
+    // Create a safe reference to the Underscore object for use below.
+    var _ = function (obj) {
+        if (obj instanceof _) return obj;
+        if (!(this instanceof _)) return new _(obj);
+        this._wrapped = obj;
+    };
+
+    // Export the Underscore object for **Node.js**, with
+    // backwards-compatibility for the old `require()` API. If we're in
+    // the browser, add `_` as a global object via a string identifier,
+    // for Closure Compiler "advanced" mode.
+    if (typeof exports !== 'undefined') {
+        if (typeof module !== 'undefined' && module.exports) {
+            exports = module.exports = _;
+        }
+        exports._ = _;
+    } else {
+        root._ = _;
+    }
+
+    // Current version.
+    _.VERSION = '1.4.4';
+
+    // Collection Functions
+    // --------------------
+
+    // The cornerstone, an `each` implementation, aka `forEach`.
+    // Handles objects with the built-in `forEach`, arrays, and raw objects.
+    // Delegates to **ECMAScript 5**'s native `forEach` if available.
+    var each = _.each = _.forEach = function (obj, iterator, context) {
+        if (obj == null) return;
+        if (nativeForEach && obj.forEach === nativeForEach) {
+            obj.forEach(iterator, context);
+        } else if (obj.length === +obj.length) {
+            for (var i = 0, l = obj.length; i < l; i++) {
+                if (iterator.call(context, obj[i], i, obj) === breaker) return;
+            }
+        } else {
+            for (var key in obj) {
+                if (_.has(obj, key)) {
+                    if (iterator.call(context, obj[key], key, obj) === breaker) return;
+                }
+            }
+        }
+    };
+
+    // Return the results of applying the iterator to each element.
+    // Delegates to **ECMAScript 5**'s native `map` if available.
+    _.map = _.collect = function (obj, iterator, context) {
+        var results = [];
+        if (obj == null) return results;
+        if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);
+        each(obj, function (value, index, list) {
+            results[results.length] = iterator.call(context, value, index, list);
+        });
+        return results;
+    };
+
+    var reduceError = 'Reduce of empty array with no initial value';
+
+    // **Reduce** builds up a single result from a list of values, aka `inject`,
+    // or `foldl`. Delegates to **ECMAScript 5**'s native `reduce` if available.
+    _.reduce = _.foldl = _.inject = function (obj, iterator, memo, context) {
+        var initial = arguments.length > 2;
+        if (obj == null) obj = [];
+        if (nativeReduce && obj.reduce === nativeReduce) {
+            if (context) iterator = _.bind(iterator, context);
+            return initial ? obj.reduce(iterator, memo) : obj.reduce(iterator);
+        }
+        each(obj, function (value, index, list) {
+            if (!initial) {
+                memo = value;
+                initial = true;
+            } else {
+                memo = iterator.call(context, memo, value, index, list);
+            }
+        });
+        if (!initial) throw new TypeError(reduceError);
+        return memo;
+    };
+
+    // The right-associative version of reduce, also known as `foldr`.
+    // Delegates to **ECMAScript 5**'s native `reduceRight` if available.
+    _.reduceRight = _.foldr = function (obj, iterator, memo, context) {
+        var initial = arguments.length > 2;
+        if (obj == null) obj = [];
+        if (nativeReduceRight && obj.reduceRight === nativeReduceRight) {
+            if (context) iterator = _.bind(iterator, context);
+            return initial ? obj.reduceRight(iterator, memo) : obj.reduceRight(iterator);
+        }
+        var length = obj.length;
+        if (length !== +length) {
+            var keys = _.keys(obj);
+            length = keys.length;
+        }
+        each(obj, function (value, index, list) {
+            index = keys ? keys[--length] : --length;
+            if (!initial) {
+                memo = obj[index];
+                initial = true;
+            } else {
+                memo = iterator.call(context, memo, obj[index], index, list);
+            }
+        });
+        if (!initial) throw new TypeError(reduceError);
+        return memo;
+    };
+
+    // Return the first value which passes a truth test. Aliased as `detect`.
+    _.find = _.detect = function (obj, iterator, context) {
+        var result;
+        any(obj, function (value, index, list) {
+            if (iterator.call(context, value, index, list)) {
+                result = value;
+                return true;
+            }
+        });
+        return result;
+    };
+
+    // Return all the elements that pass a truth test.
+    // Delegates to **ECMAScript 5**'s native `filter` if available.
+    // Aliased as `select`.
+    _.filter = _.select = function (obj, iterator, context) {
+        var results = [];
+        if (obj == null) return results;
+        if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context);
+        each(obj, function (value, index, list) {
+            if (iterator.call(context, value, index, list)) results[results.length] = value;
+        });
+        return results;
+    };
+
+    // Return all the elements for which a truth test fails.
+    _.reject = function (obj, iterator, context) {
+        return _.filter(obj, function (value, index, list) {
+            return !iterator.call(context, value, index, list);
+        }, context);
+    };
+
+    // Determine whether all of the elements match a truth test.
+    // Delegates to **ECMAScript 5**'s native `every` if available.
+    // Aliased as `all`.
+    _.every = _.all = function (obj, iterator, context) {
+        iterator || (iterator = _.identity);
+        var result = true;
+        if (obj == null) return result;
+        if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
+        each(obj, function (value, index, list) {
+            if (!(result = result && iterator.call(context, value, index, list))) return breaker;
+        });
+        return !!result;
+    };
+
+    // Determine if at least one element in the object matches a truth test.
+    // Delegates to **ECMAScript 5**'s native `some` if available.
+    // Aliased as `any`.
+    var any = _.some = _.any = function (obj, iterator, context) {
+        iterator || (iterator = _.identity);
+        var result = false;
+        if (obj == null) return result;
+        if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);
+        each(obj, function (value, index, list) {
+            if (result || (result = iterator.call(context, value, index, list))) return breaker;
+        });
+        return !!result;
+    };
+
+    // Determine if the array or object contains a given value (using `===`).
+    // Aliased as `include`.
+    _.contains = _.include = function (obj, target) {
+        if (obj == null) return false;
+        if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1;
+        return any(obj, function (value) {
+            return value === target;
+        });
+    };
+
+    // Invoke a method (with arguments) on every item in a collection.
+    _.invoke = function (obj, method) {
+        var args = slice.call(arguments, 2);
+        var isFunc = _.isFunction(method);
+        return _.map(obj, function (value) {
+            return (isFunc ? method : value[method]).apply(value, args);
+        });
+    };
+
+    // Convenience version of a common use case of `map`: fetching a property.
+    _.pluck = function (obj, key) {
+        return _.map(obj, function (value) {
+            return value[key];
+        });
+    };
+
+    // Convenience version of a common use case of `filter`: selecting only objects
+    // containing specific `key:value` pairs.
+    _.where = function (obj, attrs, first) {
+        if (_.isEmpty(attrs)) return first ? null : [];
+        return _[first ? 'find' : 'filter'](obj, function (value) {
+            for (var key in attrs) {
+                if (attrs[key] !== value[key]) return false;
+            }
+            return true;
+        });
+    };
+
+    // Convenience version of a common use case of `find`: getting the first object
+    // containing specific `key:value` pairs.
+    _.findWhere = function (obj, attrs) {
+        return _.where(obj, attrs, true);
+    };
+
+    // Return the maximum element or (element-based computation).
+    // Can't optimize arrays of integers longer than 65,535 elements.
+    // See: https://bugs.webkit.org/show_bug.cgi?id=80797
+    _.max = function (obj, iterator, context) {
+        if (!iterator && _.isArray(obj) && obj[0] === +obj[0] && obj.length < 65535) {
+            return Math.max.apply(Math, obj);
+        }
+        if (!iterator && _.isEmpty(obj)) return -Infinity;
+        var result = {computed: -Infinity, value: -Infinity};
+        each(obj, function (value, index, list) {
+            var computed = iterator ? iterator.call(context, value, index, list) : value;
+            computed >= result.computed && (result = {value: value, computed: computed});
+        });
+        return result.value;
+    };
+
+    // Return the minimum element (or element-based computation).
+    _.min = function (obj, iterator, context) {
+        if (!iterator && _.isArray(obj) && obj[0] === +obj[0] && obj.length < 65535) {
+            return Math.min.apply(Math, obj);
+        }
+        if (!iterator && _.isEmpty(obj)) return Infinity;
+        var result = {computed: Infinity, value: Infinity};
+        each(obj, function (value, index, list) {
+            var computed = iterator ? iterator.call(context, value, index, list) : value;
+            computed < result.computed && (result = {value: value, computed: computed});
+        });
+        return result.value;
+    };
+
+    // Shuffle an array.
+    _.shuffle = function (obj) {
+        var rand;
+        var index = 0;
+        var shuffled = [];
+        each(obj, function (value) {
+            rand = _.random(index++);
+            shuffled[index - 1] = shuffled[rand];
+            shuffled[rand] = value;
+        });
+        return shuffled;
+    };
+
+    // An internal function to generate lookup iterators.
+    var lookupIterator = function (value) {
+        return _.isFunction(value) ? value : function (obj) {
+            return obj[value];
+        };
+    };
+
+    // Sort the object's values by a criterion produced by an iterator.
+    _.sortBy = function (obj, value, context) {
+        var iterator = lookupIterator(value);
+        return _.pluck(_.map(obj,function (value, index, list) {
+            return {
+                value: value,
+                index: index,
+                criteria: iterator.call(context, value, index, list)
+            };
+        }).sort(function (left, right) {
+                var a = left.criteria;
+                var b = right.criteria;
+                if (a !== b) {
+                    if (a > b || a === void 0) return 1;
+                    if (a < b || b === void 0) return -1;
+                }
+                return left.index < right.index ? -1 : 1;
+            }), 'value');
+    };
+
+    // An internal function used for aggregate "group by" operations.
+    var group = function (obj, value, context, behavior) {
+        var result = {};
+        var iterator = lookupIterator(value || _.identity);
+        each(obj, function (value, index) {
+            var key = iterator.call(context, value, index, obj);
+            behavior(result, key, value);
+        });
+        return result;
+    };
+
+    // Groups the object's values by a criterion. Pass either a string attribute
+    // to group by, or a function that returns the criterion.
+    _.groupBy = function (obj, value, context) {
+        return group(obj, value, context, function (result, key, value) {
+            (_.has(result, key) ? result[key] : (result[key] = [])).push(value);
+        });
+    };
+
+    // Counts instances of an object that group by a certain criterion. Pass
+    // either a string attribute to count by, or a function that returns the
+    // criterion.
+    _.countBy = function (obj, value, context) {
+        return group(obj, value, context, function (result, key) {
+            if (!_.has(result, key)) result[key] = 0;
+            result[key]++;
+        });
+    };
+
+    // Use a comparator function to figure out the smallest index at which
+    // an object should be inserted so as to maintain order. Uses binary search.
+    _.sortedIndex = function (array, obj, iterator, context) {
+        iterator = iterator == null ? _.identity : lookupIterator(iterator);
+        var value = iterator.call(context, obj);
+        var low = 0, high = array.length;
+        while (low < high) {
+            var mid = (low + high) >>> 1;
+            iterator.call(context, array[mid]) < value ? low = mid + 1 : high = mid;
+        }
+        return low;
+    };
+
+    // Safely convert anything iterable into a real, live array.
+    _.toArray = function (obj) {
+        if (!obj) return [];
+        if (_.isArray(obj)) return slice.call(obj);
+        if (obj.length === +obj.length) return _.map(obj, _.identity);
+        return _.values(obj);
+    };
+
+    // Return the number of elements in an object.
+    _.size = function (obj) {
+        if (obj == null) return 0;
+        return (obj.length === +obj.length) ? obj.length : _.keys(obj).length;
+    };
+
+    // Array Functions
+    // ---------------
+
+    // Get the first element of an array. Passing **n** will return the first N
+    // values in the array. Aliased as `head` and `take`. The **guard** check
+    // allows it to work with `_.map`.
+    _.first = _.head = _.take = function (array, n, guard) {
+        if (array == null) return void 0;
+        return (n != null) && !guard ? slice.call(array, 0, n) : array[0];
+    };
+
+    // Returns everything but the last entry of the array. Especially useful on
+    // the arguments object. Passing **n** will return all the values in
+    // the array, excluding the last N. The **guard** check allows it to work with
+    // `_.map`.
+    _.initial = function (array, n, guard) {
+        return slice.call(array, 0, array.length - ((n == null) || guard ? 1 : n));
+    };
+
+    // Get the last element of an array. Passing **n** will return the last N
+    // values in the array. The **guard** check allows it to work with `_.map`.
+    _.last = function (array, n, guard) {
+        if (array == null) return void 0;
+        if ((n != null) && !guard) {
+            return slice.call(array, Math.max(array.length - n, 0));
+        } else {
+            return array[array.length - 1];
+        }
+    };
+
+    // Returns everything but the first entry of the array. Aliased as `tail` and `drop`.
+    // Especially useful on the arguments object. Passing an **n** will return
+    // the rest N values in the array. The **guard**
+    // check allows it to work with `_.map`.
+    _.rest = _.tail = _.drop = function (array, n, guard) {
+        return slice.call(array, (n == null) || guard ? 1 : n);
+    };
+
+    // Trim out all falsy values from an array.
+    _.compact = function (array) {
+        return _.filter(array, _.identity);
+    };
+
+    // Internal implementation of a recursive `flatten` function.
+    var flatten = function (input, shallow, output) {
+        each(input, function (value) {
+            if (_.isArray(value)) {
+                shallow ? push.apply(output, value) : flatten(value, shallow, output);
+            } else {
+                output.push(value);
+            }
+        });
+        return output;
+    };
+
+    // Return a completely flattened version of an array.
+    _.flatten = function (array, shallow) {
+        return flatten(array, shallow, []);
+    };
+
+    // Return a version of the array that does not contain the specified value(s).
+    _.without = function (array) {
+        return _.difference(array, slice.call(arguments, 1));
+    };
+
+    // Produce a duplicate-free version of the array. If the array has already
+    // been sorted, you have the option of using a faster algorithm.
+    // Aliased as `unique`.
+    _.uniq = _.unique = function (array, isSorted, iterator, context) {
+        if (_.isFunction(isSorted)) {
+            context = iterator;
+            iterator = isSorted;
+            isSorted = false;
+        }
+        var initial = iterator ? _.map(array, iterator, context) : array;
+        var results = [];
+        var seen = [];
+        each(initial, function (value, index) {
+            if (isSorted ? (!index || seen[seen.length - 1] !== value) : !_.contains(seen, value)) {
+                seen.push(value);
+                results.push(array[index]);
+            }
+        });
+        return results;
+    };
+
+    // Produce an array that contains the union: each distinct element from all of
+    // the passed-in arrays.
+    _.union = function () {
+        return _.uniq(concat.apply(ArrayProto, arguments));
+    };
+
+    // Produce an array that contains every item shared between all the
+    // passed-in arrays.
+    _.intersection = function (array) {
+        var rest = slice.call(arguments, 1);
+        return _.filter(_.uniq(array), function (item) {
+            return _.every(rest, function (other) {
+                return _.indexOf(other, item) >= 0;
+            });
+        });
+    };
+
+    // Take the difference between one array and a number of other arrays.
+    // Only the elements present in just the first array will remain.
+    _.difference = function (array) {
+        var rest = concat.apply(ArrayProto, slice.call(arguments, 1));
+        return _.filter(array, function (value) {
+            return !_.contains(rest, value);
+        });
+    };
+
+    // Zip together multiple lists into a single array -- elements that share
+    // an index go together.
+    _.zip = function () {
+        var args = slice.call(arguments);
+        var length = _.max(_.pluck(args, 'length'));
+        var results = new Array(length);
+        for (var i = 0; i < length; i++) {
+            results[i] = _.pluck(args, "" + i);
+        }
+        return results;
+    };
+
+    // Converts lists into objects. Pass either a single array of `[key, value]`
+    // pairs, or two parallel arrays of the same length -- one of keys, and one of
+    // the corresponding values.
+    _.object = function (list, values) {
+        if (list == null) return {};
+        var result = {};
+        for (var i = 0, l = list.length; i < l; i++) {
+            if (values) {
+                result[list[i]] = values[i];
+            } else {
+                result[list[i][0]] = list[i][1];
+            }
+        }
+        return result;
+    };
+
+    // If the browser doesn't supply us with indexOf (I'm looking at you, **MSIE**),
+    // we need this function. Return the position of the first occurrence of an
+    // item in an array, or -1 if the item is not included in the array.
+    // Delegates to **ECMAScript 5**'s native `indexOf` if available.
+    // If the array is large and already in sort order, pass `true`
+    // for **isSorted** to use binary search.
+    _.indexOf = function (array, item, isSorted) {
+        if (array == null) return -1;
+        var i = 0, l = array.length;
+        if (isSorted) {
+            if (typeof isSorted == 'number') {
+                i = (isSorted < 0 ? Math.max(0, l + isSorted) : isSorted);
+            } else {
+                i = _.sortedIndex(array, item);
+                return array[i] === item ? i : -1;
+            }
+        }
+        if (nativeIndexOf && array.indexOf === nativeIndexOf) return array.indexOf(item, isSorted);
+        for (; i < l; i++) if (array[i] === item) return i;
+        return -1;
+    };
+
+    // Delegates to **ECMAScript 5**'s native `lastIndexOf` if available.
+    _.lastIndexOf = function (array, item, from) {
+        if (array == null) return -1;
+        var hasIndex = from != null;
+        if (nativeLastIndexOf && array.lastIndexOf === nativeLastIndexOf) {
+            return hasIndex ? array.lastIndexOf(item, from) : array.lastIndexOf(item);
+        }
+        var i = (hasIndex ? from : array.length);
+        while (i--) if (array[i] === item) return i;
+        return -1;
+    };
+
+    // Generate an integer Array containing an arithmetic progression. A port of
+    // the native Python `range()` function. See
+    // [the Python documentation](http://docs.python.org/library/functions.html#range).
+    _.range = function (start, stop, step) {
+        if (arguments.length <= 1) {
+            stop = start || 0;
+            start = 0;
+        }
+        step = arguments[2] || 1;
+
+        var len = Math.max(Math.ceil((stop - start) / step), 0);
+        var idx = 0;
+        var range = new Array(len);
+
+        while (idx < len) {
+            range[idx++] = start;
+            start += step;
+        }
+
+        return range;
+    };
+
+    // Function (ahem) Functions
+    // ------------------
+
+    // Create a function bound to a given object (assigning `this`, and arguments,
+    // optionally). Delegates to **ECMAScript 5**'s native `Function.bind` if
+    // available.
+    _.bind = function (func, context) {
+        if (func.bind === nativeBind && nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));
+        var args = slice.call(arguments, 2);
+        return function () {
+            return func.apply(context, args.concat(slice.call(arguments)));
+        };
+    };
+
+    // Partially apply a function by creating a version that has had some of its
+    // arguments pre-filled, without changing its dynamic `this` context.
+    _.partial = function (func) {
+        var args = slice.call(arguments, 1);
+        return function () {
+            return func.apply(this, args.concat(slice.call(arguments)));
+        };
+    };
+
+    // Bind all of an object's methods to that object. Useful for ensuring that
+    // all callbacks defined on an object belong to it.
+    _.bindAll = function (obj) {
+        var funcs = slice.call(arguments, 1);
+        if (funcs.length === 0) funcs = _.functions(obj);
+        each(funcs, function (f) {
+            obj[f] = _.bind(obj[f], obj);
+        });
+        return obj;
+    };
+
+    // Memoize an expensive function by storing its results.
+    _.memoize = function (func, hasher) {
+        var memo = {};
+        hasher || (hasher = _.identity);
+        return function () {
+            var key = hasher.apply(this, arguments);
+            return _.has(memo, key) ? memo[key] : (memo[key] = func.apply(this, arguments));
+        };
+    };
+
+    // Delays a function for the given number of milliseconds, and then calls
+    // it with the arguments supplied.
+    _.delay = function (func, wait) {
+        var args = slice.call(arguments, 2);
+        return setTimeout(function () {
+            return func.apply(null, args);
+        }, wait);
+    };
+
+    // Defers a function, scheduling it to run after the current call stack has
+    // cleared.
+    _.defer = function (func) {
+        return _.delay.apply(_, [func, 1].concat(slice.call(arguments, 1)));
+    };
+
+    // Returns a function, that, when invoked, will only be triggered at most once
+    // during a given window of time.
+    _.throttle = function (func, wait) {
+        var context, args, timeout, result;
+        var previous = 0;
+        var later = function () {
+            previous = new Date;
+            timeout = null;
+            result = func.apply(context, args);
+        };
+        return function () {
+            var now = new Date;
+            var remaining = wait - (now - previous);
+            context = this;
+            args = arguments;
+            if (remaining <= 0) {
+                clearTimeout(timeout);
+                timeout = null;
+                previous = now;
+                result = func.apply(context, args);
+            } else if (!timeout) {
+                timeout = setTimeout(later, remaining);
+            }
+            return result;
+        };
+    };
+
+    // Returns a function, that, as long as it continues to be invoked, will not
+    // be triggered. The function will be called after it stops being called for
+    // N milliseconds. If `immediate` is passed, trigger the function on the
+    // leading edge, instead of the trailing.
+    _.debounce = function (func, wait, immediate) {
+        var timeout, result;
+        return function () {
+            var context = this, args = arguments;
+            var later = function () {
+                timeout = null;
+                if (!immediate) result = func.apply(context, args);
+            };
+            var callNow = immediate && !timeout;
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+            if (callNow) result = func.apply(context, args);
+            return result;
+        };
+    };
+
+    // Returns a function that will be executed at most one time, no matter how
+    // often you call it. Useful for lazy initialization.
+    _.once = function (func) {
+        var ran = false, memo;
+        return function () {
+            if (ran) return memo;
+            ran = true;
+            memo = func.apply(this, arguments);
+            func = null;
+            return memo;
+        };
+    };
+
+    // Returns the first function passed as an argument to the second,
+    // allowing you to adjust arguments, run code before and after, and
+    // conditionally execute the original function.
+    _.wrap = function (func, wrapper) {
+        return function () {
+            var args = [func];
+            push.apply(args, arguments);
+            return wrapper.apply(this, args);
+        };
+    };
+
+    // Returns a function that is the composition of a list of functions, each
+    // consuming the return value of the function that follows.
+    _.compose = function () {
+        var funcs = arguments;
+        return function () {
+            var args = arguments;
+            for (var i = funcs.length - 1; i >= 0; i--) {
+                args = [funcs[i].apply(this, args)];
+            }
+            return args[0];
+        };
+    };
+
+    // Returns a function that will only be executed after being called N times.
+    _.after = function (times, func) {
+        if (times <= 0) return func();
+        return function () {
+            if (--times < 1) {
+                return func.apply(this, arguments);
+            }
+        };
+    };
+
+    // Object Functions
+    // ----------------
+
+    // Retrieve the names of an object's properties.
+    // Delegates to **ECMAScript 5**'s native `Object.keys`
+    _.keys = nativeKeys || function (obj) {
+        if (obj !== Object(obj)) throw new TypeError('Invalid object');
+        var keys = [];
+        for (var key in obj) if (_.has(obj, key)) keys[keys.length] = key;
+        return keys;
+    };
+
+    // Retrieve the values of an object's properties.
+    _.values = function (obj) {
+        var values = [];
+        for (var key in obj) if (_.has(obj, key)) values.push(obj[key]);
+        return values;
+    };
+
+    // Convert an object into a list of `[key, value]` pairs.
+    _.pairs = function (obj) {
+        var pairs = [];
+        for (var key in obj) if (_.has(obj, key)) pairs.push([key, obj[key]]);
+        return pairs;
+    };
+
+    // Invert the keys and values of an object. The values must be serializable.
+    _.invert = function (obj) {
+        var result = {};
+        for (var key in obj) if (_.has(obj, key)) result[obj[key]] = key;
+        return result;
+    };
+
+    // Return a sorted list of the function names available on the object.
+    // Aliased as `methods`
+    _.functions = _.methods = function (obj) {
+        var names = [];
+        for (var key in obj) {
+            if (_.isFunction(obj[key])) names.push(key);
+        }
+        return names.sort();
+    };
+
+    // Extend a given object with all the properties in passed-in object(s).
+    _.extend = function (obj) {
+        each(slice.call(arguments, 1), function (source) {
+            if (source) {
+                for (var prop in source) {
+                    obj[prop] = source[prop];
+                }
+            }
+        });
+        return obj;
+    };
+
+    // Return a copy of the object only containing the whitelisted properties.
+    _.pick = function (obj) {
+        var copy = {};
+        var keys = concat.apply(ArrayProto, slice.call(arguments, 1));
+        each(keys, function (key) {
+            if (key in obj) copy[key] = obj[key];
+        });
+        return copy;
+    };
+
+    // Return a copy of the object without the blacklisted properties.
+    _.omit = function (obj) {
+        var copy = {};
+        var keys = concat.apply(ArrayProto, slice.call(arguments, 1));
+        for (var key in obj) {
+            if (!_.contains(keys, key)) copy[key] = obj[key];
+        }
+        return copy;
+    };
+
+    // Fill in a given object with default properties.
+    _.defaults = function (obj) {
+        each(slice.call(arguments, 1), function (source) {
+            if (source) {
+                for (var prop in source) {
+                    if (obj[prop] == null) obj[prop] = source[prop];
+                }
+            }
+        });
+        return obj;
+    };
+
+    // Create a (shallow-cloned) duplicate of an object.
+    _.clone = function (obj) {
+        if (!_.isObject(obj)) return obj;
+        return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
+    };
+
+    // Invokes interceptor with the obj, and then returns obj.
+    // The primary purpose of this method is to "tap into" a method chain, in
+    // order to perform operations on intermediate results within the chain.
+    _.tap = function (obj, interceptor) {
+        interceptor(obj);
+        return obj;
+    };
+
+    // Internal recursive comparison function for `isEqual`.
+    var eq = function (a, b, aStack, bStack) {
+        // Identical objects are equal. `0 === -0`, but they aren't identical.
+        // See the Harmony `egal` proposal: http://wiki.ecmascript.org/doku.php?id=harmony:egal.
+        if (a === b) return a !== 0 || 1 / a == 1 / b;
+        // A strict comparison is necessary because `null == undefined`.
+        if (a == null || b == null) return a === b;
+        // Unwrap any wrapped objects.
+        if (a instanceof _) a = a._wrapped;
+        if (b instanceof _) b = b._wrapped;
+        // Compare `[[Class]]` names.
+        var className = toString.call(a);
+        if (className != toString.call(b)) return false;
+        switch (className) {
+            // Strings, numbers, dates, and booleans are compared by value.
+            case '[object String]':
+                // Primitives and their corresponding object wrappers are equivalent; thus, `"5"` is
+                // equivalent to `new String("5")`.
+                return a == String(b);
+            case '[object Number]':
+                // `NaN`s are equivalent, but non-reflexive. An `egal` comparison is performed for
+                // other numeric values.
+                return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
+            case '[object Date]':
+            case '[object Boolean]':
+                // Coerce dates and booleans to numeric primitive values. Dates are compared by their
+                // millisecond representations. Note that invalid dates with millisecond representations
+                // of `NaN` are not equivalent.
+                return +a == +b;
+            // RegExps are compared by their source patterns and flags.
+            case '[object RegExp]':
+                return a.source == b.source &&
+                    a.global == b.global &&
+                    a.multiline == b.multiline &&
+                    a.ignoreCase == b.ignoreCase;
+        }
+        if (typeof a != 'object' || typeof b != 'object') return false;
+        // Assume equality for cyclic structures. The algorithm for detecting cyclic
+        // structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
+        var length = aStack.length;
+        while (length--) {
+            // Linear search. Performance is inversely proportional to the number of
+            // unique nested structures.
+            if (aStack[length] == a) return bStack[length] == b;
+        }
+        // Add the first object to the stack of traversed objects.
+        aStack.push(a);
+        bStack.push(b);
+        var size = 0, result = true;
+        // Recursively compare objects and arrays.
+        if (className == '[object Array]') {
+            // Compare array lengths to determine if a deep comparison is necessary.
+            size = a.length;
+            result = size == b.length;
+            if (result) {
+                // Deep compare the contents, ignoring non-numeric properties.
+                while (size--) {
+                    if (!(result = eq(a[size], b[size], aStack, bStack))) break;
+                }
+            }
+        } else {
+            // Objects with different constructors are not equivalent, but `Object`s
+            // from different frames are.
+            var aCtor = a.constructor, bCtor = b.constructor;
+            if (aCtor !== bCtor && !(_.isFunction(aCtor) && (aCtor instanceof aCtor) &&
+                _.isFunction(bCtor) && (bCtor instanceof bCtor))) {
+                return false;
+            }
+            // Deep compare objects.
+            for (var key in a) {
+                if (_.has(a, key)) {
+                    // Count the expected number of properties.
+                    size++;
+                    // Deep compare each member.
+                    if (!(result = _.has(b, key) && eq(a[key], b[key], aStack, bStack))) break;
+                }
+            }
+            // Ensure that both objects contain the same number of properties.
+            if (result) {
+                for (key in b) {
+                    if (_.has(b, key) && !(size--)) break;
+                }
+                result = !size;
+            }
+        }
+        // Remove the first object from the stack of traversed objects.
+        aStack.pop();
+        bStack.pop();
+        return result;
+    };
+
+    // Perform a deep comparison to check if two objects are equal.
+    _.isEqual = function (a, b) {
+        return eq(a, b, [], []);
+    };
+
+    // Is a given array, string, or object empty?
+    // An "empty" object has no enumerable own-properties.
+    _.isEmpty = function (obj) {
+        if (obj == null) return true;
+        if (_.isArray(obj) || _.isString(obj)) return obj.length === 0;
+        for (var key in obj) if (_.has(obj, key)) return false;
+        return true;
+    };
+
+    // Is a given value a DOM element?
+    _.isElement = function (obj) {
+        return !!(obj && obj.nodeType === 1);
+    };
+
+    // Is a given value an array?
+    // Delegates to ECMA5's native Array.isArray
+    _.isArray = nativeIsArray || function (obj) {
+        return toString.call(obj) == '[object Array]';
+    };
+
+    // Is a given variable an object?
+    _.isObject = function (obj) {
+        return obj === Object(obj);
+    };
+
+    // Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp.
+    each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp'], function (name) {
+        _['is' + name] = function (obj) {
+            return toString.call(obj) == '[object ' + name + ']';
+        };
+    });
+
+    // Define a fallback version of the method in browsers (ahem, IE), where
+    // there isn't any inspectable "Arguments" type.
+    if (!_.isArguments(arguments)) {
+        _.isArguments = function (obj) {
+            return !!(obj && _.has(obj, 'callee'));
+        };
+    }
+
+    // Optimize `isFunction` if appropriate.
+    if (typeof (/./) !== 'function') {
+        _.isFunction = function (obj) {
+            return typeof obj === 'function';
+        };
+    }
+
+    // Is a given object a finite number?
+    _.isFinite = function (obj) {
+        return isFinite(obj) && !isNaN(parseFloat(obj));
+    };
+
+    // Is the given value `NaN`? (NaN is the only number which does not equal itself).
+    _.isNaN = function (obj) {
+        return _.isNumber(obj) && obj != +obj;
+    };
+
+    // Is a given value a boolean?
+    _.isBoolean = function (obj) {
+        return obj === true || obj === false || toString.call(obj) == '[object Boolean]';
+    };
+
+    // Is a given value equal to null?
+    _.isNull = function (obj) {
+        return obj === null;
+    };
+
+    // Is a given variable undefined?
+    _.isUndefined = function (obj) {
+        return obj === void 0;
+    };
+
+    // Shortcut function for checking if an object has a given property directly
+    // on itself (in other words, not on a prototype).
+    _.has = function (obj, key) {
+        return hasOwnProperty.call(obj, key);
+    };
+
+    // Utility Functions
+    // -----------------
+
+    // Run Underscore.js in *noConflict* mode, returning the `_` variable to its
+    // previous owner. Returns a reference to the Underscore object.
+    _.noConflict = function () {
+        root._ = previousUnderscore;
+        return this;
+    };
+
+    // Keep the identity function around for default iterators.
+    _.identity = function (value) {
+        return value;
+    };
+
+    // Run a function **n** times.
+    _.times = function (n, iterator, context) {
+        var accum = Array(n);
+        for (var i = 0; i < n; i++) accum[i] = iterator.call(context, i);
+        return accum;
+    };
+
+    // Return a random integer between min and max (inclusive).
+    _.random = function (min, max) {
+        if (max == null) {
+            max = min;
+            min = 0;
+        }
+        return min + Math.floor(Math.random() * (max - min + 1));
+    };
+
+    // List of HTML entities for escaping.
+    var entityMap = {
+        escape: {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#x27;',
+            '/': '&#x2F;'
+        }
+    };
+    entityMap.unescape = _.invert(entityMap.escape);
+
+    // Regexes containing the keys and values listed immediately above.
+    var entityRegexes = {
+        escape: new RegExp('[' + _.keys(entityMap.escape).join('') + ']', 'g'),
+        unescape: new RegExp('(' + _.keys(entityMap.unescape).join('|') + ')', 'g')
+    };
+
+    // Functions for escaping and unescaping strings to/from HTML interpolation.
+    _.each(['escape', 'unescape'], function (method) {
+        _[method] = function (string) {
+            if (string == null) return '';
+            return ('' + string).replace(entityRegexes[method], function (match) {
+                return entityMap[method][match];
+            });
+        };
+    });
+
+    // If the value of the named property is a function then invoke it;
+    // otherwise, return it.
+    _.result = function (object, property) {
+        if (object == null) return null;
+        var value = object[property];
+        return _.isFunction(value) ? value.call(object) : value;
+    };
+
+    // Add your own custom functions to the Underscore object.
+    _.mixin = function (obj) {
+        each(_.functions(obj), function (name) {
+            var func = _[name] = obj[name];
+            _.prototype[name] = function () {
+                var args = [this._wrapped];
+                push.apply(args, arguments);
+                return result.call(this, func.apply(_, args));
+            };
+        });
+    };
+
+    // Generate a unique integer id (unique within the entire client session).
+    // Useful for temporary DOM ids.
+    var idCounter = 0;
+    _.uniqueId = function (prefix) {
+        var id = ++idCounter + '';
+        return prefix ? prefix + id : id;
+    };
+
+    // By default, Underscore uses ERB-style template delimiters, change the
+    // following template settings to use alternative delimiters.
+    _.templateSettings = {
+        evaluate: /<%([\s\S]+?)%>/g,
+        interpolate: /<%=([\s\S]+?)%>/g,
+        escape: /<%-([\s\S]+?)%>/g
+    };
+
+    // When customizing `templateSettings`, if you don't want to define an
+    // interpolation, evaluation or escaping regex, we need one that is
+    // guaranteed not to match.
+    var noMatch = /(.)^/;
+
+    // Certain characters need to be escaped so that they can be put into a
+    // string literal.
+    var escapes = {
+        "'": "'",
+        '\\': '\\',
+        '\r': 'r',
+        '\n': 'n',
+        '\t': 't',
+        '\u2028': 'u2028',
+        '\u2029': 'u2029'
+    };
+
+    var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
+
+    // JavaScript micro-templating, similar to John Resig's implementation.
+    // Underscore templating handles arbitrary delimiters, preserves whitespace,
+    // and correctly escapes quotes within interpolated code.
+    _.template = function (text, data, settings) {
+        var render;
+        settings = _.defaults({}, settings, _.templateSettings);
+
+        // Combine delimiters into one regular expression via alternation.
+        var matcher = new RegExp([
+            (settings.escape || noMatch).source,
+            (settings.interpolate || noMatch).source,
+            (settings.evaluate || noMatch).source
+        ].join('|') + '|$', 'g');
+
+        // Compile the template source, escaping string literals appropriately.
+        var index = 0;
+        var source = "__p+='";
+        text.replace(matcher, function (match, escape, interpolate, evaluate, offset) {
+            source += text.slice(index, offset)
+                .replace(escaper, function (match) {
+                    return '\\' + escapes[match];
+                });
+
+            if (escape) {
+                source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
+            }
+            if (interpolate) {
+                source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
+            }
+            if (evaluate) {
+                source += "';\n" + evaluate + "\n__p+='";
+            }
+            index = offset + match.length;
+            return match;
+        });
+        source += "';\n";
+
+        // If a variable is not specified, place data values in local scope.
+        if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
+
+        source = "var __t,__p='',__j=Array.prototype.join," +
+            "print=function(){__p+=__j.call(arguments,'');};\n" +
+            source + "return __p;\n";
+
+        try {
+            render = new Function(settings.variable || 'obj', '_', source);
+        } catch (e) {
+            e.source = source;
+            throw e;
+        }
+
+        if (data) return render(data, _);
+        var template = function (data) {
+            return render.call(this, data, _);
+        };
+
+        // Provide the compiled function source as a convenience for precompilation.
+        template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
+
+        return template;
+    };
+
+    // Add a "chain" function, which will delegate to the wrapper.
+    _.chain = function (obj) {
+        return _(obj).chain();
+    };
+
+    // OOP
+    // ---------------
+    // If Underscore is called as a function, it returns a wrapped object that
+    // can be used OO-style. This wrapper holds altered versions of all the
+    // underscore functions. Wrapped objects may be chained.
+
+    // Helper function to continue chaining intermediate results.
+    var result = function (obj) {
+        return this._chain ? _(obj).chain() : obj;
+    };
+
+    // Add all of the Underscore functions to the wrapper object.
+    _.mixin(_);
+
+    // Add all mutator Array functions to the wrapper.
+    each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function (name) {
+        var method = ArrayProto[name];
+        _.prototype[name] = function () {
+            var obj = this._wrapped;
+            method.apply(obj, arguments);
+            if ((name == 'shift' || name == 'splice') && obj.length === 0) delete obj[0];
+            return result.call(this, obj);
+        };
+    });
+
+    // Add all accessor Array functions to the wrapper.
+    each(['concat', 'join', 'slice'], function (name) {
+        var method = ArrayProto[name];
+        _.prototype[name] = function () {
+            return result.call(this, method.apply(this._wrapped, arguments));
+        };
+    });
+
+    _.extend(_.prototype, {
+
+        // Start chaining a wrapped Underscore object.
+        chain: function () {
+            this._chain = true;
+            return this;
+        },
+
+        // Extracts the result from a wrapped and chained object.
+        value: function () {
+            return this._wrapped;
+        }
+
+    });
+
+}).call(this);
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 1bdcb9d..34a8a6c 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -26,7 +26,6 @@
 </head>
 <body>
 {% include 'inc/analytics.html' %}
-{% include 'inc/facebook_init.html' %}
 {% include 'inc/ancient_browser.html' %}
 <div id="header"></div>
 <div class="container-fluid">
@@ -71,6 +70,8 @@
     <script src="{{ STATIC_URL }}js/libs/ICanHaz.js"></script>
     <script src="{{ STATIC_URL }}js/libs/select2.js"></script>
     <script src="{{ STATIC_URL }}js/libs/backbone/backbone.js"></script>
+    <script src="{{ STATIC_URL }}js/libs/backbone/backbone.marionette.js"></script>
+    <script src="{{ STATIC_URL }}js/libs/backbone/backbone.syphon.js"></script>
     <script src="{{ STATIC_URL }}js/libs/backbone/backbone-tastypie.js"></script>
     <script src="{{ STATIC_URL }}js/libs/backbone/backbone.mine.js"></script>
     <script src="{{ STATIC_URL }}js/libs/backbone/backbone.infiniscroll.js"></script>
diff --git a/templates/boiler/robots.txt b/templates/boiler/robots.txt
index 42d7a30..0527cf5 100644
--- a/templates/boiler/robots.txt
+++ b/templates/boiler/robots.txt
@@ -1,4 +1,4 @@
-User-agent: *
-Disallow:
-Disallow: /media/
-Disallow: /ajax/
+User-agent: *
+Disallow:
+Disallow: /media/
+Disallow: /ajax/
diff --git a/templates/boiler/test.html b/templates/boiler/test.html
index f666b43..f480dff 100644
--- a/templates/boiler/test.html
+++ b/templates/boiler/test.html
@@ -1,22 +1,22 @@
-<!doctype html>
-<html lang="en">
-<head prefix="og: http://ogp.me/ns#">
-    <meta charset="utf-8">
-    <title>Two structured audio properties</title>
-    <meta property="og:title" content='Brawther "back to basics"'>
-    <meta property="og:site_name" content="Deep South Sounds">
-    <meta property="og:type" content="audio.song">
-    <meta property="og:url" content="http://examples.opengraphprotocol.us/audio-array.html">
-    <meta property="og:image"
-          content="http://ext-test.deepsouthsounds.com:8000/media/mix-images/Deepsouthsounds/brawther.jpg">
-    <meta property="og:image:width" content="50">
-    <meta property="og:image:height" content="50">
-    <meta property="og:image:type" content="image/png">
-    <meta property="og:audio"
-          content="http://ext-test.deepsouthsounds.com:8000/media/mixes/Deepsouthsounds/Brawther - BackToBasics Podcast 01.mp3">
-    <meta property="og:audio:type" content="audio/mpeg">
-</head>
-<body>
-<p>Audio property with type declaration as structured property.</p>
-</body>
+<!doctype html>
+<html lang="en">
+<head prefix="og: http://ogp.me/ns#">
+    <meta charset="utf-8">
+    <title>Two structured audio properties</title>
+    <meta property="og:title" content='Brawther "back to basics"'>
+    <meta property="og:site_name" content="Deep South Sounds">
+    <meta property="og:type" content="audio.song">
+    <meta property="og:url" content="http://examples.opengraphprotocol.us/audio-array.html">
+    <meta property="og:image"
+          content="http://ext-test.deepsouthsounds.com:8000/media/mix-images/Deepsouthsounds/brawther.jpg">
+    <meta property="og:image:width" content="50">
+    <meta property="og:image:height" content="50">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:audio"
+          content="http://ext-test.deepsouthsounds.com:8000/media/mixes/Deepsouthsounds/Brawther - BackToBasics Podcast 01.mp3">
+    <meta property="og:audio:type" content="audio/mpeg">
+</head>
+<body>
+<p>Audio property with type declaration as structured property.</p>
+</body>
 </html>
\ No newline at end of file
diff --git a/templates/boiler/test2.html b/templates/boiler/test2.html
index 5167233..ac7e5d1 100644
--- a/templates/boiler/test2.html
+++ b/templates/boiler/test2.html
@@ -1,22 +1,22 @@
-<!doctype html>
-<html lang="en">
-<head prefix="og: http://ogp.me/ns#">
-    <meta charset="utf-8">
-    <title>Two structured audio properties</title>
-    <meta property="og:title" content='Brawther "back to basics"'>
-    <meta property="og:site_name" content="Deep South Sounds">
-    <meta property="og:type" content="audio.song">
-    <meta property="og:url" content="http://ext-test.deepsouthsounds.com:8000/static/html/test1.html">
-    <meta property="og:image"
-          content="http://ext-test.deepsouthsounds.com:8000/media/mix-images/Deepsouthsounds/brawther.jpg">
-    <meta property="og:image:width" content="50">
-    <meta property="og:image:height" content="50">
-    <meta property="og:image:type" content="image/png">
-    <meta property="og:audio"
-          content="http://ext-test.deepsouthsounds.com:8000/media/mixes/Deepsouthsounds/Brawther - BackToBasics Podcast 01.mp3">
-    <meta property="og:audio:type" content="audio/mpeg">
-</head>
-<body>
-<p>Audio property with type declaration as structured property.</p>
-</body>
+<!doctype html>
+<html lang="en">
+<head prefix="og: http://ogp.me/ns#">
+    <meta charset="utf-8">
+    <title>Two structured audio properties</title>
+    <meta property="og:title" content='Brawther "back to basics"'>
+    <meta property="og:site_name" content="Deep South Sounds">
+    <meta property="og:type" content="audio.song">
+    <meta property="og:url" content="http://ext-test.deepsouthsounds.com:8000/static/html/test1.html">
+    <meta property="og:image"
+          content="http://ext-test.deepsouthsounds.com:8000/media/mix-images/Deepsouthsounds/brawther.jpg">
+    <meta property="og:image:width" content="50">
+    <meta property="og:image:height" content="50">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:audio"
+          content="http://ext-test.deepsouthsounds.com:8000/media/mixes/Deepsouthsounds/Brawther - BackToBasics Podcast 01.mp3">
+    <meta property="og:audio:type" content="audio/mpeg">
+</head>
+<body>
+<p>Audio property with type declaration as structured property.</p>
+</body>
 </html>
\ No newline at end of file
diff --git a/templates/inc/activity.html b/templates/inc/activity.html
index 5e2fcfd..ec6f08d 100644
--- a/templates/inc/activity.html
+++ b/templates/inc/activity.html
@@ -1,15 +1,15 @@
-<div class="activity-block">
-    <a href="">
-        <img class="image-avatar-small" src="<%= item.avatar_image %>" alt="">
-    </a>
-
-    <div class="activity-details">
-        <a class="activity-user" href="<%= item.user_url %>">
-            <%= item.user_name %>
-        </a>
-        <blockquote class="pull-right">
-            <p><%= item.activity %></p>
-            <small><%= item.date_created %></small>
-        </blockquote>
-    </div>
-</div>
+<div class="activity-block">
+    <a href="">
+        <img class="image-avatar-small" src="<%= item.avatar_image %>" alt="">
+    </a>
+
+    <div class="activity-details">
+        <a class="activity-user" href="<%= item.user_url %>">
+            <%= item.user_name %>
+        </a>
+        <blockquote class="pull-right">
+            <p><%= item.activity %></p>
+            <small><%= item.date_created %></small>
+        </blockquote>
+    </div>
+</div>
diff --git a/templates/javascript/settings.js b/templates/javascript/settings.js
index 543044d..3db64ed 100644
--- a/templates/javascript/settings.js
+++ b/templates/javascript/settings.js
@@ -11,6 +11,7 @@ com.podnoms.settings = {
     volume: '{{ DEFAULT_AUDIO_VOLUME }}',
     smDebugMode: '{{ SM_DEBUG_MODE }}',
     drawTimelineOnMix: false,
+    currentUser: {{ CURRENT_USER_ID }},
     /** simple helper to take an api JSON object and initialise a player item */
     setupPlayer: function (data, id) {
         com.podnoms.player.setupPlayer({
diff --git a/templates/views/UserView.html b/templates/views/UserView.html
index b31bdab..27612a2 100644
--- a/templates/views/UserView.html
+++ b/templates/views/UserView.html
@@ -1,33 +1,34 @@
+{% verbatim %}
 <div id="title-area">
     <p class="page-header">User details</p>
 </div>
 <div id="layout-area" class="hero-well">
     <div class="row">
         <form enctype="multipart/form-data" method="post" class="form-horizontal" id="id-new-user-form">
-            {% csrf_token %}
+            <input type="hidden" name="profile[id]" value="{{ profile.id }}"/>
             <fieldset>
                 <div class="span6">
                     <div class="clearfix control-group" id="div_display_name">
                         <label class="control-label" for="display_name">Display name</label>
                         <div class="controls">
-                            <input type="text" maxlength="75" name="email" class="textinput textInput" id="display_name"
-                                   value="<%= item.display_name %>">
+                            <input type="text" maxlength="75" name="profile[display_name]" class="textinput textInput"
+                                   id="profile[display_name]"
+                                   value="{{ profile.display_name }}">
                         </div>
                     </div>
                     <div class="clearfix control-group" id="div_slug">
                         <label class="control-label" for="slug">Profile Slug</label>
-
                         <div class="controls">
-                            <input type="text" maxlength="75" name="email" class="textinput textInput" id="slug"
-                                   value="<%= item.slug %>">
+                            <input type="text" maxlength="75" name="profile[slug]" class="textinput textInput"
+                                   id="profile[slug]"
+                                   value="{{ profile.slug }}">
                         </div>
                     </div>
                     <div class="clearfix control-group" id="div_email">
                         <label class="control-label" for="email">E-mail address</label>
-
                         <div class="controls">
                             <input type="text" maxlength="75" name="email" class="textinput textInput" id="email"
-                                   value="{{ user.email }}">
+                                   value="{{ email }}">
                         </div>
                     </div>
                     <div class="clearfix control-group" id="div_first_name">
@@ -35,85 +36,108 @@
                         <div class="controls">
                             <input type="text" maxlength="30" name="first_name" class="textinput textInput"
                                    id="first_name"
-                                   value="{{ user.first_name }}">
+                                   value="{{ first_name }}">
                         </div>
                     </div>
                     <div class="clearfix control-group" id="div_last_name">
                         <label class="control-label " for="last_name">Last name</label>
-
                         <div class="controls">
                             <input type="text" maxlength="30" name="last_name" class="textinput textInput"
                                    id="last_name"
-                                   value="{{ user.last_name }}">
+                                   value="{{ last_name }}">
                         </div>
                     </div>
                     <div class="clearfix control-group" id="div_avatar_image_select">
                         <label class="control-label requiredField" for="avatar_image_select_0">Avatar Image<span
                                 class="asteriskField">*</span></label>
-
                         <div class="controls">
-                            <label class="radio">
-                                Use gravatar image.
-                                <input type="radio" value="gravatar" id="gravatar" name="avatar_type">
-                            </label>
-                            <label class="radio">
-                                Use Twitter/Facebook image.
-                                <input type="radio" value="social" id="social" name="avatar_type">
-                            </label>
-                            <label class="radio">
-                                Use custom image (upload below).
-                                <input type="radio" value="custom" id="custom" name="avatar_type">
-                            </label>
+                                <label class="radio">Use gravatar image.<input type="radio" id='avatar_gravatar' value='gravatar' name="profile[avatar_type]" /></label>
+                                <label class="radio">Use Twitter/Facebook image.<input type="radio" id='avatar_social' value='social' name="profile[avatar_type]" /></label>
+                                <label class="radio">Use custom image.<input type="radio" id='avatar_custom' value='custom' name="profile[avatar_type]" /></label>
                         </div>
                     </div>
-                    <div class="clearfix control-group" id="div_avatar_image">
-                        <div class="controls">
-                            <form action="/ajax/file-upload">
-                                {% csrf_token %}
-                                <input id="file_upload" type="file" name="file_upload"/>
-                            </form>
+                    <div class="clearfix control-group" id="div_avatar_image_upload">
+                        <label class="control-label requiredField" for="fileupload-new">Upload image<span
+                                class="asteriskField">*</span></label>
+                        <div class="fileupload fileupload-new pull-left" data-provides="fileupload"
+                             id="div_avatar_image">
+                            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
+                                <img src="{{ profile[avatar_image]  }}"/>
+                            </div>
+                            <div class="fileupload-preview fileupload-exists thumbnail"
+                                 style="max-width: 200px; max-height: 150px; line-height: 20px;">
+                            </div>
+                            <div>
+                        <span class="btn btn-file">
+                            <span class="fileupload-new">
+                                Select image
+                            </span>
+                        <span class="fileupload-exists">
+                            Change
+                        </span>
+                            <input id="avatar_image" type="file" size="45" name="avatar_image" class="input">
+                        </span>
+                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="span6">
                     <div class="row">
-                        <textarea style="width: 92%" id="description" rows="5">{{ user.description }}</textarea>
-                        <span class="help-block">Tell us a bit about yourself.</span>
+                        <p>
+                            <h5>Tell us a bit about yourself.</h5>
+                        </p>
+                        <textarea style="width: 100%" name="profile[description]" id="profile[description]" rows="5">{{profile.description}}</textarea>
                     </div>
                     <div class="row">
-                        <h5>Share this activity</h5>
-                        <ul class="list-horiz">
-                            <li>
-                                <h5>Likes</h5>
-                                <input type="checkbox" name="switch" value="" id="activity_share_likes"
-                                       class="switch" data-coalesce="activity_sharing" data-bitflag="1">
-                            </li>
-                            <li>
-                                <h5>Favourites</h5>
-                                <input type="checkbox" name="switch" value="" id="activity_share_favourites"
-                                       class="switch" data-coalesce="activity_sharing" data-bitflag="2">
-                            </li>
-                            <li>
-                                <h5>Comments</h5>
-                                <input type="checkbox" name="switch" value="" id="activity_share_comments"
-                                       class="switch" data-coalesce="activity_sharing" data-bitflag="4">
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="row">
-                        <h5>On these networks</h5>
-                        <ul class="list-horiz">
-                            <li>
-                                <h5>Facebook</h5>
-                                <input type="checkbox" name="switch" value="" id="activity_share_networks_facebook"
-                                       class="switch" data-coalesce="activity_sharing_networks" data-bitflag="1">
-                            </li>
-                            <li>
-                                <h5>Twitter</h5>
-                                <input type="checkbox" name="switch" value="" id="activity_share_networks_twitter"
-                                       class="switch" data-coalesce="activity_sharing_networks" data-bitflag="2">
-                            </li>
-                        </ul>
+                        <p>
+                        <h5>What can we share about you?</h5>
+                        </p>
+                        <div class="span5 pull-left">
+                            <h5>Share this activity</h5>
+                            <table class="table dss-option-table table-condensed table-bordered">
+                                <tbody>
+                                <tr class="info">
+                                    <td>Likes</td>
+                                    <td>Favourites</td>
+                                    <td>Comments</td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <input type="checkbox" name="profile[activity_sharing_likes]"
+                                               id="activity_sharing_likes" {{ profile.activity_sharing_likes }}>
+                                    </td>
+                                    <td>
+                                        <input type="checkbox" name="profile[activity_sharing_favourites]"
+                                               id="activity_sharing_favourites" {{ profile.activity_sharing_favourites }}>
+                                    </td>
+                                    <td>
+                                        <input type="checkbox" name="profile[activity_sharing_comments]"
+                                               id="activity_sharing_comments" {{ profile.activity_sharing_comments }}>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="span5 pull-right">
+                            <h5>On these networks</h5>
+                            <table class="table dss-option-table table-condensed table-bordered">
+                                <tbody>
+                                <tr class="info">
+                                    <td>Facebook</td>
+                                    <td>Twitter</td>
+                                </tr>
+                                <tr>
+                                    <td style="text-align: center;  vertical-align: middle">
+                                        <input type="checkbox" name="profile[activity_sharing_networks_facebook]" {{ profile.activity_sharing_networks_facebook }}>
+                                    </td>
+                                    <td>
+                                        <input type="checkbox" name="profile[activity_sharing_networks_twitter]" {{ profile.activity_sharing_networks_twitter }}>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
                 </div>
             </fieldset>
@@ -124,4 +148,5 @@
             <button id="save-changes" class="btn">Save changes</button>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+{% endverbatim %}