Added UI for timeline creation.

www/js/ts.js

@@ -468,6 +468,10 @@ $(document).ready(function(){
             // create the login dialog
             this.loginDialog = new TS.LoginView
 
+            // create the new timeline dialog
+            this.newTimelineDialog = new TS.NewTimelineView
+
+            // initialize data, either from boostrapped data, or via user login
             if (window.bootstrap) { this.initializeData(window.bootstrap()) }
             else {
                 // this is async (waiting for user input)
@@ -596,6 +600,43 @@ $(document).ready(function(){
         }
     });
 
+    TS.NewTimelineView = Backbone.View.extend({
+        el: $("#new-timeline"),
+
+        events: {
+            "click #new-timeline-create a"  : "createTimeline",
+            "click #new-timeline-cancel a"  : "hide"
+        },
+
+        initialize: function(options) {
+            _.bindAll(this, 'createTimeline', 'hide', 'show');
+
+            if (options.timelineCollection == undefined) {
+                throw "Can not create the NewTimelineView without the timeline collection."
+            } else {
+                this.timelineCollection = this.collection.get(
+                    options.timelineCollection);
+            }
+
+        },
+
+        createTimeline: function() {
+            var timelineId = this.$("#new-timeline-id").val();
+            var timelineDesc = this.$("#new-timeline-desc").val();
+            this.timelineCollection.create(
+                {id: timelineId, description: timelineDesc});
+        },
+
+        hide: function() { $(this.el).addClass('hidden'); },
+
+        show: function() {
+            this.$("#new-timeline-id".val('');
+            this.$("#new-timeline-desc".val('');
+            $(this.el).removeClass('hidden');
+            this.$("#new-timeline-id").focus();
+        }
+    });
+
     TS.app = new TS.AppView;
 
 })