Improvements to the hosted composite management app. Simplify and optimize the Web UI a bit. Add test cases and fix some of the logic in the management components.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1343316 13f79535-47bb-0310-9956-ffa450edef68

5 files changed, 485 insertions, 309 deletions

diff --git a/sca-cpp/trunk/modules/js/htdocs/atomutil.js b/sca-cpp/trunk/modules/js/htdocs/atomutil.js
index 62f390d37e..068b5de2fd 100644
--- a/sca-cpp/trunk/modules/js/htdocs/atomutil.js
+++ b/sca-cpp/trunk/modules/js/htdocs/atomutil.js
@@ -27,12 +27,24 @@ var atom = {};
  */
 atom.entryElementValues = function(e) {
     var lt = filter(selector(mklist(element, "'title")), e);
-    var t = isNil(lt)? '' : elementValue(car(lt));
+    var t = mklist(element, "'title", isNil(lt)? '' : elementValue(car(lt)));
+
     var li = filter(selector(mklist(element, "'id")), e);
-    var i = isNil(li)? '' : elementValue(car(li));
+    var i = mklist(element, "'id", isNil(li)? '' : elementValue(car(li)));
+
+    var la = filter(selector(mklist(element, "'author")), e);
+    var lan = isNil(la)? mklist() : filter(selector(mklist(element, "'name")), car(la));
+    var lae = isNil(la)? mklist() : filter(selector(mklist(element, "'email")), car(la));
+    var laa = isNil(lan)? lae : lan;
+    var a = isNil(laa)? mklist() : mklist(mklist(element, "'author", elementValue(car(laa))));
+
+    var lu = filter(selector(mklist(element, "'updated")), e);
+    var u = isNil(lu)? mklist() : mklist(mklist(element, "'updated", elementValue(car(lu))));
+
     var lc = filter(selector(mklist(element, "'content")), e);
-    return append(mklist(element, "'entry", mklist(element, "'title", t), mklist(element, "'id", i)),
-            isNil(lc)? mklist() : mklist(mklist(element, "'content", elementValue(car(lc)))))
+    var c = isNil(lc)? mklist() : mklist(mklist(element, "'content", elementValue(car(lc))));
+
+    return append(append(append(mklist(element, "'entry", t, i), a), u), c);
 };
 
 /**
@@ -107,14 +119,20 @@ atom.readATOMFeed = function(l) {
 atom.entryElement = function(l) {
     var title = elementValue(namedElementChild("'title", l));
     var id = elementValue(namedElementChild("'id", l));
+    var author = namedElementChild("'author", l);
+    var email = isNil(author)? false : (elementValue(author).indexOf('@') != -1);
+    var updated = namedElementChild("'updated", l);
     var content = namedElementChild("'content", l);
     var text = isNil(content)? false : elementHasValue(content);
-    return append(append(
+    return append(append(append(append(
             mklist(element, "'entry", mklist(attribute, "'xmlns", "http://www.w3.org/2005/Atom"),
                 mklist(element, "'title", mklist(attribute, "'type", "text"), title), mklist(element, "'id", id)),
+                isNil(author)? mklist() : mklist(element, "'author",
+                    (email? mklist(element, "'email", elementValue(author)) : mklist(element, "'name", elementValue(author))))),
+                isNil(updated)? mklist() : mklist(element, "'updated", elementValue(updated))),
                 isNil(content)? mklist() :
-                mklist(append(mklist(element, "'content", mklist(attribute, "'type", text? "text" : "application/xml")),
-                                text? mklist(elementValue(content)) : elementChildren(content)))),
+                    mklist(append(mklist(element, "'content", mklist(attribute, "'type", text? "text" : "application/xml")),
+                        text? mklist(elementValue(content)) : elementChildren(content)))),
                 mklist(mklist(element, "'link", mklist(attribute, "'href", id))));
 };
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/component.js b/sca-cpp/trunk/modules/js/htdocs/component.js
index 10b4535470..c3799ef708 100644
--- a/sca-cpp/trunk/modules/js/htdocs/component.js
+++ b/sca-cpp/trunk/modules/js/htdocs/component.js
@@ -191,6 +191,7 @@ HTTPBindingClient.prototype.jsonApply = function(req) {
     var http = HTTPBindingClient.getHTTPRequest();
     var hascb = req.cb? true : false;
     http.open("POST", this.uri, hascb);
+    http.setRequestHeader("Accept", "*/*");
     http.setRequestHeader("Content-Type", "application/json-rpc");
 
     // Construct call back if we have one
@@ -238,7 +239,9 @@ HTTPBindingClient.prototype.get = function(id, cb) {
     var hascb = cb? true : false;
 
     // Get from local storage first
-    var item = localStorage.getItem(u);
+    var ls = window.lstorage || localStorage;
+    var item = null;
+    try { item = ls.getItem(u); } catch(e) {}
     //log('localStorage.getItem', u, item);
     if (item != null && item != '') {
         if (!hascb)
@@ -253,6 +256,7 @@ HTTPBindingClient.prototype.get = function(id, cb) {
     // Connect to the service
     var http = HTTPBindingClient.getHTTPRequest();
     http.open("GET", u, hascb);
+    http.setRequestHeader("Accept", "*/*");
 
     // Construct call back if we have one
     if (hascb) {
@@ -282,7 +286,7 @@ HTTPBindingClient.prototype.get = function(id, cb) {
                             // Store retrieved entry in local storage
                             if (http.responseText != null) {
                                 //log('localStorage.setItem', u, http.responseText);
-                                localStorage.setItem(u, http.responseText);
+                                try { ls.setItem(u, http.responseText); } catch(e) {}
                             }
                             try {
                                 return cb(http.responseText);
@@ -337,6 +341,7 @@ HTTPBindingClient.prototype.getnocache = function(id, cb) {
     // Connect to the service
     var http = HTTPBindingClient.getHTTPRequest();
     http.open("GET", u, hascb);
+    http.setRequestHeader("Accept", "*/*");
 
     // Construct call back if we have one
     if (hascb) {
@@ -407,6 +412,7 @@ HTTPBindingClient.prototype.post = function (entry, cb) {
     var http = HTTPBindingClient.getHTTPRequest();
     var hascb = cb? true : false;
     http.open("POST", this.uri, hascb);
+    http.setRequestHeader("Accept", "*/*");
     http.setRequestHeader("Content-Type", "application/atom+xml");
 
     // Construct call back if we have one
@@ -445,13 +451,15 @@ HTTPBindingClient.prototype.put = function (id, entry, cb) {
     var u = this.uri + '/' + id;
 
     // Update local storage
-    localStorage.setItem(u, entry);
+    var ls = window.lstorage || localStorage;
+    try { ls.setItem(u, entry); } catch(e) {}
     //log('localStorage.setItem', u, entry);
 
     // Connect to the service
     var http = HTTPBindingClient.getHTTPRequest();
     var hascb = cb? true : false;
     http.open("PUT", u, hascb);
+    http.setRequestHeader("Accept", "*/*");
     http.setRequestHeader("Content-Type", "application/atom+xml");
 
     // Construct call back if we have one
@@ -489,13 +497,15 @@ HTTPBindingClient.prototype.del = function (id, cb) {
     var u = this.uri + '/' + id;
 
     // Update local storage
-    localStorage.removeItem(u);
+    var ls = window.lstorage || localStorage;
+    try { ls.removeItem(u); } catch(e) {}
     //log('localStorage.removeItem', u);
 
     // Connect to the service
     var http = HTTPBindingClient.getHTTPRequest();
     var hascb = cb? true : false;
     http.open("DELETE", u, hascb);        
+    http.setRequestHeader("Accept", "*/*");
 
     // Construct call back if we have one
     if (cb) {
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css
index 364e47774a..3dde10a2c0 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.css
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.css
@@ -19,146 +19,181 @@
 
 body {
 margin-top: 0px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px;
-font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 14px;
+background-color: #ffffff; opacity: 1;
 -webkit-text-size-adjust: none;
 -webkit-touch-callout: none;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
--webkit-user-select: none;
+-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
+cursor: default;
+-webkit-backface-visibility: hidden;
 }
 
 .delayed {
 visibility: hidden;
 }
 
-.devicewidth {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+.fixed {
+position: absolute;
 }
 
-.mainbodydiv {
+.devicewidth {
 position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
 }
 
-.bodydiv {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+.mainbody {
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
+-webkit-backface-visibility: hidden;
 }
 
 .viewcontainer3dm {
--webkit-perspective: 1000;
+position: absolute; left: 0px; top: 35px; width: 100%;
+-webkit-backface-visibility: hidden;
 }
 
 .viewcontainer3d {
+position: absolute; left: 0px; top: 35px; width: 100%;
+-webkit-backface-visibility: hidden;
 }
 
 .leftviewloading3dm {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transform: translate3d(100%, 0px, 0) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+z-index: -10; background-color: #ffffff;
+-webkit-transform: translate(100%, 0px);
 -moz-transform: translate(100%, 0px);
 -ms-transform: translate(100%, 0px);
+-o-transform: translate(100%, 0px);
 transform: translate(100%, 0px);
+-webkit-backface-visibility: hidden;
 }
 
 .rightviewloading3dm {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transform: translate3d(-100%, 0px, 0) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+z-index: -10; background-color: #ffffff;
+-webkit-transform: translate(-100%, 0px);
 -moz-transform: translate(-100%, 0px);
 -ms-transform: translate(-100%, 0px);
+-o-transform: translate(-100%, 0px);
 transform: translate(-100%, 0px);
-}
-
-.flipviewloading3dm {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transform: translate3d(0px, 0px, 0) rotateY(180deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
--moz-transform: translate(100%, 0px);
--ms-transform: translate(100%, 0px);
-transform: translate(100%, 0px);
+-webkit-backface-visibility: hidden;
 }
 
 .viewloading3d {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
-visibility: hidden;
--webkit-transform: translate3d(100%, 0px, 0) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+visibility: hidden; z-index: -10; background-color: #ffffff;
+-webkit-transform: translate(100%, 0px);
 -moz-transform: translate(100%, 0px);
 -ms-transform: translate(100%, 0px);
+-o-transform: translate(100%, 0px);
 transform: translate(100%, 0px);
+-webkit-backface-visibility: hidden;
 }
 
 .viewloaded3dm {
 position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transition: -webkit-transform 0.5s ease-in-out;
--moz-transition: -moz-transform 0.5s ease-in-out;
--ms-transition: -ms-transform 0.5s ease-in-out;
-transition: transform 0.5s ease-in-out;
--webkit-transform: translate3d(0px, 0px, 0) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+z-index: 0; background-color: #ffffff;
+-webkit-transition: -webkit-transform 0.4s ease-in-out;
+-moz-transition: -moz-transform 0.4s ease-in-out;
+-ms-transition: -ms-transform 0.4s ease-in-out;
+-o-transition: -o-transform 0.4s ease-in-out;
+transition: transform 0.4s ease-in-out;
+-webkit-transform: translate(0px, 0px);
 -moz-transform: translate(0px, 0px);
 -ms-transform: translate(0px, 0px);
+-o-transform: translate(0px, 0px);
 transform: translate(0px, 0px);
+-webkit-backface-visibility: hidden;
 }
 
 .viewloaded3d {
 position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transform: translate3d(0px, 0px, 0) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+z-index: 0; background-color: #ffffff;
+-webkit-transform: translate(0px, 0px);
 -moz-transform: translate(0px, 0px);
 -ms-transform: translate(0px, 0px);
+-o-transform: translate(0px, 0px);
 transform: translate(0px, 0px);
+-webkit-backface-visibility: hidden;
 }
 
 .viewunloading3dm {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transform: translate3d(0px, 0px, 0) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+z-index: 0; background-color: #ffffff;
+-webkit-transform: translate(0px, 0px);
 -moz-transform: translate(0px, 0px);
 -ms-transform: translate(0px, 0px);
+-o-transform: translate(0px, 0px);
 transform: translate(0px, 0px);
+-webkit-backface-visibility: hidden;
 }
 
 .leftviewunloaded3dm {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transition: -webkit-transform 0.5s ease-in-out;
--moz-transition: -moz-transform 0.5s ease-in-out;
--ms-transition: -ms-transform 0.5s ease-in-out;
-transition: transform 0.5s ease-in-out;
--webkit-transform: translate3d(-100%, 0px, 0px) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+z-index: -10; background-color: #ffffff;
+-webkit-transition: -webkit-transform 0.4s ease-in-out;
+-moz-transition: -moz-transform 0.4s ease-in-out;
+-ms-transition: -ms-transform 0.4s ease-in-out;
+-o-transition: -o-transform 0.4s ease-in-out;
+transition: transform 0.4s ease-in-out;
+-webkit-transform: translate(-100%, 0px);
 -moz-transform: translate(-100%, 0px);
 -ms-transform: translate(-100%, 0px);
+-o-transform: translate(-100%, 0px);
 transform: translate(-100%, 0px);
+-webkit-backface-visibility: hidden;
 }
 
 .rightviewunloaded3dm {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transition: -webkit-transform 0.5s ease-in-out;
--moz-transition: -moz-transform 0.5s ease-in-out;
--ms-transition: -ms-transform 0.5s ease-in-out;
-transition: transform 0.5s ease-in-out;
--webkit-transform: translate3d(100%, 0px, 0) rotateY(0deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+z-index: -10; background-color: #ffffff;
+-webkit-transition: -webkit-transform 0.4s ease-in-out;
+-moz-transition: -moz-transform 0.4s ease-in-out;
+-ms-transition: -ms-transform 0.4s ease-in-out;
+-o-transition: -o-transform 0.4s ease-in-out;
+transition: transform 0.4s ease-in-out;
+-webkit-transform: translate(100%, 0px);
 -moz-transform: translate(100%, 0px);
 -ms-transform: translate(100%, 0px);
+-o-transform: translate(100%, 0px);
 transform: translate(100%, 0px);
+-webkit-backface-visibility: hidden;
 }
 
-.flipviewunloaded3dm {
-position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: visible;
--webkit-transition: -webkit-transform 0.5s ease-in-out;
--moz-transition: -moz-transform 0.5s ease-in-out;
--ms-transition: -ms-transform 0.5s ease-in-out;
-transition: transform 0.5s ease-in-out;
--webkit-transform: translate3d(0px, 0px, 0) rotateY(-180deg);
--webkit-backface-visibility: hidden; background-color: #ffffff;
--moz-transform: translate(0px, 0px);
--ms-transform: translate(0px, 0px);
-transform: translate(0px, 0px);
+.body {
+width: 100%; height: 5000px; overflow: visible;
+-webkit-backface-visibility: hidden;
+}
+
+.viewhead {
+position: absolute; left: 0px; top: 35px; height: 35px; line-height: 35px; width: 100%; z-index: 8;
+font-size: 110%; font-weight: bold; background-color: #f1f1f1; color: #000000;
+border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px;
+border-style: solid; border-top-color: #e5e5e5; border-bottom-color: #e5e5e5;
+overflow: hidden;
+-webkit-backface-visibility: hidden;
+}
+
+.viewheadbackground {
+position: absolute; left: 0px; top: 35px; height: 35px; line-height: 35px; width: 2500px; z-index: 7;
+font-size: 110%; font-weight: bold; background-color: #f1f1f1; color: #000000;
+border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px;
+border-style: solid; border-top-color: #e5e5e5; border-bottom-color: #e5e5e5;
+overflow: hidden;
+-webkit-backface-visibility: hidden;
+}
+
+.viewcontent {
+position: absolute; left: 0px; top: 38px; width: 100%;
+-webkit-backface-visibility: hidden;
+}
+
+.viewform {
+position: absolute; left: 0px; top: 40px; width: 100%;
 }
 
 table {
 border: 0px; border-collapse: collapse; border-color: #a2bae7; border-style: solid;
-font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 14px;
 overflow: visible;
 }
 
@@ -167,22 +202,23 @@ border-bottom: 1px; border-bottom-style: solid; border-color: #dcdcdc;
 }
 
 th {
-font-weight: bold; background-color: #d4e6fc; color: #000000; height: 18px;
+font-size: 110%; font-weight: bold; background-color: #f1f1f1; color: #000000;
 text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; white-space: nowrap;
-border-top: 1px; border-bottom: 1px; border-left: 1px; border-right: 1px; border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #a2bae7; border-right-color: #a2bae7;
+border-top: 1px; border-bottom: 1px; border-left: 1px; border-right: 1px; border-style: solid; border-top-color: #e5e5e5; border-bottom-color: #e5e5e5; border-left-color: #e5e5e5; border-right-color: #e5e5e5;
 overflow: hidden;
 }
 
 .section {
-font-weight: bold; background-color: #d4e6fc; color: #000000; height: 24px; padding-top: 1px; padding-bottom: 0px; padding-left: 2px; padding-right: 2px;
-border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #a2bae7; border-right-color: #a2bae7;
+font-size: 110%; font-weight: bold; background-color: #f1f1f1; color: #000000; height: 30px; line-height: 30px;
+text-align: left; padding-top: 0px; padding-bottom: 0px; padding-left: 2px; padding-right: 2px; white-space: nowrap;
+border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; border-style: solid; border-top-color: #e5e5e5; border-bottom-color: #e5e5e5; border-left-color: #e5e5e5; border-right-color: #e5e5e5;
 overflow: hidden;
 }
 
 .hsection {
 width: 100%; height: 0px; visibility: hidden;
 border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px; border-style: solid; border-bottom-color: #000000; background-color: #ffffff;
-padding: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; text-align: center;
+padding-left: 2px; padding-right: 2px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; text-align: center;
 }
 
 .fsection{
@@ -191,10 +227,39 @@ border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px; border
 padding: 0px; margin-top: 0px; margin-left: auto; margin-right: auto; text-align: center;
 }
 
+.bluetext {
+color: #4787ed;
+}
+
+.redtext {
+color: #d14836;
+}
+
+.mirror {
+display: inline-block;
+-webkit-transform: scaleX(-1);
+-moz-transform: scaleX(-1);
+-ms-transform: scaleX(-1);
+-o-transform: scaleX(-1);
+transform: scaleX(-1);
+}
+
+.greentext {
+color: #009900;
+}
+
 .text {
 padding-top: 3px; padding-bottom: 4px; vertical-align: middle; white-space: nowrap;
 }
 
+.link {
+padding-top: 3px; padding-bottom: 4px; vertical-align: middle; white-space: nowrap;
+}
+
+.checkbox {
+padding-top: 3px; padding-bottom: 4px; vertical-align: middle; white-space: nowrap;
+}
+
 .thl {
 border-left: 0px;
 }
@@ -264,39 +329,122 @@ padding: 3px; background-color: #dcdcdc; color: #000000;
 
 input {
 vertical-align: middle;
-font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 15px;
+outline: none;
+-webkit-text-size-adjust: 100%;
+}
+
+button {
+vertical-align: middle;
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 15px;
+outline: none;
 -webkit-text-size-adjust: 100%;
 }
 
 textarea {
-font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 15px;
+outline: none;
 overflow: auto; resize: none;
 }
 
-.editable {
+.flatentry {
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 15px;
+-webkit-appearance: none; appearance: none;
+border: 1px solid #d9d9d9!important; border-top: 1px solid silver!important;
+box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
+border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px;
+margin: 1px!important; padding: 3px 1px 3px 3px;
+}
+
+.graphentry {
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 13px;
+-webkit-appearance: none; appearance: none;
+border: 1px solid #d9d9d9!important; border-top: 1px solid silver!important;
+box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
+border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px;
+margin: 0px; padding: 0px;
+}
+
+.flatcheckbox {
+}
+
+.editablewidget {
+-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
+outline: none; -moz-outline-style: none;
+}
+
+.noneditablewidget {
+outline: none; -moz-outline-style: none;
+}
+
+.editablesvg {
 background-color: transparent;
 font-family: inherit; font-style: inherit; font-variant: inherit; font-size: inherit; font-weight: inherit;
 padding: 0px; margin: 0px;
 overflow: auto; resize: none;
-outline: none; -webkit-appearance: none; -moz-outline-style: none;
--webkit-text-size-adjust: 100%;
+outline: none; -moz-outline-style: none;
+-webkit-appearance: none; -webkit-text-size-adjust: 100%;
 border: 0px;
 }
 
 a:link {
-color: #598edd; text-decoration: none; white-space: nowrap;
+color: #357ae8; text-decoration: none; white-space: nowrap; cursor: pointer;
 }
 
 a:visited {
-color: #598edd; text-decoration: none; white-space: nowrap;
+color: #357ae8; text-decoration: none; white-space: nowrap; cursor: pointer;
+}
+
+.tbarmenu {
+position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; margin: 0px; padding: 0px; border-collapse: separate;
+height: 35px; line-height: 35px; background-color: #2c2c2c;
+border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; border-style: solid; border-top-color: #2c2c2c; border-bottom-color: #2c2c2c;
+-webkit-backface-visibility: hidden;
+}
+
+.tbarbackground {
+position: absolute; top: 0px; left: 0px; z-index: 9; width: 2500px; margin: 0px; padding: 0px; border-collapse: separate;
+height: 35px; line-height: 35px; background-color: #2c2c2c;
+border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; border-style: solid; border-top-color: #2c2c2c; border-bottom-color: #2c2c2c;
+overflow: hidden;
+-webkit-backface-visibility: hidden;
+}
+
+.tbarleft {
+padding-left: 2px; padding-right: 6px; white-space: nowrap; float: left;
+}
+
+.tbarright {
+padding-left: 6px; padding-right: 2px; white-space: nowrap; float: right;
+}
+
+.tbaramenu {
+font-size: 110%; color: #cccccc; text-decoration: none; white-space: nowrap;
+}
+
+.tbarsmenu {
+font-size: 110%; font-weight: bold; color: #ffffff; text-decoration: none; white-space: nowrap;
 }
 
 .amenu {
-color: #598edd; text-decoration: none; white-space: nowrap;
+padding-left: 2px; padding-right: 6px; white-space: nowrap; color: #808080; text-decoration: none; float: left;
 }
 
 .smenu {
-font-weight: bold; color: #000000; text-decoration: none; white-space: nowrap;
+padding-left: 2px; padding-right: 6px; white-space: nowrap; color: #000000; text-decoration: none; float: left;
+}
+
+.cmenu {
+font-size: 18px; padding-left: 6px; padding-right: 6px; white-space: nowrap; color: #000000; text-decoration: none;
+width: 100%; margin-left: auto; margin-right: auto; text-align: center; float: right;
+}
+
+.bcmenu {
+font-size: 22px; padding-left: 2px; padding-right: 6px; white-space: nowrap; color: #000000; text-decoration: none;
+}
+
+.rmenu {
+padding-left: 2px; padding-right: 2px; white-space: nowrap; white-space: nowrap; float: right;
 }
 
 h1 {
@@ -319,141 +467,161 @@ img {
 border: 0px;
 }
 
+.plusminus {
+font-size: 18px; font-family: "Courier New";
+}
+
 .imgbutton {
 width: 142px; height: 64px; margin-left: 20px; margin-right: 20px; padding: 0px; border: 1px; cursor: pointer;
 }
 
-.toolbutton {
-font-weight: bold; font-size: 16px;
-display: inline-block; width: 24px; height: 20px; padding: 0px;
-vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;
-padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px;
+.graybutton {
+display: inline-block; text-align: center; color: #444; font-weight: bold;
+padding-top: 0px; padding-bottom: 0px; padding-left: 4px; padding-right: 4px;
+height: 28px; line-height: 28px; min-width: 30px;
+-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
+border: 1px solid gainsboro; background-color: whiteSmoke;
+background-image: -webkit-gradient(linear,left top,left bottom,from(whiteSmoke),to(#f1f1f1));
+background-image: -webkit-linear-gradient(top,whiteSmoke,#f1f1f1);
+background-image: -moz-linear-gradient(top,whiteSmoke,#f1f1f1);
+background-image: -ms-linear-gradient(top,whiteSmoke,#f1f1f1);
+background-image: -o-linear-gradient(top,whiteSmoke,#f1f1f1);
+background-image: linear-gradient(top,whiteSmoke,#f1f1f1);
+cursor: default;
+}
+
+.graybutton:hover {
+border: 1px solid #c6c6c6; color: #333; text-shadow: 0 1px rgba(0, 0, 0, 0.3); background-color: #f8f8f8;
+background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
+background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
+background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
+background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
+background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
+background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
 }
 
-.greenbutton {
--webkit-border-radius: 4px;
-border-radius: 4px;
-background: #96d333;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 80%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#96d333));
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 80%);
-border: 1px outset #dcdcdc;
-padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
-cursor: pointer;
+.graybutton:active {
+background-color: #f6f6f6;
+background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1));
+background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1);
+background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1);
+background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1);
+background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1);
+background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
+-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.tgreenbutton {
--webkit-border-radius: 4px;
-border-radius: 4px;
-background: #96d333;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 80%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#96d333));
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 80%);
-border: 1px outset #dcdcdc;
-padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
-cursor: pointer;
+.graybutton:disabled {
+color: #c0c0c0;
 }
 
 .bluebutton {
--webkit-border-radius: 4px;
-border-radius: 4px;
-background: #598edd;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #598edd 80%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#598edd));
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#598edd',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#598edd 80%);
-border: 1px outset #dcdcdc;
-padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
-cursor: pointer;
+border: 1px solid #3079ed; color: white; text-shadow: 0 1px rgba(0, 0, 0, 0.1); background-color: #4d90fe;
+background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
+background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
+background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
+background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
+background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
+background-image: linear-gradient(top,#4d90fe,#4787ed);
+}
+
+.bluebutton:disabled {
+color: #c0c0c0;
+}
+
+.bluebutton:hover {
+border: 1px solid #2f5bb7; color: white; text-shadow: 0 1px rgba(0, 0, 0, 0.3); background-color: #357ae8;
+background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
+background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
+background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
+background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
+background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
+background-image: linear-gradient(top,#4d90fe,#357ae8);
+}
+
+.bluebutton:hover:disabled {
+color: #c0c0c0;
 }
 
 .redbutton {
--webkit-border-radius: 4px;
-border-radius: 4px;
-background: #d03f41;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #d03f41 80%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#d03f41));
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#d03f41',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#d03f41 80%);
-border: 1px outset #dcdcdc;
-padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
-cursor: pointer;
-}
-
-.orangebutton {
--webkit-border-radius: 4px;
-border-radius: 4px;
-background: #ffbb00;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #ffbb00 80%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#ffbb00));
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffbb00',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#ffbb00 80%);
-border: 1px outset #dcdcdc;
-padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
-cursor: pointer;
+border: 1px solid transparent; color: white; text-shadow: 0 1px rgba(0, 0, 0, 0.1); background-color: #d14836;
+background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
+background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
+background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
+background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
+background-image: -o-linear-gradient(top,#dd4b39,#d14836);
+background-image: linear-gradient(top,#dd4b39,#d14836);
+-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); -ms-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+-o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
-.graybutton {
--webkit-border-radius: 4px;
-border-radius: 4px;
-background: #dcdcdc;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #dcdcdc 80%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#dcdcdc));
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#dcdcdc',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#dcdcdc 80%);
-border: 1px outset #dcdcdc;
-padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
-margin: 2px;
-cursor: pointer;
+.redbutton:disabled {
+color: #c0c0c0;
 }
 
-.tbar {
-margin: 0px; width: 100%; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; border-collapse: separate;
-background-color: #2c2c2c;
+.redbutton:hover {
+border: 1px solid #b0281a; border-bottom-color: #af301f; color: white; background-color: #c53727;
+background-image: -webkit-linear-gradient(top,#dd4b39,#c53727);
+background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
+background-image: -ms-linear-gradient(top,#dd4b39,#c53727);
+background-image: -o-linear-gradient(top,#dd4b39,#c53727);
+background-image: linear-gradient(top,#dd4b39,#c53727);
+-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+-o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
-.ltbar {
-padding-left: 2px; padding-right: 6px; padding-top: 3px; padding-bottom: 4px; white-space: nowrap; vertical-align: middle;
+.redbutton:hover:disabled {
+color: #c0c0c0;
 }
 
-.dtbar {
-padding-left: 0px; padding-right: 0px; padding-top: 3px; padding-bottom: 4px; white-space: nowrap; vertical-align: middle; text-align: right;
+.box {
+width: 150px; display: inline-block;
+border: 1px; border-style: solid; border-color: #dcdcdc; border-collapse: collapse;
+white-space: nowrap; margin: 2px; padding: 2px; vertical-align: top;
 }
 
-.rtbar {
-padding-left: 6px; padding-right: 2px; padding-top: 3px; padding-bottom: 4px; white-space: nowrap; vertical-align: middle; text-align: right;
+.appicon {
+float: left;
+height: 50px; width: 50px; vertical-align: top; margin: 0px; padding: 0px;
 }
 
-.tbaramenu {
-color: #cccccc; text-decoration: none; white-space: nowrap; vertical-align: middle;
+.apptitle {
+font-weight: bold;
 }
 
-.tbarsmenu {
-font-weight: bold; color: #ffffff; text-decoration: none; white-space: nowrap; vertical-align: middle;
+.note {
+font-size: 12px; color: #808080;
 }
 
-.suggest {
-background-color: #d4e6fc; color: #598edd;
-border-top: 1px; border-bottom: 1px; border-left: 1px; border-right: 1px; border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #d1d3d4; border-right-color: #d1d3d4;
-position: absolute; overflow: auto; overflow-x: hidden; padding: 0px; margin: 0px;
-cursor: default;
+.pagediv {
+position: absolute; display: block; overflow: visible;
+-webkit-backface-visibility: hidden;
 }
 
-.suggestTable {
-border: 0px; border-collapse: separate; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; margin: 0px;
+.graphdiv {
+position: absolute; display: block; overflow: visible;
+-webkit-backface-visibility: hidden;
 }
 
-.suggestItem {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #d4e6fc; color: #598edd;
+.g {
+position: absolute; display: block; overflow: visible;
+-webkit-backface-visibility: hidden;
 }
 
-.suggestHilighted {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #598edd; color: #d4e6fc;
+.path {
+position: absolute; background: transparent; display: block; overflow: visible;
+visibility: visible;
+-webkit-backface-visibility: hidden;
 }
 
-.svgtitle {
-margin: 0px; padding: 0px; font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 10px; cursor: default;
+.gtitle {
+position: absolute;
+margin: 4px; padding: 0px; line-height: 15px; vertical-align: middle; white-space: nowrap;
+font-family: Arial; font-style: normal; font-variant: normal; font-size: 13px; cursor: default;
+background: transparent; display: block; overflow: visible;
+-webkit-text-size-adjust: none;
+-webkit-touch-callout: none;
+-webkit-tap-highlight-color: rgba(0,0,0,0);
+-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
 }
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.js b/sca-cpp/trunk/modules/js/htdocs/ui.js
index dcc1462084..f200321ccd 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.js
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.js
@@ -50,6 +50,13 @@ function $(id) {
 };
 
 /**
+ * Return a list of elements with the given class name.
+ */
+ui.elementsByClassName = function(node, c) {
+    return nodeList(node.getElementsByClassName(c));
+};
+
+/**
  * Return the query string of a URL.
  */
 ui.query = function(url) {
@@ -151,7 +158,7 @@ ui.evalScript = function(s) {
  * Include a script.
  */
 ui.includeScript = function(s) {
-    log('include', s);
+    //log('include', s);
     return eval(s);
 };
 
@@ -207,18 +214,54 @@ ui.pixpos = function(p) {
 };
 
 /**
- * Reload the current document when orientation changes.
+ * Default orientation change behavior.
  */
-ui.onorientationchange = function() {
-    window.location.reload();
+ui.onorientationchange = function(e) {
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    // Change fixed position elements to absolute then back to fixed
+    // to make sure they're correctly layed out after the orientation
+    // change
+    map(function(e) {
+            e.style.position = 'absolute';
+            return e;
+        }, ui.elementsByClassName(document, 'fixed'));
+
+    setTimeout(function() {
+        map(function(e) {
+                e.style.position = 'fixed';
+                return e;
+            }, ui.elementsByClassName(document, 'fixed'));
+        }, 0);
     return true;
-}
+};
+
+/**
+ * Default page load behavior.
+ */
+ui.onload = function() {
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    // Initialize fixed position elements only after the page is loaded,
+    // to workaround layout issues with fixed position on mobile devices
+    setTimeout(function() {
+        map(function(e) {
+                e.style.position = 'fixed';
+                return e;
+            }, ui.elementsByClassName(document, 'fixed'));
+        }, 0);
+    return true;
+};
 
 /**
  * Navigate to a new document.
  */
 ui.navigate = function(url, win) {
-    log('navigate', url, win);
+    //log('navigate', url, win);
 
     // Open a new window
     if (win == '_blank')
@@ -283,17 +326,11 @@ ui.menufunc = function(name, fun, hilight) {
 };
 
 ui.menubar = function(left, right) {
-    var bar = '<table cellpadding="0" cellspacing="0" width="100%" class="tbar"><tr>' +
-    '<td class="dtbar"><table border="0" cellspacing="0" cellpadding="0"><tr>';
+    var bar = '';
     for (i in left)
-        bar = bar + '<td class="ltbar">' + left[i].content() + '</td>'
-
-    bar = bar + '</tr></table></td>' +
-    '<td class="dtbar"><table border="0" cellpadding="0" cellspacing="0" align="right"><tr>';
+        bar = bar + '<span class="tbarleft">' + left[i].content() + '</span>';
     for (i in right)
-        bar = bar + '<td class="' + (i == 0? 'dtbar' : 'rtbar') + '">' + right[i].content() + '</td>'
-
-    bar = bar + '</tr></table></td></tr></table>';
+        bar = bar + '<span class="tbarright">' + right[i].content() + '</span>';
     return bar;
 };
  
@@ -379,105 +416,3 @@ ui.datalist = function(l) {
     return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
 }
 
-/**
- * Autocomplete / suggest support for input fields
- * To use it declare a 'suggest' function as follows:
- * function suggestItems() {
- *       return new Array('abc', 'def', 'ghi');
- * }
- * then hook it to an input field as follows:
- * suggest(document.yourForm.yourInputField, suggestItems);
- */ 
-ui.selectSuggestion = function(node, value) {
-    for (;;) {
-        node = node.parentNode;
-        if (node.tagName.toLowerCase() == 'div')
-              break;
-    }
-    node.selectSuggestion(value);
-};
-
-ui.hilightSuggestion = function(node, over) {
-    if (over)
-        node.className = 'suggestHilighted';
-    node.className = 'suggestItem';
-};
-
-ui.suggest = function(input, suggestFunction) {
-    input.suggest = suggestFunction;
-      
-    input.selectSuggestion = function(value) {
-        this.hideSuggestDiv();
-        this.value = value;
-    }
-    
-    input.hideSuggestDiv = function() {
-        if (this.suggestDiv != null) {
-            this.suggestDiv.style.visibility = 'hidden';
-        }
-    }
-    
-    input.showSuggestDiv = function() {
-        if (this.suggestDiv == null) {
-            this.suggestDiv = document.createElement('div');
-            this.suggestDiv.input = this;
-            this.suggestDiv.className = 'suggest';
-            input.parentNode.insertBefore(this.suggestDiv, input);
-            this.suggestDiv.style.visibility = 'hidden';
-            this.suggestDiv.style.zIndex = '99';
-            
-            this.suggestDiv.selectSuggestion = function(value) {
-                this.input.selectSuggestion(value);
-            }
-        }
-        
-        var values = this.suggest();
-        var items = '';
-        for (var i = 0; i < values.length; i++) {
-            if (values[i].indexOf(this.value) == -1)
-                continue;
-            if (items.length == 0)
-                items += '<table class="suggestTable">';
-            items += '<tr><td class="suggestItem" ' +
-            'onmouseover="ui.hilightSuggestion(this, true)" onmouseout="ui.hilightSuggestion(this, false)" ' +
-            'onmousedown="ui.selectSuggestion(this, \'' + values[i] + '\')">' + values[i] + '</td></tr>';
-        }
-        if (items.length != 0)
-            items += '</table>';
-        this.suggestDiv.innerHTML = items;
-        
-        if (items.length != 0) {
-            var node = input;              
-            var left = 0;
-            var top = 0;
-            for (;;) {
-                left += node.offsetLeft;
-                top += node.offsetTop;
-                node = node.offsetParent;
-                if (node.tagName.toLowerCase() == 'body')
-                  break;
-            }
-            this.suggestDiv.style.left = left;
-            this.suggestDiv.style.top = top + input.offsetHeight;
-            this.suggestDiv.style.visibility = 'visible';
-        } else
-            this.suggestDiv.style.visibility = 'hidden';
-    }
-      
-    input.onkeydown = function(event) {
-        this.showSuggestDiv();
-    };
-
-    input.onkeyup = function(event) {
-        this.showSuggestDiv();
-    };
-
-    input.onmousedown = function(event) {
-        this.showSuggestDiv();
-    };
-
-    input.onblur = function(event) {
-        setTimeout(function() { input.hideSuggestDiv(); }, 50);
-    };
-};
-
diff --git a/sca-cpp/trunk/modules/js/htdocs/util.js b/sca-cpp/trunk/modules/js/htdocs/util.js
index 677132d2a8..0f7de94289 100644
--- a/sca-cpp/trunk/modules/js/htdocs/util.js
+++ b/sca-cpp/trunk/modules/js/htdocs/util.js
@@ -170,11 +170,11 @@ function tokens(path) {
 }
 
 /**
- * Log a value.
+ * Debug log a value.
  */
 var rconsole;
 
-function log(v) {
+function debug(v) {
     try {
         var s = '';
         for (i = 0; i < arguments.length; i++) {
@@ -196,13 +196,13 @@ function log(v) {
 }
 
 /**
- * Dump an object to the debug console.
+ * Dump an object to the console.
  */
-function debug(o) {
+function dump(o) {
     try {
         for (f in o) {
             try {
-                log('debug ' + f + '=' + o[f]);
+                debug('dump ' + f + '=' + o[f]);
             } catch (e) {}
         }
     } catch (e) {}
@@ -302,6 +302,51 @@ function unmemo(obj) {
 }
 
 /**
+ * Local storage.
+ */
+var lstorage = {};
+lstorage.enabled = true;
+
+/**
+ * Get an item.
+ */
+lstorage.getItem = function(k) {
+    if (!lstorage.enabled)
+        return null;
+    try {
+        return localStorage.getItem(k);
+    } catch(e) {
+        return null;
+    }
+}
+
+/**
+ * Set an item.
+ */
+lstorage.setItem = function(k, v) {
+    if (!lstorage.enabled)
+        return null;
+    try {
+        return localStorage.setItem(k, v);
+    } catch(e) {
+        return null;
+    }
+}
+
+/**
+ * Remove an item.
+ */
+lstorage.removeItem = function(k) {
+    if (!lstorage.enabled)
+        return null;
+    try {
+        return localStorage.removeItem(k);
+    } catch(e) {
+        return null;
+    }
+}
+
+/**
  * Returns a list of the properties of an object.
  */
 function properties(o) {