Populate the list of loaded cards

generator/data/card_data_example.js

             "fill | 3"
         ]
     }
-];
-
-card_data = card_data.concat(card_data_example);
+];

generator/data/card_data_user.js

-var card_data_user = [
-
-];
-
-card_data = card_data.concat(card_data_user);

generator/generate.html

     <link href="lib/colorpicker/css/bootstrap-colorselector.css" rel="stylesheet" />
     <script type="text/javascript" src="lib/colorpicker/js/bootstrap-colorselector.js" charset="utf-8"></script>
     <!-- Data -->
-    <script type="text/javascript" src="data/card_data.js"></script>
     <script type="text/javascript" src="data/card_data_example.js"></script>
     <!-- Javascript -->
     <script type="text/javascript" defer src="js/cards.js"></script>
             <div class="col-md-3">
                 <h3>Card list</h3>
                 <form role="form">
+                    <span class="help-block" id="total_card_count">Deck contains 0 cards.</span>
                     <div class="form-group">
                         <label for="selected_card">Selected card</label>
-                        <select class="form-control" id="selected_card" readonly></select>
+                        <select class="form-control" id="selected_card"></select>
                     </div>
                     <button type="button" class="btn btn-primary btn-block disabled">Delete selected card</button>
                     <button type="button" class="btn btn-primary btn-block disabled">Add new card</button>

generator/js/cards.js

     }
 }
 
+function card_default_data() {
+    return {
+        count: 1,
+        title: "New card",
+        contents: []
+    }
+}
+
 // ============================================================================
 // Card definition related functions
 // ============================================================================

generator/js/ui.js

+// Ugly global variable holding the current card deck
+var card_data = [];
+
 function ui_generate() {
     // Generate output HTML
     var card_html = card_pages_generate_html(card_data);
 
 function ui_load_sample() {
     card_data = card_data_example;
+    ui_update_card_list();
 }
 
 function ui_clear_all() {
     card_data = [];
+    ui_update_card_list();
 }
 
 function ui_load_files(evt) {
 
         reader.onload = function (reader) {
             var data = JSON.parse(this.result);
-            card_data = card_data.concat(data);
+            ui_add_cards(data);
         };
 
         reader.readAsText(f);
     }
 }
 
+function ui_add_cards(data) {
+    card_data = card_data.concat(data);
+    ui_update_card_list();
+}
+
+function ui_add_new_card() {
+    card_data.push(card_default_data());
+    ui_update_card_list();
+}
+
+function ui_update_card_list() {
+    $("#total_card_count").text("Deck contains " + card_data.length + " cards.");
+
+    $('#selected_card').empty();
+    for (var i = 0; i < card_data.length; ++i) {
+        var card = card_data[i];
+        $('#selected_card')
+            .append($("<option></option>")
+            .attr("value", i)
+            .text(card.title));
+    }
+}
+
 function ui_save_file() {
     var str = JSON.stringify(card_data, null, "  ");
     var parts = [str];
     $("#file-load").change(ui_load_files);
     $("#button-load-sample").click(ui_load_sample);
     $("#button-save").click(ui_save_file);
+
+    ui_update_card_list();
 });