--- a/views/Extractapp/TaggingText.php	Fri Oct 02 12:18:34 2015 +0200
+++ b/views/Extractapp/TaggingText.php	Mon Nov 09 12:00:24 2015 +0100
@@ -80,7 +80,7 @@
 <?php
 // color on the tags
 foreach ( $taglistArray as $taglistValue ) {
-    echo $taglistValue[2]."\n{\ncolor:".$taglistValue[3]."\n}\n";
+    echo $taglistValue[2]."\n{\ncolor:".$taglistValue[3]."; cursor: hand;\n}\n";
     
     echo ".span_".$taglistValue[2]."\n{\nbackground-color:".$taglistValue[3]."\n}\n";
 }
@@ -172,14 +172,15 @@
     var taglistValue = taglistArray[i];
     
   
-    $(document).on("click", taglistValue[2], function (e) {
+    $(document).on("click", taglistValue[2], function (e, taglistValue) {
         if ($("#editTextId").html() != "Edit the text") return 0;
-        var tagName = $(this).prop("tagName").toLowerCase();
+        var tag = $(this).prop("tagName").toLowerCase();
         //if (tagName != taglistValue[2]) return 0;
     
         // pop_remove_tag_window is a global variable which indicates if to show the remove-popup-window
         if (pop_remove_tag_window) {
-            removeTagNewDiv( e, tagName , $(this));
+            removeTagNewDiv( e, tag , $(this));
+    
         };
         return false;  
   });
@@ -266,18 +267,15 @@
     if (taglist_infile == "") {
         console.log("Debug: taglist_infile is empty which means taglist_infile is equal to taglist in db.");
     } else {
-        console.log("Debug: taglist_infile length=" + taglist_infile.length);
+        console.log("Debug: taglist in file, length=" + taglist_infile.length);
         console.log(taglist_infile);
-        console.log("Debug: taglistArray length=" + taglistArray.length);
+        console.log("Debug: taglist in db, length=" + taglistArray.length);
         console.log(taglistArray);
 
-        // TOOD: ask user to modify/decide tags
+        // TOOD: ask user to modify/decide tags (?)
         // showing taglist_infile and taglistArray
-        //alert("Warning: taglist is deprecated in the current file.");
-
     }
 
-
 });
 
 $(document).on("mouseup", '#editable-area', function (e) {
@@ -384,6 +382,7 @@
                 ?>
 
                 newdiv.appendChild(tagging_tags);
+
                 // add selected words to generator regex
                 genRegexBySelection(newdiv, selection); // append button to newdiv and handle the selection words
 
@@ -660,8 +659,10 @@
         if (book_name == "" || section_name == "" || period == "") {
             default_label = today;
         } else {
-            default_label = book_name+"("+cjst.chineseToPinyin(book_name).join(' ')+")_"+period+ "_"+section_name
-                        + "("+ cjst.chineseToPinyin(section_name).join(' ') + ")_" + today;
+            default_label = book_name + "(" + cjst.chineseToPinyin(book_name).join(' ') + ")_"
+                            + period + "(" + cjst.chineseToPinyin(period).join(' ') + ")_"
+                            + section_name + "(" + cjst.chineseToPinyin(section_name).join(' ') + ")_" 
+                            + today;
         }
         
 
@@ -699,6 +700,80 @@
 
 }
 
+function createTopic(default_topic_id) {
+    var popup_status = $('#new_topic_div').css("display");
+    if (popup_status == "block") {
+        $('#new_topic_div').css("display", "none");
+    } else {
+        $('#new_topic_div').css("display", "block");
+    }
+
+
+
+
+    // TODO input new topic
+    /* In table:
+          taglist: name, tag, color (default, user can change later in the editing page)
+          topics: tag, name_en, name_ch, name_pinyin
+     
+      need transaction for the following actions:
+        taglist.name: topic_tag name in chinese 
+        taglist.tag: topic_tag name in eng
+        topics.tag: (the same a taglist.tag)
+        topics.name_en:
+        topics.name_ch: 
+        topics.name_pinyin: 
+        add a new record in topic_tag_relation: topic_id, tag_id
+    */
+   
+
+
+    var newtopic = document.getElementById("newTopicSubmit");
+    
+    newtopic.onclick = function(){
+        var form = document.createElement("form");
+        form.setAttribute("method", "post");
+        form.setAttribute("action", "./ConfigTagsInTopic");  // hand to controller
+        form.setAttribute("target", "_self");   // TODO self here?
+
+        // TODO 
+        var hiddenField = document.createElement("input");      
+        hiddenField.setAttribute("name", "func");
+        hiddenField.setAttribute("value", "CreateNewTopic");
+        form.appendChild(hiddenField);
+    
+        
+        var hiddenField = document.createElement("input");     
+        hiddenField.setAttribute("name", "new_topic_name_en");
+        hiddenField.setAttribute("value", $("#newTopicNameEn").val());
+        form.appendChild(hiddenField);
+        var hiddenField = document.createElement("input");     
+        hiddenField.setAttribute("name", "new_topic_name_ch");
+        hiddenField.setAttribute("value", $("#newTopicNameCh").val());
+        form.appendChild(hiddenField);
+        var hiddenField = document.createElement("input");     
+        hiddenField.setAttribute("name", "new_topic_name_pi");
+        hiddenField.setAttribute("value", $("#newTopicNamePi").val());
+        form.appendChild(hiddenField);
+        var hiddenField = document.createElement("input");     
+        hiddenField.setAttribute("name", "new_topic_tag");
+        hiddenField.setAttribute("value", $("#newTopicTag").val());
+        form.appendChild(hiddenField);
+        var hiddenField = document.createElement("input");     
+        hiddenField.setAttribute("name", "new_topic_tag_name");
+        hiddenField.setAttribute("value", $("#newTopicTagName").val());
+        form.appendChild(hiddenField);
+
+
+        
+        _postForContineTagging(form);
+
+    }
+    
+    $("#newTopicCancel").attr("onclick", "$('#new_topic_div').css(\"display\", \"none\");");
+
+}
+
 function chooseTopic(default_topic_id) {
     var t = JSON.parse( '<?php echo json_encode($topiclistArray) ?>' );
     var info = JSON.parse('<?php echo json_encode($info) ?>');
@@ -939,6 +1014,54 @@
         <td valign="top" style="min-width:280px; padding:0 5 0 5; margin:0 5 0 5;">
             <div id="popups" style="position:absolute; width:300px; ">
                 <div id="load_topic_div" class="popup-topic popup-frame"></div>
+                <div id="new_topic_div" class="popup-newtopic popup-frame">
+                    <div class="form-horizontal">
+                        <h4 class="text-info">New topic name:</h4>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicNameEn" class="col-sm-4 control-label">name (en)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicNameEn" placeholder="name in English">
+                            </div>
+                         </div>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicNameCh" class="col-sm-4 control-label">name (ch)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicNameCh" placeholder="name in Chinese">
+                            </div>
+                        </div>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicNamePi" class="col-sm-4 control-label">name (pi)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicNameCh" placeholder="name in Pinyin">
+                            </div>
+                        </div>
+                        
+
+                        <h4 class="text-info">New topic tag:</h4>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicTag" class="col-sm-4 control-label">tag (en)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicTag" placeholder="tag in English">
+                            </div>
+                        </div>
+
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicTagName" class="col-sm-4 control-label">tag (ch)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicTag" placeholder="tag in Chinese">
+                            </div>
+                        </div>
+
+
+                        <div class="form-group form-group-sm">
+                            <div class="col-sm-offset-4 col-sm-8">
+                                <button type="submit" id="newTopicSubmit" class="btn btn-primary btn-xs">Submit</button>
+                                <button id="newTopicCancel" class="btn btn-default btn-xs">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
                 <div id="load_regex_div" class="popup-loadregex popup-frame"></div>
                 <div id="regex_generator" class="popup-frame">
                     <h3>Gen Regex</h3>
@@ -993,14 +1116,23 @@
                     <fieldset class="tool-frame">
                         <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_topic"> Topic: <span class="caret"></span></h5></legend>
                         <div id="tool_topic" class="collapse in">
-                            <div> Current topic is: <br> 
-                                <?php echo $topic_name['name_en']; ?> 
-                                (<?php echo $topic_name['name_ch']; ?>, <?php echo $topic_name['name_pinyin']; ?>)
-                                <button onclick="chooseTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-xs">Change</button>
+                            <div> Current topic is:
+                                    <?php echo $topic_name['name_en']; ?> (<?php echo $topic_name['name_ch']; ?>, <?php echo $topic_name['name_pinyin']; ?>)
+                                <button onclick="chooseTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Change Topic</button>
+                                <button onclick="createTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Create a New Topic (TODO)</button>
+                            </div>
                             </div>
-                            <div>The topic tag is: <?php echo $topic_tag_ch;?>(<?php echo $topic_tag;?>)</div>
+                    </fieldset>
+                    <fieldset class="tool-frame">
+                        <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_tag"> Tag: <span class="caret"></span></h5></legend>
+                        <div id="tool_tag" class="collapse in">
+                            <div>The topic tag is: <?php echo $topic_tag_ch;?>
+                                <p class="text-muted">(Only the lines with the tag will be in the exported table.)</p>
+                                <!-- (<?php echo $topic_tag;?>) -->
+                            </div>
                             <button onclick="editTaglist(<?php echo $default_topic_id; ?>)" class="btn btn-default btn-block">Edit Tag List</button>
                             <button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Select Existing Tags</button>
+                        
                         </div>
                     </fieldset>
 
@@ -1025,10 +1157,10 @@
                             -->
                             <button onclick="replaceSmartRunSpace()" class="btn btn-default btn-block">Run(Allow space between block)</button></br>
 
-                            <button onclick="window.open('./EditWordlist')" class="btn btn-default btn-block">Edit WordList</button>
+                            <button onclick="window.open('./EditWordlist')" class="btn btn-default btn-block">Edit WordList</button></br>
 
                             <!-- developing...-->
-                            <button onclick="genRegexWindowOpen()" id="gen_regex_window_open_id" class="btn btn-default">Open GenRegex (test)</button></br>
+                            <button onclick="genRegexWindowOpen()" id="gen_regex_window_open_id" class="btn btn-default btn-block btn-xs">Open GenRegex (developing...)</button></br>
                         </div>
                     </fieldset>
                     
@@ -1063,7 +1195,7 @@
                     
                     <fieldset class="tool-frame">
                         <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_save"> Save and Export: <span class="caret"></span></h5></legend>
-                        <div class="collapse out" id="tool_save">
+                        <div class="collapse in" id="tool_save">
                             <button onclick="saveTextToLGService()" id="save_text_to_LGService_id" class="btn btn-default btn-block">Save to LGService</button>
                             <button onclick="exportAll(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Export All</button>
                             Page: <input type="text" size="5" id="exportPageStart">to<input type="text" size="5" id="exportPageEnd">