Simplify HTML and Javascript to improve UI and performance on iOS devices. Fix offline cache manifest. Add an app clone page.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1098489 13f79535-47bb-0310-9956-ffa450edef68
author: jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> 2011-05-02 05:58:26 +0000
committer: jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> 2011-05-02 05:58:26 +0000
commit: 8cfb387f9129dcff5ff74922a3be8f1662529037 (patch)
tree: 5a21e215aeddafb6669f9f12b89507217939f558 /sca-cpp
parent: c5541eed95f492f5fd615e6159115b0840ef0c37 (diff)
44 files changed, 2870 insertions, 2961 deletions
diff --git a/sca-cpp/trunk/.gitignore b/sca-cpp/trunk/.gitignore
index e9a9947138..1f6ae3e985 100644
--- a/sca-cpp/trunk/.gitignore
+++ b/sca-cpp/trunk/.gitignore
@@ -56,6 +56,7 @@ config.guess
 config.sub
 config.status
 config.js
+all.js
 depcomp
 install-sh
 ltmain.sh
@@ -85,6 +86,8 @@ doxygen
 *.stamp
 *.jar
 *.prefix
+*.crt
+*.patch
 index.yaml
 core
 gen-cpp/
@@ -133,7 +136,6 @@ json-value
 value-json
 element-value
 value-element
-modules/edit/apps/*/htdocs
 modules/edit/apps/*/nuvem
 modules/edit/apps/*/lib
 chat-send
diff --git a/sca-cpp/trunk/modules/edit/Makefile.am b/sca-cpp/trunk/modules/edit/Makefile.am
index 13f6f9c891..b96e1f96ac 100644
--- a/sca-cpp/trunk/modules/edit/Makefile.am
+++ b/sca-cpp/trunk/modules/edit/Makefile.am
@@ -20,7 +20,7 @@ if WANT_PYTHON
 moddir = $(prefix)/modules/edit
 dist_mod_SCRIPTS = start stop ssl-start mkapplinks
 
-nobase_dist_mod_DATA = edit.composite *.py htdocs/*.html htdocs/dash/*.html htdocs/data/*.html htdocs/app/*.html htdocs/store/*.html htdocs/props/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/app.html dashboards/* store/*
-EXTRA_DIST = edit.composite *.py htdocs/*.html htdocs/dash/*.html htdocs/data/*.html htdocs/app/*.html htdocs/store/*.html htdocs/props/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/app.html dashboards/* store/*
+nobase_dist_mod_DATA = edit.composite *.py htdocs/*.html htdocs/*.js htdocs/create/*.html htdocs/data/*.html htdocs/app/*.html htdocs/store/*.html htdocs/stats/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/htdocs/app.html dashboards/* store/*
+EXTRA_DIST = edit.composite *.py htdocs/*.html htdocs/*.js htdocs/create/*.html htdocs/data/*.html htdocs/app/*.html htdocs/store/*.html htdocs/stats/*.html htdocs/graph/*.html htdocs/graph/*.js htdocs/page/*.html htdocs/page/*.js htdocs/login/*.html htdocs/logout/*.html palettes/*/palette.composite apps/*/app.composite apps/*/htdocs/app.html dashboards/* store/*
 
 endif
diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf b/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf
index 24c05d717b..460f0b6bbd 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf
+++ b/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf
@@ -1,26 +1,16 @@
-CACHE-MANIFEST
+CACHE MANIFEST
 
 # Common resources
-atomutil.js
-component.js
-elemutil.js
-jsconfig.js
-jsonutil.js
-scdl.js
-ui.css
-ui.js
-util.js
-xmlutil.js
+all-min.js
+config.js
+ui-min.css
 
 # App resources
 app.html
 data/index.html
-index.html
 favicon.ico
-login/index.html
-logout/index.html
+index.html
 public/app.png
-public/grid72.png
 public/iframe.html
 public/img.png
 public/notauth.html
@@ -30,3 +20,6 @@ public/oops.html
 public/touchicon.png
 robots.txt
 
+NETWORK:
+*
+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/index.html b/sca-cpp/trunk/modules/edit/htdocs/app/index.html
index f147f729ac..fe7edd44b9 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/app/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/app/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -16,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.    
 -->
-<html manifest="cache-manifest.cmf">
+<html manifest="/cache-manifest.cmf">
 <head>
 <title>App</title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
@@ -26,20 +27,13 @@
 document.title = window.location.hostname.split('.')[0];
 </script>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/elemutil.js"></script>
-<script type="text/javascript" src="/xmlutil.js"></script>
-<script type="text/javascript" src="/atomutil.js"></script>
-<script type="text/javascript" src="/jsonutil.js"></script>
-<script type="text/javascript" src="/scdl.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
 
-<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
+<div id="bodydiv" class="devicewidth">
 
 <div id="app"></div>
 
@@ -51,11 +45,11 @@ document.title = window.location.hostname.split('.')[0];
 if (ui.isIE()) $('bodydiv').style.right = -20;
 
 /**
- * Page, every and location components.
+ * Start, stop, timer and geolocation components.
  */
-var appstartcomp = sca.httpclient('appstart', '/appstart');
-var appstopcomp = sca.httpclient('appstop', '/appstop');
-var everycomp = sca.httpclient('every', '/every');
+var startcomp = sca.httpclient('start', '/start');
+var stopcomp = sca.httpclient('stop', '/stop');
+var timercomp = sca.httpclient('timer', '/timer');
 var geolocationcomp = sca.httpclient('geolocation', '/geolocation');
 
 /**
@@ -255,11 +249,13 @@ function fixupwidget(e) {
     }
     if (e.className == 'list') {
         car(childElements(e)).innerHTML = '';
+        e.style.width = '100%';
         car(childElements(e)).style.width = '100%';
         return e;
     }
     if (e.className == 'table') {
         car(childElements(e)).innerHTML = '';
+        e.style.width = '100%';
         car(childElements(e)).style.width = '100%';
         return e;
     }
@@ -300,26 +296,24 @@ function getpagedata() {
         }
 
         // Get the component app data
-        var doc = appstartcomp.get(window.location.search, function(doc) {
-            try {
-                $('app').innerHTML = $('appFrame').contentDocument.body.innerHTML;
-
-                // Initial setup of the widgets
-                map(setupwidget, filter(function(e) { return !isNil(e.id); }, nodeList(ui.elementByID($('app'), 'page').childNodes)));
+        var doc = startcomp.get(window.location.search);
+        try {
+            $('app').innerHTML = $('appFrame').contentDocument.body.innerHTML;
 
-                // Display data on the page
-                displaypage(doc);
+            // Initial setup of the widgets
+            map(setupwidget, filter(function(e) { return !isNil(e.id); }, nodeList(ui.elementByID($('app'), 'page').childNodes)));
 
-                // Get and eval the optional timer and location watch setup scripts
-                everycomp.get('setup', evalcompinit);
-                geolocationcomp.get('setup', evalcompinit);
-                return true;
+            // Display data on the page
+            displaypage(doc);
 
-            } catch(e) {
-                log('exception on appstartcomp.get()', e);
-            }
-        });
+            // Get and eval the optional timer and location watch setup scripts
+            evalcompinit(timercomp.get('setup'));
+            evalcompinit(geolocationcomp.get('setup'));
+            return true;
 
+        } catch(e) {
+            log('exception on startcomp.get()', e);
+        }
     } catch(e) {
         log('exception in getpagedata()', e);
     }
@@ -330,10 +324,7 @@ function getpagedata() {
  * Get app data from a component.
  */
 function getcompdata(comp, qs) {
-    var doc = comp.get(qs, function(doc) {
-        return displaydoc(doc);
-    });
-    return true;
+    return displaydoc(comp.get(qs));
 }
 
 /**
@@ -377,7 +368,7 @@ function buttonClickHandler(id) {
  */
 function intervalHandler() {
     try {
-        return getcompdata(everycomp, compquery());
+        return getcompdata(timercomp, compquery());
     } catch(e) {
         log('exception in intervalHandler()', e);
     }
diff --git a/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf b/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf
index 5761c8cf11..d734f1f2c7 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf
+++ b/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf
@@ -1,37 +1,24 @@
-CACHE-MANIFEST
+CACHE MANIFEST
 
 # Common resources
-atomutil.js
-component.js
-elemutil.js
-jsconfig.js
-jsonutil.js
-scdl.js
-ui.css
-ui.js
-util.js
-xmlutil.js
+all-min.js
+config.js
+ui-min.css
 
 # App resources
 app/index.html
-dash/dashboard.html
-dash/index.html
+clone/index.html
+data/index.html
+create/index.html
 data/index.html
 favicon.ico
-graph/graph.html
 graph/graph.js
 graph/index.html
 home.png
 index.html
-login/index.html
-logout/index.html
-main.html
-menu.html
+menu.js
 page/index.html
-page/page.html
 page/page.js
-props/index.html
-props/props.html
 public/app.png
 public/grid72.png
 public/iframe.html
@@ -42,6 +29,9 @@ public/notyet.html
 public/oops.html
 public/touchicon.png
 robots.txt
+stats/index.html
 store/index.html
-store/store.html
+
+NETWORK:
+*
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/clone/index.html b/sca-cpp/trunk/modules/edit/htdocs/clone/index.html
new file mode 100644
index 0000000000..a68943b072
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/clone/index.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<html>
+<head>
+<title></title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<link rel="apple-touch-icon" href="/public/touchicon.png"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
+<script type="text/javascript" src="/config.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
+</head>
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
+<div id="menu"></div>
+
+<table style="width: 100%;">
+<tr>
+<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td>
+</tr>
+</table>
+
+<table style="width: 100%;">
+<tr>
+<th id="th" class="thl thr" style="padding-top: 4px; padding-bottom:4px;">Clone this App</th>
+</tr>
+</table>
+
+<form id="cloneAppForm" style="position: absolute; top: 90px; left: 0px;">
+<table style="width: 100%;">
+<tr><td><b>New App Name:</b></td></tr>
+<tr><td><input type="text" id="appName" size="15" placeholder="Your app name"/>&nbsp;<span id="appDomain"></span></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>App Icon:</b></td></tr>
+<tr><td><img src="/public/app.png" style="width: 50px; height: 50px; vertical-align: top;"></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Sharing:</b></td></tr>
+<tr><td><input type="checkbox" value="shared"/><span>Shared</span></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>App Title:</b></td></tr>
+<tr><td><input type="text" id="appTitle" size="30" placeholder="Enter the title of your app" style="width: 300px;"/></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Description:</b></td></tr>
+<tr><td><textarea id="appDescription" cols="40" rows="3" placeholder="Enter a short description of your app" style="width: 300px;"></textarea></td></tr>
+<tr><td>
+<input id="cloneAppOKButton" type="submit" class="greenbutton" style="font-weight: bold;" value="Clone" title="Clone the app"/>
+<input id="cloneAppCancelButton" type="button" class="redbutton" value="Cancel"/>
+</td></tr>
+</table>
+</form>
+
+</div>
+
+<script type="text/javascript">
+// Get the app name
+var appname = ui.queryParams()['app'];
+if (isNil(appname))
+    window.open('/', '_self');
+
+/**
+ * Return the link to an app.
+ */
+function applink(appname) {
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/';
+    return link;
+}
+
+// Set page titles
+var tclone = isNil(config.clone)? 'Clone' : config.clone;
+document.title = windowtitle(window.location.hostname) + ' - ' + tclone + ' - ' + appname;
+$('h1').innerHTML = hometitle(window.location.hostname);
+$('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
+$('th').innerHTML = tclone + ' this App';
+$('cloneAppOKButton').value = tclone;
+$('cloneAppOKButton').title = tclone + ' the app';
+
+// Load the menu bar
+displaymenu();
+
+// Init form
+$('appDomain').innerHTML = '.' + window.location.hostname;
+
+// Show the page
+ui.showbody();
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var dashboard = sca.reference(editWidget, "dashboard");
+var apps = sca.reference(editWidget, "apps");
+
+/**
+ * The current app entry and corresponding saved XML content.
+ */
+var appentry;
+var savedappentryxml = '';
+
+/**
+ * Get and display an app.
+ */
+function getapp(name) {
+    if (isNil(name))
+        return false;
+    return apps.get(name, function(doc) {
+        appentry = doc != null? car(elementsToValues(atom.readATOMEntry(mklist(doc)))) : mklist("'entry", mklist("'title", ''), mklist("'id", name));
+        var title = cadr(assoc("'title", cdr(appentry)));
+        $('appTitle').value = title;
+        $('appDescription').innerHTML = '';
+        savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry))));
+        return true;
+    });
+}
+
+/**
+ * Clone an app.
+ */
+$('cloneAppForm').onsubmit = function() {
+    var name = $('appName').value;
+    if (name == '')
+        return false;
+    var title = $('appTitle').value;
+    var app = mklist(mklist("'entry", mklist("'title", title != ''? title : name), mklist("'id", appname)));
+    var entry = atom.writeATOMEntry(valuesToElements(app));
+    dashboard.put(name, car(entry));
+    window.open('/store/', '_self');
+    return false;
+};
+
+/**
+ * Cancel cloning an app.
+ */
+$('cloneAppCancelButton').onclick = function() {
+    return window.open('/store/', '_self');
+};
+
+// Get the current app
+getapp(appname);
+
+</script>
+
+</body>
+</html>
+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/create/index.html b/sca-cpp/trunk/modules/edit/htdocs/create/index.html
new file mode 100644
index 0000000000..9452275a83
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/create/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<html>
+<head>
+<title>Create App</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<link rel="apple-touch-icon" href="/public/touchicon.png"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
+<script type="text/javascript" src="/config.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
+</head>
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
+<div id="menu"></div>
+
+<table style="width: 100%;">
+<tr><td><h1><span id="h1"></span></h1></td></tr>
+</table>
+
+<table style="width: 100%;">
+<tr>
+<th class="thl thr" style="padding-top: 4px; padding-bottom:4px;">Create an App</th>
+</tr>
+</table>
+
+<form id="createAppForm" style="position: absolute; top: 90px; left: 0px;">
+<table style="width: 100%;">
+<tr><td><b>App Name:</b></td></tr>
+<tr><td><input type="text" id="appName" size="15" placeholder="Your app name"/>&nbsp;<span id="appDomain"></span></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>App Icon:</b></td></tr>
+<tr><td><img src="/public/app.png" style="width: 50px; height: 50px; vertical-align: top;"></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Sharing:</b></td></tr>
+<tr><td><input type="checkbox" value="shared"/><span>Shared</span></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>App Title:</b></td></tr>
+<tr><td><input type="text" id="appTitle" size="30" placeholder="Enter the title of your app" style="width: 300px;"/></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Description:</b></td></tr>
+<tr><td><textarea id="appDescription" cols="40" rows="3" placeholder="Enter a short description of your app" style="width: 300px;"></textarea></td></tr>
+<tr><td>
+<input id="createAppOKButton" type="submit" class="greenbutton" style="font-weight: bold;" value="Create" title="Create the app"/>
+<input id="createAppCancelButton" type="button" class="redbutton" value="Cancel"/>
+</td></tr>
+</table>
+</form>
+
+</div>
+
+<script type="text/javascript">
+// Set page titles
+document.title = windowtitle(window.location.hostname) + ' - Create App';
+$('h1').innerHTML = hometitle(window.location.hostname);
+
+// Load the menu bar
+displaymenu();
+
+// Init form
+$('appDomain').innerHTML = '.' + window.location.hostname;
+
+// Show the page
+ui.showbody();
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var dashboard = sca.reference(editWidget, "dashboard");
+
+/**
+ * Create an app.
+ */
+$('createAppForm').onsubmit = function() {
+    var name = $('appName').value;
+    if (name == '')
+        return false;
+    var title = $('appTitle').value;
+    var app = mklist(mklist("'entry", mklist("'title", title != ''? title : name), mklist("'id", name)));
+    var entry = atom.writeATOMEntry(valuesToElements(app));
+    dashboard.put(name, car(entry));
+    window.open('/store/', '_self');
+    return false;
+};
+
+/**
+ * Cancel creating an app.
+ */
+$('createAppCancelButton').onclick = function() {
+    return window.open('/store/', '_self');
+};
+
+</script>
+
+</body>
+</html>
+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
deleted file mode 100644
index 97b5e37a7b..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>  
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/elemutil.js"></script>
-<script type="text/javascript" src="/xmlutil.js"></script>
-<script type="text/javascript" src="/atomutil.js"></script>
-<script type="text/javascript" src="/scdl.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
-</head>  
-<body class="delayed">
-
-<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
-
-<div id="apps"></div>
-<br/>
-<input type="button" id="createAppButton" value="Create App" title="Create a new app"/>
-<br/>
-<br/>
-
-<div id="newApp" style="visibility: hidden; height: 100%;">
-<table style="width: 100%;">
-<tr><th id="newAppHeader" class="thl thr" style="padding-top: 4px; padding-bottom:4px; border-style: none;">Create an App</th></tr>
-<tr><td></td></tr>
-</table>
-<br/>
-
-<table style="width: 100%;">
-<tr><td><b>App Name:</b></td></tr>
-<tr><td><input type="text" id="appName" size="10"/>&nbsp;<span id="appDomain"></span></td></tr>
-<tr><tr><td><b>App Title:</b></td></tr>
-<tr><td><input type="text" id="appTitle" size="80"/></td></tr>
-<tr><tr><td><b>Category:</b></td></tr>
-<tr><td><input type="text" id="appCategory" size="15" value="Cool Apps"/></td></tr>
-<tr><tr><td><b>Description:</b></td></tr>
-<tr><td><textarea id="appDescription" cols="80" rows="5">Enter a short description of your app here</textarea></td></tr>
-<tr><td>
-<input id="createAppOKButton" type="submit" style="font-weight: bold;" value="Create" title="Create the app"/>
-<input id="createAppCancelButton" type="button" value="Cancel"/>
-</td></tr>
-</table>
-<br/>
-<br/>
-</div>
-
-</div>
-
-<script type="text/javascript">
-if (ui.isIE()) $('bodydiv').style.right = -20;
-
-// Init service references
-var editWidget = sca.component("EditWidget");
-var dashboard = sca.reference(editWidget, "dashboard");
-
-/**
- * Return the link to an app.
- */
-function applink(appname) {
-    var protocol = window.location.protocol;
-    var host = window.location.hostname;
-    var port = ':' + window.location.port;
-    if (port == ':80' || port == ':443' || port == ':')
-        port = '';
-    var link = protocol + '//' + appname + '.' + host + port + '/';
-    return link;
-}
-
-/**
- * Get and display list of apps.
- */
-function getapps(sync) {
-    function display(doc) {
-        var apps = '<table style="width: 100%;">';
-        apps += '<tr><th class="thl thr" style="width: 20px; padding-top: 4px; padding-right: 4px;">App</th>' +
-            '<th class="thr thl" style="width: 20px;">URL</th>' +
-            '<th class="thr thl">Category</th>' +
-            '<th class="thr thl" style="width: 100%;">Title</th>' +
-            '<th class="thr thl">Updated</th>' +
-            '<th class="thl thr">Sharing</th></tr>';
-
-        var feed = car(elementsToValues(atom.readATOMFeed(mklist(doc))));
-        var entries = cadr(assoc("'entry", cdr(feed)));
-        for (var i = 0; i < length(entries); i++) {
-            var entry = entries[i];
-            var title = cadr(assoc("'title", entry))
-            var name = cadr(assoc("'id", entry))
-            var editlink = '<a href=\"' + '/page/?app=' + name + '\" target=\"_parent\">';
-            var domainlink = '<a href=\"' + applink(name) + '\" target=\"' + '_blank' + '\">' + name + '.' + window.location.hostname + '</a>';
-            var category = 'coolapps';
-            var updated = 'Feb 4, 2011';
-            var sharing = 'Public';
-
-            apps += '<tr class="trb"><td>';
-            apps += editlink + '<img src="/public/app.png" width="50" height="50" style="width: 50px; height: 50px; margin-right: 10px; vertical-align: middle;"></img>' + '</a>';
-            apps += '&nbsp;' + editlink + name + '</a></td>';
-            apps += '<td>' + domainlink + '</td>';
-            apps += '<td>' + category + '</td>';
-            apps += '<td class="tdw">' + title + '</td>';
-            apps += '<td>' + updated + '</td>';
-            apps += '<td>' + sharing + '</td>';
-            apps += '</tr>';
-        }
-        apps += '</table>';
-        $('apps').innerHTML = apps;
-
-        // Show the page
-        ui.showbody();
-    }
-
-    if (sync) {
-        display(dashboard.get(''));
-    } else {
-        dashboard.get('', function(doc) {
-            display(doc);
-        });
-    }
-}
-
-/**
- * Default field values.
- */
-var deftitle = 'Enter the title of your app here';
-var defcategory = 'Cool Apps';
-var defdate = 'Feb 4, 2011';
-var defdesc = 'Enter a short description of your app here';
-
-/**
- * Display create app form.
- */
-$('createAppButton').onclick = function() {
-    $('appName').value = '';
-    $('appDomain').innerHTML = '.' + window.location.hostname;
-    $('appTitle').value = deftitle;
-    $('appCategory').value = defcategory;
-    $('appDescription').value = defdesc;
-    $('newAppHeader').style.borderStyle = 'solid';
-    $('newApp').style.visibility = 'visible';
-    $('appName').focus();
-    return false;
-};
-
-/**
- * Create an app.
- */
-$('createAppOKButton').onclick = function() {
-    var name = $('appName').value;
-    if (name == '')
-        return false;
-    var title = $('appTitle').value;
-    var app = mklist(mklist("'entry", mklist("'title", title != deftitle && title != ''? title : name), mklist("'id", name)));
-    var entry = atom.writeATOMEntry(valuesToElements(app));
-    dashboard.put(name, car(entry));
-    getapps();
-    $('newApp').style.visibility = 'hidden';
-    return false;
-};
-
-/**
- * Cancel creating an app.
- */
-$('createAppCancelButton').onclick = function() {
-    $('newApp').style.visibility = 'hidden';
-    return false;
-};
-
-/**
- * Delete an app.
- */
-/*
-$('deleteAppLink').onclick = function() {
-    var apps = $('apps');
-    if (isNil(apps))
-        return false;
-    if (isNil(apps.length))
-        apps = mklist(apps);
-    for (var i = 0; i < length(apps); i++) {
-        if (apps[i].checked) {
-            var name = apps[i].value;
-            dashboard.del(name);
-        }
-    }
-    getapps();
-    return false;
-};
-*/
-
-// Get and display the list of apps
-getapps(true);
-
-</script>
-</body>
-</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
deleted file mode 100644
index 52b97b7271..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>
-<title>App Dashboard</title>
-<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
-<meta name="apple-mobile-web-app-capable" content="yes"/>
-<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-<link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-</head>
-<body class="delayed">
-<div id="menu"></div>
-
-<h1 id="h1"></h1>
-<br/>
-
-<div id="dashboard"></div>
-
-<script type="text/javascript">
-
-// Load the menu bar
-ui.loadwidget('menu', '/menu.html', ui.showbody);
-
-$('h1').innerHTML = hometitle(window.location.hostname);
-
-// Load the dashboard
-$('dashboard').innerHTML =
-    '<iframe id="dashboardFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="dashboard.html"></iframe>';
-
-</script>
-
-</body>
-</html>
-
diff --git a/sca-cpp/trunk/modules/edit/htdocs/data/index.html b/sca-cpp/trunk/modules/edit/htdocs/data/index.html
index 2682acde07..1f078f7b87 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/data/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/data/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -27,18 +28,11 @@ document.title = 'View - ' + window.location.hostname.split('.')[0] + '/' + cn;
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css">
+<link rel="stylesheet" type="text/css" href="/ui-min.css">
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/elemutil.js"></script>
-<script type="text/javascript" src="/xmlutil.js"></script>
-<script type="text/javascript" src="/atomutil.js"></script>
-<script type="text/javascript" src="/jsonutil.js"></script>
-<script type="text/javascript" src="/scdl.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
 </head>  
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
 
 <div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
 
@@ -75,15 +69,14 @@ function datatable(e) {
  */
 function mkdoctable(doc) {
     var tr = '<tr><td class="datatdl">' + 'value' + '</td>' + '<td class="datatdr">' + doc + '</td></tr>';
-    return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + tr + '</table>';
+    return '<table class="datatable ' + (window.name == 'previewFrame'? ' databg' : '') + '" style="width: 100%;">' + tr + '</table>';
 }
 
 /**
  * Get and display the contents of the current component.
  */
 function getdata() {
-    comp.get('', function(doc) {
-
+    return comp.get('', function(doc) {
         if (json.isJSON(mklist(doc)))
             return display(datatable(json.readJSON(mklist(doc))));
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
deleted file mode 100644
index 1b927de48d..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
+++ /dev/null
@@ -1,326 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>  
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/elemutil.js"></script>
-<script type="text/javascript" src="/xmlutil.js"></script>
-<script type="text/javascript" src="/atomutil.js"></script>
-<script type="text/javascript" src="/scdl.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
-<script type="text/javascript" src="graph.js"></script>
-</head>  
-<body class="delayed">
-
-<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
-
-<table style="width: 100%;">
-<tr>
-<th class="thl" style="width: 225px; min-width: 225px;">Palette</th>
-
-<th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;">
-<input id="compName" type="text" value="component name" title="Component name" style="position: relative; width: 200px;"/>
-<input id="propValue" type="text" value="property value" title="Component property value" style="position: relative; width: 300px;"/>
-<input type="button" id="autoplayButton" title="Turn preview on/off" style="font-weight: bold;" Value="Preview is on"/>
-<span id="compValue" style="position: relative; font-weight: normal;"></span>
-<span id="compDebug" style="position: relative; font-weight: normal;"></span>
-</th>
-
-<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
-<input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/>
-</th>
-</tr>
-
-<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2">
-</td></tr>
-</table>
-
-<div style="position:absolute; top: 40px; left: 240px; right: 0px; height: 5000px;">
-<iframe id="dataFrame" class="databg" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0"></iframe>
-</div>
-
-</div>
-
-<script type="text/javascript">
-if (ui.isIE()) $('bodydiv').style.right = -20;
-
-var editWidget = sca.component("EditWidget");
-var palettes = sca.reference(editWidget, "palettes");
-var apps = sca.reference(editWidget, "apps");
-
-// Setup remote log
-//rconsole = sca.defun(sca.reference(editWidget, "log"), "log");
-
-/**
- * The current app and component names.
- */
-var appname = ui.queryParams()['app'];
-var compname = '';
-
-/**
- * The current app composite and corresponding saved XML content.
- */
-var savedcomposxml = '';
-var composite;
-
-/**
- * Return the composite in an ATOM entry.
- */
-function atomcomposite(doc) {
-    var entry = atom.readATOMEntry(mklist(doc));
-    if (isNil(entry))
-        return mklist();
-    var content = namedElementChild("'content", car(entry));
-    if (content == null)
-        return mklist();
-    return elementChildren(content);
-}
-
-/**
- * Get and display an app.
- */
-function getapp(name, g) {
-    if (isNil(name))
-        return;
-    apps.get(name, function(doc) {
-        composite = atomcomposite(doc);
-        if (isNil(composite)) {
-
-            // Create a default empty composite if necessary
-            var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' +
-                'targetNamespace="http://' + name + '" ' +
-                'name="' + name + '">' +
-                '</composite>';
-            composite = readXML(mklist(x));
-        }
-        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, oncompselect, g);
-
-        // Track the saved composite XML
-        savedcomposxml = car(writeXML(composite, false));
-
-        // Show the page
-        ui.showbody();
-    });
-}
-
-/**
- * Get and display a palette of components.
- */
-function getpalette(name, g, bg, palette, gpalettes) {
-    if (isNil(name))
-        return;
-    palettes.get(name, function(doc) {
-        gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(80,0));
-        graph.display(gpalettes[name], name == spalette? g : bg);
-    });
-}
-
-/**
- * Install a palette, including a button to select the palette, and
- * the palette content.
- */
-function installpalette(name, pos, g, bg, palette, gpalettes) {
-    var b = graph.mkbutton(name, pos);
-    graph.display(mklist(b), g);
-    b.onclick = function() {
-
-        // Display the selected palette
-        spalette = name;
-        for (var pn in gpalettes)
-            graph.display(gpalettes[pn], pn == spalette? g : bg);
-    }
-    getpalette(name, g, bg, palette, gpalettes);
-}
-
-/**
- * Handle save button click event.
- */
-$('saveButton').onclick = function(e) {
-    return save();
-};
-
-/**
- * Save the current composite.
- */
-function save() {
-    $('saveButton').value = 'Saving';
-    savedcomposxml = car(writeXML(composite, false));
-    var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
-        '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml">' +
-        savedcomposxml + '</content></entry>';
-    apps.put(appname, entry, function() {
-        if (savedcomposxml == car(writeXML(composite, false)))
-            $('saveButton').value = 'Saved';
-        return true;
-    });
-    return true;
-}
-
-/**
- * Handle a composite change event.
- */
-function oncomposchange(prop) {
-    if (savedcomposxml == car(writeXML(composite, false)))
-        return false;
-    $('saveButton').value = 'Save now';
-
-    // Save property changes right away
-    if (prop)
-        return save();
-
-    // Autosave other changes after 3 seconds
-    $('saveButton').value = 'Save now';
-    setTimeout(function() {
-        if (savedcomposxml == car(writeXML(composite, false)))
-            return false;
-        return save();
-    }, 3000);
-    return true;
-}
-
-/**
- * Return the link to a component value.
- */
-function compvaluelink(appname, cname) {
-    if (cname == '' || isNil(cname))
-        return '';
-    var protocol = window.location.protocol;
-    var host = window.location.hostname;
-    var port = ':' + window.location.port;
-    if (port == ':80' || port == ':443' || port == ':')
-        port = '';
-    var link = protocol + '//' + appname + '.' + host + port + '/data/?component=' + cname;
-    return link;
-}
-
-/**
- * Return the link to a component raw data.
- */
-function compdebuglink(appname, cname) {
-    if (cname == '' || isNil(cname))
-        return '';
-    var protocol = window.location.protocol;
-    var host = window.location.hostname;
-    var port = ':' + window.location.port;
-    if (port == ':80' || port == ':443' || port == ':')
-        port = '';
-    var link = protocol + '//' + appname + '.' + host + port + '/components/' + cname;
-    return link;
-}
-
-/**
- * Track whether we're always showing the result data of the selected component.
- */
-var autoplay = true;
-
-/**
- * Show the result data of a component.
- */
-function showData(cname) {
-    var rframe = $('dataFrame');
-    if (cname == '') {
-        rframe.src = '';
-        return true;
-    }
-    rframe.src = compvaluelink(appname, cname);
-    return true;
-}
-
-/**
- * Handle a component select event.
- */
-function oncompselect(appname, cname) {
-    if (cname == compname)
-        return true;
-    compname = cname;
-    var link = compvaluelink(appname, cname);
-    $('compValue').innerHTML = link != ''? '<input type="button" id="playButton" title="View the component value" style="font-weight: bold;" value="View" onclick="playcomp()"/>' : '';
-    $('compDebug').innerHTML = link != ''? '<input type="button" id="debugButton" title="View the component raw data" style="font-weight: bold;" value="URL" onclick="debugcomp()"/>' : '';
-
-    if (autoplay)
-        return showData(cname);
-    return true;
-}
-
-/**
- * Play the current component.
- */
-function playcomp() {
-    var link = compvaluelink(appname, compname);
-    return window.open(link, '_' + appname + '_' + compname);
-}
-
-/**
- * Debug the current component.
- */
-function debugcomp() {
-    var link = compdebuglink(appname, compname);
-    return window.open(link, '_' + appname + '_' + compname);
-}
-
-/**
- * Handle autoplay on/off click event.
- */
-$('autoplayButton').onclick = function(e) {
-    if (autoplay) {
-        autoplay = false;
-        showData('');
-        $('autoplayButton').value = 'Preview is off';
-        return true;
-    }
-    autoplay = true;
-    showData(compname);
-    $('autoplayButton').value = 'Preview is on';
-    return true;
-};
-
-// Init the play app button
-
-
-// Create editor graph area
-var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'));
-var bg = graph.mkgroup(graph.mkpath());
-
-// Install the palettes
-var gpalettes = new Array();
-var spalette = 'control';
-var pos = graph.mkpath();
-installpalette('control', pos.rmove(0,0), g, bg, spalette, gpalettes);
-installpalette('values', pos.rmove(0,40), g, bg, spalette, gpalettes);
-installpalette('lists', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('transform', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('text', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('http', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('talk', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('social', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('search', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('database', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('logic', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('math', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-installpalette('python', pos.rmove(0, 40), g, bg, spalette, gpalettes);
-
-// Get and display the current app
-getapp(appname, g);
-
-</script>
-</body>
-</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
index 38909756dc..2de6a40d6c 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
@@ -53,15 +53,15 @@ graph.colors.lightgray1 = '#dcdcdc'
 /**
  * Default positions and sizes.
  */
-var palcx = 250;
-var trashcx = 230;
+var palcx = 2500;
+var trashcx = 2480;
 var proxcx = 20;
 var proxcy = 20;
 var buttoncx = 65;
 var buttoncy = 30;
 var curvsz = 6;
 var tabsz = 2;
-var fontsz = '';
+var fontsz = '11px';
 
 /**
  * Base path class.
@@ -103,986 +103,520 @@ graph.BasePath = function() {
 };
 
 /**
- * Rendering functions that work both with VML and SVG.
+ * SVG rendering functions.
  */
 
+graph.svgns='http://www.w3.org/2000/svg';
+
 /**
- * VML rendering.
+ * Make an SVG graph.
  */
-if (ui.isIE()) {
-
-    graph.vmlns='urn:schemas-microsoft-com:vml';
-    document.write('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />');
+graph.mkgraph = function(pos, cvalue, cadd, cdelete) {
+
+    // Create a div element to host the graph
+    var div = document.createElement('div');
+    div.id = 'svgdiv';
+    div.style.position = 'absolute';
+    div.style.left = ui.pixpos(pos.xpos());
+    div.style.top = ui.pixpos(pos.ypos());
+    div.style.overflow = 'hidden';
+    document.body.appendChild(div);
+
+    // Create SVG element
+    var svg = document.createElementNS(graph.svgns, 'svg');
+    svg.style.height = ui.pixpos(5000);
+    svg.style.width = ui.pixpos(5000);
+    div.appendChild(svg);
+
+    // Track element dragging and selection
+    graph.dragging = null;
+    graph.selected = null;
+    cvalue.disabled = true;
+    cdelete.disabled = true;
 
     /**
-     * Make a VML graph.
+     * Find the first draggable element in a hierarchy of elements.
      */
-    graph.mkgraph = function(pos, cname, pvalue) {
-
-        // Create div element to host the graph
-        var div = document.createElement('div');
-        div.id = 'vmldiv';
-        div.style.position = 'absolute';
-        div.style.left = pos.xpos();
-        div.style.top = pos.ypos();
-        document.body.appendChild(div);
-
-        // Create a VML group
-        var vmlg = document.createElement('v:group');
-        vmlg.style.width = 5000;
-        vmlg.style.height = 5000;
-        vmlg.coordsize = '5000,5000';
-        div.appendChild(vmlg);
-
-        // Track element dragging and selection
-        graph.dragging = null;
-        graph.selected = null;
-        cname.disabled = true;
-        pvalue.disabled = true;
-
-        /**
-         * Find the first draggable element in a hierarchy of elements.
-         */
-        function draggable(n) {
-            if (n == vmlg)
-                return null;
-            if (n.nodeName == 'group' && n.id != '')
-                return n;
-            return draggable(n.parentNode);
-        }
-
-        /**
-         * Handle a mousedown event.
-         */
-        vmlg.onmousedown = function() {
-            window.event.returnValue = false;
-
-            // Find draggable element
-            graph.dragging = draggable(window.event.srcElement);
-            graph.selected = graph.dragging;
-            if (graph.dragging == null) {
-
-                // Reset current selection
-                cname.value = '';
-                cname.disabled = true;
-                pvalue.value = '';
-                pvalue.disabled = true;
-
-                // Trigger component select event
-                vmlg.oncompselect('');
-                return false;
-            }
-
-            // Clone component from the palette
-            var compos = scdl.composite(vmlg.compos);
-            if (graph.dragging.id.substring(0, 8) == 'palette:') {
-                graph.dragging = graph.clonepalette(graph.dragging, compos);
-                graph.selected = graph.dragging;
-            }
-
-            // Cut wire to component
-            if (graph.dragging.parentNode != vmlg)
-                setElement(compos, graph.cutwire(graph.dragging, compos, vmlg));
+    function draggable(n) {
+        if (n == div || n == svg || n == null)
+            return null;
+        if (n.nodeName == 'g' && !isNil(n.id) && n.id != '')
+            return n;
+        return draggable(n.parentNode);
+    }
 
-            // Bring component to the top
-            graph.bringtotop(graph.dragging, vmlg);
+    /**
+     * Handle a mouse down event.
+     */
+    div.onmousedown = function(e) {
 
-            // Remember mouse position
-            graph.dragX = window.event.clientX;
-            graph.dragY = window.event.clientY;
-            vmlg.setCapture();
+        // Find draggable component
+        graph.dragging = draggable(e.target);
+        graph.selected = graph.dragging;
+        if (graph.dragging == null) {
 
-            // Update the component name and property value fields
-            cname.value = graph.selected.id;
-            cname.disabled = false;
-            pvalue.value = graph.property(graph.selected.comp);
-            pvalue.disabled = !graph.hasproperty(graph.selected.comp);
+            // Reset current selection
+            cvalue.value = '';
+            cvalue.disabled = true;
+            cdelete.disabled = true;
 
             // Trigger component select event
-            vmlg.oncompselect(vmlg.appname, graph.selected.id);
-            return false;
-        };
-
-        /**
-         * Handle a mouseup event.
-         */
-        vmlg.onmouseup = function() {
-            if (graph.dragging == null)
-                return false;
-
-            if (graph.dragging.parentNode == vmlg && graph.dragging.id.substring(0, 8) != 'palette:') {
-                var gpos = graph.relpos(graph.dragging);
-                if (gpos.xpos() >= trashcx) {
-
-                    // If component close enough to editing area, move it there
-                    if (gpos.xpos() < palcx)
-                        graph.move(graph.dragging, graph.mkpath().move(palcx, gpos.ypos()));
-
-                    // Add new dragged component to the composite
-                    if (isNil(graph.dragging.compos)) {
-                        var compos = scdl.composite(vmlg.compos);
-                        setElement(compos, graph.addcomp(graph.dragging.comp, compos));
-                        graph.dragging.compos = vmlg.compos;
-                    }
-
-                    // Update component position
-                    setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, vmlg)));
-
-                    // Wire component to neighboring reference
-                    if (!isNil(graph.dragging.svcpos)) {
-                        var compos = scdl.composite(vmlg.compos);
-                        setElement(compos, grah.clonerefs(graph.wire(graph.dragging, compos, vmlg)));
-                    }
-
-                } else {
-
-                    // Discard component dragged out of composite
-                    vmlg.removeChild(graph.dragging);
-                    if (!isNil(graph.dragging.compos)) {
-                        var compos = scdl.composite(vmlg.compos);
-                        setElement(compos, graph.clonerefs(graph.gcollect(graph.removecomp(graph.dragging.comp, compos))));
-                    }
-
-                    // Reset current selection
-                    graph.selected = null;
-                    cname.value = '';
-                    cname.disabled = true;
-                    pvalue.value = '';
-                    pvalue.disabled = true;
-
-                    // Trigger component select event
-                    vmlg.oncompselect('');
-                }
-
-                // Trigger composite change event
-                vmlg.oncomposchange(false);
-            }
-
-            // Forget current dragged component
-            graph.dragging = null;
-            vmlg.releaseCapture();
-
-            // Refresh the composite
-            graph.refresh(vmlg);
-            return false;
-        };
+            svg.oncompselect('');
+            return true;
+        }
 
-        /**
-         * Handle a mousemove event.
-         */
-        vmlg.onmousemove = function() {
-            if (graph.dragging == null)
-                return false;
+        // Clone component from the palette
+        var compos = scdl.composite(svg.compos);
+        if (graph.dragging.id.substring(0, 8) == 'palette:') {
+            graph.dragging = graph.clonepalette(graph.dragging, compos);
+            graph.selected = graph.dragging;
 
-            // Calculate new position of dragged element
+            // Move into the editing area and hide the palette
             var gpos = graph.relpos(graph.dragging);
-            var newX = gpos.xpos() + (window.event.clientX - graph.dragX);
-            var newY = gpos.ypos() + (window.event.clientY - graph.dragY);
-            if (newX >= 0)
-                graph.dragX = window.event.clientX;
-            else
-                newX = 0;
-            if (newY >= 0)
-                graph.dragY = window.event.clientY;
-            else
-                newY = 0;
-
-            // Move the dragged element
-            graph.move(graph.dragging, graph.mkpath().move(newX, newY));
+            graph.move(graph.dragging, graph.mkpath().move(gpos.xpos() + palcx, gpos.ypos()));
+            div.style.left = ui.pixpos(palcx * -1);
+        }
 
-            return false;
-        };
+        // Cut wire to component
+        if (graph.dragging.parentNode != svg)
+            setElement(compos, graph.sortcompos(graph.cutwire(graph.dragging, compos, svg)));
 
-        /**
-         * Handle field on change events.
-         */
-        cname.onchange = function() {
-            if (graph.selected == null)
-                return false;
+        // Bring component to the top
+        graph.bringtotop(graph.dragging, svg);
 
-            // Change component name and refactor references to it
-            var compos = scdl.composite(vmlg.compos);
-            cname.value = graph.ucid(cname.value, compos);
-            cname.disabled = false;
-            graph.selected.id = cname.value;
-            setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value));
+        // Remember current mouse position
+        var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+        graph.dragX = pos.screenX;
+        graph.dragY = pos.screenY;
 
-            // Trigger component select event
-            vmlg.oncompselect(vmlg.appname, graph.selected.id);
+        // Update the component name and property value fields
+        cvalue.value = graph.hasproperty(graph.selected.comp)? graph.property(graph.selected.comp) : graph.selected.id;
+        cvalue.disabled = false;
+        cdelete.disabled = false;
+        
+        // Trigger component select event
+        svg.oncompselect(graph.selected.id);
+
+        if (e.preventDefault)
+            e.preventDefault();
+        else
+            e.returnValue = false;
+        return true;
+    };
 
-            // Refresh the composite
-            graph.refresh(vmlg);
+    // Support touch devices
+    div.ontouchstart = div.onmousedown;
 
-            // Trigger composite change event
-            vmlg.oncomposchange(true);
-            return false;
-        };
+    /**
+     * Handle a mouse up event.
+     */
+    div.onmouseup = function(e) {
+        if (graph.dragging == null)
+            return true;
 
-        pvalue.onchange = function() {
-            if (graph.selected == null)
-                return false;
+        if (graph.dragging.parentNode == svg && graph.dragging.id.substring(0, 8) != 'palette:') {
+            var gpos = graph.relpos(graph.dragging);
+            if (gpos.xpos() >= trashcx) {
 
-            // Change the component property value
-            graph.setproperty(graph.selected.comp, pvalue.value);
-            pvalue.value = graph.property(graph.selected.comp);
-            pvalue.disabled = !graph.hasproperty(graph.selected.comp);
+                // If component close enough to editing area, move it there
+                if (gpos.xpos() < palcx)
+                    graph.move(graph.dragging, graph.mkpath().move(palcx, gpos.ypos()));
 
-            // Refresh the composite
-            graph.refresh(vmlg);
+                // Add new dragged component to the composite
+                if (isNil(graph.dragging.compos)) {
+                    var compos = scdl.composite(svg.compos);
+                    setElement(compos, graph.sortcompos(graph.addcomp(graph.dragging.comp, compos)));
+                    graph.dragging.compos = svg.compos;
+                }
 
-            // Trigger composite change event
-            vmlg.oncomposchange(true);
-            return false;
-        };
+                // Update component position
+                setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, svg)));
 
-        // Create hidden spans to help compute the width of
-        // component, reference and property titles
-        graph.comptitlewidthdiv = document.createElement('span');
-        graph.comptitlewidthdiv.style.visibility = 'hidden'
-        if (fontsz != '')
-            graph.comptitlewidthdiv.style.fontSize = fontsz;
-        div.appendChild(graph.comptitlewidthdiv);
-
-        graph.reftitlewidthdiv = document.createElement('span');
-        graph.reftitlewidthdiv.style.visibility = 'hidden'
-        if (fontsz != '')
-            graph.comptitlewidthdiv.style.fontSize = fontsz;
-        div.appendChild(graph.reftitlewidthdiv);
-
-        graph.proptitlewidthdiv = document.createElement('span');
-        graph.proptitlewidthdiv.style.visibility = 'hidden'
-        if (fontsz != '')
-            graph.comptitlewidthdiv.style.fontSize = fontsz;
-        div.appendChild(graph.proptitlewidthdiv);
-
-        return vmlg;
-    };
+                // Wire component to neighboring reference
+                if (!isNil(graph.dragging.svcpos)) {
+                    var compos = scdl.composite(svg.compos);
+                    setElement(compos, graph.sortcompos(graph.clonerefs(graph.wire(graph.dragging, compos, svg))));
+                }
 
-    /**
-     * Make a shape path.
-     */
-    graph.mkpath = function() {
-        function Path() {
-            this.BasePath = graph.BasePath;
-            this.BasePath();
-
-            this.clone = function() {
-                return graph.mkpath().pos(this.xpos(), this.ypos());
-            };
-
-            this.move = function(x, y) {
-                this.path += 'M ' + x + ',' + y + ' '; 
-                return this.pos(x, y);
-            };
-
-            this.line = function(x, y) {
-                this.path += 'L ' + x + ',' + y + ' ';
-                return this.pos(x, y);
-            };
-
-            this.curve = function(x1, y1, x, y) {
-                this.path += 'QB ' + x1 + ',' + y1 + ',' + x + ',' + y + ' ';
-                return this.pos(x, y);
-            };
-
-            this.end = function() {
-                this.path += 'X E';
-                return this;
-            };
-        }
+            } else {
 
-        return new Path();
-    };
+                // Discard component dragged out of composite
+                svg.removeChild(graph.dragging);
+                if (!isNil(graph.dragging.compos)) {
+                    var compos = scdl.composite(svg.compos);
+                    setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.dragging.comp, compos)))));
+                }
 
-    /**
-     * Return an element representing a title.
-     */
-    graph.mktitle = function(t, style, pos) {
-        var title = document.createElement('v:textbox');
-        title.style.position = 'absolute';
-        title.style.left = pos.xpos() + 2;
-        title.style.top = pos.ypos();
-        title.inset = '' + 6 + 'px ' + pos.ypos() + 'px 0px 0px';
-        if (style != '')
-            title.style.cssText = style;
-        if (fontsz != '')
-            title.style.fontSize = fontsz;
-        var tnode = document.createTextNode(t);
-        title.appendChild(tnode);
-        return title;
-    };
+                // Reset current selection
+                graph.selected = null;
+                cvalue.value = '';
+                cvalue.disabled = true;
+                cdelete.disabled = true;
 
-    /**
-     * Return an element representing the title of a component.
-     */
-    graph.comptitle = function(comp) {
-        var tsvcs = graph.tsvcs(comp);
-        var lsvcs = graph.lsvcs(comp);
-        var pos = graph.mkpath().move(isNil(lsvcs)? tabsz : (tabsz * 5), isNil(tsvcs)? tabsz : (tabsz * 5));
-        return graph.mktitle(graph.title(comp), graph.compstyle(comp), pos);
-    };
+                // Trigger component select event
+                svg.oncompselect('');
+            }
+        }
 
-    /**
-     * Return the width of the title of a component.
-     */
-    graph.comptitlewidth = function(comp) {
-        var t = graph.title(comp);
-        graph.comptitlewidthdiv.innerHTML = t;
-        var twidth = graph.comptitlewidthdiv.offsetWidth + 2;
-        graph.comptitlewidthdiv.innerHTML = '';
-        return twidth;
-    };
+        // Forget current dragged component
+        graph.dragging = null;
 
-    /**
-     * Return an element representing the value of a property.
-     */
-    graph.proptitle = function(comp) {
-        var tsvcs = graph.tsvcs(comp);
-        var lsvcs = graph.lsvcs(comp);
-        var pos = graph.mkpath().move(graph.comptitlewidth(comp) + 7 + (isNil(lsvcs)? tabsz : (tabsz * 5)), isNil(tsvcs)? tabsz : (tabsz * 5));
-        return graph.mktitle(graph.propertytitle(comp), graph.propstyle(comp), pos);
-    };
+        // Refresh the composite
+        graph.refresh(svg);
 
-    /**
-     * Return the width of the value of a property.
-     */
-    graph.proptitlewidth = function(comp) {
-        var t = graph.proptitle(comp);
-        graph.proptitlewidthdiv.innerHTML = t;
-        var twidth = graph.proptitlewidthdiv.offsetWidth + 4;
-        graph.proptitlewidthdiv.innerHTML = '';
-        return twidth;
+        // Trigger composite change event
+        svg.oncomposchange(false);
+        return true;
     };
 
-    /**
-     * Return an element representing the title of a reference.
-     */
-    graph.reftitle = function(ref) {
-        return graph.mktitle(graph.title(ref), graph.refstyle(ref), graph.mkpath().move(25,25));
-    };
+    // Support touch devices
+    div.ontouchend = div.onmouseup;
 
-    /**
-     * Return the width of the title of a reference.
-     */
-    graph.reftitlewidth = function(ref) {
-        var t = graph.title(ref);
-        graph.reftitlewidthdiv.innerHTML = t;
-        var twidth = graph.reftitlewidthdiv.offsetWidth;
-        graph.reftitlewidthdiv.innerHTML = '';
-        return twidth;
-    };
+    // Handle a mouse click event.
+    div.onclick = function(e) {
+        if (graph.dragging == null && (e.target == div || e.target == svg)) {
 
-    /**
-     * Return a node representing a component.
-     */
-    graph.compnode = function(comp, cassoc, pos) {
-
-        // Make the component and property title elements
-        var title = graph.comptitle(comp);
-        var prop = graph.proptitle(comp);
-
-        // Compute the component shape path
-        var path = graph.comppath(comp, cassoc);
-        var d = path.str();
-
-        // Create the main component shape
-        var shape = document.createElement('v:shape');
-        shape.style.width = 5000;
-        shape.style.height = 5000;
-        shape.coordsize = '5000,5000';
-        shape.path = d;
-        shape.fillcolor = graph.color(comp);
-        shape.stroked = 'false';
-
-        // Create an overlay contour shape
-        var contour = document.createElement('v:shape');
-        contour.style.width = 5000;
-        contour.style.height = 5000;
-        contour.coordsize = '5000,5000';
-        contour.path = d;
-        contour.filled = 'false';
-        contour.strokecolor = graph.colors.gray;
-        contour.strokeweight = '1';
-        contour.style.left = 1;
-        contour.style.top = 1;
-        var stroke = document.createElement('v:stroke');
-        stroke.opacity = '20%';
-        contour.appendChild(stroke);
-
-        // Create a group and add the component and contour shapes to it
-        var g = document.createElement('v:group');
-        g.id = scdl.name(comp);
-        g.style.width = 5000;
-        g.style.height = 5000;
-        g.coordsize = '5000,5000';
-        g.style.left = pos.xpos();
-        g.style.top = pos.ypos();
-        g.appendChild(shape);
-        shape.appendChild(title);
-        shape.appendChild(prop);
-        g.appendChild(contour)
-
-        // Store the component and the positions of its services
-        // and references in the component shape
-        g.comp = comp;
-        g.refpos = reverse(path.refpos);
-        g.svcpos = reverse(path.svcpos);
-
-        return g;
-    };
+            // Dismiss the palette
+            if (ui.numpos(div.style.left) != (palcx * -1))
+            	div.style.left = ui.pixpos(palcx * -1);
+        }
+        return true;
+    }
 
     /**
-     * Return a graphical group.
+     * Handle a mouse move event.
      */
-    graph.mkgroup = function(pos) {
-        var g = document.createElement('v:group');
-        g.style.left = pos.xpos();
-        g.style.top = pos.ypos();
-        return g;
-    };
+    window.onmousemove = function(e) {
+        if (graph.dragging == null)
+            return true;
 
-    /**
-     * Return a node representing a button.
-     */
-    graph.mkbutton = function(t, pos) {
-
-        // Make the title element
-        var title = graph.mktitle(t, '', graph.mkpath().move(4,4));
-
-        // Compute the path of the button shape
-        var path = graph.buttonpath().str();
-
-        // Create the main button shape
-        var shape = document.createElement('v:shape');
-        shape.style.width = 5000;
-        shape.style.height = 5000;
-        shape.coordsize = '5000,5000';
-        shape.path = path;
-        shape.fillcolor = graph.colors.lightgray;
-        shape.stroked = 'false';
-
-        // Create an overlay contour shape
-        var contour = document.createElement('v:shape');
-        contour.style.width = 5000;
-        contour.style.height = 5000;
-        contour.coordsize = '5000,5000';
-        contour.path = path;
-        contour.filled = 'false';
-        contour.strokecolor = graph.colors.gray;
-        contour.strokeweight = '1';
-        contour.style.left = 1;
-        contour.style.top = 1;
-        var stroke = document.createElement('v:stroke');
-        stroke.opacity = '20%';
-        contour.appendChild(stroke);
-
-        // Create a group and add the button and contour shapes to it
-        var g = document.createElement('v:group');
-        g.style.width = 5000;
-        g.style.height = 5000;
-        g.coordsize = '5000,5000';
-        g.style.left = pos.xpos();
-        g.style.top = pos.ypos();
-        g.appendChild(shape);
-        shape.appendChild(title);
-        g.appendChild(contour)
-        return g;
-    };
+        // Calculate new position of dragged element
+        var gpos = graph.relpos(graph.dragging);
+        var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+        var newX = gpos.xpos() + (pos.screenX - graph.dragX);
+        var newY = gpos.ypos() + (pos.screenY - graph.dragY);
+        if (newX >= 0)
+            graph.dragX = pos.screenX;
+        else
+            newX = 0;
+        if (newY >= 0)
+            graph.dragY = pos.screenY;
+        else
+            newY = 0;
 
-    /**
-     * Return the relative position of a node.
-     */
-    graph.relpos = function(e) {
-        var curX = ui.csspos(e.style.left);
-        var curY = ui.csspos(e.style.top);
-        return graph.mkpath().move(curX, curY);
-    };
+        // Move the dragged element
+        graph.move(graph.dragging, graph.mkpath().move(newX, newY));
 
-    /**
-     * Move a node.
-     */
-    graph.move = function(e, pos) {
-        e.style.left = pos.xpos();
-        e.style.top = pos.ypos();
+        return true;
     };
 
-} else {
-
-    /**
-     * SVG rendering.
-     */
-    graph.svgns='http://www.w3.org/2000/svg';
+    // Support touch devices
+    div.ontouchmove = window.onmousemove;
 
     /**
-     * Make an SVG graph.
+     * Handle field on change events.
      */
-    graph.mkgraph = function(pos, cname, pvalue) {
-
-        // Create a div element to host the graph
-        var div = document.createElement('div');
-        div.id = 'svgdiv';
-        div.style.position = 'absolute';
-        div.style.left = pos.xpos();
-        div.style.top = pos.ypos();
-        // -webkit-user-select: none;
-        document.body.appendChild(div);
-
-        // Create SVG element
-        var svg = document.createElementNS(graph.svgns, 'svg');
-        svg.style.height = 5000;
-        svg.style.width = 5000;
-        div.appendChild(svg);
-
-        // Track element dragging and selection
-        graph.dragging = null;
-        graph.selected = null;
-        cname.disabled = true;
-        pvalue.disabled = true;
-
-        /**
-         * Find the first draggable element in a hierarchy of elements.
-         */
-        function draggable(n) {
-            if (n == svg)
-                return null;
-            if (n.nodeName == 'g' && n.id != '')
-                return n;
-            return draggable(n.parentNode);
-        }
-
-        /**
-         * Handle a mouse down event.
-         */
-        svg.onmousedown = function(e) {
-            if (e.preventDefault)
-                e.preventDefault();
-            else
-                e.returnValue = false;
-
-            // Find draggable component
-            graph.dragging = draggable(e.target);
-            graph.selected = graph.dragging;
-            if (graph.dragging == null) {
-
-                // Reset current selection
-                cname.value = '';
-                cname.disabled = true;
-                pvalue.value = '';
-                pvalue.disabled = true;
-
-                // Trigger component select event
-                svg.oncompselect('');
-                return false;
-            }
+    cvalue.onchange = function() {
+        if (graph.selected == null)
+            return false;
 
-            // Clone component from the palette
+        // Change component name and refactor references to it
+        function changename() {
             var compos = scdl.composite(svg.compos);
-            if (graph.dragging.id.substring(0, 8) == 'palette:') {
-                graph.dragging = graph.clonepalette(graph.dragging, compos);
-                graph.selected = graph.dragging;
-            }
+            cvalue.value = graph.ucid(cvalue.value, compos);
+            graph.selected.id = cvalue.value;
+            setElement(compos, graph.sortcompos(graph.renamecomp(graph.selected.comp, compos, cvalue.value)));
 
-            // Cut wire to component
-            if (graph.dragging.parentNode != svg)
-                setElement(compos, graph.cutwire(graph.dragging, compos, svg));
-
-            // Bring component to the top
-            graph.bringtotop(graph.dragging, svg);
-
-            // Remember current mouse position
-            var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            graph.dragX = pos.screenX;
-            graph.dragY = pos.screenY;
-
-            // Update the component name and property value fields
-            cname.value = graph.selected.id;
-            cname.disabled = false;
-            pvalue.value = graph.property(graph.selected.comp);
-            pvalue.disabled = !graph.hasproperty(graph.selected.comp);
-            
             // Trigger component select event
-            svg.oncompselect(svg.appname, graph.selected.id);
-            return false;
-        };
-
-        // Support touch devices
-        svg.ontouchstart = svg.onmousedown;
-
-        /**
-         * Handle a mouse up event.
-         */
-        window.onmouseup = function(e) {
-            if (graph.dragging == null)
-                return false;
-
-            if (graph.dragging.parentNode == svg && graph.dragging.id.substring(0, 8) != 'palette:') {
-                var gpos = graph.relpos(graph.dragging);
-                if (gpos.xpos() >= trashcx) {
-
-                    // If component close enough to editing area, move it there
-                    if (gpos.xpos() < palcx)
-                        graph.move(graph.dragging, graph.mkpath().move(palcx, gpos.ypos()));
-
-                    // Add new dragged component to the composite
-                    if (isNil(graph.dragging.compos)) {
-                        var compos = scdl.composite(svg.compos);
-                        setElement(compos, graph.addcomp(graph.dragging.comp, compos));
-                        graph.dragging.compos = svg.compos;
-                    }
-
-                    // Update component position
-                    setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, svg)));
-
-                    // Wire component to neighboring reference
-                    if (!isNil(graph.dragging.svcpos)) {
-                        var compos = scdl.composite(svg.compos);
-                        setElement(compos, graph.clonerefs(graph.wire(graph.dragging, compos, svg)));
-                    }
-
-                } else {
-
-                    // Discard component dragged out of composite
-                    svg.removeChild(graph.dragging);
-                    if (!isNil(graph.dragging.compos)) {
-                        var compos = scdl.composite(svg.compos);
-                        setElement(compos, graph.clonerefs(graph.gcollect(graph.removecomp(graph.dragging.comp, compos))));
-                    }
-
-                    // Reset current selection
-                    graph.selected = null;
-                    cname.value = '';
-                    cname.disabled = true;
-                    pvalue.value = '';
-                    pvalue.disabled = true;
-
-                    // Trigger component select event
-                    svg.oncompselect('');
-                }
-            }
-
-            // Forget current dragged component
-            graph.dragging = null;
+            svg.oncompselect(graph.selected.id);
 
             // Refresh the composite
             graph.refresh(svg);
 
             // Trigger composite change event
-            svg.oncomposchange(false);
+            svg.oncomposchange(true);
             return false;
-        };
+        }
 
-        // Support touch devices
-        window.top.onmouseup = window.onmouseup;
-        window.ontouchend = window.onmouseup;
-        window.gestureend = window.onmouseup;
-        window.top.gestureend = window.onmouseup;
-        window.top.ontouchend = window.onmouseup;
-        window.ontouchcancel = window.onmouseup;
-        window.top.ontouchcancel = window.onmouseup;
+        // Change the component property value
+        function changeprop() {
+            graph.setproperty(graph.selected.comp, cvalue.value);
+            cvalue.value = graph.property(graph.selected.comp);
+            cvalue.disabled = !graph.hasproperty(graph.selected.comp);
 
-        /**
-         * Handle a mouse move event.
-         */
-        window.onmousemove = function(e) {
-            if (graph.dragging == null)
-                return false;
-            if (e.preventDefault)
-                e.preventDefault();
-            else
-                e.returnValue = false;
-
-            // Calculate new position of dragged element
-            var gpos = graph.relpos(graph.dragging);
-            var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            var newX = gpos.xpos() + (pos.screenX - graph.dragX);
-            var newY = gpos.ypos() + (pos.screenY - graph.dragY);
-            if (newX >= 0)
-                graph.dragX = pos.screenX;
-            else
-                newX = 0;
-            if (newY >= 0)
-                graph.dragY = pos.screenY;
-            else
-                newY = 0;
-
-            // Move the dragged element
-            graph.move(graph.dragging, graph.mkpath().move(newX, newY));
+            // Refresh the composite
+            graph.refresh(svg);
 
+            // Trigger composite change event
+            svg.oncomposchange(true);
             return false;
-        };
-
-        // Support touch devices
-        window.top.onmousemove = window.onmousemove;
-        window.ontouchmove = window.onmousemove;
-        window.top.ontouchmove = window.onmousemove;
+        }
 
-        /**
-         * Handle field on change events.
-         */
-        cname.onchange = function() {
-            if (graph.selected == null)
-                return false;
+        return graph.hasproperty(graph.selected.comp)? changeprop() : changename();
+    };
+    
+    // Handle delete event
+    cdelete.onclick = function() {
+        if (graph.selected == null)
+            return false;
+        if (graph.selected.id.substring(0, 8) != 'palette:' && !isNil(graph.selected.compos)) {
 
-            // Change component name and refactor references to it
+            // Remove selected component
             var compos = scdl.composite(svg.compos);
-            cname.value = graph.ucid(cname.value, compos);
-            graph.selected.id = cname.value;
-            setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value));
+            setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.selected.comp, compos)))));
 
-            // Trigger component select event
-            svg.oncompselect(svg.appname, graph.selected.id);
+            // Reset current selection
+            graph.selected = null;
+            cvalue.value = '';
+            cvalue.disabled = true;
+            cdelete.disabled = true;
 
             // Refresh the composite
             graph.refresh(svg);
 
+            // Trigger component select event
+            svg.oncompselect('');
+
             // Trigger composite change event
             svg.oncomposchange(true);
-            return false;
-        };
-        
-        pvalue.onchange = function() {
-            if (graph.selected == null)
-                return false;
+        }
+        return false;
+    };
 
-            // Change the component property value
-            graph.setproperty(graph.selected.comp, pvalue.value);
-            pvalue.value = graph.property(graph.selected.comp);
-            pvalue.disabled = !graph.hasproperty(graph.selected.comp);
+    // Handle add event
+    cadd.onclick = function() {
 
-            // Refresh the composite
-            graph.refresh(svg);
+        // Show the palette
+        div.style.left = ui.pixpos(0);
+        return false;
+    };
 
-            // Trigger composite change event
-            svg.oncomposchange(true);
-            return false;
+    // Create a hidden SVG element to help compute the width
+    // of component and reference titles
+    graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg');
+    graph.titlewidthsvg.style.visibility = 'hidden';
+    graph.titlewidthsvg.style.height = ui.pixpos(0);
+    graph.titlewidthsvg.style.width = ui.pixpos(0);
+    div.appendChild(graph.titlewidthsvg);
+
+    return svg;
+};
+
+/**
+ * Make a path.
+ */
+graph.mkpath = function() {
+    function Path() {
+        this.BasePath = graph.BasePath;
+        this.BasePath();
+
+        this.clone = function() {
+            return graph.mkpath().pos(this.xpos(), this.ypos());
         };
 
-        // Create a hidden SVG element to help compute the width
-        // of component and reference titles
-        graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg');
-        graph.titlewidthsvg.style.visibility = 'hidden';
-        graph.titlewidthsvg.style.height = 0;
-        graph.titlewidthsvg.style.width = 0;
-        div.appendChild(graph.titlewidthsvg);
+        this.move = function(x, y) {
+            this.path += 'M' + x + ',' + y + ' '; 
+            return this.pos(x, y);
+        };
 
-        return svg;
-    };
+        this.line = function(x, y) {
+            this.path += 'L' + x + ',' + y + ' ';
+            return this.pos(x, y);
+        };
 
-    /**
-     * Make a path.
-     */
-    graph.mkpath = function() {
-        function Path() {
-            this.BasePath = graph.BasePath;
-            this.BasePath();
-
-            this.clone = function() {
-                return graph.mkpath().pos(this.xpos(), this.ypos());
-            };
-
-            this.move = function(x, y) {
-                this.path += 'M' + x + ',' + y + ' '; 
-                return this.pos(x, y);
-            };
-
-            this.line = function(x, y) {
-                this.path += 'L' + x + ',' + y + ' ';
-                return this.pos(x, y);
-            };
-
-            this.curve = function(x1, y1, x, y) {
-                this.path += 'Q' + x1 + ',' + y1 + ' ' + x + ',' + y + ' ';
-                return this.pos(x, y);
-            };
-
-            this.end = function() {
-                this.path += 'Z';
-                return this;
-            };
-        }
+        this.curve = function(x1, y1, x, y) {
+            this.path += 'Q' + x1 + ',' + y1 + ' ' + x + ',' + y + ' ';
+            return this.pos(x, y);
+        };
 
-        return new Path();
-    };
+        this.end = function() {
+            this.path += 'Z';
+            return this;
+        };
+    }
 
-    /**
-     * Return an element representing a title.
-     */
-    graph.mktitle = function(t, style) {
-        var title = document.createElementNS(graph.svgns, 'text');
-        title.setAttribute('x', 5);
-        title.setAttribute('y', 15);
-        title.setAttribute('text-anchor', 'start');
-        if (style != '')
-            title.style.cssText = style;
-        if (fontsz != '')
-            title.style.fontSize = fontsz;
-        title.appendChild(document.createTextNode(t));
-        return title;
-    };
+    return new Path();
+};
 
-    /**
-     * Return an element representing the title of a component.
-     */
-    graph.comptitle = function(comp) {
-        return graph.mktitle(graph.title(comp), graph.compstyle(comp));
-    };
+/**
+ * Return an element representing a title.
+ */
+graph.mktitle = function(t, style) {
+    var title = document.createElementNS(graph.svgns, 'text');
+    title.setAttribute('x', 5);
+    title.setAttribute('y', 15);
+    title.setAttribute('text-anchor', 'start');
+    if (style != '')
+        title.style.cssText = style;
+    if (fontsz != '')
+        title.style.fontSize = fontsz;
+    title.style.cursor = 'default';
+    title.appendChild(document.createTextNode(t));
+    return title;
+};
 
-    /**
-     * Return the width of the title of a component.
-     */
-    graph.comptitlewidth = function(comp) {
-        var title = graph.comptitle(comp);
-        graph.titlewidthsvg.appendChild(title);
-        var width = title.getBBox().width + 2;
-        graph.titlewidthsvg.removeChild(title);
-        return width;
-    };
+/**
+ * Return an element representing the title of a component.
+ */
+graph.comptitle = function(comp) {
+    return graph.mktitle(graph.title(comp), graph.compstyle(comp));
+};
 
-    /**
-     * Return an element representing the title of a reference.
-     */
-    graph.reftitle = function(ref) {
-        return graph.mktitle(graph.title(ref), graph.refstyle(ref));
-    };
+/**
+ * Return the width of the title of a component.
+ */
+graph.comptitlewidth = function(comp) {
+    var title = graph.comptitle(comp);
+    graph.titlewidthsvg.appendChild(title);
+    var width = title.getBBox().width + 2;
+    graph.titlewidthsvg.removeChild(title);
+    return width;
+};
 
-    /**
-     * Return the width of the title of a reference.
-     */
-    graph.reftitlewidth = function(ref) {
-        var title = graph.reftitle(ref);
-        graph.titlewidthsvg.appendChild(title);
-        var width = title.getBBox().width;
-        graph.titlewidthsvg.removeChild(title);
-        return width;
-    };
+/**
+ * Return an element representing the title of a reference.
+ */
+graph.reftitle = function(ref) {
+    return graph.mktitle(graph.title(ref), graph.refstyle(ref));
+};
 
-    /**
-     * Return an element representing the value of a property.
-     */
-    graph.proptitle = function(comp) {
-        var title = graph.mktitle(graph.propertytitle(comp), graph.propstyle(comp));
-        title.setAttribute('x', graph.comptitlewidth(comp) + 7);
-        return title;
-    };
+/**
+ * Return the width of the title of a reference.
+ */
+graph.reftitlewidth = function(ref) {
+    var title = graph.reftitle(ref);
+    graph.titlewidthsvg.appendChild(title);
+    var width = title.getBBox().width;
+    graph.titlewidthsvg.removeChild(title);
+    return width;
+};
 
-    /**
-     * Return the width of the title of a property.
-     */
-    graph.proptitlewidth = function(comp) {
-        var title = graph.proptitle(comp);
-        graph.titlewidthsvg.appendChild(title);
-        var width = title.getBBox().width + 4;
-        graph.titlewidthsvg.removeChild(title);
-        return width;
-    };
+/**
+ * Return an element representing the value of a property.
+ */
+graph.proptitle = function(comp) {
+    var title = graph.mktitle(graph.propertytitle(comp), graph.propstyle(comp));
+    title.setAttribute('x', graph.comptitlewidth(comp) + 7);
+    return title;
+};
 
-    /**
-     * Return a node representing a component.
-     */
-    graph.compnode = function(comp, cassoc, pos) {
-
-        // Make the component and property title elements
-        var title = graph.comptitle(comp);
-        var prop = graph.proptitle(comp);
-
-        // Compute the path of the component shape
-        var path = graph.comppath(comp, cassoc);
-        var d = path.str();
-
-        // Create the main component shape
-        var shape = document.createElementNS(graph.svgns, 'path');
-        shape.setAttribute('d', d);
-        shape.setAttribute('fill', graph.color(comp));
-        shape.setAttribute('fill-opacity', '0.60');
-
-        // Create an overlay contour shape
-        var contour = document.createElementNS(graph.svgns, 'path');
-        contour.setAttribute('d', d);
-        contour.setAttribute('fill', 'none');
-        contour.setAttribute('stroke', graph.colors.gray);
-        contour.setAttribute('stroke-width', '3');
-        contour.setAttribute('stroke-opacity', '0.20');
-        contour.setAttribute('transform', 'translate(1,1)');
-
-        // Create a group and add the component and contour shapes to it.
-        var g = document.createElementNS(graph.svgns, 'g');
-        g.id = scdl.name(comp);
-        g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
-        g.appendChild(shape);
-        g.appendChild(contour);
-        g.appendChild(title);
-        g.appendChild(prop);
-
-        // Store the component and the positions of its services
-        // and references in the component shape
-        g.comp = comp;
-        g.refpos = reverse(path.refpos);
-        g.svcpos = reverse(path.svcpos);
-
-        return g;
-    };
+/**
+ * Return the width of the title of a property.
+ */
+graph.proptitlewidth = function(comp) {
+    var title = graph.proptitle(comp);
+    graph.titlewidthsvg.appendChild(title);
+    var width = title.getBBox().width + 4;
+    graph.titlewidthsvg.removeChild(title);
+    return width;
+};
 
-    /**
-     * Return a graphical group.
-     */
-    graph.mkgroup = function(pos) {
-        var g = document.createElementNS(graph.svgns, 'g');
-        g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
-        return g;
-    };
+/**
+ * Return a node representing a component.
+ */
+graph.compnode = function(comp, cassoc, pos) {
+
+    // Make the component and property title elements
+    var title = graph.comptitle(comp);
+    var prop = graph.proptitle(comp);
+
+    // Compute the path of the component shape
+    var path = graph.comppath(comp, cassoc);
+    var d = path.str();
+
+    // Create the main component shape
+    var shape = document.createElementNS(graph.svgns, 'path');
+    shape.setAttribute('d', d);
+    shape.setAttribute('fill', graph.color(comp));
+    shape.setAttribute('fill-opacity', '0.60');
+
+    // Create an overlay contour shape
+    var contour = document.createElementNS(graph.svgns, 'path');
+    contour.setAttribute('d', d);
+    contour.setAttribute('fill', 'none');
+    contour.setAttribute('stroke', graph.colors.gray);
+    contour.setAttribute('stroke-width', '3');
+    contour.setAttribute('stroke-opacity', '0.20');
+    contour.setAttribute('transform', 'translate(1,1)');
+
+    // Create a group and add the component and contour shapes to it.
+    var g = document.createElementNS(graph.svgns, 'g');
+    g.id = scdl.name(comp);
+    g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
+    g.appendChild(shape);
+    g.appendChild(contour);
+    g.appendChild(title);
+    g.appendChild(prop);
+
+    // Store the component and the positions of its services
+    // and references in the component shape
+    g.comp = comp;
+    g.refpos = reverse(path.refpos);
+    g.svcpos = reverse(path.svcpos);
 
-    /**
-     * Return a node representing a button.
-     */
-    graph.mkbutton = function(t, pos) {
-
-        // Make the button title
-        var title = graph.mktitle(t, '');
-
-        // Compute the path of the button shape
-        var path = graph.buttonpath().str();
-
-        // Create the main button shape
-        var shape = document.createElementNS(graph.svgns, 'path');
-        shape.setAttribute('d', path);
-        shape.setAttribute('fill', graph.colors.lightgray);
-        shape.setAttribute('fill-opacity', '0.60');
-
-        // Create an overlay contour shape
-        var contour = document.createElementNS(graph.svgns, 'path');
-        contour.setAttribute('d', path);
-        contour.setAttribute('fill', 'none');
-        contour.setAttribute('stroke', graph.colors.gray);
-        contour.setAttribute('stroke-width', '3');
-        contour.setAttribute('stroke-opacity', '0.20');
-        contour.setAttribute('transform', 'translate(1,1)');
-
-        // Create a group and add the button and contour shapes to it
-        var g = document.createElementNS(graph.svgns, 'g');
-        g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
-        g.appendChild(shape);
-        g.appendChild(contour);
-        g.appendChild(title);
-        return g;
-    };
+    return g;
+};
 
-    /**
-     * Return the relative position of a node.
-     */
-    graph.relpos = function(e) {
-        var pmatrix = e.parentNode.getCTM();
-        var matrix = e.getCTM();
-        var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e);
-        var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f);
-        return graph.mkpath().move(curX, curY);
-    };
+/**
+ * Return a graphical group.
+ */
+graph.mkgroup = function(pos) {
+    var g = document.createElementNS(graph.svgns, 'g');
+    g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
+    return g;
+};
 
-    /**
-     * Move a node.
-     */
-    graph.move = function(e, pos) {
-        e.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
-    };
+/**
+ * Return a node representing a button.
+ */
+graph.mkbutton = function(t, pos) {
+
+    // Make the button title
+    var title = graph.mktitle(t, '');
+
+    // Compute the path of the button shape
+    var path = graph.buttonpath().str();
+
+    // Create the main button shape
+    var shape = document.createElementNS(graph.svgns, 'path');
+    shape.setAttribute('d', path);
+    shape.setAttribute('fill', graph.colors.lightgray);
+    shape.setAttribute('fill-opacity', '0.60');
+
+    // Create an overlay contour shape
+    var contour = document.createElementNS(graph.svgns, 'path');
+    contour.setAttribute('d', path);
+    contour.setAttribute('fill', 'none');
+    contour.setAttribute('stroke', graph.colors.gray);
+    contour.setAttribute('stroke-width', '3');
+    contour.setAttribute('stroke-opacity', '0.20');
+    contour.setAttribute('transform', 'translate(1,1)');
+
+    // Create a group and add the button and contour shapes to it
+    var g = document.createElementNS(graph.svgns, 'g');
+    g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
+    g.appendChild(shape);
+    g.appendChild(contour);
+    g.appendChild(title);
+    return g;
+};
+
+/**
+ * Return the relative position of a node.
+ */
+graph.relpos = function(e) {
+    var pmatrix = e.parentNode.getCTM();
+    var matrix = e.getCTM();
+    var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e);
+    var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f);
+    return graph.mkpath().move(curX, curY);
+};
+
+/**
+ * Move a node.
+ */
+graph.move = function(e, pos) {
+    e.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
 };
 
 /**
@@ -1725,11 +1259,46 @@ graph.clonepalette = function(e, compos) {
  * Move a SCDL component to the given position.
  */
 graph.movecomp = function(comp, pos) {
+    if (isNil(pos))
+        return append(mklist(element, "'component"),
+                filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'t:x" || attributeName(e) == "'t:y")); }, elementChildren(comp)));
     return append(mklist(element, "'component", mklist(attribute, "'t:x", '' + (pos.xpos() - palcx)), mklist(attribute, "'t:y", '' + pos.ypos())),
             filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'t:x" || attributeName(e) == "'t:y")); }, elementChildren(comp)));
 };
 
 /**
+ * Sort elements of a composite.
+ */
+graph.sortcompos = function(compos) {
+    return append(mklist(element, "'composite"), elementChildren(compos).sort(function(a, b) {
+
+        // Sort attributes, place them at the top
+        var aa = isAttribute(a);
+        var ba = isAttribute(b);
+        if (aa && !ba) return -1;
+        if (!aa && ba) return 1;
+        if (aa && ba) {
+            var aan = attributeName(a);
+            var ban = attributeName(b);
+            if (aan < ban) return -1;
+            if (aan > ban) return 1;
+            return 0;
+        }
+
+        // Sort elements, place services before components
+        var aen = elementName(a);
+        var ben = elementName(b);
+        if (aen == "'service" && ben == "'component") return -1;
+        if (aen == "'component" && ben == "'service") return 1;
+        var an = scdl.name(a);
+        var bn = scdl.name(b);
+        if (an < bn) return -1;
+        if (an > bn) return 1;
+        return 0;
+    }));
+}
+
+/**
  * Add a component to a SCDL composite.
  */
 graph.addcomp = function(comp, compos) {
@@ -1865,7 +1434,7 @@ graph.cutwire = function(node, compos, g) {
     var name = scdl.name(comp);
     var prom = mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name));
     return append(mklist(element, "'composite"),
-            append(filter(function(c) { return !(isElement(c) && scdl.name(c) == name); }, elementChildren(compos)), mklist(prom, comp)));
+            append(mklist(prom), filter(function(c) { return !(isElement(c) && elementName(c) == "'service" && scdl.name(c) == name); }, elementChildren(compos))));
 }
 
 /**
@@ -1933,6 +1502,7 @@ graph.wire = function(n, compos, g) {
 
     // Wire component to that reference, un-promote it, and
     // update the SCDL reference and composite
+    setElement(n.comp, graph.movecomp(graph.dragging.comp, null));
     n.compos = null;
     setElement(car(cref), append(mklist(element, "'reference", mklist(attribute, "'target", scdl.name(n.comp))), elementChildren(car(cref))));
     var name = scdl.name(n.comp);
@@ -1981,6 +1551,10 @@ graph.edit = function(appname, compos, nodes, onchange, onselect, g) {
     g.appname = appname;
     g.compos = compos;
 
+    // Sort the composite elements now to allow for change detection later
+    var scompos = scdl.composite(g.compos);
+    setElement(scompos, graph.sortcompos(scompos));
+
     // Store event listeners
     g.oncomposchange = onchange;
     g.oncompselect = onselect;
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
index c86b1ef6c1..942433235c 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -18,25 +19,50 @@
 -->
 <html>
 <head>
-<title>App</title>
+<title></title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
+<script type="text/javascript" src="graph.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1><span id="h1"></span><span id="appNameHeader"></span></h1>
-<br/>
+<table style="width: 100%;">
+<tr>
+<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td>
+<td style="vertical-align: middle; text-align: right;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td>
+</tr>
+</table>
+
+<table style="width: 100%;">
+<tr>
+<th class="thr thl" style="padding-left: 2px; padding-right: 2px;">
+<input id="compValue" type="text" value="" title="Component value" placeholder="Name" style="position: relative; width: 170px;"/>
+<span id="deleteComponentButton" title="Delete a component" class="redbutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">-</span>
+<span id="addComponentButton" title="Add a component" class="greenbutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span>
+<span id="playComponentButton" title="View component value" class="bluebutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">&gt;</span>
+</th>
+</tr>
+</table>
+
+<div id="dataDiv" style="position:absolute; top: 95px; left: 0px; right: 0px; height: 5000px; visibility: hidden">
+</div>
 
-<div id="graph"></div>
+</div>
 
 <script type="text/javascript">
+// Get the app name
+var appname = ui.queryParams()['app'];
+if (isNil(appname))
+    window.open('/', '_self');
 
 /**
  * Return the link to an app.
@@ -51,31 +77,275 @@ function applink(appname) {
     return link;
 }
 
-// Get the app name
-var appname = ui.queryParams()['app'];
-
-// Update the window title
+// Set page titles
 document.title = windowtitle(window.location.hostname) + ' - ' + (isNil(config.compose)? 'Composition' : config.compose) + ' - ' + appname;
 $('h1').innerHTML = hometitle(window.location.hostname);
 $('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
 
 // Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
+displaymenu();
+
+// Show the page
+ui.showbody();
+
+// Init componnent references
+var editWidget = sca.component("EditWidget");
+var palettes = sca.reference(editWidget, "palettes");
+var composites = sca.reference(editWidget, "composites");
+
+// Setup remote log
+//rconsole = sca.defun(sca.reference(editWidget, "log"), "log");
+
+/**
+ * The current app composite, corresponding saved XML content and component name.
+ */
+var savedcomposxml = '';
+var composite;
+var compname = '';
+
+/**
+ * Track the composition graph and whether it's visible or not.
+ */
+var g;
+var gdiv;
+var bg;
+var gvisible = true;
+
+// Track the palettes
+var gpalettes = new Array();
+var spalette = 'control';
+
+/**
+ * Return the composite in an ATOM entry.
+ */
+function atomcomposite(doc) {
+    var entry = atom.readATOMEntry(mklist(doc));
+    if (isNil(entry))
+        return mklist();
+    var content = namedElementChild("'content", car(entry));
+    if (content == null)
+        return mklist();
+    return elementChildren(content);
+}
 
 /**
- * Display the editor for an app.
+ * Get and display an app.
  */
-function editapp(name) {
+function getapp(name, g) {
+    if (isNil(name))
+        return false;
+    return composites.get(name, function(doc) {
+        composite = atomcomposite(doc);
+        if (isNil(composite)) {
+
+            // Create a default empty composite if necessary
+            var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' +
+                'targetNamespace="http://app" name="app"></composite>';
+            composite = readXML(mklist(x));
+        }
+        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, oncompselect, g);
+
+        // Track the saved composite XML
+        savedcomposxml = car(writeXML(composite, false));
+        return true;
+    });
+}
+
+/**
+ * Display a palette. Get it from the server if needed.
+ */
+function displaypalette(name, g, palette, gpalettes) {
     if (isNil(name))
         return;
-    $('graph').innerHTML =
-        '<iframe id="graphFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="graph.html?' +
-        'app=' + name +
-        '"></iframe>';
+    if (isNil(gpalettes[name])) {
+
+        // Get the palette from the server
+        var doc = palettes.get(name);
+        gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(80,0));
+    }
+    graph.display(gpalettes[name], g);
+    return true;
+}
+
+/**
+ * Install a palette, including a button to select the palette, and
+ * the palette content.
+ */
+function installpalette(name, pos, g, bg, palette, gpalettes) {
+    var b = graph.mkbutton(name, pos);
+    graph.display(mklist(b), g);
+    b.onclick = function(e) {
+
+        // Swap the selected palette
+        displaypalette(spalette, bg, palette, gpalettes);
+        spalette = name;
+        return displaypalette(spalette, g, palette, gpalettes);
+    };
+
+    if (name != spalette) {
+
+        // Will get the palette from the server later if needed
+        gpalettes[name] = null;
+        return true;
+    }
+
+    // Display the selected palette
+    return displaypalette(name, g, palette, gpalettes);
+}
+
+/**
+ * Save the current composite.
+ */
+function save(savexml) {
+    $('saveStatus').innerHTML = 'Saving';
+    savedcomposxml = savexml;
+    var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
+        '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml">' +
+        savedcomposxml + '</content></entry>';
+    composites.put(appname, entry);
+    $('saveStatus').innerHTML = 'Saved';
+    return true;
+}
+
+/**
+ * Handle a composite change event.
+ */
+function oncomposchange(prop) {
+    var newxml = car(writeXML(composite, false));
+    if (savedcomposxml == newxml)
+        return false;
+    $('saveStatus').innerHTML = 'Modified';
+
+    // Save property changes right away
+    if (prop)
+        return save(newxml);
+
+    // Autosave other changes after 3 seconds
+    $('saveStatus').innerHTML = 'Modified';
+    setTimeout(function() {
+        var savexml = car(writeXML(composite, false));
+        if (savedcomposxml == savexml) {
+            $('saveStatus').innerHTML = 'Saved';
+            return false;
+        }
+        return save(savexml);
+    }, 1000);
+    return true;
+}
+
+/**
+ * Return the link to a component value.
+ */
+function compvaluelink(appname, cname) {
+    if (cname == '' || isNil(cname))
+        return '';
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/data/?component=' + cname;
+    return link;
+}
+
+/**
+ * Return the link to a component raw data.
+ */
+function compdebuglink(appname, cname) {
+    if (cname == '' || isNil(cname))
+        return '';
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/components/' + cname;
+    return link;
+}
+
+/**
+ * Handle a component select event.
+ */
+function oncompselect(cname) {
+    if (cname == compname)
+        return true;
+    compname = cname;
+    var link = compvaluelink(appname, cname);
+
+    function updateButton(b, v) {
+        b.style.color = v? '#000000' : '#808080';
+    }
+
+    updateButton($('deleteComponentButton'), link != '');
+    updateButton($('playComponentButton'), link != '');
+    return true;
+}
+
+/**
+ * Show the result data of a component.
+ */
+function showdata(cname) {
+    if (!gvisible)
+        return true;
+    gvisible = false;
+    $('playComponentButton').innerHTML = '&lt;';
+    gdiv.style.visibility = 'hidden'
+    var rdiv = $('dataDiv');
+    rdiv.style.visibility = 'visible';
+    rdiv.innerHTML = '<iframe id="dataFrame" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="' +
+                        compvaluelink(appname, cname) + '"></iframe>';
+    return true;
+}
+
+/**
+ * Show the composition graph.
+ */
+function showgraph() {
+    if (gvisible)
+        return true;
+    gvisible = true;
+    $('playComponentButton').innerHTML = '&gt;';
+    var rdiv = $('dataDiv');
+    rdiv.style.visibility = 'hidden';
+    rdiv.innerHTML = '';
+    gdiv.style.visibility = 'visible'
+    return true;
 }
 
-// Display the editor for the current app
-editapp(appname);
+/**
+ * Play the current component.
+ */
+$('playComponentButton').onclick = function() {
+    if (compname == '')
+        return false;
+    if (!gvisible)
+        return showgraph();
+    return showdata(compname);
+}
+
+// Create editor graph area
+g = graph.mkgraph(graph.mkpath().move(-2500,95), $('compValue'), $('addComponentButton'), $('deleteComponentButton'));
+gdiv = g.parentNode;
+bg = graph.mkgroup(graph.mkpath());
+
+// Install the palettes
+var pos = graph.mkpath();
+installpalette('control', pos.rmove(5,0), g, bg, spalette, gpalettes);
+installpalette('values', pos.rmove(0,35), g, bg, spalette, gpalettes);
+installpalette('lists', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('transform', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('text', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('http', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('talk', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('social', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('search', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('database', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('logic', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('math', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+installpalette('python', pos.rmove(0, 35), g, bg, spalette, gpalettes);
+
+// Get and display the current app
+getapp(appname, g);
 
 </script>
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html
index 266c696267..68aa6f7f7b 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -16,41 +17,62 @@
  * specific language governing permissions and limitations
  * under the License.    
 -->
-<html manifest="cache-manifest.cmf">
+<html manifest="/cache-manifest.cmf">
 <head>
 <title>Home</title>
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript">
-document.title = windowtitle(window.location.hostname);
-</script>
-<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1 id="h1"></h1>
+<table style="width: 100%;">
+<tr><td><h1><span id="h1"></span></h1></td></tr>
+</table>
 <br/>
 
-<div id="main"></div>
+<div style="margin-left: auto; margin-right: auto; text-align: center;">
 
-<script type="text/javascript">
+<h1><span id="maintitle"><span></h1>
+<br/><br/><br/><br/>
+
+<div id="maindiagram"></div>
+<br/><br/><br/><br/>
+
+<input type="button" class="greenbutton" style="font-size: 150%; font-weight: bold; font-style: italic; padding: 10px;" id="getstarted" title="Get Started" value="Get Started"/>
 
+<br/><br/><br/>
+<div>Safari, Chrome, Firefox only for now.</div>
+
+</div>
+
+</div>
+
+<script type="text/javascript">
+// Set page titles
+document.title = windowtitle(window.location.hostname);
 $('h1').innerHTML = hometitle(window.location.hostname);
 
-// Load the menu bar
-ui.loadwidget('menu', '/menu.html', ui.showbody);
+// Display the menu bar
+displaymenu();
 
-// Load the main page
-ui.loadiframe('main', 'main.html');
+$('maintitle').innerHTML = isNil(config.maintitle)? 'Simple App Builder' : config.maintitle;
+$('maindiagram').innerHTML = isNil(config.maindiagram)? '&lt;&lt insert diagram here &gt;&gt;' : config.maindiagram;
+$('getstarted').onclick = function() {
+    return window.open('/store/', '_self');
+};
 
+// Show the page
+ui.showbody();
 </script>
 
 </body>
 </html>
-
diff --git a/sca-cpp/trunk/modules/edit/htdocs/login/index.html b/sca-cpp/trunk/modules/edit/htdocs/login/index.html
index 165838be82..618a9eed7a 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/login/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/login/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -23,20 +24,19 @@
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
+<script type="text/javascript" src="/all-min.js"></script>
 </head>
-<body>
+<body onorientationchange="ui.reload();">
 <h1>Sign in</h1>
-<br/>
 
-<form name="formSignin" method="POST" action="/login/dologin/">
+<form name="formSignin" onsubmit="submitSignin();" method="POST" action="/login/dologin/">
 <table border="0">
-<tr><td>Username:</td><td><input type="text" id="httpd_username" name="httpd_username" value=""/></td></tr>
-<tr><td>Password:</td><td><input type="password" name="httpd_password" value=""/></td></tr>
-<tr><td><input type="submit" onclick="submitFormSignin()" value="Sign in"/></td><td></td></tr>
+<tr><td><b>Username:</b></td></tr>
+<tr><td><input type="text" id="httpd_username" name="httpd_username" value="" size="15" placeholder="Enter your user name" style="width: 300px;"/></td></tr>
+<tr><td><b>Password:</b></td></tr>
+<tr><td><input type="password" name="httpd_password" value="" size="15" placeholder="Enter your password" style="width: 300px;"/></td></tr>
+<tr><td><input type="submit" value="Sign in" class="greenbutton" style="font-weight: bold;"/></td><td></td></tr>
 </table>
 <input type="hidden" name="httpd_location" value="/"/>
 </form>
@@ -66,14 +66,13 @@ function oauthReferrer() {
     return r;
 }
 
-function submitFormSignin() {
+function submitSignin() {
     var reset = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';domain=.' + domainname(window.location.hostname) + ';path=/;secure=TRUE';
     document.cookie = reset;
     document.formSignin.httpd_location.value = oauthReferrer();
     document.formSignin.submit();
 }
 
-$('httpd_username').focus();
 </script>
 
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
index 84aa08ef80..7c326463cf 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -23,17 +24,14 @@
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
+<script type="text/javascript" src="/all-min.js"></script>
 </head>
-<body>
+<body onorientationchange="ui.reload();">
 <h1>Sign out</h1>
-<br/>
 
-<form name="signout" action="/" method="GET">
-<input type="submit" onclick="submitSignout()" id="signOut" value="Sign out"/>
+<form name="signout" onsubmit="submitSignout();" action="/" method="GET">
+<input type="submit" id="signOut" value="Sign out" class="greenbutton" style="font-weight: bold"/>
 </form>
 
 <script type="text/javascript">
@@ -44,7 +42,6 @@ function submitSignout() {
     return true;
 }
 
-$('signOut').focus();
 </script>
 
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/main.html b/sca-cpp/trunk/modules/edit/htdocs/main.html
deleted file mode 100644
index 9555e8a54d..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/main.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>  
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-</head>  
-<body class="delayed">
-
-<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
-
-<div style="margin-left: auto; margin-right: auto; text-align: center;">
-
-<h2><span id="maintitle"><span></h2>
-<br/><br/><br/><br/>
-
-<!--
-<a href="/dash/" target="_parent"><img src="home.png" width="426" height="145" style="width: 426px; height: 145px;"/></a>
-<br/><br/>
--->
-
-<div id="maindiagram"></div>
-<br/><br/><br/><br/>
-
-<h1><a id="getstarted" href="">Get Started</a></h1>
-
-<br/><br/><br/>
-<div>Safari, Chrome, Firefox only for now.</div>
-
-</div>
-
-</div>
-
-<script type="text/javascript">
-if (ui.isIE()) $('bodydiv').style.right = -20;
-
-$('maintitle').innerHTML = isNil(config.maintitle)? 'Simple App Builder' : config.maintitle;
-$('maindiagram').innerHTML = isNil(config.maindiagram)? '&lt;&lt insert diagram here &gt;&gt;' : config.maindiagram;
-$('getstarted').href = ui.href('/store/', '_parent');
-
-ui.showbody();
-
-</script>
-
-</body>
-</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html
deleted file mode 100644
index 8cdeddb1dc..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/menu.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
-</head>
-<body>
-<div id="menu"></div>
-
-<script type="text/javascript">
-ui.installwidget();
-
-var menuWidget = sca.component("MenuWidget");
-var user = sca.defun(sca.reference(menuWidget, "user"), "id");
-
-/**
- * Display the current signed in user.
- */
-function userMenu() {
-    function UserMenu() {
-        this.content = function() {
-            u = user.id()
-            return '<span>' + u + '</span>';
-        };
-    }
-    return new UserMenu();
-}
-
-/**
- * Return the current app name.
- */
-function appname() {
-    return ui.queryParams()['app'];
-}
-
-// Display the menu bar
-var mdiv = $('menu'); 
-var name = appname();
-
-mdiv.innerHTML = ui.menubar(
-    append(mklist(ui.menu('Home', '/'), ui.menu('Store', '/store/')),
-            (isNil(name) || name == 'undefined')?
-                mklist() :
-                mklist(ui.menu('Page', '/page/?app=' + name),
-                ui.menu(isNil(config.compose)? 'Composition' : config.compose, '/graph/?app=' + name),
-                ui.menu('Stats', '/props/?app=' + name))),
-    mklist(ui.menu('Account', '/public/notyet.html'), ui.menu('Sign out', '/logout/')));
-
-</script>
-</body>
-</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.js b/sca-cpp/trunk/modules/edit/htdocs/menu.js
new file mode 100644
index 0000000000..2b30a6f6b8
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/menu.js
@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+ */
+
+var menuWidget = sca.component("MenuWidget");
+var userService = sca.defun(sca.reference(menuWidget, "user"), "id");
+
+/**
+ * Display the current signed in user.
+ */
+function userMenu() {
+    function UserMenu() {
+        this.content = function() {
+            u = userService.id()
+            return '<span>' + u + '</span>';
+        };
+    }
+    return new UserMenu();
+}
+
+/**
+ * Display the menu bar.
+ */
+function displaymenu() {
+    var mdiv = $('menu'); 
+    var name = ui.queryParams()['app'];
+
+    mdiv.innerHTML = ui.menubar(
+        append(mklist(ui.menu('Home', '/'), ui.menu('Store', '/store/')),
+                (isNil(name) || name == 'undefined')?
+                    mklist() :
+                    mklist(ui.menu('Page', '/page/?app=' + name),
+                    ui.menu(isNil(config.compose)? 'Composition' : config.compose, '/graph/?app=' + name),
+                    ui.menu('Stats', '/stats/?app=' + name))),
+        mklist(ui.menu('Account', '/public/notyet.html'), ui.menu('Sign out', '/logout/')));
+}
+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
index bcda316504..b498e8d77c 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -23,21 +24,78 @@
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
+<script type="text/javascript" src="page.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1><span id="h1"></span><span id="appNameHeader"></span></h1>
-<br/>
+<table style="width: 100%;">
+<tr>
+<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td>
+<td style="vertical-align: middle; text-align: right;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td>
+</tr>
+</table>
+
+<table style="width: 100%;">
+<tr>
+<th class="thr thl" style="padding-left: 2px; padding-right: 2px;">
+<input id="widgetName" type="text" value="" title="Widget name" placeholder="Name" style="position: relative; width: 65px;"/>
+<input id="widgetText" type="text" value="" title="Widget text" placeholder="Text" style="position: relative; width: 120px;"/>
+<span id="deleteWidgetButton" title="Delete a Widget" class="redbutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">-</span>
+<span id="addWidgetButton" title="Add a Widget" class="greenbutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span>
+<!--
+<span id="playWidgetButton" title="View" class="bluebutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">&gt;</span>
+-->
+</th>
+</tr>
+</table>
+
+<div id="page" style="position: absolute; top: 95px; left: -2500px; right: 0px; height: 5000px;">
 
-<div id="page"></div>
+<div style="position: absolute; left: 2500px; top: 0px; right: 0px; height: 5000px; border:1px; border-style: solid; border-color: #a2bae7; background: url(/public/grid72.png);"></div>
+<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 320px; height: 460px;"></div>
+<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 480px; height: 300px;"></div>
+<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 768px; height: 911px;"></div>
+<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 1024px; height: 655px;"></div>
+
+<span class="h1" id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1>Header1</h1></span>
+<span class="h2" id="palette:h2" style="position: absolute; left: 0px; top: 30px;"><h2>Header2</h2></span>
+<span class="section" id="palette:section" style="position: absolute; left: 0px; top: 60px; width: 200px;"><span class="section">section</span></span>
+<span class="button" id="palette:button" style="position: absolute; left: 0px; top: 90px;"><input type="button" value="button" class="graybutton"/></span>
+<span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 120px;"><input type="text" value="field" size="20" autocapitalize="off"/></span>
+<span class="password" id="palette:password" style="position: absolute; left: 0px; top: 150px;"><input type="password" value="password" size="20"/></span>
+<span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 180px;"><input type="checkbox" value="checkbox"/><span>checkbox</span></span>
+<span class="select" id="palette:select" style="position: absolute; left: 0px; top: 210px;"><select><option value="select">select</option></select></span>
+<span class="list" id="palette:list" style="position: absolute; left: 0px; top: 240px; width: 200px;">
+<table class="datatable" style="width: 200px;"><tr><td class="datatd">list</td></tr><tr><td class="datatd">...</td></tr></table>
+</span>
+<span class="table" id="palette:table" style="position: absolute; left: 0px; top: 290px; width: 200px;">
+<table class="datatable" style="width: 200px;"><tr><td class="datatdl">table</td><td class="datatdr">...</td></tr><tr><td class="datatdl">...</td><td class="datatdr">...</td></tr></table>
+</span>
+<span class="link" id="palette:link" style="position: absolute; left: 0px; top: 340px;"><a href="/"><span>link</span></a></span>
+<span class="text" id="palette:text" style="position: absolute; left: 0px; top: 370px;"><span>text</span></span>
+<span class="iframe fakeframe" id="palette:iframe" style="position: absolute; left: 0px; top: 400px; width: 200px;"><a href="/public/iframe.html"><span class="fakeframe"><span>frame ...</span></span></a></span>
+<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 430px;"><img src="/public/img.png"/></span>
+
+</div>
+
+<div id="buffer" style="visibility: hidden; position: absolute; top: 0px; left: 0px; width: 0px; height: 0px"></div>
+
+</div>
 
 <script type="text/javascript">
 
+// Get the app name
+var appname = ui.queryParams()['app'];
+if (isNil(appname))
+    window.open('/', '_self');
+
 /**
  * Return the link to an app.
  */
@@ -51,30 +109,229 @@ function applink(appname) {
     return link;
 }
 
-// Get the app name
-var appname = ui.queryParams()['app'];
-
-// Update the window title
+// Set page titles
 document.title = windowtitle(window.location.hostname) + ' - Page - ' + appname;
 $('h1').innerHTML = hometitle(window.location.hostname);
 $('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
 
 // Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
+displaymenu();
+
+// Show the page
+ui.showbody();
+
+// Init component references
+var editWidget = sca.component("EditWidget");
+var pages = sca.reference(editWidget, "pages");
+
+/**
+ * Return the page in an ATOM entry.
+ */
+function atompage(doc) {
+    var entry = atom.readATOMEntry(mklist(doc));
+    if (isNil(entry))
+        return mklist();
+    var content = namedElementChild("'content", car(entry));
+    if (content == null)
+        return mklist();
+    return elementChildren(content);
+}
+
+/**
+ * Track the current widget and page saved XHTML content.
+ */
+var widgetname = '';
+var savedpagexhtml = '';
 
 /**
- * Display the page editor for an app.
+ * Get and display an app page.
  */
-function editapp(name) {
+function getpage(name, edit) {
     if (isNil(name))
+        return false;
+    return pages.get(name, function(doc) {
+
+        // Convert the page to XHTML and place it in a hidden buffer
+        var buffer = $('buffer');
+        var el = atompage(doc);
+
+        // Create a default empty page if necessary
+        if (isNil(el))
+            buffer.innerHTML = '<DIV id="page">\n</DIV>\n';
+        else
+            buffer.innerHTML = writeStrings(writeXML(atompage(doc), false));
+
+        // Append page nodes to editor
+        map(function(e) {
+                edit.appendChild(e);
+                if (!isNil(e.style))
+                    e.style.left = ui.pixpos(ui.numpos(e.style.left) + 2500);
+                return page.cover(e);
+            }, nodeList(buffer.childNodes[0].childNodes));
+
+        savedpagexhtml = pagexhtml();
+        return true;
+    });
+}
+
+/**
+ * Handle add widget button click event.
+ */
+$('addWidgetButton').onclick = function(e) {
+    // Show the widget palette
+    $('page').style.left = ui.pixpos(0);
+};
+
+/**
+ * Return the current page XHTML content.
+ */
+function pagexhtml() {
+
+    // Copy page DOM to hidden buffer
+    var edit = $('page');
+    var buffer = $('buffer');
+    buffer.innerHTML = '<DIV id="page">\n</DIV>\n'
+    var div = buffer.childNodes[0];
+    div.innerHTML = edit.innerHTML;
+
+    // Filter out palette and editor artifacts, which are not
+    // part of the page, as well as nodes positioned out the
+    // editing area
+    var fnodes = filter(function(e) {
+        if (isNil(e.id) || e.id == '' || e.id.substr(0, 8) == 'palette:')
+            return false;
+        var x = ui.numpos(e.style.left) - 2500;
+        if (x < 0 || ui.numpos(e.style.top) < 0)
+            return false;
+        return true;
+    }, nodeList(div.childNodes));
+
+    // Reposition nodes
+    map(function(e) {
+        var x = ui.numpos(e.style.left) - 2500;
+        e.style.left = ui.pixpos(x);
+        return e;
+    }, fnodes);
+
+    // Sort them by position
+    var snodes = fnodes.sort(function(a, b) {
+        var ay = ui.numpos(a.style.top);
+        var by = ui.numpos(b.style.top);
+        if (ay < by) return -1;
+        if (ay > by) return 1;
+        var ax = ui.numpos(a.style.left);
+        var bx = ui.numpos(b.style.left);
+        if (ax < bx) return -1;
+        if (ax > bx) return 1;
+        return 0;
+    });
+
+    // Append them back to the div in order
+    div.innerHTML = '';
+    map(function(e) {
+        div.appendChild(e);
+        return e;
+    }, snodes);
+
+    // Convert the page to XHTML
+    var lxhtml = readXHTMLElement(div);
+    var xhtml = writeStrings(writeXML(lxhtml, false));
+    return xhtml;
+}
+
+/**
+ * Save the current page.
+ */
+function save() {
+    $('saveStatus').innerHTML = 'Saving';
+
+    // Get the current page XHTML content
+    savedpagexhtml = pagexhtml();
+
+    // Update the page ATOM entry
+    var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
+        '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml">' +
+        savedpagexhtml + '</content></entry>';
+
+    pages.put(appname, entry);
+    if (savedpagexhtml == pagexhtml())
+        $('saveStatus').innerHTML = 'Saved';
+    return true;
+};
+
+/**
+ * Handle a page change event
+ */
+function onpagechange(prop) {
+    if (savedpagexhtml == pagexhtml())
+        return false;
+    $('saveStatus').innerHTML = 'Modified';
+
+    // Save property changes right away
+    if (prop)
+        return save();
+
+    // Autosave other changes after 3 seconds
+    setTimeout(function() {
+        if (savedpagexhtml == pagexhtml())
+            return false;
+        return save();
+    }, 1000);
+    return true;
+}
+
+/**
+ * Return the link to a component value.
+ */
+function compvaluelink(appname, cname) {
+    if (cname == '' || isNil(cname))
+        return '';
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/data/?component=' + cname;
+    return link;
+}
+
+/**
+ * Handle a widget select event.
+ */
+function onwidgetselect(wname) {
+    if (wname == widgetname)
+        return true;
+    widgetname = wname;
+    var link = compvaluelink(appname, wname);
+
+    function updateButton(b, v) {
+        b.style.color = v? '#000000' : '#808080';
+    }
+
+    updateButton($('deleteWidgetButton'), link != '');
+    //updateButton($('playWidgetButton'), link != '');
+
+    return true;
+}
+
+/**
+ * Play the component associated with the current widget.
+ */
+/*
+$('playWidgetButton').onclick = function() {
+    var link = compvaluelink(appname, widgetname);
+    if (link == '')
         return;
-    $('page').innerHTML =
-        '<iframe id="pageFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="page.html?' +
-        'app=' + name +
-        '"></iframe>';
+    return window.open(link, '_' + appname + '_' + widgetname);
 }
+*/
+
+// Initialize the page editor
+var edit = $('page');
+page.edit(edit, $('widgetName'), $('widgetText'), $('addWidgetButton'), $('deleteWidgetButton'), onpagechange, onwidgetselect);
 
-editapp(appname);
+// Get and display the current app page
+getpage(appname, edit);
 
 </script>
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
deleted file mode 100644
index 87cdd7edb8..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html
+++ /dev/null
@@ -1,243 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>  
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/elemutil.js"></script>
-<script type="text/javascript" src="/xmlutil.js"></script>
-<script type="text/javascript" src="/atomutil.js"></script>
-<script type="text/javascript" src="/scdl.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
-<script type="text/javascript" src="page.js"></script>
-</head>  
-<body class="delayed">
-
-<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
-
-<table style="width: 100%;">
-<tr>
-<th class="thl" style="width: 225px; min-width: 225px; padding-top: 4px; padding-bottom: 4px;">Palette</th>
-
-<th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;">
-<input id="widgetName" type="text" value="widget name" title="Widget name" style="position: relative; width: 200px;"/>
-<input id="widgetText" type="text" value="widget text" title="Widget text" style="position: relative; width: 300px;"/>
-</th>
-
-<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
-<input type="button" id="saveButton" title="Save the page" style="font-weight: bold;" Value="Saved"/>
-</th>
-</tr>
-
-<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"></td></tr>
-</table>
-
-<div id="bigscreen" style="position: absolute; left: 250px; top: 40px; right: 0px; bottom: 0px; border:1px; border-style: solid; border-color: #a2bae7; background: url(/public/grid72.png);"></div>
-<div id="iosportraitscreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 320px; height: 460px;"></div>
-<div id="ioslandscapescreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 480px; height: 300px;"></div>
-<div id="ipadportraitscreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 768px; height: 911px;"></div>
-<div id="ipadlandscapescreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 1024px; height: 655px;"></div>
-
-<div id="page" style="position: absolute; top: 40px; left: 0px; width: 5000px; height: 5000px;">
-
-<span class="h1" id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1>Header1</h1></span>
-<span class="h2" id="palette:h2" style="position: absolute; left: 0px; top: 35px;"><h2>Header2</h2></span>
-<span class="section" id="palette:section" style="position: absolute; left: 0px; top: 70px; width: 200px;"><span class="section">section</span></span>
-<span class="button" id="palette:button" style="position: absolute; left: 0px; top: 100px;"><input type="button" value="button"/></span>
-<span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 130px;"><input type="text" value="field" size="20" autocapitalize="off"/></span>
-<span class="password" id="palette:password" style="position: absolute; left: 0px; top: 160px;"><input type="password" value="password" size="20"/></span>
-<span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 190px;"><input type="checkbox" value="checkbox"/><span>checkbox</span></span>
-<span class="select" id="palette:select" style="position: absolute; left: 0px; top: 220px;"><select><option value="select">select</option></select></span>
-<span class="list" id="palette:list" style="position: absolute; left: 0px; top: 250px; width: 200px;">
-<table class="datatable" style="width: 200px;"><tr><td class="datatd">list</td></tr><tr><td class="datatd">...</td></tr></table>
-</span>
-<span class="table" id="palette:table" style="position: absolute; left: 0px; top: 300px; width: 200px;">
-<table class="datatable" style="width: 200px;"><tr><td class="datatdl">table</td><td class="datatdr">...</td></tr><tr><td class="datatdl">...</td><td class="datatdr">...</td></tr></table>
-</span>
-<span class="link" id="palette:link" style="position: absolute; left: 0px; top: 350px;"><a href="/"><span>link</span></a></span>
-<span class="text" id="palette:text" style="position: absolute; left: 0px; top: 380px;"><span>text</span></span>
-<span class="iframe fakeframe" id="palette:iframe" style="position: absolute; left: 0px; top: 410px; width: 200px;"><a href="/public/iframe.html"><span class="fakeframe"><span>frame ...</span></span></a></span>
-<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 430px;"><img src="/public/img.png"/></span>
-
-</div>
-
-<div id="buffer" style="visibility: hidden; width: 0px; height: 0px"></div>
-
-</div>
-
-<script type="text/javascript">
-if (ui.isIE()) $('bodydiv').style.right = -20;
-
-var editWidget = sca.component("EditWidget");
-var pages = sca.reference(editWidget, "pages");
-
-/**
- * The current app name.
- */
-var appname = ui.queryParams()['app'];
-
-/**
- * Return the page in an ATOM entry.
- */
-function atompage(doc) {
-    var entry = atom.readATOMEntry(mklist(doc));
-    if (isNil(entry))
-        return mklist();
-    var content = namedElementChild("'content", car(entry));
-    if (content == null)
-        return mklist();
-    return elementChildren(content);
-}
-
-/**
- * Track the current page saved XHTML content.
- */
-var savedpagexhtml = '';
-
-/**
- * Get and display an app page.
- */
-function getpage(name, edit) {
-    if (isNil(name))
-        return;
-    pages.get(name, function(doc) {
-
-        // Convert the page to XHTML and place it in a hidden buffer
-        var buffer = $('buffer');
-        var el = atompage(doc);
-
-        // Create a default empty page if necessary
-        if (isNil(el))
-            buffer.innerHTML = '<DIV id="page">\n</DIV>\n';
-        else
-            buffer.innerHTML = writeStrings(writeXML(atompage(doc), false));
-
-        // Append page nodes to editor
-        map(function(e) {
-                if (!isNil(e.style))
-                    e.style.left = ui.csspos(e.style.left) + 250;
-                edit.appendChild(e);
-                return page.cover(e);
-            }, nodeList(buffer.childNodes[0].childNodes));
-
-        savedpagexhtml = pagexhtml();
-
-        // Show the page
-        ui.showbody();
-    });
-}
-
-/**
- * Handle save button click event.
- */
-$('saveButton').onclick = function(e) {
-    return save();
-};
-
-/**
- * Return the current page XHTML content.
- */
-function pagexhtml() {
-
-    // Copy page DOM to hidden buffer
-    var edit = $('page');
-    var buffer = $('buffer');
-    buffer.innerHTML = '<DIV id="page">\n</DIV>\n'
-    var div = buffer.childNodes[0];
-    div.innerHTML = edit.innerHTML;
-
-    // Remove nodes from palette and editor artifacts, which are
-    // not part of the page, as well as nodes positioned out of
-    // the editing area
-    map(function(e) {
-            if (isNil(e.id) || e.id == '' || e.id.substr(0, 8) == 'palette:') {
-                div.removeChild(e);
-                return e;
-            }
-            var x = ui.csspos(e.style.left) - 250;
-            if (x < 0 || ui.csspos(e.style.top) < 0) {
-                div.removeChild(e);
-                return e;
-            }
-            e.style.left = x;
-            return e;
-        }, nodeList(div.childNodes));
-
-    // Convert the page to XHTML
-    var lxhtml = readXHTMLElement(div);
-    var xhtml = writeStrings(writeXML(lxhtml, false));
-
-    return xhtml;
-}
-
-/**
- * Save the current page.
- */
-function save() {
-    $('saveButton').value = 'Saving';
-
-    // Get the current page XHTML content
-    savedpagexhtml = pagexhtml();
-
-    // Update the page ATOM entry
-    var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
-        '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml">' +
-        savedpagexhtml + '</content></entry>';
-
-    pages.put(appname, entry, function(e) {
-        if (savedpagexhtml == pagexhtml())
-            $('saveButton').value = 'Saved';
-        return true;
-    });
-    return true;
-};
-
-/**
- * Handle a page change event
- */
-function onpagechange(prop) {
-    if (savedpagexhtml == pagexhtml())
-        return false;
-    $('saveButton').value = 'Save now';
-
-    // Save property changes right away
-    if (prop)
-        return save();
-
-    // Autosave other changes after 3 seconds
-    setTimeout(function() {
-        if (savedpagexhtml == pagexhtml())
-            return false;
-        return save();
-    }, 3000);
-    return true;
-}
-
-// Initialize the page editor
-var edit = $('page');
-page.edit(edit, $('widgetName'), $('widgetText'), onpagechange);
-
-// Get and display the current app page
-getpage(appname, edit);
-
-</script>
-</body>
-</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
index 7ecf5c148e..09617d9720 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
@@ -25,349 +25,252 @@ var page = {};
 /**
  * Default positions and sizes.
  */
-var palcx = 250;
-var trashcx = 230;
+var palcx = 2500;
+var trashcx = 2480;
 
-if (ui.isIE()) {
-
-    /**
-     * Init a page editor. IE-specific implementation.
-     */
-    page.edit = function(elem, wname, wtext, onchange) {
-
-        // Track element dragging and selection
-        page.dragging = null;
-        page.selected = null;
-        wname.disabled = true;
-        wtext.disabled = true;
+/**
+ * Init a page editor. Works with all browsers except IE.
+ */
+page.edit = function(elem, wname, wtext, wadd, wdelete, onchange, onselect) {
 
-        // Trigger page change events
-        page.onpagechange = onchange;
+    // Track element dragging and selection
+    page.dragging = null;
+    page.selected = null;
+    wname.disabled = true;
+    wtext.disabled = true;
+    wdelete.disabled = true;
 
-        /**
-         * Handle a mouse down event.
-         */
-        elem.onmousedown = function() {
-            window.event.returnValue = false;
+    // Trigger widget select and page change events
+    page.onpagechange = onchange;
+    page.onwidgetselect = onselect;
 
-            // Find a draggable element
-            page.dragging = page.draggable(window.event.srcElement, elem);
+    /**
+     * Handle a mouse down event.
+     */
+    elem.onmousedown = function(e) {
+
+        // Find a draggable element
+        page.dragging = page.draggable(e.target, elem);
+        page.selected = page.dragging;
+        if (page.dragging == null) {
+
+            // Reset current selection
+            wname.value = '';
+            wname.disabled = true;
+            wtext.value = '';
+            wtext.disabled = true;
+            wdelete.disabled = true;
+
+            // Trigger widget select event
+            page.onwidgetselect('');
+            return true;
+        }
+
+        // Clone element dragged from palette
+        if (page.dragging.id.substring(0, 8) == 'palette:') {
+            page.dragging = page.clone(page.dragging);
             page.selected = page.dragging;
-            if (page.dragging == null) {
-
-                // Reset current selection
-                wname.value = '';
-                wname.disabled = true;
-                wtext.value = '';
-                wtext.disabled = true;
-                return false;
-            }
-
-            // Clone element dragged from palette
-            if (page.dragging.id.substring(0, 8) == 'palette:') {
-                page.dragging = page.clone(page.dragging);
-                page.selected = page.dragging;
-            }
 
+            // Move into the editing area and hide the palette
+            page.selected.style.left = ui.pixpos(ui.numpos(page.selected.style.left) + palcx);
+            elem.style.left = ui.pixpos(palcx * -1);
+        
             // Bring it to the top
             page.bringtotop(page.dragging);
 
-            // Save the mouse position
-            page.dragX = window.event.clientX;
-            page.dragY = window.event.clientY;
-            elem.setCapture();
-
-            // Update the widget name and text fields
-            wname.value = page.selected.id;
-            wname.disabled = false;
-            wtext.value = page.text(page.selected);
-            wtext.disabled = !page.hastext(page.selected);
-            return false;
-        };
-
-        /**
-         * Handle a mouse up event.
-         */
-        elem.onmouseup = function() {
-            if (page.dragging == null)
-                return false;
-
-            // Snap to grid
-            var newX = page.gridsnap(ui.csspos(page.dragging.style.left));
-            var newY = page.gridsnap(ui.csspos(page.dragging.style.top));
-            page.dragging.style.left = newX;
-            page.dragging.style.top = newY;
-            page.dragging.cover.style.left = newX;
-            page.dragging.cover.style.top = newY;
-
-            // Fixup widget style
-            page.fixupwidget(page.dragging);
-
-            // Discard element dragged out of page area
-            if (ui.csspos(page.dragging.style.left) < palcx && page.dragging.id.substring(0, 8) != 'palette:') {
-                if (ui.csspos(page.dragging.style.left) >= trashcx) {
-
-                    // Unless it's close enough to page area, then move it there
-                    page.dragging.style.left = palcx;
-                    page.dragging.cover.style.left = palcx;
-                } else {
-                    page.dragging.parentNode.removeChild(page.dragging);
-
-                    // Reset current selection
-                    page.selected = null;
-                    wname.value = '';
-                    wname.disabled = true;
-                    wtext.value = '';
-                    wtext.disabled = true;
-                }
-            }
-
-            // Forget current dragged element
-            page.dragging = null;
-            elem.releaseCapture();
-            
-            // Trigger page change event
-            page.onpagechange(false);
-            return false;
-        };
-
-        /**
-         * Handle a mouse move event.
-         */
-        elem.onmousemove = function() {
-            if (page.dragging == null)
-                return false;
-
-            // Compute dragged element position
-            var curX = ui.csspos(page.dragging.style.left);
-            var curY = ui.csspos(page.dragging.style.top);
-            var newX = curX + (window.event.clientX - page.dragX);
-            var newY = curY + (window.event.clientY - page.dragY);
-            if (newX >= 0)
-                page.dragX = window.event.clientX;
-            else
-                newX = 0;
-            if (newY >= 0)
-                page.dragY = window.event.clientY;
-            else
-                newY = 0;
-
-            // Move dragged element
-            page.dragging.style.left = newX;
-            page.dragging.style.top = newY;
-            page.dragging.cover.style.left = newX;
-            page.dragging.cover.style.top = newY;
-            return false;
-        };
-
-        /**
-         * Handle field on change events.
-         */
-        wname.onchange = wname.onblur = function() {
-            if (page.selected == null)
-                return false;
-            page.selected.id = wname.value;
-
             // Trigger page change event
             page.onpagechange(true);
-            return false;
-        };
-
-        wtext.onchange = wtext.onblur = function() {
-            if (page.selected == null)
-                return false;
-            page.settext(page.selected, wtext.value);
 
-            // Trigger page change event
-            page.onpagechange(true);
-            return false;
-        };
+        } else {
 
-        // Cover child elements with span elements to prevent
-        // any input events to reach them
-        map(page.cover, nodeList(elem.childNodes));
-
-        return elem;
+            // Bring it to the top
+            page.bringtotop(page.dragging);
+        }
+
+        // Remember mouse position
+        var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+        page.dragX = pos.screenX;
+        page.dragY = pos.screenY;
+
+        // Update the widget name and text fields
+        wname.value = page.selected.id;
+        wname.disabled = false;
+        wtext.value = page.text(page.selected);
+        wtext.disabled = !page.hastext(page.selected);
+        wdelete.disabled = false;
+
+        // Trigger widget select event
+        page.onwidgetselect(page.selected.id);
+
+        if (e.preventDefault)
+            e.preventDefault();
+        else
+            e.returnValue = false;
+        return true;
     };
 
-} else {
+    // Support touch devices
+    elem.ontouchstart = elem.onmousedown;
 
     /**
-     * Init a page editor. Generic implementation for all other browsers.
+     * Handle a mouse up event.
      */
-    page.edit = function(elem, wname, wtext, onchange) {
-
-        // Track element dragging and selection
-        page.dragging = null;
-        page.selected = null;
-        wname.disabled = true;
-        wtext.disabled = true;
-
-        // Trigger page change events
-        page.onpagechange = onchange;
-
-        /**
-         * Handle a mouse down event.
-         */
-        elem.onmousedown = function(e) {
-            if (e.preventDefault)
-                e.preventDefault();
-            else
-                e.returnValue = false;
-
-            // Find a draggable element
-            page.dragging = page.draggable(e.target, elem);
-            page.selected = page.dragging;
-            if (page.dragging == null) {
+    elem.onmouseup = function(e) {
+        if (page.dragging == null)
+            return true;
+
+        // Snap to grid
+        var newX = page.gridsnap(ui.numpos(page.dragging.style.left));
+        var newY = page.gridsnap(ui.numpos(page.dragging.style.top));
+        page.dragging.style.left = ui.pixpos(newX);
+        page.dragging.style.top = ui.pixpos(newY);
+        page.dragging.cover.style.left = ui.pixpos(newX);
+        page.dragging.cover.style.top = ui.pixpos(newY);
+
+        // Fixup widget style
+        page.fixupwidget(page.dragging);
+
+        // Discard element dragged out of page area
+        if (ui.numpos(page.dragging.style.left) < palcx && page.dragging.id.substring(0, 8) != 'palette:') {
+            if (ui.numpos(page.dragging.style.left) >= trashcx) {
+
+                // Unless it's close enough to page area, then move it there
+                page.dragging.style.left = ui.pixpos(palcx);
+                page.dragging.cover.style.left = ui.pixpos(palcx);
+            } else {
+                page.dragging.parentNode.removeChild(page.dragging);
 
                 // Reset current selection
+                page.selected = null;
                 wname.value = '';
                 wname.disabled = true;
                 wtext.value = '';
                 wtext.disabled = true;
-                return false;
-            }
+                wdelete.disabled = true;
 
-            // Clone element dragged from palette
-            if (page.dragging.id.substring(0, 8) == 'palette:') {
-                page.dragging = page.clone(page.dragging);
-                page.selected = page.dragging;
+                // Trigger widget select event
+                page.onwidgetselect('');
             }
+        }
 
-            // Bring it to the top
-            page.bringtotop(page.dragging);
+        // Forget dragged element
+        page.dragging = null;
 
-            // Remember mouse position
-            var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+        // Trigger page change event
+        page.onpagechange(false);
+        return true;
+    };
+
+    // Support touch devices
+    elem.ontouchend = elem.onmouseup;
+
+    /**
+     * Handle a mouse move event.
+     */
+    window.onmousemove = function(e) {
+        if (page.dragging == null)
+            return true;
+
+        // Compute position of dragged element
+        var curX = ui.numpos(page.dragging.style.left);
+        var curY = ui.numpos(page.dragging.style.top);
+        var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+        var newX = curX + (pos.screenX - page.dragX);
+        var newY = curY + (pos.screenY - page.dragY);
+        if (newX >= 0)
             page.dragX = pos.screenX;
+        else
+            newX = 0;
+        if (newY >= 0)
             page.dragY = pos.screenY;
+        else
+            newY = 0;
+
+        // Move the dragged element
+        page.dragging.style.left = ui.pixpos(newX);
+        page.dragging.style.top = ui.pixpos(newY);
+        page.dragging.cover.style.left = ui.pixpos(newX);
+        page.dragging.cover.style.top = ui.pixpos(newY);
+        return true;
+    };
 
-            // Update the widget name and text fields
-            wname.value = page.selected.id;
-            wname.disabled = false;
-            wtext.value = page.text(page.selected);
-            wtext.disabled = !page.hastext(page.selected);
-            return false;
-        };
-
-        // Support touch devices
-        elem.ontouchstart = elem.onmousedown;
-
-        /**
-         * Handle a mouse up event.
-         */
-        window.onmouseup = function(e) {
-            if (page.dragging == null)
-                return false;
-
-            // Snap to grid
-            var newX = page.gridsnap(ui.csspos(page.dragging.style.left));
-            var newY = page.gridsnap(ui.csspos(page.dragging.style.top));
-            page.dragging.style.left = newX;
-            page.dragging.style.top = newY;
-            page.dragging.cover.style.left = newX;
-            page.dragging.cover.style.top = newY;
-
-            // Fixup widget style
-            page.fixupwidget(page.dragging);
-
-            // Discard element dragged out of page area
-            if (ui.csspos(page.dragging.style.left) < palcx && page.dragging.id.substring(0, 8) != 'palette:') {
-                if (ui.csspos(page.dragging.style.left) >= trashcx) {
-
-                    // Unless it's close enough to page area, then move it there
-                    page.dragging.style.left = palcx;
-                    page.dragging.cover.style.left = palcx;
-                } else {
-                    page.dragging.parentNode.removeChild(page.dragging);
-
-                    // Reset current selection
-                    page.selected = null;
-                    wname.value = '';
-                    wname.disabled = true;
-                    wtext.value = '';
-                    wtext.disabled = true;
-                }
-            }
+    // Support touch devices
+    elem.ontouchmove = window.onmousemove;
 
-            // Forget dragged element
-            page.dragging = null;
+    /**
+     * Handle a mouse click event.
+     */
+    elem.onclick = function(e) {
+        if (page.dragging == null) {
 
-            // Trigger page change event
-            page.onpagechange(false);
+            // Dismiss the palette
+            if (ui.numpos(elem.style.left) != (palcx * -1))
+                elem.style.left = ui.pixpos(palcx * -1);
+        }
+        return true;
+    };
+
+    /**
+     * Handle field on change events.
+     */
+    wname.onchange = wname.onblur = function() {
+        if (page.selected == null)
             return false;
-        };
-
-        // Support touch devices
-        window.top.onmouseup = window.onmouseup;
-        window.ontouchend = window.onmouseup;
-        window.top.ontouchend = window.onmouseup;
-
-        /**
-         * Handle a mouse move event.
-         */
-        window.onmousemove = function(e) {
-            if (page.dragging == null)
-                return false;
-
-            // Compute position of dragged element
-            var curX = ui.csspos(page.dragging.style.left);
-            var curY = ui.csspos(page.dragging.style.top);
-            var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            var newX = curX + (pos.screenX - page.dragX);
-            var newY = curY + (pos.screenY - page.dragY);
-            if (newX >= 0)
-                page.dragX = pos.screenX;
-            else
-                newX = 0;
-            if (newY >= 0)
-                page.dragY = pos.screenY;
-            else
-                newY = 0;
-
-            // Move the dragged element
-            page.dragging.style.left = newX;
-            page.dragging.style.top = newY;
-            page.dragging.cover.style.left = newX;
-            page.dragging.cover.style.top = newY;
+        page.selected.id = wname.value;
+
+        // Trigger page change event
+        page.onpagechange(true);
+        return false;
+    };
+
+    wtext.onchange = wtext.onblur = function() {
+        if (page.selected == null)
             return false;
-        };
+        page.settext(page.selected, wtext.value);
+
+        // Trigger page change event
+        page.onpagechange(true);
+        return false;
+    };
 
-        // Support touch devices
-        window.top.onmousemove = window.onmousemove;
-        window.ontouchmove = window.onmousemove;
-        window.top.ontouchmove = window.onmousemove;
+    // Handle add widget event.
+    wadd.onclick = function() {
 
-        /**
-         * Handle field on change events.
-         */
-        wname.onchange = wname.onblue = function() {
-            if (page.selected == null)
-                return false;
-            page.selected.id = wname.value;
+        // Show the palette
+        elem.style.left = ui.pixpos(0);
+        return false;
+    };
 
-            // Trigger page change event
-            page.onpagechange(true);
+    // Handle delete event.
+    wdelete.onclick = function() {
+        if (page.selected == null)
             return false;
-        };
 
-        wtext.onchange = wtext.onblur = function() {
-            if (page.selected == null)
-                return false;
-            page.settext(page.selected, wtext.value);
+        // Remove selected widget
+        page.selected.parentNode.removeChild(page.selected);
 
-            // Trigger page change event
-            page.onpagechange(true);
-            return false;
-        };
+        // Reset current selection
+        page.selected = null;
+        wname.value = '';
+        wname.disabled = true;
+        wtext.value = '';
+        wtext.disabled = true;
+        wdelete.disabled = true;
 
-        // Cover child elements with span elements to prevent
-        // any input events to reach them
-        map(page.cover, nodeList(elem.childNodes));
+        // Trigger widget select event
+        page.onwidgetselect('');
 
-        return elem;
+        // Trigger page change event
+        page.onpagechange(true);
+        return false;
     };
-}
+
+    // Cover child elements with span elements to prevent
+    // any input events to reach them
+    map(page.cover, nodeList(elem.childNodes));
+
+    return elem;
+};
 
 /**
  * Return the text of a widget.
@@ -532,8 +435,8 @@ page.cover = function(e) {
         return e;
     var cover = document.createElement('span');
     cover.style.position = 'absolute';
-    cover.style.left = ui.csspos(e.style.left) - 5;
-    cover.style.top = ui.csspos(e.style.top) - 5;
+    cover.style.left = ui.pixpos(ui.numpos(e.style.left) - 5);
+    cover.style.top = ui.pixpos(ui.numpos(e.style.top) - 5);
     cover.style.width = e.clientWidth + 10;
     cover.style.height = e.clientHeight + 10;
     cover.style.visibility = 'visible';
@@ -568,8 +471,8 @@ page.clone = function(e) {
      */
     function posclone(ne, e) {
         ne.style.position = 'absolute';
-        ne.style.left = ui.csspos(e.style.left);
-        ne.style.top = ui.csspos(e.style.top);
+        ne.style.left = ui.pixpos(ui.numpos(e.style.left));
+        ne.style.top = ui.pixpos(ui.numpos(e.style.top));
         e.parentNode.appendChild(ne);
         page.cover(ne);
         return ne;
diff --git a/sca-cpp/trunk/modules/edit/htdocs/props/index.html b/sca-cpp/trunk/modules/edit/htdocs/props/index.html
deleted file mode 100644
index a6a8bc92fe..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/props/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>
-<title>Stats</title>
-<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
-<meta name="apple-mobile-web-app-capable" content="yes"/>
-<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-<link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-</head>
-<body class="delayed">
-<div id="menu"></div>
-
-<h1><span id="h1"></span><span id="appNameHeader"></span></h1>
-<br/>
-
-<div id="props"></div>
-
-<script type="text/javascript">
-
-/**
- * Return the link to an app.
- */
-function applink(appname) {
-    var protocol = window.location.protocol;
-    var host = window.location.hostname;
-    var port = ':' + window.location.port;
-    if (port == ':80' || port == ':443' || port == ':')
-        port = '';
-    var link = protocol + '//' + appname + '.' + host + port + '/';
-    return link;
-}
-
-// Get the app name
-var appname = ui.queryParams()['app'];
-
-// Update the window title
-document.title = windowtitle(window.location.hostname) + ' - Stats - ' + appname;
-$('h1').innerHTML = hometitle(window.location.hostname);
-$('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
-
-// Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
-
-/**
- * Display the properties editor for an app.
- */
-function editapp(name) {
-    if (isNil(name))
-        return;
-    ui.loadiframe('props', 'props.html?app=' + name);
-}
-
-// Display the editor for the current app
-editapp(appname);
-
-</script>
-
-</body>
-</html>
-
diff --git a/sca-cpp/trunk/modules/edit/htdocs/props/props.html b/sca-cpp/trunk/modules/edit/htdocs/props/props.html
deleted file mode 100644
index 93910a2022..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/props/props.html
+++ /dev/null
@@ -1,160 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>  
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/elemutil.js"></script>
-<script type="text/javascript" src="/xmlutil.js"></script>
-<script type="text/javascript" src="/atomutil.js"></script>
-<script type="text/javascript" src="/scdl.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
-</head>  
-<body class="delayed">
-
-<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
-
-<table style="width: 100%;">
-<tr>
-<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px;">Stats</th>
-
-<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">
-<input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/>
-</th>
-</tr>
-</table>
-<br>
-
-<div>
-<form id="appForm">
-<table style="width: 100%;">
-<tr><tr><td><b>App Icon:</b></td></tr>
-<tr><td><img src="/public/app.png" style="width: 50px; height: 50px;"></td></tr>
-<tr><tr><td><b>App Title:</b></td></tr>
-<tr><td><input type="text" id="appTitle" size="80"/></td></tr>
-<tr><tr><td><b>Category:</b></td></tr>
-<tr><td><input type="text" id="appCategory" size="15"/></td></tr>
-<tr><tr><td><b>Updated:</b></td></tr>
-<tr><td><span id="appUpdated"></span></td></tr>
-<tr><tr><td><b>Description:</b></td></tr>
-<tr><td><textarea id="appDescription" cols="80" rows="5"></textarea></td></tr>
-</table>
-</form>
-</div>
-
-</div>
-
-<script type="text/javascript">
-if (ui.isIE()) $('bodydiv').style.right = -20;
-
-// Init service references
-var editWidget = sca.component("EditWidget");
-var dashboard = sca.reference(editWidget, "dashboard");
-
-/**
- * The current app name.
- */
-var appname = ui.queryParams()['app'];
-
-/**
- * The current app entry and corresponding saved XML content.
- */
-var appentry;
-var savedappentryxml = '';
-
-/**
- * Default field values.
- */
-var deftitle = 'Enter the title of your app here';
-var defcategory = 'Cool Apps';
-var defdate = 'Feb 4, 2011';
-var defdesc = 'Enter a short description of your app here';
-
-/**
- * Get and display an app.
- */
-function getapp(name) {
-    dashboard.get(name, function(doc) {
-        appentry = doc != null? car(elementsToValues(atom.readATOMEntry(mklist(doc)))) : mklist("'entry", mklist("'title", ''), mklist("'id", name));
-        var title = cadr(assoc("'title", cdr(appentry)));
-        $('appTitle').value = title != ''? title : deftitle;
-        $('appCategory').value = defcategory;
-        $('appUpdated').innerHTML = defdate;
-        $('appDescription').innerHTML = defdesc;
-        savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry))));
-
-        // Show the page
-        ui.showbody();
-    });
-}
-
-/**
- * Handle save button click event.
- */
-$('saveButton').onclick = function() {
-    return save();
-};
-
-/**
- * Save the current app.
- */
-function save() {
-    $('saveButton').value = 'Saving';
-    var title = $('appTitle').value;
-    var appentry = mklist("'entry", mklist("'title", title != deftitle && title != ''? title : appname), mklist("'id", appname));
-    savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry))));
-    dashboard.put(appname, savedappentryxml, function() {
-        if (savedappentryxml == car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))))
-            $('saveButton').value = 'Saved';
-        return true;
-    });
-    return true;
-}
-
-/**
- * Handle a change event
- */
-function onappchange() {
-    var title = $('appTitle').value;
-    var appentry = mklist("'entry", mklist("'title", title != deftitle && title != ''? title : appname), mklist("'id", appname));
-    if (savedappentryxml == car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))))
-        return false;
-    $('saveButton').value = 'Save now';
-
-    // Autosave after 3 seconds
-    setTimeout(function() {
-        if (savedappentryxml == car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))))
-            return false;
-        return save();
-    }, 3000);
-    return true;
-}
-
-$('appTitle').onchange = onappchange;
-$('appCategory').onchange = onappchange;
-$('appDescription').onchange = onappchange;
-
-// Get the current app
-getapp(appname);
-
-</script>
-</body>
-</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/delete.png b/sca-cpp/trunk/modules/edit/htdocs/public/delete.png
new file mode 100644
index 0000000000..fb56bae030
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/delete.png
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/delete.xcf b/sca-cpp/trunk/modules/edit/htdocs/public/delete.xcf
new file mode 100644
index 0000000000..7691f50cc5
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/delete.xcf
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html b/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html
index cc44f5d428..060e929dd1 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -22,7 +23,7 @@
 <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 </head>
 <body style="margin:3px; padding: 0px; background-color: #dcdcdc;">
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html
index a283b3e89e..c4db51cfd3 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -22,42 +23,52 @@
 <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1 id="h1"></h1>
+<table style="width: 100%;">
+<tr><td><h1><span id="h1"></span></h1></td></tr>
+</table>
 <br/>
 
+<div style="margin-left: auto; margin-right: auto; text-align: center;">
 <div class="hd2">Sorry, you're not authorized to view this page.</div>
+</div>
+
+</div>
 
 <form name="signout" action="/public/notauth.html" method="GET">
 </form>
 
 <script type="text/javascript">
+// Set page title
+$('h1').innerHTML = hometitle(window.location.hostname);
 
 // Load the menu bar
 if (!issubdomain(window.location.hostname))
-    ui.loadwidget('menu', '/menu.html', ui.showbody);
+    displaymenu();
 
-$('h1').innerHTML = hometitle(window.location.hostname);
+// Show the page
+ui.showbody();
 
-if (issubdomain(window.location.hostname))
-    ui.showbody();
+// Sign out
+if (window.top.location.pathname != '/public/notauth.html') {
+    function submitSignout() {
+        var reset = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';domain=.' + domainname(window.location.hostname) + ';path=/;secure=TRUE';
+        document.cookie = reset;
+        document.signout.submit();
+        return true;
+    }
 
-function submitSignout() {
-    var reset = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';domain=.' + domainname(window.location.hostname) + ';path=/;secure=TRUE';
-    document.cookie = reset;
-    document.signout.submit();
-    return true;
-}
-
-if (window.top.location.pathname != '/public/notauth.html')
     submitSignout();
+}
 </script>
 
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html
index da56789a66..9721804eb2 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -22,30 +23,38 @@
 <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1 id="h1"></h1>
+<table style="width: 100%;">
+<tr><td><h1><span id="h1"></span></h1></td></tr>
+</table>
 <br/>
 
+<div style="margin-left: auto; margin-right: auto; text-align: center;">
 <div class="hd2">Sorry, that page was not found.</div>
 <div>You may have clicked an expired link or mistyped the address.</div>
+</div>
+
+</div>
 
 <script type="text/javascript">
+// Set page title
+$('h1').innerHTML = hometitle(window.location.hostname);
 
 // Load the menu bar
 if (!issubdomain(window.location.hostname))
-    ui.loadwidget('menu', '/menu.html', ui.showbody);
-
-$('h1').innerHTML = hometitle(window.location.hostname);
+    displaymenu();
 
-if (issubdomain(window.location.hostname))
-    ui.showbody();
+// Show the page
+ui.showbody();
 </script>
 
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html b/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html
index 7a6a82ded6..bec4731415 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -22,30 +23,38 @@
 <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1 id="h1"></h1>
+<table style="width: 100%;">
+<tr><td><h1><span id="h1"></span></h1></td></tr>
+</table>
 <br/>
 
+<div style="margin-left: auto; margin-right: auto; text-align: center;">
 <div class="hd2">Sorry, that page is still under construction.</div>
 <div>Please check back later.</div>
+</div>
+
+</div>
 
 <script type="text/javascript">
+// Set page title
+$('h1').innerHTML = hometitle(window.location.hostname);
 
 // Load the menu bar
 if (!issubdomain(window.location.hostname))
-    ui.loadwidget('menu', '/menu.html', ui.showbody);
-
-$('h1').innerHTML = hometitle(window.location.hostname);
+    displaymenu();
 
-if (issubdomain(window.location.hostname))
-    ui.showbody();
+// Show the page
+ui.showbody();
 </script>
 
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/oops.html b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html
index 4c926ac6d2..305e2c66e1 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/public/oops.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -22,29 +23,37 @@
 <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1 id="h1"></h1>
+<table style="width: 100%;">
+<tr><td><h1><span id="h1"></span></h1></td></tr>
+</table>
 <br/>
 
+<div style="margin-left: auto; margin-right: auto; text-align: center;">
 <div class="hd2">Oops, something went wrong...</div>
+</div>
+
+</div>
 
 <script type="text/javascript">
+// Set page title
+$('h1').innerHTML = hometitle(window.location.hostname);
 
 // Load the menu bar
 if (!issubdomain(window.location.hostname))
-    ui.loadwidget('menu', '/menu.html', ui.showbody);
-
-$('h1').innerHTML = hometitle(window.location.hostname);
+    displaymenu();
 
-if (issubdomain(window.location.hostname))
-   ui.showbody();
+// Show the page
+ui.showbody();
 </script>
 
 </body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/stats/index.html b/sca-cpp/trunk/modules/edit/htdocs/stats/index.html
new file mode 100644
index 0000000000..737bb0bef4
--- /dev/null
+++ b/sca-cpp/trunk/modules/edit/htdocs/stats/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+-->
+<html>
+<head>
+<title>Stats</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<link rel="apple-touch-icon" href="/public/touchicon.png"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
+<script type="text/javascript" src="/config.js"></script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
+</head>
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
+<div id="menu"></div>
+
+<table style="width: 100%;">
+<tr>
+<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td>
+<td style="vertical-align: middle; text-align: right;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td>
+</tr>
+</table>
+
+<table style="width: 100%;">
+<tr>
+<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px;">Stats</th>
+</tr>
+</table>
+
+<form id="appForm" style="position: absolute; top: 90px; left: 0px;">
+<table style="width: 100%;">
+<tr><tr><td><b>App Icon:</b></td></tr>
+<tr><td><img src="/public/app.png" style="width: 50px; height: 50px; vertical-align: top;"></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Sharing:</b></td></tr>
+<tr><td><input type="checkbox" value="shared"/><span>Shared</span></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>App Title:</b></td></tr>
+<tr><td><input type="text" id="appTitle" size="30" placeholder="Enter the title of your app" style="width: 300px;"/></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Updated:</b></td></tr>
+<tr><td><span id="appUpdated"></span></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Description:</b></td></tr>
+<tr><td><textarea id="appDescription" cols="40" rows="3" placeholder="Enter a short description of your app" style="width: 300px;"></textarea></td></tr>
+</table>
+</form>
+
+</div>
+
+<script type="text/javascript">
+// Get the app name
+var appname = ui.queryParams()['app'];
+if (isNil(appname))
+    window.open('/', '_self');
+
+/**
+ * Return the link to an app.
+ */
+function applink(appname) {
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/';
+    return link;
+}
+
+// Set page titles
+document.title = windowtitle(window.location.hostname) + ' - Stats - ' + appname;
+$('h1').innerHTML = hometitle(window.location.hostname);
+$('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
+
+// Load the menu bar
+displaymenu();
+
+// Show the page
+ui.showbody();
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var dashboard = sca.reference(editWidget, "dashboard");
+
+/**
+ * The current app entry and corresponding saved XML content.
+ */
+var appentry;
+var savedappentryxml = '';
+
+/**
+ * Get and display an app.
+ */
+function getapp(name) {
+    if (isNil(name))
+        return false;
+    return dashboard.get(name, function(doc) {
+        appentry = doc != null? car(elementsToValues(atom.readATOMEntry(mklist(doc)))) : mklist("'entry", mklist("'title", ''), mklist("'id", name));
+        var title = cadr(assoc("'title", cdr(appentry)));
+        $('appTitle').value = title;
+        $('appUpdated').innerHTML = 'Apr 24, 2011'
+        $('appDescription').innerHTML = '';
+        savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry))));
+        return true;
+    });
+}
+
+/**
+ * Save the current app.
+ */
+function save(entryxml) {
+    $('saveStatus').innerHTML = 'Saving';
+    savedappentryxml = entryxml;
+    dashboard.put(appname, savedappentryxml);
+    $('saveStatus').innerHTML = 'Saved';
+    return true;
+}
+
+/**
+ * Handle a change event
+ */
+function onappchange() {
+    var title = $('appTitle').value;
+    var appentry = mklist("'entry", mklist("'title", title != ''? title : appname), mklist("'id", appname));
+    var entryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry))));
+    if (savedappentryxml == entryxml)
+        return false;
+    $('saveStatus').innerHTML = 'Modified';
+    return save(entryxml);
+}
+
+$('appTitle').onchange = onappchange;
+$('appDescription').onchange = onappchange;
+
+/**
+ * Handle a form submit event.
+ */
+$('appForm').onsubmit = function() {
+    onappchange();
+    return false;
+};
+
+// Get the current app
+getapp(appname);
+
+</script>
+
+</body>
+</html>
+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/store/index.html b/sca-cpp/trunk/modules/edit/htdocs/store/index.html
index 596f2e00c8..3c79f6c780 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/store/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/store/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -23,37 +24,162 @@
 <meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
 <link rel="apple-touch-icon" href="/public/touchicon.png"/>
-<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
 <script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript">
-document.title = windowtitle(window.location.hostname) + ' - Store';
-</script>
+<script type="text/javascript" src="/all-min.js"></script>
+<script type="text/javascript" src="/menu.js"></script>
 </head>
-<body class="delayed">
+<body class="delayed" onorientationchange="ui.reload();">
+<div id="bodydiv" class="devicewidth">
+
 <div id="menu"></div>
 
-<h1 id="h1"></h1>
-<br/>
+<table style="width: 100%;">
+<tr><td><h1><span id="h1"></span></h1></td></tr>
+</table>
 
-<div id="store"></div>
+<div id="catmenu"></div>
 
-<script type="text/javascript">
+<div id="apps"></div>
 
-// Load the menu bar
-ui.loadwidget('menu', '/menu.html', ui.showbody);
+</div>
 
+<script type="text/javascript">
+// Set page titles
+document.title = windowtitle(window.location.hostname) + ' - Store';
 $('h1').innerHTML = hometitle(window.location.hostname);
 
+// Display the menu bar
+displaymenu();
+
 // Get the store category
 var category = ui.queryParams()['category'];
 if (isNil(category))
     category = 'myapps';
 
-// Load the store
-$('store').innerHTML =
-    '<iframe id="storeFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="store.html?category=' + category + '"></iframe>';
+/**
+ * Build store menu bar
+ */
+function catmenu() {
+    function catmenuitem(name, cat) {
+        var c = cat == category? 'smenu' : 'amenu';
+        return '<th class="thl thr" style="width: 10px; padding-top: 4px; padding-bottom: 4px; padding-right: 6px;">'
+                + ui.ahref('/store/?category=' + cat, '_self', '<span class="' + c + '">' + name + '</span>') + '</th>';
+    }
+
+    var m = '<table style="width: 100%;"><tr>';
+    m += catmenuitem('My Apps', 'myapps');
+    m += catmenuitem('New', 'new');
+    m += catmenuitem('Top', 'top');
+    m += catmenuitem('Featured', 'featured');
+    m += catmenuitem('All', 'all');
+    if (category == 'myapps') {
+        m += '<th class="thl thr" style="width: 100%; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">';
+        m += '<input type="button" class="greenbutton" id="createApp" title="Create a new app" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px; height: 24px;" Value="New App"/>';
+        m += '</th></tr></table>';
+        return m;
+    }
+    m += '<th class="thl thr" style="width: 100%;"></th></tr></table>';
+    return m;
+}
+
+// Build store menu bar
+$('catmenu').innerHTML = catmenu();
+
+// Show the page
+ui.showbody();
+
+/**
+ * Service references.
+ */
+var editWidget = sca.component("EditWidget");
+var store = sca.reference(editWidget, "store");
+var dashboard = sca.reference(editWidget, "dashboard");
+
+/**
+ * Return the link to an app.
+ */
+function applink(appname) {
+    var protocol = window.location.protocol;
+    var host = window.location.hostname;
+    var port = ':' + window.location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + appname + '.' + host + port + '/';
+    return link;
+}
+
+/**
+ * Edit an app.
+ */
+function editApp(appname) {
+    return window.open('/page/?app=' + appname, '_self');
+}
+
+/**
+ * Create an app.
+ */
+if (category == 'myapps') {
+    $('createApp').onclick = function() {
+        return window.open('/create/', '_self');
+    }
+}
+
+/**
+ * Clone an app.
+ */
+function cloneApp(appname) {
+    return window.open('/clone/?app=' + appname, '_self');
+}
+
+/**
+ * Get and display list of apps.
+ */
+function getapps(category) {
+    function display(doc) {
+        var apps = '<div>';
+        var feed = car(elementsToValues(atom.readATOMFeed(mklist(doc))));
+        var entries = cadr(assoc("'entry", cdr(feed)));
+        for (var i = 0; i < length(entries); i++) {
+            var entry = entries[i];
+            var title = cadr(assoc("'title", entry))
+            var name = cadr(assoc("'id", entry))
+            var author = 'joe';
+            var clone = isNil(config.clone)? 'Clone' : config.clone;
+
+            apps += '<div class="box" style="width: 285px; display: inline-block; border: 1px; border-style: solid; border-color: #dcdcdc; border-collapse: collapse; margin: 5px; padding: 10px; vertical-align: top;">'
+            apps += '<table><tr>';
+            apps += '<td>';
+            apps += '<div>' + ui.ahref(applink(name), '_blank', '<img src="/public/app.png" width="50" height="50" style="height: 50px; width: 50px; vertical-align: top; margin-right: 10px; margin-bottom: 5px;"></img>') + '</div>';
+            apps += '<div><input type="button" class="greenbutton" id="cloneApp" value="' + clone + '" title="' + clone + ' this app" onclick="cloneApp(\'' + name + '\');"></div>';
+            if (category == 'myapps')
+                apps += '<div><input type="button" id="editApp" class="bluebutton" value="Edit" title="Edit this app" onclick="editApp(\'' + name + '\');"></div>';
+            apps += '</td>';
+            apps += '<td class="tdw">';
+            apps += '<div style="font-weight: bold">' + ui.ahref(applink(name), '_blank', name) + '</div>';
+            if (category == 'myapps')
+                apps += '<div style="color: #808080;">Shared</div>';
+            else
+                apps += '<div>' + 'by&nbsp;' + '<span style="font-weight: bold;">' + author + '</span></div>';
+            apps += '<div>Feb 4, 2011</div>';
+            apps += '<br/>';
+            apps += '<div>' + title + '</div>';
+            apps += '<br/>';
+            apps += '</td>';
+            apps += '</tr></table>';
+            apps += '</div>';
+        }
+        apps += '</div>';
+        $('apps').innerHTML = apps;
+    }
+
+    if (category == 'myapps')
+        return dashboard.get('', display);
+    return store.get(category, display);
+}
+
+// Get and display the list of apps
+getapps(category);
 
 </script>
 
diff --git a/sca-cpp/trunk/modules/edit/htdocs/store/store.html b/sca-cpp/trunk/modules/edit/htdocs/store/store.html
deleted file mode 100644
index c074cc24c2..0000000000
--- a/sca-cpp/trunk/modules/edit/htdocs/store/store.html
+++ /dev/null
@@ -1,165 +0,0 @@
-<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- * 
- *   http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.    
--->
-<html>
-<head>  
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/config.js"></script>
-<script type="text/javascript" src="/util.js"></script>
-<script type="text/javascript" src="/elemutil.js"></script>
-<script type="text/javascript" src="/xmlutil.js"></script>
-<script type="text/javascript" src="/atomutil.js"></script>
-<script type="text/javascript" src="/scdl.js"></script>
-<script type="text/javascript" src="/ui.js"></script>
-<script type="text/javascript" src="/component.js"></script>
-</head>  
-<body class="delayed">
-
-<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;">
-
-<div id="catmenu"></div>
-
-<div id="apps"></div>
-<br/>
-
-<script type="text/javascript">
-if (ui.isIE()) $('bodydiv').style.right = -20;
-
-/**
- * The current app category.
- */
-var category = ui.queryParams()['category'];
-if (isNil(category))
-    category = 'myapps';
-log('category', category);
-
-/**
- * Build store menu bar
- */
-function catmenu() {
-    function catmenuitem(name, cat) {
-        var c = cat == category? 'smenu' : 'amenu';
-        return '<th class="thl thr" style="width: 30px; padding-top: 4px; padding-bottom: 4px; padding-right: 10px;">'
-                + ui.ahref('/store/?category=' + cat, '_parent', '<span class="' + c + '">' + name + '</span>') + '</th>';
-    }
-
-    var m = '<table style="width: 100%;"><tr>';
-    m += catmenuitem('My Apps', 'myapps');
-    m += catmenuitem('New Apps', 'new');
-    m += catmenuitem('Top Charts', 'top');
-    m += catmenuitem('Featured', 'featured');
-    m += '<th class="thl thr" style="width: 100%;"></th></tr></table>';
-    return m;
-}
-
-// Build store menu bar
-$('catmenu').innerHTML = catmenu();
-
-/**
- * Service references.
- */
-var editWidget = sca.component("EditWidget");
-var store = sca.reference(editWidget, "store");
-var dashboard = sca.reference(editWidget, "dashboard");
-
-/**
- * Return the link to an app.
- */
-function applink(appname) {
-    var protocol = window.location.protocol;
-    var host = window.location.hostname;
-    var port = ':' + window.location.port;
-    if (port == ':80' || port == ':443' || port == ':')
-        port = '';
-    var link = protocol + '//' + appname + '.' + host + port + '/';
-    return link;
-}
-
-/**
- * Edit an app.
- */
-function editApp(appname) {
-    return window.open('/page?app=' + appname, '_parent');
-}
-
-/**
- * Clone an app.
- */
-function cloneApp(appname) {
-    return window.open('/public/notyet.html', '_parent');
-}
-
-/**
- * Get and display list of apps.
- */
-function getapps(category) {
-    function display(doc) {
-        var apps = '<div>';
-        var feed = car(elementsToValues(atom.readATOMFeed(mklist(doc))));
-        var entries = cadr(assoc("'entry", cdr(feed)));
-        for (var i = 0; i < length(entries); i++) {
-            var entry = entries[i];
-            var title = cadr(assoc("'title", entry))
-            var name = cadr(assoc("'id", entry))
-            var author = 'joe@localhost';
-            var clone = isNil(config.clone)? 'Clone' : config.clone;
-
-            apps += '<div class="box" style="width: 250px; display: inline-block; border: 1px; border-style: solid; border-color: #dcdcdc; border-collapse: collapse; margin: 5px; padding: 10px; vertical-align: top;">'
-            apps += '<table><tr>';
-            apps += '<td>';
-            apps += '<div>' + ui.ahref(applink(name), '_blank', '<img src="/public/app.png" width="50" height="50" style="height: 50px; width: 50px; vertical-align: top; margin-right: 10px; margin-bottom: 5px;"></img>') + '</div>';
-            apps += '<div><input type="button" id="cloneApp" value="' + clone + '" title="' + clone + ' this app" onclick="cloneApp(\'' + name + '\');"></div>';
-            if (category == 'myapps')
-                apps += '<div><input type="button" id="editApp" value="Edit" title="Edit this app" onclick="editApp(\'' + name + '\');"></div>';
-            apps += '</td>';
-            apps += '<td class="tdw">';
-            apps += '<div style="font-weight: bold">' + ui.ahref(applink(name), '_blank', name) + '</div>';
-            apps += '<div>' + 'by&nbsp;' + '<span style="font-weight: bold;">' + author + '</span></div>';
-            apps += '<div>Feb 4, 2011</div>';
-            apps += '<br/>';
-            apps += '<div>' + title + '</div>';
-            apps += '<br/>';
-            apps += '</td>';
-            apps += '</tr></table>';
-            apps += '</div>';
-        }
-        apps += '</div>';
-        $('apps').innerHTML = apps;
-
-        // Show the page
-        ui.showbody();
-    }
-
-    if (category == 'myapps') {
-        dashboard.get('', function(doc) {
-            display(doc);
-        });
-        return true;
-    }
-    store.get(category, function(doc) {
-        display(doc);
-    });
-    return true;
-}
-
-// Get and display the list of apps
-getapps(category);
-
-</script>
-</body>
-</html>
diff --git a/sca-cpp/trunk/modules/edit/mkapplinks b/sca-cpp/trunk/modules/edit/mkapplinks
index 7d30f1002f..94f455ba48 100755
--- a/sca-cpp/trunk/modules/edit/mkapplinks
+++ b/sca-cpp/trunk/modules/edit/mkapplinks
@@ -30,18 +30,3 @@ for n in `ls apps | awk '{ printf "apps/%s/lib\n", $1 }'`; do
     fi
 done
 
-for n in `ls apps | awk '{ printf "apps/%s/htdocs\n", $1 }'`; do
-    if [ ! -e "$n" ]; then
-        mkdir "$n"
-        ln -s ../../../htdocs/cache-manifest.cmf "$n/cache-manifest.cmf"
-        ln -s ../../../htdocs/login "$n/login"
-        ln -s ../../../htdocs/logout "$n/logout"
-        ln -s ../../../htdocs/public "$n/public"
-        ln -s ../../../htdocs/data "$n/data"
-        ln -s ../../../htdocs/app/index.html "$n/index.html"
-        ln -s ../../../htdocs/robots.txt "$n/robots.txt"
-        ln -s ../../../htdocs/favicon.ico "$n/favicon.ico"
-        ln -s ../app.html "$n/app.html"
-    fi
-done
-
diff --git a/sca-cpp/trunk/modules/edit/ssl-start b/sca-cpp/trunk/modules/edit/ssl-start
index 36bef12413..be465261dd 100755
--- a/sca-cpp/trunk/modules/edit/ssl-start
+++ b/sca-cpp/trunk/modules/edit/ssl-start
@@ -93,16 +93,25 @@ SCAVirtualComposite app.composite
 
 EOF
 
-# Configure look and feel
-cat >>tmp/conf/httpd.conf <<EOF
-# Override CSS
-#Alias /ui.css $jsprefix/htdocs/uicyan.css
-
-EOF
-
 # Create app links and sub-directories if needed
 ./mkapplinks
 
+# Configure app aliases
+cat >>tmp/conf/dvhost-ssl.conf <<EOF
+# Configure aliases
+Alias /cache-manifest.cmf $here/htdocs/app/cache-manifest.cmf
+Alias /data $here/htdocs/data
+Alias /favicon.ico $here/htdocs/favicon.ico
+Alias /login $here/htdocs/login
+Alias /logout $here/htdocs/logout
+Alias /public $here/htdocs/public
+Alias /robots.txt $here/htdocs/robots.txt
+Alias /index.html $here/htdocs/app/index.html
+Alias /menu.js $here/htdocs/menu.js
+Alias /config.js $here/htdocs/config.js
+
+EOF
+
 # Create application database directories
 mkdir -p tmp/appdata/filedb
 
diff --git a/sca-cpp/trunk/modules/edit/start b/sca-cpp/trunk/modules/edit/start
index 9b6f1ed21d..051e591aec 100755
--- a/sca-cpp/trunk/modules/edit/start
+++ b/sca-cpp/trunk/modules/edit/start
@@ -69,16 +69,25 @@ SCAVirtualComposite app.composite
 
 EOF
 
-# Configure look and feel
-cat >>tmp/conf/httpd.conf <<EOF
-# Override CSS
-#Alias /ui.css $jsprefix/htdocs/uicyan.css
-
-EOF
-
 # Create app links and sub-directories if needed
 ./mkapplinks
 
+# Configure app aliases
+cat >>tmp/conf/dvhost.conf <<EOF
+# Configure aliases
+Alias /cache-manifest.cmf $here/htdocs/app/cache-manifest.cmf
+Alias /data $here/htdocs/data
+Alias /favicon.ico $here/htdocs/favicon.ico
+Alias /login $here/htdocs/login
+Alias /logout $here/htdocs/logout
+Alias /public $here/htdocs/public
+Alias /robots.txt $here/htdocs/robots.txt
+Alias /index.html $here/htdocs/app/index.html
+Alias /menu.js $here/htdocs/menu.js
+Alias /config.js $here/htdocs/config.js
+
+EOF
+
 # Create application database directories
 mkdir -p tmp/appdata/filedb
 
diff --git a/sca-cpp/trunk/modules/js/Makefile.am b/sca-cpp/trunk/modules/js/Makefile.am
index e525332107..b2933e89b9 100644
--- a/sca-cpp/trunk/modules/js/Makefile.am
+++ b/sca-cpp/trunk/modules/js/Makefile.am
@@ -18,9 +18,15 @@
 incl_HEADERS = *.hpp
 incldir = $(prefix)/include/modules/js
 
+BUILT_SOURCES = htdocs/all.js
+htdocs/all.js: htdocs/util.js htdocs/elemutil.js htdocs/xmlutil.js htdocs/atomutil.js htdocs/jsonutil.js htdocs/scdl.js htdocs/ui.js htdocs/component.js
+	cat htdocs/util.js htdocs/elemutil.js htdocs/xmlutil.js htdocs/atomutil.js htdocs/jsonutil.js htdocs/scdl.js htdocs/ui.js htdocs/component.js >htdocs/all.js
+
+CLEANFILES = htdocs/all.js
+
 moddir = $(prefix)/modules/js
 nobase_dist_mod_DATA = htdocs/*.js htdocs/*.css
-EXTRA_DIST = htdocs/*.js htdocs/*.css
+EXTRA_DIST = htdocs/*.js htdocs/*.css htdocs/all.js
 
 js_test_SOURCES = js-test.cpp
 js_test_LDFLAGS = -lmozjs 
diff --git a/sca-cpp/trunk/modules/js/htdocs/all-min.js b/sca-cpp/trunk/modules/js/htdocs/all-min.js
new file mode 100644
index 0000000000..bb79a5bb2d
--- /dev/null
+++ b/sca-cpp/trunk/modules/js/htdocs/all-min.js
@@ -0,0 +1,377 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.    
+ */
+function cons(car,cdr){var a=new Array();a.push(car);return a.concat(cdr);}
+function car(l){return l[0];}
+function first(l){return car(l);}
+function cdr(l){return l.slice(1);}
+function rest(l){return cdr(l);}
+function cadr(l){return car(cdr(l));}
+function cddr(l){return cdr(cdr(l));}
+function caddr(l){return car(cddr(l));}
+function cdddr(l){return cdr(cdr(cdr(l)));}
+function cadddr(l){return car(cdddr(l));}
+function append(a,b){return a.concat(b);}
+function reverse(l){return l.slice(0).reverse();}
+function range(a,b){var l=new Array();for(var x=a;x<b;x++)
+l.push(x);return l;}
+function isNil(v){if(v==null||typeof v=='undefined'||(v.constructor==Array&&v.length==0))
+return true;return false;}
+function isSymbol(v){if(typeof v=='string'&&v.slice(0,1)=="'")
+return true;return false;}
+function isString(v){if(typeof v=='string'&&v.slice(0,1)!="'")
+return true;return false;}
+function isList(v){if(v!=null&&typeof v!='undefined'&&v.constructor==Array)
+return true;return false;}
+function isTaggedList(v,t){if(isList(v)&&!isNil(v)&&car(v)==t)
+return true;return false;}
+var emptylist=new Array();function mklist(){if(arguments.length==0)
+return emptylist;var a=new Array();for(i=0;i<arguments.length;i++)
+a[i]=arguments[i];return a;}
+function length(l){return l.length;}
+function assoc(k,l){if(isNil(l))
+return mklist();if(k==car(car(l)))
+return car(l);return assoc(k,cdr(l));}
+function map(f,l){if(isNil(l))
+return l;return cons(f(car(l)),map(f,cdr(l)));}
+function filter(f,l){if(isNil(l))
+return l;if(f(car(l)))
+return cons(car(l),filter(f,cdr(l)));return filter(f,cdr(l));}
+function reduce(f,i,l){if(isNil(l))
+return i;return reduce(f,f(i,car(l)),cdr(l));}
+function tokens(path){return filter(function(s){return length(s)!=0;},path.split("/"));}
+var rconsole;function log(v){try{var s='';for(i=0;i<arguments.length;i++){s=s+writeValue(arguments[i]);if(i<arguments.length)
+s=s+' ';}
+if(rconsole){try{rconsole.log(s);}catch(e){}}
+try{console.log(s);}catch(e){}}catch(e){}
+return true;}
+function debug(o){try{for(f in o){try{log('debug '+f+'='+o[f]);}catch(e){}}}catch(e){}
+return true;}
+var config;if(isNil(config))
+config={}
+function AssertException(){}
+AssertException.prototype.toString=function(){return'AssertException';};function assert(exp){if(!exp)
+throw new AssertException();}
+function writeStrings(l){if(isNil(l))
+return'';return car(l)+writeStrings(cdr(l));}
+function writeValue(v){function writePrimitive(p){if(isSymbol(p))
+return''+p.substring(1);if(isString(p))
+return'"'+p+'"';return''+p;}
+function writeList(l){if(isNil(l))
+return'';return' '+writeValue(car(l))+writeList(cdr(l));}
+if(!isList(v))
+return writePrimitive(v);if(isNil(v))
+return'()';return'('+writeValue(car(v))+writeList(cdr(v))+')';}
+function memo(obj,key,f){if(!obj[memo])
+obj.memo={};if(obj.memo[key])
+return obj.memo[key];return obj.memo[key]=f();}
+function unmemo(obj){obj.memo={};return true;}
+function properties(o){var a=new Array();for(p in o)
+a.push(p);return a;}
+function domainname(host){var h=reverse(host.split('.'));return reverse(mklist(car(h),cadr(h))).join('.');}
+function issubdomain(host){return host.split('.').length>2;}
+function hometitle(host){if(!isNil(config.hometitle))
+return config.hometitle;var h=reverse(host.split('.'));var d=isNil(cdr(h))?car(h):cadr(h);return d.substr(0,1).toUpperCase()+d.substr(1);}
+function windowtitle(host){if(!isNil(config.windowtitle))
+return config.windowtitle;var h=reverse(host.split('.'));var d=isNil(cdr(h))?car(h):cadr(h);return d.substr(0,1).toUpperCase()+d.substr(1);}
+function format(){var i=0;var s='';for(a in arguments){s=i==0?arguments[a]:s.replace('{'+a+'}',arguments[a]);i++;}
+return s;}
+function setcar(l,v){l[0]=v;return l;}
+function setcadr(l,v){l[1]=v;return l;}
+function setcaddr(l,v){l[2]=v;return l;}
+function setappend(a,b){if(isNil(b))
+return a;a.push(car(b));return setappend(a,cdr(b));}
+function setcdr(a,b){a.length=1;return setappend(a,b);}
+function setlist(a,b){if(b==a)
+return b;a.length=0;return setappend(a,b);}
+var element="'element"
+var attribute="'attribute"
+var atsign="'@"
+function isElement(v){if(!isList(v)||isNil(v)||car(v)!=element)
+return false;return true;}
+function isAttribute(v){if(!isList(v)||isNil(v)||car(v)!=attribute)
+return false;return true;}
+function attributeName(l){return cadr(l);}
+function attributeValue(l){return caddr(l);}
+function elementName(l){return cadr(l);}
+function elementHasChildren(l){return!isNil(cddr(l));}
+function elementChildren(l){return cddr(l);}
+function elementHasValue(l){r=reverse(l);if(isSymbol(car(r)))
+return false;if(isList(car(r))&&!isNil(car(r))&&isSymbol(car(car(r))))
+return false;return true;}
+function elementValue(l){return car(reverse(l));}
+function elementToValueIsList(v){if(!isList(v))
+return false;return isNil(v)||!isSymbol(car(v));}
+function elementToValue(t){if(isTaggedList(t,attribute))
+return mklist(atsign+attributeName(t).substring(1),attributeValue(t));if(isTaggedList(t,element)){if(elementHasValue(t)){if(!elementToValueIsList(elementValue(t)))
+return mklist(elementName(t),elementValue(t));return cons(elementName(t),mklist(elementsToValues(elementValue(t))));}
+return cons(elementName(t),elementsToValues(elementChildren(t)));}
+if(!isList(t))
+return t;return elementsToValues(t);}
+function elementToValueIsSymbol(v){if(!isList(v))
+return false;if(isNil(v))
+return false;if(!isSymbol(car(v)))
+return false;return true;}
+function elementToValueGroupValues(v,l){if(isNil(l)||!elementToValueIsSymbol(v)||!elementToValueIsSymbol(car(l)))
+return cons(v,l);if(car(car(l))!=car(v))
+return cons(v,l);if(!elementToValueIsList(cadr(car(l)))){var g=mklist(car(v),mklist(cdr(v),cdr(car(l))));return elementToValueGroupValues(g,cdr(l));}
+var g=mklist(car(v),cons(cdr(v),cadr(car(l))));return elementToValueGroupValues(g,cdr(l));}
+function elementsToValues(e){if(isNil(e))
+return e;return elementToValueGroupValues(elementToValue(car(e)),elementsToValues(cdr(e)));}
+function valueToElement(t){if(isList(t)&&!isNil(t)&&isSymbol(car(t))){var n=car(t);var v=isNil(cdr(t))?mklist():cadr(t);if(!isList(v)){if(n.substring(0,2)==atsign)
+return mklist(attribute,"'"+n.substring(2),v);return mklist(element,n,v);}
+if(isNil(v)||!isSymbol(car(v)))
+return cons(element,cons(n,mklist(valuesToElements(v))));return cons(element,cons(n,valuesToElements(cdr(t))));}
+if(!isList(t))
+return t;return valuesToElements(t);}
+function valuesToElements(l){if(isNil(l))
+return l;return cons(valueToElement(car(l)),valuesToElements(cdr(l)));}
+function selector(s){function evalSelect(s,v){if(isNil(s))
+return true;if(isNil(v))
+return false;if(car(s)!=car(v))
+return false;return evalSelect(cdr(s),cdr(v));}
+return function(v){return evalSelect(s,v);};}
+function namedAttribute(name,l){return memo(l,name,function(){var f=filter(function(v){return isAttribute(v)&&attributeName(v)==name;},l);if(isNil(f))
+return null;return car(f);});}
+function namedAttributeValue(name,l){var a=namedAttribute(name,l);if(a==null)
+return null
+return attributeValue(a);}
+function namedElementChildren(name,l){return memo(l,name,function(){return filter(function(v){return isElement(v)&&elementName(v)==name;},l);});}
+function namedElementChild(name,l){var f=namedElementChildren(name,l);if(isNil(f))
+return null;return car(f);}
+function setElement(l,e){setlist(l,e);l.memo={};}
+function nodeList(n){var l=new Array();if(isNil(n))
+return l;for(var i=0;i<n.length;i++)
+l[i]=n[i];return l;}
+function appendNodes(nodes,p){if(isNil(nodes))
+return p;p.appendChild(car(nodes));return appendNodes(cdr(nodes),p);};function childAttributes(e){return filter(function(n){return n.nodeType==2;},nodeList(e.attributes));}
+function childElements(e){return filter(function(n){return n.nodeType==1;},nodeList(e.childNodes));}
+function childText(e){function trim(s){return s.replace(/^\s*/,'').replace(/\s*$/,'');}
+return filter(function(n){return n.nodeType==3&&trim(n.nodeValue)!='';},nodeList(e.childNodes));}
+function readAttributes(p,a){if(isNil(a))
+return a;var x=car(a);return cons(mklist(attribute,"'"+x.nodeName,x.nodeValue),readAttributes(p,cdr(a)));}
+function readElement(e,childf){var l=append(append(mklist(element,"'"+e.nodeName),readAttributes(e,childf(e))),readElements(childElements(e),childf));var t=childText(e);if(isNil(t))
+return l;return append(l,mklist(car(t).nodeValue));}
+function readElements(l,childf){if(isNil(l))
+return l;return cons(readElement(car(l),childf),readElements(cdr(l),childf));}
+function isXML(l){if(isNil(l))
+return false;return car(l).substring(0,5)=='<?xml';}
+function parseXML(l){var s=writeStrings(l);if(window.DOMParser){var p=new DOMParser();return p.parseFromString(s,"text/xml");}
+var doc;try{doc=new ActiveXObject("MSXML2.DOMDocument");}catch(e){doc=new ActiveXObject("Microsoft.XMLDOM");}
+doc.async='false';doc.loadXML(s);return doc;}
+function readXMLDocument(doc){var root=childElements(doc);if(isNil(root))
+return mklist();return mklist(readElement(car(root),childAttributes));}
+function readXHTMLElement(xhtml){function ieChildAttributes(e){var a=filter(function(n){if(n.nodeType!=2||isNil(n.nodeValue)||n.nodeValue=='')
+return false;if(n.nodeName=='contentEditable'||n.nodeName=='maxLength'||n.nodeName=='loop'||n.nodeName=='start')
+return false;return true;},nodeList(e.attributes));if(e.style.cssText=='')
+return a;var sa=new Object();sa.nodeName='style';sa.nodeValue=e.style.cssText;return cons(sa,a);}
+var childf=(typeof(XMLSerializer)!='undefined')?childAttributes:ieChildAttributes;return mklist(readElement(xhtml,childf));}
+function readXML(l){return readXMLDocument(parseXML(l));}
+function writeXMLDocument(doc){if(typeof(XMLSerializer)!='undefined')
+return mklist(new XMLSerializer().serializeToString(doc));return mklist(doc.xml);}
+function expandElementValues(n,l){if(isNil(l))
+return l;return cons(cons(element,cons(n,car(l))),expandElementValues(n,cdr(l)));}
+function writeList(l,node,doc){if(isNil(l))
+return node;var token=car(l);if(isTaggedList(token,attribute)){node.setAttribute(attributeName(token).substring(1),''+attributeValue(token));}else if(isTaggedList(token,element)){function mkelem(tok,doc){function xmlns(l){if(isNil(l))
+return null;var t=car(l);if(isTaggedList(t,attribute)){if(attributeName(t).substring(1)=='xmlns')
+return attributeValue(t);}
+return xmlns(cdr(l));}
+var ns=xmlns(elementChildren(tok));if(ns==null||!doc.createElementNS)
+return doc.createElement(elementName(tok).substring(1));return doc.createElementNS(ns,elementName(tok).substring(1));}
+if(elementHasValue(token)){var v=elementValue(token);if(isList(v)){var e=expandElementValues(elementName(token),v);writeList(e,node,doc);}else{var child=mkelem(token,doc);writeList(elementChildren(token),child,doc);node.appendChild(child);}}else{var child=mkelem(token,doc);writeList(elementChildren(token),child,doc);node.appendChild(child);}}else
+node.appendChild(doc.createTextNode(''+token));writeList(cdr(l),node,doc);return node;}
+function mkXMLDocument(){if(document.implementation&&document.implementation.createDocument)
+return document.implementation.createDocument('','',null);return new ActiveXObject("MSXML2.DOMDocument");}
+function writeXML(l,xmlTag){var doc=mkXMLDocument();writeList(l,doc,doc);if(!xmlTag)
+return writeXMLDocument(doc);return mklist('<?xml version="1.0" encoding="UTF-8"?>\n'+writeXMLDocument(doc)+'\n');}
+var atom={};atom.entryElementValues=function(e){var lt=filter(selector(mklist(element,"'title")),e);var t=isNil(lt)?'':elementValue(car(lt));var li=filter(selector(mklist(element,"'id")),e);var i=isNil(li)?'':elementValue(car(li));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)))))};atom.entriesElementValues=function(e){if(isNil(e))
+return e;return cons(atom.entryElementValues(car(e)),atom.entriesElementValues(cdr(e)));};atom.isATOMEntry=function(l){if(!isXML(l))
+return false;return car(l).match('<entry')!=null&&car(l).match('<feed')==null&&car(l).match('="http://www.w3.org/2005/Atom"')!=null;};atom.readATOMEntryDocument=function(doc){var e=readXMLDocument(doc);if(isNil(e))
+return mklist();return mklist(atom.entryElementValues(car(e)));};atom.readATOMEntry=function(l){return atom.readATOMEntryDocument(parseXML(l));};atom.isATOMFeed=function(l){if(!isXML(l))
+return false;return car(l).match('<feed')!=null&&car(l).match('="http://www.w3.org/2005/Atom"')!=null;};atom.readATOMFeedDocument=function(doc){var f=readXMLDocument(doc);if(isNil(f))
+return mklist();var t=filter(selector(mklist(element,"'title")),car(f));var i=filter(selector(mklist(element,"'id")),car(f));var e=filter(selector(mklist(element,"'entry")),car(f));return mklist(append(mklist(element,"'feed",mklist(element,"'title",elementValue(car(t))),mklist(element,"'id",elementValue(car(i)))),atom.entriesElementValues(e)));};atom.readATOMFeed=function(l){return atom.readATOMFeedDocument(parseXML(l));};atom.entryElement=function(l){var title=elementValue(namedElementChild("'title",l));var id=elementValue(namedElementChild("'id",l));var content=namedElementChild("'content",l);var text=isNil(content)?false:elementHasValue(content);return 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(content)?mklist():append(mklist(element,"'content",mklist(attribute,"'type",text?"text":"application/xml")),text?mklist(elementValue(content)):elementChildren(content))),mklist(element,"'link",mklist(attribute,"'href",id)));};atom.entriesElements=function(l){if(isNil(l))
+return l;return cons(atom.entryElement(car(l)),atom.entriesElements(cdr(l)));};atom.writeATOMEntry=function(ll){var l=isNil(ll)?ll:car(ll);return writeXML(mklist(atom.entryElement(l)),true);};atom.writeATOMFeed=function(ll){var l=isNil(ll)?ll:car(ll);var lt=filter(selector(mklist(element,"'title")),l);var t=isNil(lt)?'':elementValue(car(lt));var li=filter(selector(mklist(element,"'id")),l);var i=isNil(li)?'':elementValue(car(li));var f=mklist(element,"'feed",mklist(attribute,"'xmlns","http://www.w3.org/2005/Atom"),mklist(element,"'title",mklist(attribute,"'type","text"),car(l)),mklist(element,"'id",cadr(l)));var le=filter(selector(mklist(element,"'entry")),l);if(isNil(le))
+return writeXML(mklist(f),true);if(!isNil(le)&&!isNil(car(le))&&isList(car(caddr(car(le))))){var fe=append(f,atom.entriesElements(caddr(car(le))));return writeXML(mklist(fe),true);}
+var fe=append(f,atom.entriesElements(le));return writeXML(mklist(fe),true);};var json={};json.Exception=function(code,message){this.name="JSONException";this.code=code;this.message=message;};json.Exception.prototype=new Error();json.Exception.prototype.toString=function(){return this.name+": "+this.message;};json.isJSArray=function(l){if(isNil(l))
+return true;var v=car(l);if(isSymbol(v))
+return false;if(isList(v))
+if(!isNil(v)&&isSymbol(car(v)))
+return false;return true;};json.jsPropertiesToValues=function(propertiesSoFar,o,i){if(isNil(i))
+return propertiesSoFar;var p=car(i);var jsv=o[p];var v=json.jsValToValue(jsv);if(typeof p=='string'){var n=''+p;if(n.slice(0,1)=='@')
+return json.jsPropertiesToValues(cons(mklist(attribute,"'"+n.slice(1),v),propertiesSoFar),o,cdr(i));if(isList(v)&&!json.isJSArray(v))
+return json.jsPropertiesToValues(cons(cons(element,cons("'"+n,v)),propertiesSoFar),o,cdr(i));return json.jsPropertiesToValues(cons(mklist(element,"'"+n,v),propertiesSoFar),o,cdr(i));}
+return json.jsPropertiesToValues(cons(v,propertiesSoFar),o,cdr(i));};json.jsValToValue=function(jsv){if(jsv==null)
+return null;if(isList(jsv))
+return json.jsPropertiesToValues(mklist(),jsv,reverse(range(0,jsv.length)));if(typeof jsv=='object')
+return json.jsPropertiesToValues(mklist(),jsv,reverse(properties(jsv)));if(typeof jsv=='string')
+return''+jsv;return jsv;}
+json.isJSON=function(l){if(isNil(l))
+return false;var s=car(l).slice(0,1);return s=="["||s=="{";};json.readJSON=function(l){var s=writeStrings(l);var obj;eval('obj = { \"val\": '+s+" }");return json.jsValToValue(obj.val);};json.valuesToJSElements=function(a,l,i){if(isNil(l))
+return a;var pv=json.valueToJSVal(car(l));a[i]=pv
+return json.valuesToJSElements(a,cdr(l),i+1);};json.valueToJSVal=function(v){if(!isList(v))
+return v;if(json.isJSArray(v))
+return json.valuesToJSElements(range(0,v.length),v,0);return json.valuesToJSProperties({},v);};json.valuesToJSProperties=function(o,l){if(isNil(l))
+return o;var token=car(l);if(isTaggedList(token,attribute)){var pv=json.valueToJSVal(attributeValue(token));o['@'+attributeName(token).slice(1)]=pv;}else if(isTaggedList(token,element)){if(elementHasValue(token)){var pv=json.valueToJSVal(elementValue(token));o[elementName(token).slice(1)]=pv;}else{var child={};o[elementName(token).slice(1)]=child;json.valuesToJSProperties(child,elementChildren(token));}}
+return json.valuesToJSProperties(o,cdr(l));};json.writeJSON=function(l){var jsv;if(json.isJSArray(l))
+jsv=json.valuesToJSElements(range(0,l.length),l,0);else
+jsv=json.valuesToJSProperties({},l);var s=json.toJSON(jsv);return mklist(s);}
+json.jsonRequest=function(id,func,params){var r=mklist(mklist("'id",id),mklist("'method",func),mklist("'params",params));return json.writeJSON(valuesToElements(r));};json.jsonResult=function(id,val){return json.writeJSON(valuesToElements(mklist(mklist("'id",id),mklist("'result",val))));};json.jsonResultValue=function(s){var jsres=json.readJSON(s);var res=elementsToValues(jsres);var val=cadr(assoc("'result",res));if(isList(val)&&!json.isJSArray(val))
+return mklist(val);return val;};json.escapeJSONChar=function(c){if(c=="\""||c=="\\")return"\\"+c;if(c=="\b")return"\\b";if(c=="\f")return"\\f";if(c=="\n")return"\\n";if(c=="\r")return"\\r";if(c=="\t")return"\\t";var hex=c.charCodeAt(0).toString(16);if(hex.length==1)return"\\u000"+hex;if(hex.length==2)return"\\u00"+hex;if(hex.length==3)return"\\u0"+hex;return"\\u"+hex;};json.escapeJSONString=function(s){var parts=s.split("");for(var i=0;i<parts.length;i++){var c=parts[i];if(c=='"'||c=='\\'||c.charCodeAt(0)<32||c.charCodeAt(0)>=128)
+parts[i]=json.escapeJSONChar(parts[i]);}
+return"\""+parts.join("")+"\"";};json.toJSON=function(o){if(o==null)
+return"null";if(o.constructor==String)
+return json.escapeJSONString(o);if(o.constructor==Number)
+return o.toString();if(o.constructor==Boolean)
+return o.toString();if(o.constructor==Date)
+return'{javaClass: "java.util.Date", time: '+o.valueOf()+'}';if(o.constructor==Array){var v=[];for(var i=0;i<o.length;i++)
+v.push(json.toJSON(o[i]));return"["+v.join(", ")+"]";}
+var v=[];for(attr in o){if(o[attr]==null)
+v.push("\""+attr+"\": null");else if(typeof o[attr]=="function")
+;else
+v.push(json.escapeJSONString(attr)+": "+json.toJSON(o[attr]));}
+return"{"+v.join(", ")+"}";};var scdl={};scdl.composite=function(l){var cs=namedElementChildren("'composite",l);if(isNil(cs))
+return cs;return car(cs);};scdl.components=function(l){var cs=namedElementChildren("'composite",l);if(isNil(cs))
+return cs;return namedElementChildren("'component",car(cs));};scdl.promotions=function(l){var cs=namedElementChildren("'composite",l);if(isNil(cs))
+return cs;return namedElementChildren("'service",car(cs));};scdl.promote=function(l){var puri=namedAttributeValue("'promote",l);if(isNil(puri))
+return puri;return car(tokens(puri));};scdl.name=function(l){return namedAttributeValue("'name",l);};scdl.documentation=function(l){var d=namedElementChildren("'documentation",l);if(isNil(d))
+return null;if(!elementHasValue(car(d)))
+return null;var v=elementValue(car(d));return v;};scdl.title=function(l){return namedAttributeValue("'t:title",l);};scdl.style=function(l){return namedAttributeValue("'t:style",l);};scdl.color=function(l){return namedAttributeValue("'t:color",l);};scdl.x=function(l){return namedAttributeValue("'t:x",l);};scdl.y=function(l){return namedAttributeValue("'t:y",l);};scdl.implementation=function(l){function filterImplementation(v){return isElement(v)&&cadr(v).match("implementation.")!=null;}
+var n=filter(filterImplementation,l);if(isNil(n))
+return null;return car(n);};scdl.implementationType=function(l){return elementName(l).substring(1);};scdl.uri=function(l){return namedAttributeValue("'uri",l);};scdl.align=function(l){return namedAttributeValue("'t:align",l);};scdl.visible=function(l){return namedAttributeValue("'t:visible",l);};scdl.clonable=function(l){return namedAttributeValue("'t:clonable",l);};scdl.services=function(l){return namedElementChildren("'service",l);};scdl.references=function(l){return namedElementChildren("'reference",l);};scdl.bindings=function(l){function filterBinding(v){return isElement(v)&&cadr(v).match("binding.")!=null;}
+return filter(filterBinding,l);};scdl.bindingType=function(l){return elementName(l).substring(1);};scdl.target=function(l){function targetURI(){function bindingsTarget(l){if(isNil(l))
+return null;var u=scdl.uri(car(l));if(!isNil(u))
+return u;return bindingsTarget(cdr(l));}
+var t=namedAttributeValue("'target",l);if(!isNil(t))
+return t;return bindingsTarget(scdl.bindings(l));}
+var turi=targetURI();if(isNil(turi))
+return turi;return car(tokens(turi));};scdl.properties=function(l){return namedElementChildren("'property",l);};scdl.propertyValue=function(l){if(!elementHasValue(l))
+return'';return elementValue(l);};scdl.nameToElementAssoc=function(l){if(isNil(l))
+return l;return cons(mklist(scdl.name(car(l)),car(l)),scdl.nameToElementAssoc(cdr(l)));};var ui={};ui.isIE=function(){if(typeof ui.isIE.detected!='undefined')
+return ui.isIE.detected;ui.isIE.detected=navigator.appName=='Microsoft Internet Explorer';return ui.isIE.detected;};ui.ahref=function(loc,target,html){if(target=='_blank')
+return'<a href="'+loc+'" target="_blank">'+html+'</a>';return'<a href="javascript:void(0)" onclick="window.open(\''+loc+'\', \''+target+'\');">'+html+'</a>';};ui.menu=function(name,href,target){function Menu(n,h,t){this.name=n;this.href=h;this.target=isNil(t)?'_parent':t;this.content=function(){function complete(uri){var q=uri.indexOf('?');if(q!=-1)
+return complete(uri.substr(0,q));if(uri.match('.*\.html$'))
+return uri;if(uri.match('.*/$'))
+return uri+'index.html';return uri+'/index.html';}
+if(complete(this.href)!=complete(window.top.location.pathname))
+return ui.ahref(this.href,this.target,'<span class="amenu">'+this.name+'</span>');return ui.ahref(this.href,this.target,'<span class="smenu">'+this.name+'</span>');};}
+return new Menu(name,href,target);};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>';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>';for(i in right)
+bar=bar+'<td class="'+(i==0?'dtbar':'rtbar')+'">'+right[i].content()+'</td>'
+bar=bar+'</tr></table></td></tr></table>';return bar;};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);};};ui.content=function(win){if(!isNil(win.document))
+return win.document;if(!isNil(win.contentDocument))
+return win.contentDocument;return null;};ui.elementByID=function(node,id){for(var i in node.childNodes){var child=node.childNodes[i];if(child.id==id)
+return child;var gchild=ui.elementByID(child,id);if(gchild!=null)
+return gchild;}
+return null;};function $(id){if(id==document){if(!isNil(document.widget))
+return document.widget;return document;}
+return ui.elementByID($(document),id);};ui.queryParams=function(){var qp=new Array();var qs=window.location.search.substring(1).split('&');for(var i=0;i<qs.length;i++){var e=qs[i].indexOf('=');if(e>0)
+qp[qs[i].substring(0,e)]=unescape(qs[i].substring(e+1));}
+return qp;}
+ui.widgets={};ui.onload={};ui.loadwidget=function(el,doc,cb){var f=el+'Frame';window.ui.widgets[f]=el;window.ui.onload[f]=cb;var div=document.createElement('div');div.id=f+'Div';div.innerHTML='<iframe id="'+f+'" class="widgetframe" scrolling="no" frameborder="0" src="'+doc+'" onload="window.ui.onload[this.id]()"></iframe>';document.body.appendChild(div);return f;};ui.showbody=function(){document.body.style.visibility='visible';};ui.reload=function(){window.open(window.location,'_self');return true;};ui.installwidget=function(){if(isNil(window.parent)||isNil(window.parent.ui)||isNil(window.parent.ui.widgets))
+return true;var pdoc=ui.content(window.parent);for(w in window.parent.ui.widgets){var ww=ui.elementByID(pdoc,w).contentWindow;if(ww==window){document.widget=ui.elementByID(pdoc,window.parent.ui.widgets[w]);document.widget.innerHTML=document.body.innerHTML;return true;}}
+return true;};ui.loadiframe=function(el,doc){var f=el+'Frame';$(el).innerHTML='<iframe id="'+f+'" class="loadedframe" scrolling="no" frameborder="0" src="'+doc+'"></iframe>';return f;};ui.numpos=function(p){if(p=='')
+return 0;return Number(p.substr(0,p.length-2));};ui.pixpos=function(p){return p+'px';};ui.datatable=function(l){function indent(i){if(i==0)
+return'';return'&nbsp;&nbsp;'+indent(i-1);}
+function rows(l,i){if(isNil(l))
+return'';var e=car(l);if(!isList(e))
+return rows(expandElementValues("'value",l),i);if(isList(car(e)))
+return rows(expandElementValues("'value",l),i);if(elementHasValue(e)){var v=elementValue(e);if(!isList(v)){return'<tr><td class="datatdl">'+indent(i)+elementName(e).slice(1)+'</td>'+
+'<td class="datatdr tdw">'+(v!=null?v:'')+'</td></tr>'+
+rows(cdr(l),i);}
+return rows(expandElementValues(elementName(e),v),i)+rows(cdr(l),i);}
+return'<tr><td class="datatdl">'+indent(i)+elementName(e).slice(1)+'</td>'+
+'<td class="datatdr tdw">'+'</td></tr>'+
+rows(elementChildren(e),i+1)+
+rows(cdr(l),i);}
+return'<table class="datatable '+(window.name=='dataFrame'?' databg':'')+'" style="width: 100%;">'+rows(l,0)+'</table>';}
+ui.datalist=function(l){function rows(l,i){if(isNil(l))
+return'';var e=car(l);if(!isList(e))
+return rows(expandElementValues("'value",l),i);if(isList(car(e)))
+return rows(expandElementValues("'value",l),i);if(elementHasValue(e)){var v=elementValue(e);if(!isList(v)){return'<tr><td class="datatd tdw">'+(v!=null?v:'')+'</td></tr>'+
+rows(cdr(l),i);}
+return rows(expandElementValues(elementName(e),v),i)+rows(cdr(l),i);}
+return rows(elementChildren(e),i+1)+rows(cdr(l),i);}
+return'<table class="datatable '+(window.name=='dataFrame'?' databg':'')+'" style="width: 100%;">'+rows(l,0)+'</table>';}
+var JSONClient={};JSONClient.escapeJSONChar=function(c){if(c=="\""||c=="\\")return"\\"+c;if(c=="\b")return"\\b";if(c=="\f")return"\\f";if(c=="\n")return"\\n";if(c=="\r")return"\\r";if(c=="\t")return"\\t";var hex=c.charCodeAt(0).toString(16);if(hex.length==1)return"\\u000"+hex;if(hex.length==2)return"\\u00"+hex;if(hex.length==3)return"\\u0"+hex;return"\\u"+hex;};JSONClient.escapeJSONString=function(s){var parts=s.split("");for(var i=0;i<parts.length;i++){var c=parts[i];if(c=='"'||c=='\\'||c.charCodeAt(0)<32||c.charCodeAt(0)>=128)
+parts[i]=JSONClient.escapeJSONChar(parts[i]);}
+return"\""+parts.join("")+"\"";};JSONClient.toJSON=function(o){if(o==null)
+return"null";if(o.constructor==String)
+return JSONClient.escapeJSONString(o);if(o.constructor==Number)
+return o.toString();if(o.constructor==Boolean)
+return o.toString();if(o.constructor==Date)
+return'{javaClass: "java.util.Date", time: '+o.valueOf()+'}';if(o.constructor==Array){var v=[];for(var i=0;i<o.length;i++)
+v.push(JSONClient.toJSON(o[i]));return"["+v.join(", ")+"]";}
+var v=[];for(attr in o){if(o[attr]==null)
+v.push("\""+attr+"\": null");else if(typeof o[attr]=="function")
+;else
+v.push(JSONClient.escapeJSONString(attr)+": "+JSONClient.toJSON(o[attr]));}
+return"{"+v.join(", ")+"}";};function HTTPBindingClient(name,uri){this.name=name;this.uri=uri;this.apply=this.createApplyMethod();}
+HTTPBindingClient.jsonrpcID=1;HTTPBindingClient.prototype.createApplyMethod=function(){var fn=function(){var methodName=arguments[0];var args=[];for(var i=1;i<arguments.length;i++)
+args.push(arguments[i]);var cb=null;if(typeof args[args.length-1]=="function")
+cb=args.pop();var req=HTTPBindingClient.makeJSONRequest(methodName,args,cb);return fn.client.jsonApply(req);};fn.client=this;return fn;};HTTPBindingClient.makeJSONRequest=function(methodName,args,cb){var req={};req.id=HTTPBindingClient.jsonrpcID++;if(cb)
+req.cb=cb;var obj={};obj.id=req.id;obj.method=methodName;obj.params=args;req.data=JSONClient.toJSON(obj);return req;};HTTPBindingClient.jsonResult=function(http){function httpCharset(http){try{var contentType=http.getResponseHeader("Content-type");var parts=contentType.split(/\s*;\s*/);for(var i=0;i<parts.length;i++){if(parts[i].substring(0,8)=="charset=")
+return parts[i].substring(8,parts[i].length);}}catch(e){}
+return"UTF-8";}
+if(!HTTPBindingClient.charset)
+HTTPBindingClient.charset=httpCharset(http);var obj;eval("obj = "+http.responseText);if(obj.error)
+throw new HTTPBindingClient.Exception(obj.error.code,obj.error.msg);var res=obj.result;return res;};HTTPBindingClient.prototype.jsonApply=function(req){var http=HTTPBindingClient.getHTTPRequest();var hascb=req.cb?true:false;http.open("POST",this.uri,hascb);http.setRequestHeader("Content-type","application/json-rpc");if(hascb){http.onreadystatechange=function(){if(http.readyState==4){if(http.status==200){var res=null;try{res=HTTPBindingClient.jsonResult(http);}catch(e){req.cb(null,e);}
+req.cb(res);}else
+req.cb(null,HTTPBindingClient.Exception(http.status,http.statusText));}};http.send(req.data);return req.id;}
+http.send(req.data);if(http.status==200)
+return HTTPBindingClient.jsonResult(http);throw new HTTPBindingClient.Exception(http.status,http.statusText);};HTTPBindingClient.prototype.get=function(id,cb){var http=HTTPBindingClient.getHTTPRequest();var hascb=cb?true:false;http.open("GET",this.uri+'/'+id,hascb);if(hascb){http.onreadystatechange=function(){if(http.readyState==4){if(http.status==200)
+cb(http.responseText);else
+cb(null,new HTTPBindingClient.Exception(http.status,http.statusText));}};http.send(null);return true;}
+http.send(null);if(http.status==200)
+return http.responseText;throw new HTTPBindingClient.Exception(http.status,http.statusText);};HTTPBindingClient.prototype.post=function(entry,cb){var http=HTTPBindingClient.getHTTPRequest();var hascb=cb?true:false;http.open("POST",this.uri,hascb);http.setRequestHeader("Content-Type","application/atom+xml");if(hascb){http.onreadystatechange=function(){if(http.readyState==4){if(http.status==201)
+cb(http.responseText);else
+cb(null,new HTTPBindingClient.Exception(http.status,http.statusText));}};http.send(entry);return true;}
+http.send(entry);if(http.status==201)
+return http.responseText;throw new HTTPBindingClient.Exception(http.status,http.statusText);};HTTPBindingClient.prototype.put=function(id,entry,cb){var http=HTTPBindingClient.getHTTPRequest();var hascb=cb?true:false;http.open("PUT",this.uri+'/'+id,hascb);http.setRequestHeader("Content-Type","application/atom+xml");if(hascb){http.onreadystatechange=function(){if(http.readyState==4){if(http.status==200)
+cb();else
+cb(new HTTPBindingClient.Exception(http.status,http.statusText));}};http.send(entry);return true;}
+http.send(entry);if(http.status==200)
+return true;throw new HTTPBindingClient.Exception(http.status,http.statusText);};HTTPBindingClient.prototype.del=function(id,cb){var http=HTTPBindingClient.getHTTPRequest();var hascb=cb?true:false;http.open("DELETE",this.uri+'/'+id,hascb);if(cb){http.onreadystatechange=function(){if(http.readyState==4){if(http.status==200)
+cb();else
+cb(new HTTPBindingClient.Exception(http.status,http.statusText));}};http.send(null);return true;}
+http.send(null);if(http.status==200)
+return true;throw new HTTPBindingClient.Exception(http.status,http.statusText);};HTTPBindingClient.Exception=function(code,message){this.name="HTTPBindingClientException";this.code=code;this.message=message;};HTTPBindingClient.Exception.prototype=new Error();HTTPBindingClient.Exception.prototype.toString=function(){return this.name+": "+this.message;};HTTPBindingClient.msxmlNames=["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];HTTPBindingClient.getHTTPRequest=function(){if(HTTPBindingClient.httpFactory)
+return HTTPBindingClient.httpFactory();try{HTTPBindingClient.httpFactory=function(){return new XMLHttpRequest();};return HTTPBindingClient.httpFactory();}catch(e){}
+for(var i=0;i<HTTPBindingClient.msxmlNames.length;i++){try{HTTPBindingClient.httpFactory=function(){return new ActiveXObject(HTTPBindingClient.msxmlNames[i]);};return HTTPBindingClient.httpFactory();}catch(e){}}
+HTTPBindingClient.httpFactory=null;throw new HTTPBindingClient.Exception(0,"Can't create XMLHttpRequest object");};var sca={};sca.httpclient=function(name,uri){return new HTTPBindingClient(name,uri);};sca.component=function(name){return new HTTPBindingClient(name,'/components/'+name);};sca.reference=function(comp,rname){return new HTTPBindingClient(comp.name+'/'+rname,"/references/"+comp.name+"/"+rname);};sca.defun=function(ref){function defapply(name){return function(){var args=new Array();args[0]=name;for(i=0,n=arguments.length;i<n;i++)
+args[i+1]=arguments[i];return this.apply.apply(this,args);};}
+for(f=1;f<arguments.length;f++){var fn=arguments[f];ref[fn]=defapply(fn);}
+return ref;};
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui-min.css b/sca-cpp/trunk/modules/js/htdocs/ui-min.css
new file mode 100644
index 0000000000..40301e8e00
--- /dev/null
+++ b/sca-cpp/trunk/modules/js/htdocs/ui-min.css
@@ -0,0 +1,71 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *   
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+body{margin:2px;font-family:"Helvetica Neue", Helvetica;font-style:normal;font-variant:normal;font-size:13px;-webkit-text-size-adjust:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;}
+.delayed{visibility:hidden;}
+.devicewidth{position:absolute;top:0px;left:0px;right:0px;height:5000px;overflow:hidden;}
+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;overflow:visible;}
+.trb{border-bottom:1px;border-bottom-style:solid;border-color:#dcdcdc;}
+th{font-weight:bold;background-color:#e5ecf9;color:#000000;height:18px;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;overflow:hidden;}
+.section{font-weight:bold;background-color:#e5ecf9;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;overflow:hidden;}
+.text{padding-top:3px;padding-bottom:4px;vertical-align:middle;}
+.thl{border-left:0px;}
+.thr{border-right:0px;}
+.ths{padding:0px;}
+td{padding-left:2px;padding-top:2px;padding-right:8px;white-space:nowrap;vertical-align:middle;border:0px;}
+.tdl{border-right:1px;border-style:solid;border-color:#a2bae7;width:10px;}
+.tdr{border-left:1px;border-style:solid;border-color:#a2bae7;}
+.tdw{padding-left:2px;padding-top:2px;padding-right:8px;white-space:normal;vertical-align:middle;}
+.datatd{border-top:1px;border-bottom:1px;border-style:solid;border-color:#dcdcdc;width:10px;vertical-align:middle;}
+.datatdl{border-right:1px;border-top:1px;border-bottom:1px;border-style:solid;border-color:#dcdcdc;width:10px;vertical-align:middle;}
+.datatdr{border-left:1px;border-top:1px;border-bottom:1px;border-style:solid;border-color:#dcdcdc;vertical-align:middle;}
+.datatable{border-top:1px;border-bottom:1px;border-style:solid;border-color:#dcdcdc;overflow:visible;}
+.databg{opacity:.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60);}
+.guide{border:1px;border-style:solid;border-color:#c0c0c0;}
+iframe{border:0px;margin:0px;padding:0px;}
+.widgetframe{visibility:hidden;width:0px;height:0px;border:0px;}
+.loadedframe{width:100%;height:100%;}
+.fakeframe{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;-webkit-text-size-adjust:100%;}
+textarea{font-family:"Helvetica Neue", Helvetica;font-style:normal;font-variant:normal;font-size:13px;overflow:auto;resize:none;}
+.editable{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%;border:0px;}
+a:link{color:#598edd;text-decoration:none;}
+a:visited{color:#598edd;text-decoration:none;}
+.amenu{color:#598edd;text-decoration:none;}
+.smenu{font-weight:bold;color:#000000;text-decoration:none;}
+h1{font-size:150%;font-weight:bold;vertical-align:middle;margin-top:5px;margin-bottom:5px;margin-left:2px;margin-right:2px;}
+h2{font-size:120%;font-weight:bold;vertical-align:middle;margin-top:5px;margin-bottom:5px;margin-left:2px;margin-right:2px;}
+.hd1{font-size:150%;font-weight:bold;}
+.hd2{font-size:120%;font-weight:bold;}
+img{border:0px;}
+.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;}
+.greenbutton{-webkit-border-radius:4px;border-radius:4px;background:#96d333;background:-moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0);background:-o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);border:1px outset #dcdcdc;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;margin:2px;cursor:pointer;}
+.tgreenbutton{-webkit-border-radius:4px;border-radius:4px;background:#96d333;background:-moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0);background:-o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);border:1px outset #dcdcdc;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;margin:2px;cursor:pointer;}
+.bluebutton{-webkit-border-radius:4px;border-radius:4px;background:#598edd;background:-moz-linear-gradient(top, #f8f8f8 0%, #598edd 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#598edd));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#598edd',GradientType=0);background:-o-linear-gradient(top, #f8f8f8 0%,#598edd 100%);border:1px outset #dcdcdc;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;margin:2px;cursor:pointer;}
+.redbutton{-webkit-border-radius:4px;border-radius:4px;background:#d03f41;background:-moz-linear-gradient(top, #f8f8f8 0%, #d03f41 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#d03f41));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#d03f41',GradientType=0);background:-o-linear-gradient(top, #f8f8f8 0%,#d03f41 100%);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 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ffbb00));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#ffbb00',GradientType=0);background:-o-linear-gradient(top, #f8f8f8 0%,#ffbb00 100%);border:1px outset #dcdcdc;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;margin:2px;cursor:pointer;}
+.graybutton{-webkit-border-radius:4px;border-radius:4px;background:#dcdcdc;background:-moz-linear-gradient(top, #f8f8f8 0%, #dcdcdc 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dcdcdc));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#dcdcdc',GradientType=0);background:-o-linear-gradient(top, #f8f8f8 0%,#dcdcdc 100%);border:1px outset #dcdcdc;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;margin:2px;margin:2px;cursor:pointer;}
+.tbar{margin:0px;width:100%;padding-top:0px;padding-left:0px;padding-right:0px;padding-bottom:3px;border-bottom:1px solid #a2bae7;border-collapse:separate;}
+.ltbar{padding-left:2px;padding-top:2px;padding-right:6px;white-space:nowrap;vertical-align:middle;}
+.dtbar{padding-left:0px;padding-right:0px;padding-top:2px;white-space:nowrap;vertical-align:middle;text-align:right;}
+.rtbar{padding-left:6px;padding-right:2px;padding-top:2px;white-space:nowrap;vertical-align:middle;text-align:right;}
+.suggest{background-color:#e5ecf9;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;}
+.suggestTable{border:0px;border-collapse:separate;padding-left:5px;padding-right:5px;padding-top:2px;padding-bottom:2px;margin:0px;}
+.suggestItem{padding-left:2px;padding-top:0px;padding-bottom:0px;padding-right:2px;vertical-align:middle;background-color:#e5ecf9;color:#598edd;}
+.suggestHilighted{padding-left:2px;padding-top:0px;padding-bottom:0px;padding-right:2px;vertical-align:middle;background-color:#598edd;color:#e5ecf9;}
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css
index ca1f42fa0f..aa03b7570a 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.css
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.css
@@ -18,18 +18,24 @@
  */
 
 body {
-white-space: margin: 0px;
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+margin: 2px; font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
 -webkit-text-size-adjust: none;
+-webkit-touch-callout: none;
+-webkit-tap-highlight-color: rgba(0,0,0,0);
+-webkit-user-select: none;
 }
 
 .delayed {
 visibility: hidden;
 }
 
+.devicewidth {
+position: absolute; top: 0px; left: 0px; right: 0px; height: 5000px; overflow: hidden;
+}
+
 table {
 border: 0px; border-collapse: collapse; border-color: #a2bae7; border-style: solid;
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
 overflow: visible;
 }
 
@@ -38,24 +44,20 @@ border-bottom: 1px; border-bottom-style: solid; border-color: #dcdcdc;
 }
 
 th {
-font-weight: bold; background-color: #e5ecf9; color: #000000;
-text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; 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;
+font-weight: bold; background-color: #e5ecf9; color: #000000; height: 18px;
+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;
 overflow: hidden;
 }
 
 .section {
-font-weight: bold; background-color: #e5ecf9; color: #000000;
-text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; white-space: nowrap;
-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-weight: bold; background-color: #e5ecf9; 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;
 overflow: hidden;
 }
 
 .text {
-padding-top: 3px; padding-bottom: 4px; vertical-align: text-top;
-vertical-align: text-top;
+padding-top: 3px; padding-bottom: 4px; vertical-align: middle;
 }
 
 .thl {
@@ -71,7 +73,7 @@ padding: 0px;
 }
 
 td {
-padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; border: 0px;
+padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: middle; border: 0px;
 }
 
 .tdl {
@@ -83,19 +85,19 @@ border-left: 1px; border-style: solid; border-color: #a2bae7;
 }
 
 .tdw {
-padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top;
+padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: middle;
 }
 
 .datatd {
-border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
+border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: middle;
 }
 
 .datatdl {
-border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
+border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: middle;
 }
 
 .datatdr {
-border-left: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; vertical-align: top;
+border-left: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; vertical-align: middle;
 }
 
 .datatable {
@@ -131,53 +133,55 @@ padding: 3px; background-color: #dcdcdc; color: #000000;
 
 input {
 vertical-align: middle;
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
 -webkit-text-size-adjust: 100%;
 }
 
 textarea {
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
+overflow: auto; resize: none;
+}
+
+.editable {
+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%;
+border: 0px;
 }
 
 a:link {
-color: #598edd;
-text-decoration: none
+color: #598edd; text-decoration: none;
 }
 
 a:visited {
-color: #598edd;
-text-decoration: none
+color: #598edd; text-decoration: none;
 }
 
 .amenu {
-color: #598edd;
-text-decoration: none
+color: #598edd; text-decoration: none;
 }
 
 .smenu {
-font-weight: bold;
-color: #000000;
-text-decoration: none
+font-weight: bold; color: #000000; text-decoration: none;
 }
 
 h1 {
-font-size: 200%; font-weight: bold;
-vertical-align: middle;
-margin: 0px;
+font-size: 150%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px;
 }
 
 h2 {
-font-size: 150%; font-weight: bold;
-vertical-align: middle;
-margin: 0px;
+font-size: 120%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px;
 }
 
 .hd1 {
-font-size: 200%; font-weight: bold;
+font-size: 150%; font-weight: bold;
 }
 
 .hd2 {
-font-size: 150%; font-weight: bold;
+font-size: 120%; font-weight: bold;
 }
 
 img {
@@ -185,55 +189,128 @@ border: 0px;
 }
 
 .imgbutton {
-width: 142px; height: 64px; margin-left: 20px; margin-right: 20px; padding: 0px; border: 1px;
-cursor: pointer; cursor: hand;
+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;
+}
+
+.greenbutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #96d333;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.tgreenbutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #96d333;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.bluebutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #598edd;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #598edd 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#598edd));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#598edd',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#598edd 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.redbutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #d03f41;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #d03f41 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#d03f41));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#d03f41',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#d03f41 100%);
+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 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ffbb00));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffbb00',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#ffbb00 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.graybutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #dcdcdc;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #dcdcdc 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dcdcdc));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#dcdcdc',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#dcdcdc 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+margin: 2px;
+cursor: pointer;
 }
 
 .tbar {
-margin: 0px; width: 100%;
-padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px;
-border-bottom: 1px solid #a2bae7; border-collapse: separate;
+margin: 0px; width: 100%; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px; border-bottom: 1px solid #a2bae7; border-collapse: separate;
 }
 
 .ltbar {
-padding-left: 0px; padding-top: 0px; padding-right: 6px; white-space: nowrap; vertical-align: top;
+padding-left: 2px; padding-top: 2px; padding-right: 6px; white-space: nowrap; vertical-align: middle;
 }
 
 .dtbar {
-padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
-text-align: right;
+padding-left: 0px; padding-right: 0px; padding-top: 2px; white-space: nowrap; vertical-align: middle; text-align: right;
 }
 
 .rtbar {
-padding-left: 6px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
-text-align: right;
+padding-left: 6px; padding-right: 2px; padding-top: 2px; white-space: nowrap; vertical-align: middle; text-align: right;
 }
 
 .suggest {
 background-color: #e5ecf9; 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;
+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;
-padding: 0px; margin: 0px;
 }
 
 .suggestTable {
-border: 0px; border-collapse: separate;
-padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; 
-margin: 0px;
+border: 0px; border-collapse: separate; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; margin: 0px;
 }
 
 .suggestItem {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: text-top;
-background-color: #e5ecf9; color: #598edd;
+padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #e5ecf9; color: #598edd;
 }
 
 .suggestHilighted {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: text-top;
-background-color: #598edd; color: #e5ecf9;
+padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #598edd; color: #e5ecf9;
 }
 
 /*
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.js b/sca-cpp/trunk/modules/js/htdocs/ui.js
index 20b2cd0579..db58f8b4e5 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.js
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.js
@@ -34,17 +34,12 @@ ui.isIE = function() {
 };
 
 /**
- * Build a portable href attribute.
- */
-ui.href = function(loc, target) {
-    return 'javascript:window.open(\'' + loc + '\', \'' + target + '\');';
-};
-
-/**
  * Build a portable <a href> tag.
  */
 ui.ahref = function(loc, target, html) {
-    return '<a href="' + ui.href(loc, target) + '">' + html + '</a>';
+    if (target == '_blank')
+        return '<a href="' + loc + '" target="_blank">' + html + '</a>';
+    return '<a href="javascript:void(0)" onclick="window.open(\'' + loc + '\', \'' + target + '\');">' + html + '</a>';
 };
 
 /**
@@ -270,6 +265,14 @@ ui.showbody = function() {
 };
 
 /**
+ * Reload the current page.
+ */
+ui.reload = function() {
+    window.open(window.location, '_self');
+    return true;
+};
+
+/**
  * Install a widget into the element bound to its iframe.
  */
 ui.installwidget = function() {
@@ -300,13 +303,20 @@ ui.loadiframe = function(el, doc) {
 /**
  * Convert a CSS position to a numeric position.
  */
-ui.csspos = function(p) {
+ui.numpos = function(p) {
     if (p == '')
         return 0;
     return Number(p.substr(0, p.length - 2));
 };
 
 /**
+ * Convert a numeric position to a CSS pixel position.
+ */
+ui.pixpos = function(p) {
+    return p + 'px';
+};
+
+/**
  * Convert a list of elements to an HTML table.
  */
 ui.datatable = function(l) {
diff --git a/sca-cpp/trunk/modules/js/htdocs/uicyan.css b/sca-cpp/trunk/modules/js/htdocs/uicyan.css
index ca1f42fa0f..aa03b7570a 100644
--- a/sca-cpp/trunk/modules/js/htdocs/uicyan.css
+++ b/sca-cpp/trunk/modules/js/htdocs/uicyan.css
@@ -18,18 +18,24 @@
  */
 
 body {
-white-space: margin: 0px;
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+margin: 2px; font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
 -webkit-text-size-adjust: none;
+-webkit-touch-callout: none;
+-webkit-tap-highlight-color: rgba(0,0,0,0);
+-webkit-user-select: none;
 }
 
 .delayed {
 visibility: hidden;
 }
 
+.devicewidth {
+position: absolute; top: 0px; left: 0px; right: 0px; height: 5000px; overflow: hidden;
+}
+
 table {
 border: 0px; border-collapse: collapse; border-color: #a2bae7; border-style: solid;
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
 overflow: visible;
 }
 
@@ -38,24 +44,20 @@ border-bottom: 1px; border-bottom-style: solid; border-color: #dcdcdc;
 }
 
 th {
-font-weight: bold; background-color: #e5ecf9; color: #000000;
-text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; 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;
+font-weight: bold; background-color: #e5ecf9; color: #000000; height: 18px;
+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;
 overflow: hidden;
 }
 
 .section {
-font-weight: bold; background-color: #e5ecf9; color: #000000;
-text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 2px; padding-bottom: 4px; vertical-align: text-top; white-space: nowrap;
-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-weight: bold; background-color: #e5ecf9; 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;
 overflow: hidden;
 }
 
 .text {
-padding-top: 3px; padding-bottom: 4px; vertical-align: text-top;
-vertical-align: text-top;
+padding-top: 3px; padding-bottom: 4px; vertical-align: middle;
 }
 
 .thl {
@@ -71,7 +73,7 @@ padding: 0px;
 }
 
 td {
-padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: text-top; border: 0px;
+padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: nowrap; vertical-align: middle; border: 0px;
 }
 
 .tdl {
@@ -83,19 +85,19 @@ border-left: 1px; border-style: solid; border-color: #a2bae7;
 }
 
 .tdw {
-padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: text-top;
+padding-left: 2px; padding-top: 2px; padding-right: 8px; white-space: normal; vertical-align: middle;
 }
 
 .datatd {
-border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
+border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: middle;
 }
 
 .datatdl {
-border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: top;
+border-right: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; width: 10px; vertical-align: middle;
 }
 
 .datatdr {
-border-left: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; vertical-align: top;
+border-left: 1px; border-top: 1px; border-bottom: 1px; border-style: solid; border-color: #dcdcdc; vertical-align: middle;
 }
 
 .datatable {
@@ -131,53 +133,55 @@ padding: 3px; background-color: #dcdcdc; color: #000000;
 
 input {
 vertical-align: middle;
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
 -webkit-text-size-adjust: 100%;
 }
 
 textarea {
-font-family: arial,sans-serif; font-style: normal; font-variant: normal; font-size: 13px;
+font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
+overflow: auto; resize: none;
+}
+
+.editable {
+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%;
+border: 0px;
 }
 
 a:link {
-color: #598edd;
-text-decoration: none
+color: #598edd; text-decoration: none;
 }
 
 a:visited {
-color: #598edd;
-text-decoration: none
+color: #598edd; text-decoration: none;
 }
 
 .amenu {
-color: #598edd;
-text-decoration: none
+color: #598edd; text-decoration: none;
 }
 
 .smenu {
-font-weight: bold;
-color: #000000;
-text-decoration: none
+font-weight: bold; color: #000000; text-decoration: none;
 }
 
 h1 {
-font-size: 200%; font-weight: bold;
-vertical-align: middle;
-margin: 0px;
+font-size: 150%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px;
 }
 
 h2 {
-font-size: 150%; font-weight: bold;
-vertical-align: middle;
-margin: 0px;
+font-size: 120%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px;
 }
 
 .hd1 {
-font-size: 200%; font-weight: bold;
+font-size: 150%; font-weight: bold;
 }
 
 .hd2 {
-font-size: 150%; font-weight: bold;
+font-size: 120%; font-weight: bold;
 }
 
 img {
@@ -185,55 +189,128 @@ border: 0px;
 }
 
 .imgbutton {
-width: 142px; height: 64px; margin-left: 20px; margin-right: 20px; padding: 0px; border: 1px;
-cursor: pointer; cursor: hand;
+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;
+}
+
+.greenbutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #96d333;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.tgreenbutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #96d333;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.bluebutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #598edd;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #598edd 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#598edd));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#598edd',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#598edd 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.redbutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #d03f41;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #d03f41 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#d03f41));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#d03f41',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#d03f41 100%);
+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 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ffbb00));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffbb00',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#ffbb00 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+cursor: pointer;
+}
+
+.graybutton {
+-webkit-border-radius: 4px;
+border-radius: 4px;
+background: #dcdcdc;
+background: -moz-linear-gradient(top, #f8f8f8 0%, #dcdcdc 100%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dcdcdc));
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#dcdcdc',GradientType=0 );
+background: -o-linear-gradient(top, #f8f8f8 0%,#dcdcdc 100%);
+border: 1px outset #dcdcdc;
+padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
+margin: 2px;
+cursor: pointer;
 }
 
 .tbar {
-margin: 0px; width: 100%;
-padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px;
-border-bottom: 1px solid #a2bae7; border-collapse: separate;
+margin: 0px; width: 100%; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px; border-bottom: 1px solid #a2bae7; border-collapse: separate;
 }
 
 .ltbar {
-padding-left: 0px; padding-top: 0px; padding-right: 6px; white-space: nowrap; vertical-align: top;
+padding-left: 2px; padding-top: 2px; padding-right: 6px; white-space: nowrap; vertical-align: middle;
 }
 
 .dtbar {
-padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
-text-align: right;
+padding-left: 0px; padding-right: 0px; padding-top: 2px; white-space: nowrap; vertical-align: middle; text-align: right;
 }
 
 .rtbar {
-padding-left: 6px; padding-right: 0px; padding-top: 0px; white-space: nowrap; vertical-align: top;
-text-align: right;
+padding-left: 6px; padding-right: 2px; padding-top: 2px; white-space: nowrap; vertical-align: middle; text-align: right;
 }
 
 .suggest {
 background-color: #e5ecf9; 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;
+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;
-padding: 0px; margin: 0px;
 }
 
 .suggestTable {
-border: 0px; border-collapse: separate;
-padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; 
-margin: 0px;
+border: 0px; border-collapse: separate; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; margin: 0px;
 }
 
 .suggestItem {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: text-top;
-background-color: #e5ecf9; color: #598edd;
+padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #e5ecf9; color: #598edd;
 }
 
 .suggestHilighted {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: text-top;
-background-color: #598edd; color: #e5ecf9;
+padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #598edd; color: #e5ecf9;
 }
 
 /*
diff --git a/sca-cpp/trunk/modules/server/server-conf b/sca-cpp/trunk/modules/server/server-conf
index 61dcdeeb91..d80f8a09e9 100755
--- a/sca-cpp/trunk/modules/server/server-conf
+++ b/sca-cpp/trunk/modules/server/server-conf
@@ -64,7 +64,10 @@ Alias /atomutil.js $jsprefix/htdocs/atomutil.js
 Alias /jsonutil.js $jsprefix/htdocs/jsonutil.js
 Alias /ui.js $jsprefix/htdocs/ui.js
 Alias /ui.css $jsprefix/htdocs/ui.css
+Alias /ui-min.css $jsprefix/htdocs/ui-min.css
 Alias /scdl.js $jsprefix/htdocs/scdl.js
+Alias /all.js $jsprefix/htdocs/all.js
+Alias /all-min.js $jsprefix/htdocs/all-min.js
 
 <Location /component.js>
 AuthType None
@@ -98,10 +101,22 @@ Require all granted
 AuthType None
 Require all granted
 </Location>
+<Location /ui-min.css>
+AuthType None
+Require all granted
+</Location>
 <Location /scdl.js>
 AuthType None
 Require all granted
 </Location>
+<Location /all.js>
+AuthType None
+Require all granted
+</Location>
+<Location /all-min.js>
+AuthType None
+Require all granted
+</Location>
 
 EOF
author	jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>	2011-05-02 05:58:26 +0000
committer	jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>	2011-05-02 05:58:26 +0000
commit	8cfb387f9129dcff5ff74922a3be8f1662529037 (patch)
tree	5a21e215aeddafb6669f9f12b89507217939f558 /sca-cpp
parent	c5541eed95f492f5fd615e6159115b0840ef0c37 (diff)