Index: trunk/src/cptms/cms_demo.html
===================================================================
--- trunk/src/cptms/cms_demo.html	(revision 295)
+++ trunk/src/cptms/cms_demo.html	(revision 296)
@@ -16,4 +16,17 @@
         margin: 0;
         }
+        textarea {
+           resize: none;
+           min-height: 16px;
+           max-height: 18px;
+           white-space: pre;
+        }
+        input {
+            max-height: 12px;
+        }
+        button {
+            min-height: 21px;
+            max-height: 25px;
+        }
       #map {
        height: 560px;
@@ -24,5 +37,5 @@
       #cms-name {
        height: 30px;
-       width: 350px;
+       width: 335px;
        overflow: hidden;
        background-color: #ECECFB;
@@ -31,6 +44,6 @@
        }
       #cms-message {
-       height: 90px;
-       width: 550px;
+       height: 93px;
+       width: 335px;
        overflow: hidden;
        float: left;
@@ -43,6 +56,6 @@
        }
       #userinput {
-       height: 90px;
-       width: 175px;
+       height: 93px;
+       width: 200px;
        overflow: hidden;
        background-color: #ECECFB;
@@ -56,7 +69,10 @@
     <div id="cms-message"  style="display: none;"></div>
     <div id="userinput"    style="display: none;">
-    <input id='userReply' type='text' /> 
     <input id='cmsID' value="" type='hidden'/>
+    <textarea id="msgcontent1" maxlength="16" cols="16"></textarea>
+    <textarea id="msgcontent2" maxlength="16" cols="16"></textarea>
+    <textarea id="msgcontent3" maxlength="16" cols="16"></textarea>
     <button onclick="handleSubmit();">Submit</button>
+    <button onclick="handleCancel();">Cancel</button>
     </div>
     <div id="map"></div>
@@ -91,6 +107,8 @@
           cmsID = feature.id
           getMessage(cmsID);  // note: this is async
-          var userReply = document.getElementById('userReply');
-          userReply.value = ""  // clear the response area
+          // clear the response area
+          document.getElementById('msgcontent1').value="";
+          document.getElementById('msgcontent2').value="";
+          document.getElementById('msgcontent3').value="";
           document.getElementById('cmsID').value=cmsID ;
           var userInput = document.getElementById('userinput');
@@ -106,6 +124,15 @@
             document.getElementById('cms-name').style.display = 'none'
             // recover the user's response
-            var response = document.getElementById('userReply').value;
-            saveMessage(response);
+            var response1 = document.getElementById('msgcontent1').value;
+            var response2 = document.getElementById('msgcontent2').value;
+            var response3 = document.getElementById('msgcontent3').value;
+            saveMessage(response1+"<br>"+response2+"<br>"+response3);
+        }
+        function handleCancel()
+        {
+            // hide the display
+            document.getElementById('cms-message').style.display = 'none'
+            document.getElementById('userinput').style.display = 'none'
+            document.getElementById('cms-name').style.display = 'none'
         }
 
@@ -132,8 +159,7 @@
             // Parse JSON string into object
             messageList = JSON.parse(response);
-            // TODO: select a message from json for the given cmsID
+            // select a message from json for the given cmsID
             console.log("get by cmsID="+cmsID);
             var cmsSign = document.getElementById('cms-message');
-            if (cmsSign.length==0) cmsSign = " ";
             cmsSign.innerHTML = messageList[cmsID];
             cmsSign.style.display = 'block'