Refactor server hosting module, rename it and move it under a hosting dir, and refactor its datastore components into a single component.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1237740 13f79535-47bb-0310-9956-ffa450edef68
author: jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> 2012-01-30 15:56:11 +0000
committer: jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> 2012-01-30 15:56:11 +0000
commit: f4c4803ce0c14585e3c2af3641d94b651877e04c (patch)
tree: 9f10df32f2d34a3c697aaee897bad0b180922095 /sca-cpp/trunk/hosting/server/htdocs
parent: 1b10f18fce6baeb721a725661ded630614831304 (diff)
38 files changed, 6363 insertions, 0 deletions
diff --git a/sca-cpp/trunk/hosting/server/htdocs/account/index.html b/sca-cpp/trunk/hosting/server/htdocs/account/index.html
new file mode 100644
index 0000000000..291f6dea1c
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/account/index.html
@@ -0,0 +1,224 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="h1"></span><span id="userNameHeader"></span></h2></td>
+<td style="vertical-align: middle; text-align: right;"><span id="status" style="font-weight: bold; color: #808080;"></span></td>
+</tr>
+</table>
+
+<table style="width: 100%;">
+<tr>
+<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; ">Account</th>
+</tr>
+</table>
+
+<form id="userForm">
+<table style="width: 100%;">
+<tr><tr><td><b>Photo:</b></td></tr>
+<tr><td><img id="userimg" style="width: 50px; height: 50px; vertical-align: top;"></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Name:</b></td></tr>
+<tr><td><input type="text" id="userTitle" size="30" placeholder="Enter your name" style="width: 300px;"/></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>Description:</b></td></tr>
+<tr><td><textarea id="userDescription" cols="40" rows="3" placeholder="Enter a short description of yourself" style="width: 300px;"></textarea></td></tr>
+</table>
+
+<br/>
+<table style="width: 100%;">
+<tr>
+<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; ">Calendar</th>
+</tr>
+</table>
+
+<table>
+<tr><td style="padding-right: 2px;"><input type="text" id="sched1" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service1" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="sched2" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service2" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="sched3" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service3" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="sched4" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service4" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="sched5" size="10" placeholder="Schedule" style="width: 80px;"/></td><td><input type="text" id="service5" size="2048" placeholder="Service URL" style="width: 200px;"/></td></tr>
+</table>
+<br/>
+
+<table style="width: 100%;">
+<tr>
+<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; ">Key chain</th>
+</tr>
+</table>
+
+<table>
+<tr><td style="padding-right: 2px;"><input type="text" id="name1" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value1" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name2" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value2" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name3" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value3" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name4" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value4" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name5" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value5" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name6" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value6" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name7" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value7" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name8" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value8" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name9" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value9" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+<tr><td style="padding-right: 2px;"><input type="text" id="name10" size="10" placeholder="Key name" style="width: 80px;"/></td><td><input type="text" id="value10" size="2048" placeholder="Key value" style="width: 200px;"/></td></tr>
+</table>
+</form>
+
+<script type="text/javascript">
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var user= sca.defun(sca.reference(editWidget, "user"), "id");
+var accounts = sca.reference(editWidget, "accounts");
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname) + ' - Account';
+
+// Set images
+$('userimg').src = ui.b64img(appcache.get('/public/user.b64'));
+
+/**
+ * The current account entry and corresponding saved XML content.
+ */
+var username;
+var accountentry;
+var savedaccountentryxml = '';
+
+/**
+ * Get and display the user's account.
+ */
+function getaccount(name) {
+    showStatus('Loading');
+
+    return accounts.get(name, function(doc) {
+
+        // Stop now if we didn't get an account
+        if (doc == null) {
+            showStatus('No data');
+            return false;
+        }
+        showStatus(defaultStatus());
+
+        accountentry = doc != null? car(elementsToValues(atom.readATOMEntry(mklist(doc)))) : mklist("'entry", mklist("'title", ''), mklist("'id", name));
+        username = cadr(assoc("'id", cdr(accountentry)));
+        var title = cadr(assoc("'title", cdr(accountentry)));
+        $('userNameHeader').innerHTML = username;
+        $('userTitle').value = title;
+
+        var content = cadr(assoc("'content", cdr(accountentry)));
+        var acct = isNil(content)? mklist() : cdr(content);
+
+        var desc = assoc("'description", acct);
+        $('userDescription').innerHTML = isNil(desc) || isNil(cdr(desc))? '' : cadr(desc);
+
+        var cal = assoc("'calendar", acct);
+        reduce(function(i, evt) {
+                var sched = assoc("'@schedule", evt);
+                var svc = assoc("'@service", evt);
+                $('sched' + i).value = isNil(sched)? '' : cadr(sched);
+                $('service' + i).value = isNil(svc)? '' : cadr(svc);
+                return i + 1;
+            }, 1, isNil(cal)? mklist() : cadr(cadr(cal)));
+
+        var keys = assoc("'keys", acct);
+        reduce(function(i, key) {
+                var kn = assoc("'@name", key);
+                var kv = assoc("'@value", key);
+                $('name' + i).value = isNil(kn)? '' : cadr(kn);
+                $('value' + i).value = isNil(kv)? '' : cadr(kv);
+                return i + 1;
+            }, 1, isNil(keys)? mklist() : cadr(cadr(keys)));
+
+        savedaccountentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(accountentry))));
+        return true;
+    });
+}
+
+/**
+ * Save the user's account.
+ */
+function save(entryxml) {
+    if (isNil(username))
+        return false;
+    showStatus('Saving');
+    savedaccountentryxml = entryxml;
+    accounts.put(username, savedaccountentryxml, function(e) {
+        if (e) {
+            showStatus('Local copy');
+            return false;
+        }
+
+        showStatus('Saved');
+        return true;
+    });
+    return true;
+}
+
+/**
+ * Handle a change event
+ */
+function onaccountchange() {
+    var title = $('userTitle').value;
+    var desc = $('userDescription').value;
+    var cal = map(function(i) {
+        var sched = $('sched' + i).value;
+        var svc = $('service' + i).value;
+        return mklist("'event", mklist("'@schedule", sched), mklist("'@service", svc));
+    }, range(1, 6));
+    var keys = map(function(i) {
+        var kn = $('name' + i).value;
+        var kv = $('value' + i).value;
+        return mklist("'key", mklist("'@name", kn), mklist("'@value", kv));
+    }, range(1, 11));
+
+    var accountentry = mklist("'entry", mklist("'title", title != ''? title : username), mklist("'id", username),
+                        mklist("'content", mklist("'account", mklist("'description", desc), cons("'keys", keys), cons("'calendar", cal))));
+    var entryxml = car(atom.writeATOMEntry(valuesToElements(mklist(accountentry))));
+    if (savedaccountentryxml == entryxml)
+        return false;
+
+    showStatus('Modified');
+    return save(entryxml);
+}
+
+$('userTitle').onchange = onaccountchange;
+$('userDescription').onchange = onaccountchange;
+map(function(i) {
+    $('sched' + i).onchange = onaccountchange;
+    $('service' + i).onchange = onaccountchange;
+    return true;
+}, range(1, 6));
+map(function(i) {
+    $('name' + i).onchange = onaccountchange;
+    $('value' + i).onchange = onaccountchange;
+    return true;
+}, range(1, 11));
+
+/**
+ * Handle a form submit event.
+ */
+$('userForm').onsubmit = function() {
+    onaccountchange();
+    return false;
+};
+
+// Get the user's account
+getaccount();
+
+</script>
+
+</div>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/app/cache-manifest.cmf b/sca-cpp/trunk/hosting/server/htdocs/app/cache-manifest.cmf
new file mode 100644
index 0000000000..6ea53970aa
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/app/cache-manifest.cmf
@@ -0,0 +1,17 @@
+CACHE MANIFEST
+
+# Version 5
+
+# App resources
+/favicon.ico
+/public/iframe-min.html
+/public/img.png
+/public/notauth/
+/public/notfound/
+/public/notyet/
+/public/oops/
+/public/touchicon.png
+
+NETWORK:
+*
+
diff --git a/sca-cpp/trunk/hosting/server/htdocs/app/index.html b/sca-cpp/trunk/hosting/server/htdocs/app/index.html
new file mode 100644
index 0000000000..0b01c1d3bd
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/app/index.html
@@ -0,0 +1,906 @@
+<!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 manifest="cache-manifest.cmf">
+<head>
+<title></title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-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"/>
+<base href="/"/>
+<script type="text/javascript">
+
+window.appcache = {};
+
+/**
+ * Get and cache a resource.
+ */
+appcache.get = function(uri) {
+    var h = uri.indexOf('#');
+    var u = h == -1? uri : uri.substring(0, h);
+
+    // Get resource from local storage first
+    var item = localStorage.getItem(u);
+    if (item != null && item != '')
+        return item;
+
+    // Get resource from network
+    var http = new XMLHttpRequest();
+    http.open("GET", u, false);
+    http.send(null);
+    if (http.status == 200) {
+        if (http.getResponseHeader("X-Login") != null) {
+            if (log) log('http error', u, 'X-Login');
+            // Redirect to login page if not signed in
+            document.location = '/login/';
+            return null;
+        } else if (http.responseText == '' || http.getResponseHeader("Content-Type") == null) {
+            if (log) log('http error', u, 'No-Content');
+            return null;
+        }
+        localStorage.setItem(u, http.responseText);
+        return http.responseText;
+    }
+    if (log) log('http error', u, http.status, http.statusText);
+    // Redirect to login page if not signed in
+    if (http.status == 403)
+        document.location = '/login/';
+    return null;
+};
+
+// Load Javascript and CSS
+(function() {
+    var bootjs = document.createElement('script');
+    bootjs.type = 'text/javascript';
+    bootjs.text = appcache.get('/all-min.js');
+    document.head.appendChild(bootjs);
+    document.head.appendChild(ui.declareCSS(appcache.get('/ui-min.css')));
+})();
+
+// Redirect to login page if not signed in
+if (document.location.protocol == 'https:' && !ui.signedin())
+    document.location = '/login/';
+
+</script>
+</head>
+<body class="delayed" onload="onload();">
+<div id="mainbodydiv" class="mainbodydiv">
+
+<div id="headdiv" class="hsection">
+<script type="text/javascript">
+(function() {
+$('headdiv').appendChild(ui.declareScript(appcache.get('/config-min.js')));
+})();
+</script>
+</div>
+
+<div id="content">
+</div>
+
+<script type="text/javascript">
+
+/**
+ * Get the app name
+ */
+var appname = location.pathname.split('/')[1];
+
+// Set page title
+document.title = appname;
+
+/**
+ * The main page div.
+ */
+var contentdiv = $('content');
+
+/**
+ * Initialize the app HTTP clients.
+ */
+var appWidget = sca.component('AppWidget');
+var pagecomp = sca.reference(appWidget, 'pages');
+var startcomp = sca.httpclient('start', '/' + appname + '/start');
+var stopcomp = sca.httpclient('stop', '/' + appname + '/stop');
+var timercomp = sca.httpclient('timer', '/' + appname + '/timer');
+var animationcomp = sca.httpclient('animation', '/' + appname + '/animation');
+var locationcomp = sca.httpclient('location', '/' + appname + '/location');
+
+/**
+ * Pre-fetch app resources.
+ */
+var appresources = [
+    ['/all-min.js'],
+    ['/ui-min.css'],
+    ['/config-min.js'],
+    ['/public/config-min.js']
+];
+
+/**
+ * Handle application cache events.
+ */
+applicationCache.addEventListener('checking', function(e) {
+    //log('appcache checking', e);
+}, false);
+applicationCache.addEventListener('error', function(e) {
+    //log('appcache error', e);
+}, false);
+applicationCache.addEventListener('noupdate', function(e) {
+    //log('appcache noupdate', e);
+}, false);
+applicationCache.addEventListener('downloading', function(e) {
+    //log('appcache downloading', e);
+}, false);
+applicationCache.addEventListener('progress', function(e) {
+    //log('appcache progress', e);
+}, false);
+applicationCache.addEventListener('updateready', function(e) {
+    //log('appcache updateready', e);
+    applicationCache.swapCache();
+    //log('appcache swapped', e);
+}, false);
+applicationCache.addEventListener('cached', function(e) {
+    //log('appcache cached', e);
+    map(function(res) {
+        appcache.get(res[0]);
+    }, appresources);
+}, false);
+
+/**
+ * Handle network offline/online events.
+ */
+window.addEventListener('offline', function(e) {
+      //log('going offline');
+}, false);
+window.addEventListener('online', function(e) {
+      //log('going online');
+}, false);
+
+//log(navigator.onLine? 'online' : 'offline');
+
+/**
+ * Find a named value in a tree of elements. The value name is given
+ * as a list of ids.
+ */
+function namedvalue(l, id) {
+    if (isNil(l))
+        return null;
+    var e = car(l);
+
+    // Element matches id segment
+    if (car(id) == elementName(e)) {
+
+        // Found element matching the whole id path
+        if (isNil(cdr(id)))
+            return e;
+
+        // Search for next id segments in child elements
+        if (!elementHasValue(e)) {
+            var v = namedvalue(elementChildren(e), cdr(id));
+            if (v != null)
+                return v;
+        }
+    }
+
+    // Search for id through the whole element tree
+    if (!elementHasValue(e)) {
+        var v = namedvalue(elementChildren(e), id);
+        if (v != null)
+            return v;
+    }
+    return namedvalue(cdr(l), id);
+}
+
+/**
+ * Return the value of an input element.
+ */
+function inputvalue(e) {
+    if (e.className == 'entry' || e.className == 'password') {
+        return car(childElements(e)).value;
+    }
+    if (e.className == 'button') {
+        return car(childElements(e)).value;
+    }
+    if (e.className == 'checkbox') {
+        if (!car(childElements(e)).checked)
+            return null;
+        return car(childElements(e)).value;
+    }
+    if (e.className == 'select') {
+        return car(childElements(car(childElements(e)))).value;
+    }
+    return null;
+};
+
+/**
+ * Set a value into a widget.
+ */
+function setwidgetvalue(e, dv) {
+    var htattrs = namedElementChild("'htattrs", dv);
+
+    function attr(ce) {
+        return mklist(elementName(ce) == "'htstyle"? 'style' : elementName(ce).substring(1), elementHasValue(ce)? elementValue(ce) : elementChildren(ce));
+    }
+
+    function vattr(dv) {
+        return (elementHasValue(dv) && !isNil(elementValue(dv)))? mklist(mklist('value', isNil(elementValue(dv))? '' : elementValue(dv))) : mklist();
+    }
+
+    function sattr(dv) {
+        var s = namedElementChild("'htstyle", dv);
+        return isNil(s)? mklist() : mklist(mklist('style', elementHasValue(s)? elementValue(s) : elementChildren(s)))
+    }
+
+    var attrs = append(append(isNil(htattrs)?  mklist() : map(attr, elementChildren(htattrs)), vattr(dv)), sattr(dv));
+
+    // Set the attributes of the widget
+    function setattrs(vsetter, attrs, ce) {
+        return map(function(a) {
+            if (car(a) == 'value')
+                return vsetter(a, ce);
+
+            if (car(a) == 'style') {
+                // Split a style property between a style attribute
+                // and a stylesheet definition in the document's head
+
+                function prop(s) {
+                    if (s == ';')
+                        return '';
+                    var i = s.indexOf('<style>');
+                    if (i == -1)
+                        return s;
+                    var j = s.indexOf('</style>');
+                    return s.substring(0, i) + prop(s.substring(j + 8));
+                }
+
+                function sheet(s) {
+                    var i = s.indexOf('<style>');
+                    if (i == -1)
+                        return '';
+                    var j = s.indexOf('</style>');
+                    return s.substring(i + 7, j) + sheet(s.substring(j + 8));
+                }
+
+                var st = cadr(a).replace(new RegExp('{id}', 'g'), e.id);
+                var p = prop(st);
+                var s = sheet(st);
+
+                // Define the stylesheet
+                if (s != '') {
+                    var esheet = ui.elementByID(contentdiv, 'style_' + e.id);
+                    if (isNil(esheet)) {
+                        var nesheet = document.createElement('style');
+                        nesheet.id = 'style_' + e.id;
+                        nesheet.type = 'text/css';
+                        document.head.appendChild(nesheet);
+                        nesheet.innerHTML = s;
+                    } else {
+                        esheet.innerHTML = s;
+                    }
+                }
+
+                var aname = ce.style.webkitAnimationName;
+
+                // Set the style attribute
+                ce.setAttribute('style', p);
+
+                // Restart current animation if necessary
+                if (!isNil(aname) && ce.style.webkitAnimationName == aname) {
+                    ce.style.webkitAnimationName = '';
+                    setTimeout(function() {
+                        ce.style.webkitAnimationName = aname;
+                    }, 0);
+                }
+                return a;
+            }
+
+            ce.setAttribute(car(a), cadr(a));
+            return a;
+        }, attrs);
+    }
+
+    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') {
+        var ce = car(childElements(e));
+        return setattrs(function(a, ce) { ce.innerHTML = cadr(a); }, attrs, ce);
+    }
+    if (e.className == 'entry' || e.className == 'password') {
+        var ce = car(childElements(e));
+        return setattrs(function(a, ce) { ce.defaultValue = cadr(a); }, attrs, ce);
+    }
+    if (e.className == 'button') {
+        var ce = car(childElements(e));
+        return setattrs(function(a, ce) { ce.value = cadr(a); }, attrs, ce);
+    }
+    if (e.className == 'checkbox') {
+        var ce = car(childElements(e));
+
+        function setcheckvalue(a, ce) {
+            var v = cadr(a);
+            ce.value = v;
+            map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = v; return n; }, nodeList(e.childNodes));
+            return true;
+        }
+
+        return setattrs(setcheckvalue, attrs, ce);
+    }
+    if (e.className == 'select') {
+        var ce = car(childElements(car(childElements(e))));
+
+        function setselectvalue(a, ce) {
+            var v = cadr(a);
+            ce.value = v;
+            ce.innerHTML = v;
+            return true;
+        }
+
+        return setattrs(setselectvalue, attrs, ce);
+    }
+    if (e.className == 'list') {
+        var dl = ui.datalist(isNil(dv)? mklist() : mklist(dv));
+        e.innerHTML = dl;
+        return dl;
+    }
+    if (e.className == 'table') {
+        var dl = ui.datatable(isNil(dv)? mklist() : mklist(dv));
+        e.innerHTML = dl;
+        return dl;
+    }
+    if (e.className == 'link') {
+        var ce = car(childElements(e));
+
+        function setlinkvalue(a, ce) {
+            var v = cadr(a);
+            if (isList(v)) {
+                ce.href = car(v);
+                ce.innerHTML = cadr(v);
+                return true;
+            }
+            ce.href = v;
+            ce.innerHTML = v;
+            return true;
+        }
+
+        return setattrs(setlinkvalue, attrs, ce);
+    }
+    if (e.className == 'img') {
+        var ce = car(childElements(e));
+        return setattrs(function(a, ce) { ce.setAttribute('src', cadr(a)); }, attrs, ce);
+    }
+    if (e.className == 'iframe') {
+        var ce = car(childElements(e));
+        return setattrs(function(a, ce) { ce.setAttribute('src', cadr(a)); }, attrs, ce);
+    }
+    return '';
+};
+
+/**
+ * Update the app page with the given app data.
+ */
+function updatepage(l) {
+    if (isNil(l))
+        return true;
+
+    // Update the widgets values
+    function updatewidget(e) {
+        var dv = namedvalue(l, map(function(t) { return "'" + t; }, e.id.split('.')));
+        if (dv == null || isNil(dv))
+            return e;
+        setwidgetvalue(e, dv);
+        return e;
+    }
+
+    map(updatewidget, filter(function(e) { return !isNil(e.id) && e.id.substring(0, 5) != 'page:'; }, nodeList(ui.elementByID(contentdiv, 'page').childNodes)));
+    return true;
+}
+
+/**
+ * Convert a document to application data.
+ */
+function docdata(doc) {
+    if (isNil(doc))
+        return null;
+
+    if (json.isJSON(mklist(doc)))
+        return json.readJSON(mklist(doc));
+
+    if (atom.isATOMEntry(mklist(doc)))
+        return atom.readATOMEntry(mklist(doc));
+
+    if (atom.isATOMFeed(mklist(doc)))
+        return atom.readATOMFeed(mklist(doc));
+
+    return doc;
+}
+
+/**
+ * Bind a handler to a widget.
+ */
+function bindwidgethandler(e, appname) {
+    if (e.className == 'button') {
+        var b = car(childElements(e));
+        b.name = e.id;
+        b.onclick = function() { return buttonClickHandler(b.value, appname); };
+        return e;
+    }
+    if (e.className == 'link') {
+        var l = car(childElements(e));
+        var hr = l.href;
+        if (hr.substring(0, 5) == 'link:' && hr.indexOf('://') == -1) {
+            var f = function(e) {
+                e.preventDefault();
+                return buttonClickHandler(hr.substring(5), appname);
+            };
+            l.ontouchstart = l.onclick = f;
+            l.href = 'javascript:void()';
+        }
+        return e;
+    }
+    if (e.className == 'entry' || e.className == 'password' || e.className == 'checkbox') {
+        car(childElements(e)).name = e.id;
+        return e;
+    }
+    if (e.className == 'select') {
+        var ce = car(childElements(car(childElements(e))));
+        ce.name = e.id;
+        return e;
+    }
+    return e;
+}
+
+/**
+ * Initial fixup of a widget.
+ */
+function fixupwidget(e) {
+    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') {
+        if (e.className == 'section')
+            e.style.width = '100%';
+        var ce = car(childElements(e));
+        if (ce.innerHTML == '=' + e.id)
+            ce.innerHTML = '';
+        return e;
+    }
+    if (e.className == 'entry' || e.className == 'password') {
+        var ce = car(childElements(e));
+        if (ce.defaultValue == '=' + e.id)
+            ce.defaultValue = '';
+        return e;
+    }
+    if (e.className == 'button') {
+        var ce = car(childElements(e));
+        if (ce.value == '=' + e.id)
+            ce.value = '';
+        return e;
+    }
+    if (e.className == 'checkbox') {
+        var ce = car(childElements(e));
+        if (ce.value == '=' + e.id) {
+            ce.value = '';
+            map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = ''; return n; }, nodeList(e.childNodes));
+        }
+        return e;
+    }
+    if (e.className == 'select') {
+        var ce = car(childElements(car(childElements(e))));
+        if (ce.value == '=' + e.id) {
+            ce.value = '';
+            ce.innerHTML = '';
+        }
+        return 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;
+    }
+    if (e.className == 'link') {
+        var ce = car(childElements(e));
+        if (ce.innerHTML == '=' + e.id)
+            ce.innerHTML = '';
+        return e;
+    }
+    if (e.className == 'img') {
+        var ce = car(childElements(e));
+        return e;
+    }
+    if (e.className == 'iframe') {
+        var ce = car(childElements(e));
+        e.innerHTML = '<iframe src="' + ce.href + '" frameborder="no" scrolling="no"></iframe>';
+        return e;
+    }
+    return e;
+}
+
+/**
+ * Set initial value of a widget.
+ */
+function initwidget(e) {
+    if (!isNil(e.id) && e.id.substring(0, 5) != 'page:')
+        setwidgetvalue(e, mklist());
+    return e;
+}
+
+/**
+ * Get app data from the main app page component.
+ */
+function getpagedata(appname) {
+    try {
+
+        // Display component data on the page
+        function displaypage(doc) {
+            updatepage(docdata(doc));
+            return true;
+        }
+
+        // Eval a component init script
+        function evalcompinit(doc) {
+            if (isNil(doc))
+                return true;
+            var js = car(json.readJSON(mklist(doc)));
+            if (!elementHasValue(js))
+                return true;
+            eval(elementValue(js));
+            return true;
+        }
+
+        // Initial setup of a widget
+        function setupwidget(e) {
+            initwidget(e);
+            fixupwidget(e);
+            bindwidgethandler(e, appname);
+        }
+
+        // Setup the widgets
+        map(setupwidget, filter(function(e) { return !isNil(e.id); }, nodeList(ui.elementByID(contentdiv, 'page').childNodes)));
+
+        // Get the component app data
+        startcomp.get(location.search, function(doc, e) {
+            if (isNil(doc)) {
+                log('error on get(start, ' + location.search + ')', e);
+                return false;
+            }
+
+            // Display data on the page
+            displaypage(doc);
+        });
+
+        // Get and eval the optional timer, animation and location watch setup scripts
+        timercomp.get('setup', function(doc, e) {
+            if (isNil(doc)) {
+                log('error on get(timer, setup)', e);
+                return false;
+            }
+
+            // Evaluate the component init expression
+            return evalcompinit(doc);
+        });
+        animationcomp.get('setup', function(doc, e) {
+            if (isNil(doc)) {
+                log('error on get(animation, setup)', e);
+                return false;
+            }
+
+            // Evaluate the component init expression
+            return evalcompinit(doc);
+        });
+        locationcomp.get('setup', function(doc, e) {
+            if (isNil(doc)) {
+                log('error on get(location, setup)', e);
+                return false;
+            }
+
+            // Evaluate the component init expression
+            return evalcompinit(doc);
+        });
+
+        return true;
+
+    } catch(e) {
+        log('error in getpagedata()', e);
+        return true;
+    }
+}
+
+/**
+ * Build a query string from the values of the page's input fields.
+ */
+function compquery() {
+    function queryarg(e) {
+        return e.id + '=' + inputvalue(e);
+    }
+
+    function childrenList(n) {
+        return append(nodeList(n.childNodes), reduce(append, mklist(), map(childrenList, nodeList(n.childNodes))));
+    }
+
+    var args = map(queryarg, filter(function(e) { return !isNil(e.id) && !isNil(inputvalue(e)); }, childrenList(ui.elementByID(contentdiv, 'page'))));
+
+    // Append current location properties if known
+    if (!isNil(geoposition)) {
+        var g = geoposition;
+        args = append(args, mklist('latitude=' + g.coords.latitude, 'longitude=' + g.coords.longitude, 'altitude=' + g.coords.altitude,
+                        'accuracy=' + g.coords.accuracy, 'altitudeAccuracy=' + g.coords.altitudeAccuracy, 'heading=' + g.coords.heading,
+                        'speed=' + g.coords.speed));
+    }
+
+    return '?' + args.join('&');
+}
+
+/**
+ * Handle a button click event.
+ */
+function buttonClickHandler(id, appname) {
+    try {
+        var uri = compquery();
+        return sca.component(id, appname).get(uri, function(doc, e) {
+            if (isNil(doc)) {
+                log('error on get(button, ' + uri + ')', e);
+                return false;
+            }
+
+            // Inject data into the page
+            updatepage(docdata(doc));
+        });
+    } catch(e) {
+        log('error in buttonClickHandler()', e);
+        return true;
+    }
+}
+
+/**
+ * Handle a timer interval event.
+ */
+function intervalHandler() {
+    try {
+        var uri = compquery();
+        return timercomp.get(uri, function(doc, e) {
+            if (isNil(doc)) {
+                log('error on get(timer, ' + uri + ')', e);
+                return false;
+            }
+
+            // Inject data into the page
+            updatepage(docdata(doc));
+        });
+    } catch(e) {
+        log('error in intervalHandler()', e);
+        return true;
+    }
+}
+
+/**
+ * Setup an interval timer.
+ */
+function setupIntervalHandler(msec) {
+    intervalHandler();
+    try {
+        return setInterval(intervalHandler, msec);
+    } catch(e) {
+        log('error in setupIntervalHandler()', e);
+        return true;
+    }
+}
+
+/**
+ * Handle an animation event.
+ */
+var animationData = null;
+var gettingAnimationData = false;
+var currentAnimationData = null;
+var animationLoop = 0;
+var currentAnimationLoop = 0;
+
+function animationHandler() {
+    try {
+        function applyAnimation() {
+            // Update page with current animation data
+            updatepage(car(currentAnimationData));
+
+            // End of animation?
+            if (isNil(cdr(currentAnimationData))) {
+                if (currentAnimationLoop == -1) {
+                    // Repeat current animation forever
+                    currentAnimationData = animationData;
+                    return true;
+                }
+
+                currentAnimationLoop = currentAnimationLoop - 1;
+                if (currentAnimationLoop <= 0) {
+                    // Get next animation data
+                    currentAnimationData = null;
+                    animationData = null;
+                    return true;
+                }
+
+                // Repeat animation
+                currentAnimationData = animationData;
+                return true;
+            }
+
+            // Move to the next animation frame
+            currentAnimationData = cdr(currentAnimationData);
+            return true;
+        }
+
+        // Get new animation data if necessary
+        if (isNil(animationData)) {
+            if (gettingAnimationData)
+                return true;
+            var uri = compquery();
+            return animationcomp.get(uri, function(doc, e) {
+                if (isNil(doc)) {
+                    log('error on get(animation, ' + uri + ')', e);
+                    return false;
+                }
+
+                // Apply the new animation
+                currentAnimationData = docdata(doc);
+                currentAnimationLoop = animationLoop;
+                gettingAnimationData = false;
+                applyAnimation();
+            });
+        }
+
+        // Apply the current animation
+        return applyAnimation();
+
+    } catch(e) {
+        log('error in animationHandler()', e);
+        return true;
+    }
+}
+
+/**
+ * Setup an animation.
+ */
+function setupAnimationHandler(msec, loop) {
+    animationLoop = loop;
+    animationHandler();
+    try {
+        return setInterval(animationHandler, msec);
+    } catch(e) {
+        log('error in setupAnimationHandler()', e);
+        return true;
+    }
+}
+
+/**
+ * Handle a location watch event.
+ */
+var locationWatch = null;
+var geoposition = null;
+
+function locationHandler(pos) {
+    try {
+        geoposition = pos;
+        var uri = compquery();
+        return locationcomp.get(uri, function(doc, e) {
+            if (isNil(doc)) {
+                log('error on get(location, ' + uri + ')', e);
+                return false;
+            }
+
+            // Inject data into the page
+            updatepage(docdata(doc));
+        });
+    } catch(e) {
+        return locationErrorHandler(e);
+    }
+}
+
+function locationErrorHandler(e) {
+    log('location error', e);
+    if (!isNil(locationWatch)) {
+        try {
+            navigator.geolocation.clearWatch(locationWatch);
+        } catch(e) {}
+        locationWatch = null;
+    }
+    return true;
+}
+
+/**
+ * Setup a location watch handler.
+ */
+function setupLocationHandler() {
+    function installLocationHandler() {
+        if (!isNil(locationWatch))
+            return true;
+        try {
+            locationWatch = navigator.geolocation.watchPosition(locationHandler, locationErrorHandler);
+        } catch(e) {
+            log('error in installLocationHandler()', e);
+        }
+        return true;
+    }
+
+    installLocationHandler();
+    setInterval(installLocationHandler, 10000);
+    return true;
+}
+
+/**
+ * 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);
+}
+
+// Load the app page
+pagecomp.get(appname, function(doc, e) {
+    //log('page get');
+    if (isNil(doc)) {
+        log('error getting app page', e);
+        return false;
+    }
+
+    // Set the app HTML page into the content div
+    //log('page', doc);
+    var el = atompage(doc);
+    contentdiv.innerHTML = writeStrings(writeXML(el, false));
+
+    // Merge in the app data
+    getpagedata(appname);
+});
+
+/**
+ * Handle orientation change.
+ */
+document.body.onorientationchange = function(e) {
+    //log('onorientationchange');
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    return true;
+};
+
+/**
+ * Document load post processing.
+ */
+function onload() {
+    //log('onload');
+
+    // Show the page
+    document.body.style.visibility = 'visible';
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+    return true;
+}
+
+</script>
+
+<div id="footdiv" class="fsection">
+</div>
+
+</div>
+</body>
+</html>
+
diff --git a/sca-cpp/trunk/hosting/server/htdocs/cache-manifest.cmf b/sca-cpp/trunk/hosting/server/htdocs/cache-manifest.cmf
new file mode 100644
index 0000000000..cb76f773a3
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/cache-manifest.cmf
@@ -0,0 +1,18 @@
+CACHE MANIFEST
+
+# Version 5
+
+# App resources
+/
+/favicon.ico
+/public/iframe-min.html
+/public/img.png
+/public/notauth/
+/public/notfound/
+/public/notyet/
+/public/oops/
+/public/touchicon.png
+
+NETWORK:
+*
+
diff --git a/sca-cpp/trunk/hosting/server/htdocs/clone/index.html b/sca-cpp/trunk/hosting/server/htdocs/clone/index.html
new file mode 100644
index 0000000000..3642634ed6
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/clone/index.html
@@ -0,0 +1,146 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="h1"></span><span id="appNameHeader"></span></h2></td>
+<td style="vertical-align: middle; text-align: right;"><span id="status" style="font-weight: bold; color: #808080;"></span></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">
+<table style="width: 100%;">
+<tr><td><b>New App Name:</b></td></tr>
+<tr><td><input type="text" id="appName" size="15" autocapitalize="off" placeholder="Your app name"/></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>App Icon:</b></td></tr>
+<tr><td><img id="appimg" 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="graybutton" style="font-weight: bold;" value="Clone" title="Clone the app"/>
+<input id="cloneAppCancelButton" type="button" class="graybutton" value="Cancel"/>
+</td></tr>
+</table>
+</form>
+
+<script type="text/javascript">
+
+// Get the app name
+var appname = ui.fragmentParams(location)['app'];
+
+// Set page titles
+var tclone = isNil(config.clone)? 'Clone' : config.clone;
+document.title = ui.windowtitle(location.hostname) + ' - ' + tclone + ' - ' + appname;
+$('appNameHeader').innerHTML = '<a href=\"/' + appname + '/\" target=\"' + '_blank' + '\">' + appname + '</a>';
+$('th').innerHTML = tclone + ' this App';
+$('cloneAppOKButton').value = tclone;
+$('cloneAppOKButton').title = tclone + ' this app';
+
+// Set images
+$('appimg').src = ui.b64img(appcache.get('/public/app.b64'));
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var dashboards = sca.reference(editWidget, "dashboards");
+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;
+    showStatus('Loading');
+
+    return apps.get(name, function(doc) {
+
+        // Stop now if we didn't get the app
+        if (doc == null) {
+            showStatus('No data');
+            return false;
+        }
+        showStatus(defaultStatus());
+
+        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;
+    showStatus('Saving');
+
+    // Clone the app
+    var title = $('appTitle').value;
+    var app = mklist(mklist("'entry", mklist("'title", title != ''? title : name), mklist("'id", appname)));
+    var entry = atom.writeATOMEntry(valuesToElements(app));
+    dashboards.put(name, car(entry), function(e) {
+        if (e) {
+            showStatus('Local copy');
+            return false;
+        }
+        showStatus(defaultStatus());
+
+        // Open it in the page editor
+        ui.navigate('/#view=page&app=' + name, '_view');
+        return false;
+    });
+    return false;
+};
+
+/**
+ * Cancel cloning an app.
+ */
+$('cloneAppCancelButton').onclick = function() {
+    history.back();
+};
+
+// Get the current app
+getapp(appname);
+
+</script>
+
+</div>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/create/index.html b/sca-cpp/trunk/hosting/server/htdocs/create/index.html
new file mode 100644
index 0000000000..6097053cd6
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/create/index.html
@@ -0,0 +1,106 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="h1"></span></h2></td>
+<td style="vertical-align: middle; text-align: right;"><span id="status" style="font-weight: bold; color: #808080;"></span></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">
+<table style="width: 100%;">
+<tr><td><b>App Name:</b></td></tr>
+<tr><td><input type="text" id="appName" size="15" autocapitalize="off" placeholder="Your app name"/></td></tr>
+<tr><tr><td style="padding-top: 6px;"><b>App Icon:</b></td></tr>
+<tr><td><img id="appimg" 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="graybutton" style="font-weight: bold;" value="Create" title="Create the app"/>
+<input id="createAppCancelButton" type="button" class="graybutton" value="Cancel"/>
+</td></tr>
+</table>
+</form>
+
+<script type="text/javascript">
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname) + ' - Create App';
+$('h1').innerHTML = ui.hometitle(location.hostname);
+
+// Set images
+$('appimg').src = ui.b64img(appcache.get('/public/app.b64'));
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var dashboards = sca.reference(editWidget, "dashboards");
+var apps = sca.reference(editWidget, "apps");
+
+/**
+ * Create an app.
+ */
+$('createAppForm').onsubmit = function() {
+    var name = $('appName').value;
+    if (name == '')
+        return false;
+    showStatus('Saving');
+
+    // Clone the '.new' app template
+    var title = $('appTitle').value;
+    var app = mklist(mklist("'entry", mklist("'title", title != ''? title : name), mklist("'id", 'new')));
+    var entry = atom.writeATOMEntry(valuesToElements(app));
+    dashboards.put(name, car(entry), function(e) {
+        if (e) {
+            showStatus('Local copy');
+            return false;
+        }
+        showStatus('Saved');
+
+        // Open it in the page editor
+        ui.navigate('/#view=page&app=' + name, '_view');
+        return false;
+    });
+    return false;
+};
+
+/**
+ * Cancel creating an app.
+ */
+$('createAppCancelButton').onclick = function() {
+    history.back();
+};
+
+showStatus(defaultStatus());
+
+</script>
+
+</div>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/favicon.ico b/sca-cpp/trunk/hosting/server/htdocs/favicon.ico
new file mode 100644
index 0000000000..a7b502b9e1
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/favicon.ico
diff --git a/sca-cpp/trunk/hosting/server/htdocs/graph/index.html b/sca-cpp/trunk/hosting/server/htdocs/graph/index.html
new file mode 100644
index 0000000000..6b750026b4
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/graph/index.html
@@ -0,0 +1,2178 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv" style="overflow: visible;">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="appNameHeader"></span></h2></td>
+<td style="vertical-align: middle; text-align: right; padding-right: 8px;"><span id="status" style="font-weight: bold; color: #808080;"></span></td>
+</tr>
+</table>
+
+<table id="compValueBackground" style="width: 2500px; position: absolute; top: 59px; left: 0px; z-index: -1;">
+<tr>
+<th class="thr thl"><span style="display: inline-block; padding-top: 0px; padding-bottom: 0px; height: 24px;"></span></th>
+</tr>
+</table>
+
+<table id="compValueTable" style="width: 100%;">
+<tr>
+<td class="thl thr" style="text-align: right; padding-right: 2px; vertical-align: top;">
+<span id="deleteCompButton" title="Delete a component" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">-</span>
+
+<span id="copyCompButton" title="Copy a component" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">c</span>
+
+<span id="addCompButton" title="Add a component" class="graybutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">+</span>
+
+<span id="playCompButton" title="View component value" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">&gt;</span>
+</td>
+
+<td class="thl thr" style="padding-left: 2px; padding-right: 2px; vertical-align: top; width: 100%">
+<input id="compValue" type="text" value="" title="Component value" autocapitalize="off" placeholder="Value" style="position: relative; visibility: hidden; width: 100%;"/>
+</td>
+</tr>
+</table>
+
+<div id="contentdiv" style="margin-top: 4px; width: 2500px;">
+<div id="playdiv" style="position: relative; top: 0x; left: 0px; right: 0px; width: 2500px; height: 5000px; visibility: hidden">
+</div>
+</div>
+
+<script type="text/javascript">
+
+// Get the app name
+var appname = ui.fragmentParams(location)['app'];
+var ispalette = false;
+if (isNil(appname)) {
+    appname = ui.fragmentParams(location)['palette'];
+
+    // Edit a palette instead of a regular app
+    if (!isNil(appname))
+        ispalette = true;
+}
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname) + ' - ' + (isNil(config.compose)? 'Composition' : config.compose) + ' - ' + appname;
+$('appNameHeader').innerHTML = '<a href=\"/' + appname + '/\" target=\"' + '_blank' + '\">' + appname + '</a>';
+
+/**
+ * Component value field, add, delete and play buttons.
+ */
+var cvalue = $('compValue');
+var cadd = $('addCompButton');
+var cdelete = $('deleteCompButton');
+var ccopy = $('copyCompButton');
+var cplay = $('playCompButton');
+
+// Position background divs
+var cvbackground = $('compValueBackground');
+var cvtable = $('compValueTable');
+cvbackground.style.top = ui.pixpos(cvtable.offsetTop);
+
+/**
+ * Adjust component value field size.
+ */
+function resizeFields() {
+    cvalue.style.width = '0px';
+    cvalue.style.width = ui.pixpos(cvalue.parentNode.clientWidth - 18);
+    return true;
+}
+
+resizeFields();
+window.onresize = resizeFields;
+
+// Init componnent references
+var editWidget = sca.component("EditWidget");
+var palettes = sca.reference(editWidget, "palettes");
+var composites = sca.reference(editWidget, ispalette? "palettes" : "composites");
+
+// Setup remote log
+//rconsole = sca.defun(sca.reference(editWidget, "log"), "log");
+
+/**
+ * SVG composite rendering functions.
+ */
+var graph = {};
+
+/**
+ * Basic colors
+ */
+graph.colors = {};
+graph.colors.black = '#000000';
+graph.colors.blue = '#0000ff';
+graph.colors.cyan = '#00ffff';
+graph.colors.gray = '#808080'
+graph.colors.lightgray = '#dcdcdc'
+graph.colors.green = '#00ff00';
+graph.colors.magenta = '#ff00ff';
+graph.colors.orange = '#ffa500';
+graph.colors.pink = '#ffc0cb';
+graph.colors.purple = '#800080';
+graph.colors.red = '#ff0000';
+graph.colors.white = '#ffffff';
+graph.colors.yellow = '#ffff00';
+graph.colors.link = '#598edd';
+
+graph.colors.orange1 = '#ffd666';
+graph.colors.green1 = '#bbe082';
+graph.colors.blue1 = '#66dbdf';
+graph.colors.yellow1 = '#fdf57a';
+graph.colors.cyan1 = '#e6eafb';
+graph.colors.lightgray1 = '#eaeaea'
+graph.colors.pink1 = '#ffd9e0';
+graph.colors.red1 = '#d03f41';
+graph.colors.white1 = '#ffffff';
+
+graph.colors.orange2 = '#ffbb00';
+graph.colors.green2 = '#96d333';
+//graph.colors.blue2 = '#0d7cc1';
+graph.colors.blue2 = '#00c3c9';
+graph.colors.red2 = '#d03f41';
+graph.colors.yellow2 = '#fcee21';
+graph.colors.magenta2 = '#c0688a';
+graph.colors.cyan2 = '#d5dcf9';
+graph.colors.lightgray2 = '#dcdcdc'
+graph.colors.pink2 = '#ffc0cb';
+graph.colors.white2 = '#ffffff';
+
+graph.colors.orange3 = '#ffc700';
+graph.colors.green3 = '#92e120';
+graph.colors.blue3 = '#008fd1';
+graph.colors.yellow3 = '#fdf400';
+graph.colors.cyan3 = '#b4d3fd';
+graph.colors.lightgray3 = '#e3e3e3'
+graph.colors.pink3 = '#da749b';
+graph.colors.red3 = '#ed3f48';
+graph.colors.white3 = '#ffffff';
+
+/**
+ * Default positions and sizes.
+ */
+graph.palcx = 2500;
+graph.proxcx = 20;
+graph.proxcy = 20;
+graph.buttoncx = 55;
+graph.buttoncy = 23;
+graph.curvsz = 4;
+graph.tabsz = 2;
+graph.titlex = 4;
+graph.titley = 11;
+graph.titlew = ui.isMobile()? -2 : 0;
+
+/**
+ * SVG rendering functions.
+ */
+
+graph.svgns='http://www.w3.org/2000/svg';
+
+/**
+ * Make an SVG graph.
+ */
+graph.mkgraph = function(cdiv, pos, cvalue, cadd, ccopy, 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() + cdiv.offsetLeft);
+    div.style.top = ui.pixpos(pos.ypos() + cdiv.offsetTop);
+    cdiv.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.dragged = false;
+    graph.moverenderer = null;
+    graph.selected = null;
+    cvalue.disabled = true;
+    cvalue.style.visibility = 'hidden';
+    ccopy.disabled = true;
+    cdelete.disabled = true;
+
+    /**
+     * Find the first draggable element in a hierarchy of elements.
+     */
+    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);
+    }
+
+    /**
+     * Handle a mouse down or touch start event.
+     */
+    function onmousedown(e) {
+
+        // Remember mouse or touch position
+        var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
+        graph.downX = pos.screenX;
+        graph.downY = pos.screenY;
+        graph.moveX = pos.screenX;
+        graph.moveY = pos.screenY;
+
+        // Engage the click component selection right away
+        // on mouse controlled devices
+        if (typeof e.touches == 'undefined')
+            onclick(e);
+
+        // Find and remember draggable component
+        var dragging = draggable(e.target);
+        if (dragging == null || dragging != graph.selected)
+            return true;
+        graph.dragging = dragging;
+        graph.dragged = false;
+
+        // Remember current drag position
+        graph.dragX = pos.screenX;
+        graph.dragY = pos.screenY;
+
+        e.preventDefault();
+        return true;
+    };
+
+    if (!ui.isMobile()) {
+        div.onmousedown = function(e) {
+            //log('onmousedown');
+            var suspend = svg.suspendRedraw(10);
+            var r = onmousedown(e);
+            svg.unsuspendRedraw(suspend);
+            return r;
+        }
+    } else {
+        div.ontouchstart = function(e) {
+            //log('ontouchstart');
+
+            // Clear current move renderer if it's running
+            if (!isNil(graph.moverenderer)) {
+                clearInterval(graph.moverenderer);
+                graph.moverenderer = null;
+            }
+
+            var suspend = svg.suspendRedraw(10);
+            var r = onmousedown(e);
+            svg.unsuspendRedraw(suspend);
+            return r;
+        }
+    }
+
+    /**
+     * Handle a mouse up or touch end event.
+     */
+    function onmouseup(e) {
+
+        // Engage the click component selection now on touch devices
+        if (ui.isMobile()) {
+            if (!graph.dragged && graph.moveX == graph.downX && graph.moveY == graph.downY)
+                return onclick(e);
+        }
+
+        // Stop here if the component was not dragged
+        if (graph.dragging == null)
+            return true;
+        if (!graph.dragged) {
+            graph.dragging = null;
+            return true;
+        }
+
+        if (graph.dragging.parentNode == svg && graph.dragging.id.substring(0, 8) != 'palette:') {
+
+            // Add new dragged component to the composite
+            if (isNil(graph.dragging.compos)) {
+                var compos = scdl.composite(svg.compos);
+                setElement(compos, graph.sortcompos(graph.addcomps(mklist(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.sortcompos(graph.clonerefs(graph.wire(graph.dragging, compos, svg))));
+            }
+
+            // Snap top level component position to grid
+            if (graph.dragging.parentNode == svg) {
+                var gpos = graph.relpos(graph.dragging);
+                setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.mkpath().pos(graph.gridsnap(gpos.xpos()), graph.gridsnap(gpos.ypos()))));
+            }
+        }
+
+        // Forget current dragged component
+        graph.dragging = null;
+        graph.dragged = false;
+
+        // Refresh the composite
+        //log('onmouseup refresh');
+        var nodes = graph.refresh(svg);
+
+        // Reselected the previously selected component
+        if (!isNil(graph.selected)) {
+            graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+            graph.compselect(graph.selected, true, cvalue, ccopy, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
+        }
+
+        // Trigger composite change event
+        svg.oncomposchange(false);
+        return true;
+    };
+
+    if (!ui.isMobile()) {
+        div.onmouseup = function(e) {
+            //log('onmouseup');
+            var suspend = svg.suspendRedraw(10);
+            var r = onmouseup(e);
+            svg.unsuspendRedraw(suspend);
+            return r;
+        }
+    } else {
+        div.ontouchend = function(e) {
+            //log('ontouchend');
+
+            // Clear current move renderer if it's running
+            if (!isNil(graph.moverenderer)) {
+                clearInterval(graph.moverenderer);
+                graph.moverenderer = null;
+            }
+
+            var suspend = svg.suspendRedraw(10);
+            var r = onmouseup(e);
+            svg.unsuspendRedraw(suspend);
+            return r;
+        }
+    }
+
+    /**
+     * Handle a mouse or touch click event.
+     */
+    function onclick(e) {
+        //log('onclick logic');
+
+        // Find selected component
+        var selected = draggable(e.target);
+        if (selected == null) {
+            if (graph.selected != null) {
+
+                // Reset current selection
+                graph.compselect(graph.selected, false, cvalue, ccopy, cdelete);
+                graph.selected = null;
+
+                // Trigger component select event
+                svg.oncompselect(null);
+            }
+
+            // Dismiss the palette
+            if (e.target == div || e.target == svg && ui.numpos(div.style.left) != (graph.palcx * -1))
+            	div.style.left = ui.pixpos(graph.palcx * -1);
+
+            return true;
+        }
+
+        // Ignore multiple click events
+        if (selected == graph.selected)
+            return true;
+        if (selected.id.substring(0, 8) == 'palette:' && ui.numpos(div.style.left) != 0)
+            return true;
+
+        // Deselect previously selected component
+        graph.compselect(graph.selected, false, cvalue, ccopy, cdelete);
+
+        // Clone component from the palette
+        if (selected.id.substring(0, 8) == 'palette:') {
+            var compos = scdl.composite(svg.compos);
+            var comp = graph.clonepalette(selected, compos, svg);
+            setElement(compos, graph.sortcompos(graph.addcomps(mklist(comp), compos)));
+
+            // Move into the editing area and hide the palette
+            div.style.left = ui.pixpos(graph.palcx * -1);
+
+            // Refresh the composite
+            //log('onclick refresh');
+            var nodes = graph.refresh(svg);
+
+            // Reselect the previously selected component
+            graph.selected = graph.findcompnode(scdl.name(comp), nodes);
+            graph.compselect(graph.selected, true, cvalue, ccopy, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
+
+            // Trigger composite change event
+            svg.oncomposchange(true);
+
+        } else {
+            graph.selected = selected;
+
+            // Select the component
+            graph.compselect(graph.selected, true, cvalue, ccopy, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
+        }
+
+        //log('comp selected');
+
+        e.preventDefault();
+        return true;
+    }
+
+    if (!ui.isMobile()) {
+        div.onclick = function(e) {
+            //log('div onclick');
+            var suspend = svg.suspendRedraw(10);
+            var r = onclick(e);
+            svg.unsuspendRedraw(suspend);
+            return r;
+        }
+        svg.onclick = function(e) {
+            //log('svg onclick');
+            var suspend = svg.suspendRedraw(10);
+            var r = onclick(e);
+            svg.unsuspendRedraw(suspend);
+            return r;
+        }
+    }
+
+    /**
+     * Handle a mouse or touch move event.
+     */
+    function onmousemove(e) {
+        if (graph.dragging == null)
+            return true;
+
+        // Ignore duplicate  mouse move events
+        if (graph.moveX == graph.dragX && graph.moveY == graph.dragY)
+            return true;
+
+        // Remember that the component was dragged
+        graph.dragged = true;
+
+        // Cut wire to component
+        if (graph.dragging.parentNode != svg) {
+            var compos = scdl.composite(svg.compos);
+            setElement(compos, graph.sortcompos(graph.cutwire(graph.dragging, compos, svg)));
+
+            // Bring component to the top
+            graph.bringtotop(graph.dragging, svg);
+        }
+
+        // Calculate new position of dragged element
+        var gpos = graph.relpos(graph.dragging);
+        var newX = gpos.xpos() + (graph.moveX - graph.dragX);
+        var newY = gpos.ypos() + (graph.moveY - graph.dragY);
+        if (newX >= graph.palcx)
+            graph.dragX = graph.moveX
+        else
+            newX = graph.palcx;
+        if (newY >= 0)
+            graph.dragY = graph.moveY;
+        else
+            newY = 0;
+
+        // Detach child elements to speedup rendering
+        graph.compoutline(graph.dragging, true);
+
+        // Move the dragged element
+        graph.move(graph.dragging, graph.mkpath().pos(newX, newY));
+
+        return false;
+    };
+
+    if (!ui.isMobile()) {
+        window.onmousemove = function(e) {
+            //log('onmousemove');
+
+            // Remember mouse position
+            graph.moveX = e.screenX;
+            graph.moveY = e.screenY;
+
+            var suspend = svg.suspendRedraw(10);
+            var r = onmousemove(e);
+            svg.unsuspendRedraw(suspend);
+            return r;
+        }
+    } else {
+        div.ontouchmove = function(e) {
+            //log('ontouchmove');
+            
+            // Remember touch position
+            var pos = e.touches[0];
+            if (graph.moveX == pos.screenX && graph.moveY == pos.screenY)
+                return true;
+            graph.moveX = pos.screenX;
+            graph.moveY = pos.screenY;
+            if (graph.moveX == graph.dragX && graph.moveY == graph.dragY)
+                return true;
+
+            // Start async move renderer
+            if (graph.moverenderer == null) {
+                graph.moverenderer = setInterval(function() {
+                    var suspend = svg.suspendRedraw(10);
+                    onmousemove(e);
+                    svg.unsuspendRedraw(suspend);
+                }, 10);
+            }
+            return true;
+        }
+    }
+
+    /**
+     * Handle field on change events.
+     */
+    function onvaluechange() {
+        if (graph.selected == null)
+            return false;
+        if (g.parentNode.style.visibility == 'hidden')
+            return false;
+
+        // Change component name and refactor references to it
+        function changename() {
+            var compos = scdl.composite(svg.compos);
+            cvalue.value = graph.ucid(cvalue.value, compos, false);
+            graph.selected.id = cvalue.value;
+            setElement(compos, graph.sortcompos(graph.renamecomp(graph.selected.comp, compos, cvalue.value)));
+
+            // Refresh the composite
+            //log('onchangename refresh');
+            var nodes = graph.refresh(svg);
+
+            // Reselected the previously selected component
+            graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+            graph.compselect(graph.selected, true, cvalue, ccopy, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
+
+            // Trigger composite change event
+            svg.oncomposchange(true);
+            return false;
+        }
+
+        // Change the component property value
+        function changeprop() {
+            graph.setproperty(graph.selected.comp, cvalue.value);
+            var hasprop = graph.hasproperty(graph.selected.comp);
+            cvalue.disabled = hasprop? false : true;
+            cvalue.style.visibility = hasprop? 'visible' : 'hidden';
+            cvalue.value = graph.property(graph.selected.comp);
+
+            // Refresh the composite
+            //log('onchangeprop refresh');
+            var nodes = graph.refresh(svg);
+
+            // Reselected the previously selected component
+            graph.selected = graph.findcompnode(scdl.name(graph.selected.comp), nodes);
+            graph.compselect(graph.selected, true, cvalue, ccopy, cdelete);
+
+            // Trigger component select event
+            svg.oncompselect(graph.selected);
+
+            // Trigger composite change event
+            svg.oncomposchange(true);
+            return false;
+        }
+
+        return graph.hasproperty(graph.selected.comp)? changeprop() : changename();
+    };
+
+    cvalue.onchange = function() {
+        var suspend = svg.suspendRedraw(10);
+        var r = onvaluechange();
+        svg.unsuspendRedraw(suspend);
+        return r;
+    }
+    
+    // Handle delete event
+    function ondeleteclick() {
+        if (graph.selected == null)
+            return false;
+        if (graph.selected.id.substring(0, 8) != 'palette:') {
+
+            // Remove selected component
+            var compos = scdl.composite(svg.compos);
+            if (isNil(graph.selected.compos))
+                setElement(compos, graph.sortcompos(graph.cutwire(graph.selected, compos, svg)));
+            setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.selected.comp, compos)))));
+
+            // Reset current selection
+            graph.compselect(graph.selected, false, cvalue, ccopy, cdelete);
+            graph.selected = null;
+
+            // Refresh the composite
+            //log('ondelete refresh');
+            graph.refresh(svg);
+
+            // Trigger component select event
+            svg.oncompselect(null);
+
+            // Trigger composite change event
+            svg.oncomposchange(true);
+        }
+        return false;
+    };
+
+    cdelete.onclick = function() {
+        var suspend = svg.suspendRedraw(10);
+        var r = ondeleteclick();
+        svg.unsuspendRedraw(suspend);
+        return r;
+    };
+
+    // Handle copy event
+    function oncopyclick() {
+        if (graph.selected == null)
+            return false;
+        if (graph.selected.id.substring(0, 8) == 'palette:')
+            return false;
+
+        // Clone the selected component
+        var compos = scdl.composite(svg.compos);
+        var comps = graph.clonecomp(graph.selected, compos, svg);
+        setElement(compos, graph.sortcompos(graph.addcomps(comps, compos)));
+
+        // Refresh the composite
+        //log('onclick refresh');
+        var nodes = graph.refresh(svg);
+
+        // Select the component clone
+        graph.selected = graph.findcompnode(scdl.name(car(comps)), nodes);
+        graph.compselect(graph.selected, true, cvalue, ccopy, cdelete);
+
+        // Trigger component select event
+        svg.oncompselect(graph.selected);
+
+        // Trigger composite change event
+        svg.oncomposchange(true);
+
+        return false;
+    };
+
+    ccopy.onclick = function() {
+        var suspend = svg.suspendRedraw(10);
+        var r = oncopyclick();
+        svg.unsuspendRedraw(suspend);
+        return r;
+    };
+
+    // Handle add event
+    cadd.onclick = function() {
+
+        // Show the palette
+        div.style.left = ui.pixpos(0);
+        return false;
+    };
+
+    // Create a hidden SVG element to help compute the width
+    // of component and reference titles
+    graph.svgtitles = document.createElementNS(graph.svgns, 'svg');
+    graph.svgtitles.style.visibility = 'hidden';
+    graph.svgtitles.style.height = ui.pixpos(0);
+    graph.svgtitles.style.width = ui.pixpos(0);
+    div.appendChild(graph.svgtitles);
+
+    return svg;
+};
+
+/**
+ * Point class.
+ */
+graph.Point = function(x, y) {
+    this.x = x;
+    this.y = y;
+};
+graph.Point.prototype.xpos = function() {
+    return this.x;
+};
+graph.Point.prototype.ypos = function() {
+    return this.y;
+};
+
+graph.mkpoint = function(x, y) {
+    return new graph.Point(x, y);
+};
+
+/**
+ * Path class.
+ */
+graph.Path = function() {
+    this.path = '';
+    this.x = 0;
+    this.y = 0;
+}
+graph.Path.prototype.pos = function(x, y) {
+    this.x = x;
+    this.y = y;
+    return this;
+};
+graph.Path.prototype.xpos = function() {
+    return this.x;
+};
+graph.Path.prototype.ypos = function() {
+    return this.y;
+};
+graph.Path.prototype.rmove = function(x, y) {
+    return this.move(this.x + x, this.y + y);
+};
+graph.Path.prototype.rline = function(x, y) {
+    return this.line(this.x + x, this.y + y);
+};
+graph.Path.prototype.rcurve = function(x1, y1, x, y) {
+    return this.curve(this.x + x1, this.y + y1, this.x + x1 + x, this.y + y1 + y);
+};
+graph.Path.prototype.str = function() {
+    return this.path;
+};
+graph.Path.prototype.clone = function() {
+    return graph.mkpath().pos(this.xpos(), this.ypos());
+};
+graph.Path.prototype.move = function(x, y) {
+    this.path += 'M' + x + ',' + y + ' '; 
+    return this.pos(x, y);
+};
+graph.Path.prototype.line = function(x, y) {
+    this.path += 'L' + x + ',' + y + ' ';
+    return this.pos(x, y);
+};
+graph.Path.prototype.curve = function(x1, y1, x, y) {
+    this.path += 'Q' + x1 + ',' + y1 + ' ' + x + ',' + y + ' ';
+    return this.pos(x, y);
+};
+graph.Path.prototype.end = function() {
+    this.path += 'Z';
+    return this;
+};
+
+graph.mkpath = function() {
+    return new graph.Path();
+};
+
+/**
+ * Return an element representing a title.
+ */
+graph.mktitle = function(t, x, y) {
+    var title = document.createElementNS(graph.svgns, 'text');
+    title.setAttribute('x', x);
+    title.setAttribute('y', y);
+    title.setAttribute('class', 'svgtitle');
+    title.setAttribute('pointer-events', 'none');
+    title.appendChild(document.createTextNode(t));
+    graph.svgtitles.appendChild(title);
+    return title;
+};
+
+/**
+ * Return an element representing the title of a component.
+ */
+graph.comptitle = function(comp) {
+    return memo(comp, 'title', function() {
+    	var ct = graph.title(comp);
+    	var pt = graph.propertytitle(comp);
+    	if (ct == '' && pt == '')
+    	    return null;
+        return graph.mktitle((ct != '' && pt != '')? ct + ' ' + pt : ct + pt, graph.titlex, graph.titley);
+    });
+};
+
+/**
+ * Return the width of the title of a component.
+ */
+graph.comptitlewidth = function(comp) {
+    var title = graph.comptitle(comp);
+    if (isNil(title))
+        return 0;
+    return title.getBBox().width + graph.titlew;
+};
+
+/**
+ * Draw a component shape selection.
+ */
+graph.compselect = function(g, s, cvalue, ccopy, cdelete) {
+    if (isNil(g) || !s) {
+        cvalue.value = '';
+        cvalue.disabled = true;
+        cvalue.style.visibility = 'hidden';
+        ccopy.disabled = true;
+        cdelete.disabled = true;
+        if (isNil(g))
+            return true;
+        g.shape.setAttribute('stroke', graph.colors.gray);
+        g.shape.setAttribute('stroke-width', '1');
+        return true;
+    }
+
+    cvalue.value = graph.hasproperty(g.comp)? graph.property(g.comp) : g.id;
+    cvalue.disabled = false;
+    cvalue.style.visibility = 'visible';
+    ccopy.disabled = false;
+    cdelete.disabled = false;
+
+    g.shape.setAttribute('stroke', graph.colors.link);
+    g.shape.setAttribute('stroke-width', '2');
+    g.parentNode.appendChild(g);
+    return true;
+};
+
+/**
+ * Draw a palette shape selection.
+ */
+graph.paletteselect = function(g, s) {
+    if (isNil(g))
+        return true;
+    if (!s) {
+        g.shape.setAttribute('stroke', graph.colors.gray);
+        g.shape.setAttribute('stroke-width', '1');
+        return true;
+    }
+
+    g.shape.setAttribute('stroke', graph.colors.link);
+    g.shape.setAttribute('stroke-width', '2');
+    g.parentNode.appendChild(g);
+    return true;
+};
+
+/**
+ * Draw a component outline for faster rendering.
+ */
+graph.compoutline = function(g, s) {
+    if (s == (isNil(g.outlined)? false : g.outlined))
+        return true;
+    g.outlined = s;
+
+    if (s) {
+        g.shape.setAttribute('fill', 'none');
+        if (!isNil(g.title))
+            g.removeChild(g.title);
+    } else {
+        g.shape.setAttribute('fill', graph.color(g.comp));
+        if (!isNil(g.title))
+            g.appendChild(g.title);
+    }
+
+    map(function(r) {
+            var n = caddr(r);
+            if (isNil(n))
+                return r;
+            graph.compoutline(n, s);
+            return r;
+        }, g.refpos);
+    return true;
+};
+
+/**
+ * Return a node representing a component.
+ */
+graph.compnode = function(comp, cassoc, pos, parentg) {
+
+    // Make the component title element
+    var title = graph.comptitle(comp);
+
+    // Compute the path of the component shape
+    var path = graph.comppath(comp, cassoc);
+
+    // Create the main component shape
+    var shape = document.createElementNS(graph.svgns, 'path');
+    shape.setAttribute('d', path.str());
+    shape.setAttribute('fill', graph.color(comp));
+    //shape.setAttribute('fill-opacity', '0.6');
+    shape.setAttribute('stroke', graph.colors.gray);
+    shape.setAttribute('stroke-width', '1');
+    shape.setAttribute('pointer-events', 'visible');
+
+    // Create an svg group and add the shape and title to it
+    var g = document.createElementNS(graph.svgns, 'g');
+    g.comp = comp;
+    g.id = scdl.name(comp);
+    g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
+    g.pos = pos.clone();
+    g.appendChild(shape);
+    g.shape = shape;
+    if (!isNil(title)) {
+        g.appendChild(title);
+        g.title = title;
+    }
+
+    // Store the the positions of the services and references
+    g.refpos = reverse(path.refpos);
+    g.svcpos = reverse(path.svcpos);
+
+    // Handle onclick events
+    g.onclick = parentg.onclick;
+
+    return g;
+};
+
+/**
+ * Find the node representing a component.
+ */
+graph.findcompnode = function(name, nodes) {
+    if (isNil(nodes))
+        return null;
+    if (isNil(car(nodes).comp))
+        return graph.findcompnode(name, cdr(nodes));
+    if (name == scdl.name(car(nodes).comp))
+        return car(nodes);
+    var node = graph.findcompnode(name, nodeList(car(nodes).childNodes));
+    if (!isNil(node))
+        return node;
+    return graph.findcompnode(name, cdr(nodes));
+}
+
+/**
+ * Return a graphical group.
+ */
+graph.mkgroup = function(pos) {
+    var g = document.createElementNS(graph.svgns, 'g');
+    g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
+    g.pos = pos.clone();
+    return g;
+};
+
+/**
+ * Return a node representing a button.
+ */
+graph.mkbutton = function(t, pos) {
+
+    // Make the button title
+    var title = graph.mktitle(t, graph.titlex, graph.titley);
+
+    // 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.lightgray1);
+    //shape.setAttribute('fill-opacity', '0.6');
+    shape.setAttribute('stroke', graph.colors.gray);
+    shape.setAttribute('stroke-width', '1');
+    shape.setAttribute('pointer-events', 'visible');
+
+    // Create a group and add the button shape to it
+    var g = document.createElementNS(graph.svgns, 'g');
+    g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
+    g.pos = pos.clone();
+    g.appendChild(shape);
+    g.appendChild(title);
+
+    // Store the button shape in the group
+    g.shape = shape;
+
+    return g;
+};
+
+/**
+ * Return the relative position of a node.
+ */
+graph.relpos = function(e) {
+    var pmatrix = e.parentNode != null? e.parentNode.getCTM() : null;
+    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().pos(curX, curY);
+};
+
+/**
+ * Move a node.
+ */
+graph.move = function(e, pos) {
+    e.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')');
+    e.pos = pos.clone();
+};
+
+/**
+ * Return the absolute position of a component node.
+ */
+graph.abspos = function(e, g) {
+    if (e == g)
+        return graph.mkpath();
+    var gpos = graph.relpos(e);
+    var pgpos = graph.abspos(e.parentNode, g);
+    return graph.mkpath().pos(gpos.xpos() + pgpos.xpos(), gpos.ypos() + pgpos.ypos());
+};
+
+/**
+ * Bring a component node to the top.
+ */
+graph.bringtotop = function(n, g) {
+    if (n == g)
+        return null;
+    graph.move(n, graph.abspos(n, g));
+    g.appendChild(n);
+}
+
+/**
+ * Return the title of a SCDL element.
+ */
+graph.title = function(e) {
+    var t = scdl.title(e);
+    if (t != null) {
+        if (t == 'gt')
+            return '>'
+        if (t == 'lt')
+            return '<';
+        if (t.indexOf('{propval}') != -1)
+            return '';
+        if (t.indexOf('{compname}') == -1)
+            return t;
+        return t.replace('{compname}', scdl.name(e));
+    }
+    return scdl.name(e);
+};
+
+/**
+ * Return the property value of a SCDL component.
+ */
+graph.property = function(e) {
+    var p = scdl.properties(e);
+    if (isNil(p))
+        return '';
+    if (scdl.visible(car(p)) == 'false')
+        return '';
+    var pv = scdl.propertyValue(car(p));
+    return pv;
+};
+
+/**
+ * Return the title of a property of a SCDL component.
+ */
+graph.propertytitle = function(e) {
+    var pv = graph.property(e);
+    var t = scdl.title(e);
+    if (t.indexOf('{propval}') == -1)
+        return pv;
+    return t[0] == ' '? t.substr(1).replace('{propval}', pv) : t.replace('{propval}', pv);
+};
+
+/**
+ * Return true if a SCDL component has a property.
+ */
+graph.hasproperty = function(e) {
+    var p = scdl.properties(e);
+    if (isNil(p))
+        return false;
+    if (scdl.visible(car(p)) == 'false')
+        return false;
+    return true;
+};
+
+/**
+ * Change the property value of a SCDL component.
+ */
+graph.setproperty = function(e, value) {
+    var p = scdl.properties(e);
+    if (isNil(p))
+        return '';
+    if (scdl.visible(car(p)) == 'false')
+        return '';
+    var name = scdl.name(car(p));
+    setElement(car(p), mklist(element, "'property", mklist(attribute, "'name", name != null? name : "property"), value));
+    return value;
+};
+
+/**
+ * Return the color of a SCDL component.
+ */
+graph.color = function(comp) {
+    return memo(comp, 'color', function() {
+        var c = scdl.color(comp);
+        return c == null? graph.colors.blue1 : graph.colors[c];
+    });
+};
+
+/**
+ * Return the services on the left side of a component.
+ */
+graph.lsvcs = function(comp) {
+    return memo(comp, 'lsvcs', function() {
+        var svcs = scdl.services(comp);
+        if (isNil(svcs))
+            return mklist(mklist("'element","'service","'attribute","'name",scdl.name(comp)));
+        var l = filter(function(s) {
+                var a = scdl.align(s);
+                var v = scdl.visible(s);
+                return (a == null || a == 'left') && v != 'false';
+            }, svcs);
+        if (isNil(l))
+            return mklist();
+        return mklist(car(l));
+    });
+};
+
+/**
+ * Return the references on the right side of a component.
+ */
+graph.rrefs = function(comp) {
+    return memo(comp, 'rrefs', function() {
+        return filter(function(r) {
+            var a = scdl.align(r);
+            var v = scdl.visible(r);
+            return (a == null || a == 'right') && v != 'false';
+        }, scdl.references(comp));
+    });
+};
+
+/**
+ * Return the height of a reference on the right side of a component.
+ */
+graph.rrefheight = function(ref, cassoc) {
+    return memo(ref, 'rheight', function() {
+        var target = assoc(scdl.target(ref), cassoc);
+        if (isNil(target))
+            return graph.tabsz * 8;
+        return graph.compclosureheight(cadr(target), cassoc);
+    });
+};
+
+/**
+ * Return the total height of the references on the right side of a component.
+ */
+graph.rrefsheight = function(refs, cassoc) {
+    if (isNil(refs))
+        return 0;
+    return graph.rrefheight(car(refs), cassoc) + graph.rrefsheight(cdr(refs), cassoc);
+};
+
+/**
+ * Return the height of a component node.
+ */
+graph.compheight = function(comp, cassoc) {
+    return memo(comp, 'height', function() {
+        var lsvcs = graph.lsvcs(comp);
+        var lsvcsh = Math.max(1, length(lsvcs)) * (graph.tabsz * 8) + (graph.tabsz * 4);
+        var rrefs = graph.rrefs(comp);
+        var rrefsh = graph.rrefsheight(rrefs, cassoc) + (graph.tabsz * 2);
+        return Math.max(lsvcsh, rrefsh);
+    });
+};
+
+/**
+ * Return the height of a component and the components wired to its bottom side.
+ */
+graph.compclosureheight = function(comp, cassoc) {
+    return memo(comp, 'closureheight', function() {
+        return graph.compheight(comp, cassoc);
+    });
+};
+
+/**
+ * Return the max width of the references on the right side of a component.
+ */
+graph.rrefswidth = function(refs, cassoc) {
+    if (isNil(refs))
+        return 0;
+    return Math.max(graph.rrefwidth(car(refs), cassoc), graph.rrefswidth(cdr(refs), cassoc));
+};
+
+/**
+ * Return the width of a component.
+ */
+graph.compwidth = function(comp, cassoc) {
+    return memo(comp, 'width', function() {
+        var ctw = graph.comptitlewidth(comp);
+        var rrefsw = (isNil(graph.rrefs(comp))? 0 : (graph.tabsz * 4));
+        var twidth = (graph.titlex * 2) + ctw + rrefsw;
+        var width = Math.max(twidth, (graph.tabsz * 8) + (graph.tabsz * 4));
+        return width;
+    });
+};
+
+/**
+ * Return a path representing a reference positioned to the right of a component.
+ */
+graph.rrefpath = function(ref, cassoc, path, maxheight) {
+    var height = graph.rrefheight(ref, cassoc);
+
+    // Record reference position in the path
+    var xpos = path.xpos();
+    var ypos = path.ypos();
+    path.refpos = cons(mklist(ref, graph.mkpath().pos(xpos, ypos + (graph.tabsz * 5))), path.refpos);
+
+    // Compute the reference path
+    return path.rline(0,graph.tabsz * 2).rcurve(0,graph.tabsz,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,-graph.tabsz/2.0).rcurve(0,-graph.tabsz/2.0,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,graph.tabsz/2.0).rline(0,graph.tabsz * 3).rcurve(0,graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,-graph.tabsz/2.0).rcurve(0,-graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,graph.tabsz).line(path.xpos(), Math.min(ypos + height, maxheight));
+};
+
+/**
+ * Return a path representing a service positioned to the left of a component.
+ */
+graph.lsvcpath = function(svc, cassoc, path, minheight) {
+    var height = graph.tabsz * 8;
+
+    // Record service position in the path
+    var xpos = path.xpos();
+    var ypos = path.ypos();
+    path.svcpos = cons(mklist(svc, graph.mkpath().pos(xpos, ypos - (graph.tabsz * 6))), path.svcpos);
+
+    // Compute the service path
+    return path.rline(0, -(graph.tabsz * 2)).rcurve(0,-graph.tabsz,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,graph.tabsz/2.0).rcurve(0,graph.tabsz/2.0,-graph.tabsz,0).rcurve(-graph.tabsz,0,0,-graph.tabsz/2.0).rline(0,-(graph.tabsz * 3)).rcurve(0,-graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,graph.tabsz/2.0).rcurve(0,graph.tabsz/2.0,graph.tabsz,0).rcurve(graph.tabsz,0,0,-graph.tabsz).line(path.xpos(), Math.max(ypos - height, minheight));
+};
+
+/**
+ * Return a path representing a component node.
+ */
+graph.comppath = function(comp, cassoc) {
+
+    // Calculate the width and height of the component node
+    var width = graph.compwidth(comp, cassoc);
+    var height = graph.compheight(comp, cassoc);
+
+    /**
+     * Apply a path rendering function to a list of services or references.
+     */
+    function renderpath(x, f, cassoc, path, height) {
+        if (isNil(x))
+            return path;
+        return renderpath(cdr(x), f, cassoc, f(car(x), cassoc, path, height), height);
+    }
+
+    var path = graph.mkpath().move(graph.curvsz,0);
+
+    // Store the positions of services and references in the path
+    path.refpos = mklist();
+    path.svcpos = mklist();
+
+    // Render the references on the right side of the component
+    var rrefs = graph.rrefs(comp);
+    path = path.line(width - graph.curvsz,path.ypos()).rcurve(graph.curvsz,0,0,graph.curvsz);
+    path = renderpath(rrefs, graph.rrefpath, cassoc, path, height - graph.curvsz);
+
+    // Render the references on the bottom side of the component
+    var boffset = graph.curvsz;
+    path = path.line(path.xpos(),height - graph.curvsz).rcurve(0,graph.curvsz,graph.curvsz * -1,0).line(boffset, path.ypos());
+
+    // Render the services on the left side of the component
+    var lsvcs = graph.lsvcs(comp);
+    var loffset = graph.curvsz + (length(lsvcs) * (graph.tabsz * 8));
+    path = path.line(graph.curvsz,path.ypos()).rcurve(graph.curvsz * -1,0,0,graph.curvsz * -1).line(path.xpos(), loffset);
+    path = renderpath(lsvcs, graph.lsvcpath, cassoc, path, graph.curvsz);
+
+    // Close the component node path
+    path = path.line(0,graph.curvsz).rcurve(0,graph.curvsz * -1,graph.curvsz,0);
+
+    return path.end();
+};
+
+/**
+ * Return the position of a component.
+ */
+graph.comppos = function(comp, pos) {
+    var x = scdl.x(comp);
+    var y = scdl.y(comp);
+    return graph.mkpath().pos(x != null? Number(x) + graph.palcx : pos.xpos(), y != null? Number(y) : pos.ypos());
+};
+
+/**
+ * Return a path representing a button node.
+ */
+graph.buttonpath = function(t) {
+    var path = graph.mkpath().move(graph.curvsz,0);
+    path = path.line(graph.buttoncx - graph.curvsz,path.ypos()).rcurve(graph.curvsz,0,0,graph.curvsz);
+    path = path.line(path.xpos(),graph.buttoncy - graph.curvsz).rcurve(0,graph.curvsz,-graph.curvsz,0).line(graph.curvsz, path.ypos());
+    path = path.line(graph.curvsz,path.ypos()).rcurve(-graph.curvsz,0,0,-graph.curvsz).line(path.xpos(), graph.curvsz);
+    path = path.line(0,graph.curvsz).rcurve(0,-graph.curvsz,graph.curvsz,0);
+    return path.end();
+};
+
+/**
+ * Render a SCDL composite into a list of component nodes.
+ */
+graph.composite = function(compos, pos, aspalette, g) {
+    var name = scdl.name(scdl.composite(compos));
+    var comps = scdl.components(compos);
+    var cassoc = scdl.nameToElementAssoc(comps);
+    var proms = scdl.promotions(compos);
+
+    // Unmemoize any memoized info about components and their references.
+    map(function(c) {
+            unmemo(c);
+            map(function(r) {
+                    unmemo(r);
+                }, scdl.references(c));
+        }, comps);
+
+    /**
+     * Render a component.
+     */
+    function rendercomp(comp, cassoc, pos) {
+
+        /**
+         * Render the references on the right side of a component.
+         */
+        function renderrrefs(refs, cassoc, pos, gcomp) {
+
+            /**
+             * Render a reference on the right side of a component.
+             */
+            function renderrref(ref, cassoc, pos, gcomp) {
+                var target = assoc(scdl.target(ref), cassoc);
+                if (isNil(target))
+                    return null;
+
+                // Render the component target of the reference
+                return rendercomp(cadr(target), cassoc, pos);
+            }
+
+            /**
+             * Move the rendering cursor down below a reference.
+             */
+            function rendermove(ref, cassoc, pos) {
+                return pos.clone().rmove(0, graph.rrefheight(ref, cassoc));
+            }
+
+            if (isNil(refs))
+                return mklist();
+
+            // Return list of (ref, comp rendering) pairs
+            var grefcomp = renderrref(car(refs), cassoc, pos, gcomp);
+            return cons(mklist(car(refs), grefcomp), renderrrefs(cdr(refs), cassoc, rendermove(car(refs), cassoc, pos), gcomp));
+        }
+
+        // Compute the component shape
+        var gcomp = graph.compnode(comp, cassoc, pos, g);
+
+        // Render the components wired to the component references
+        var rrefs = graph.rrefs(comp);
+        var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0);
+        var grrefs = renderrrefs(rrefs, cassoc, rpos, gcomp);
+
+        // Store list of (ref, pos, component rendering) triplets in the component
+        function refposgcomp(refpos, grefs) {
+            if (isNil(refpos))
+                return mklist();
+
+            // Append component rendering to component
+            var gref = cadr(car(grefs));
+            if (gref != null)
+                gcomp.appendChild(gref);
+            return cons(mklist(car(car(refpos)), cadr(car(refpos)), gref), refposgcomp(cdr(refpos), cdr(grefs)));
+        }
+
+        gcomp.refpos = refposgcomp(gcomp.refpos, grrefs);
+
+        return gcomp;
+    }
+
+    /**
+     * Render a list of promoted service components.
+     */
+    function renderproms(svcs, cassoc, pos) {
+
+        /**
+         * Return the component promoted by a service.
+         */
+        function promcomp(svc, cassoc) {
+            var c = assoc(scdl.promote(svc), cassoc);
+            if (isNil(c))
+                return mklist();
+            return cadr(c);
+        }
+
+        /**
+         * Move the rendering cursor down below a component.
+         */
+        function rendermove(comp, cassoc, pos) {
+            return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + Math.max((graph.tabsz * 2), 8));
+        }
+
+        if (isNil(svcs))
+            return mklist();
+
+        // Render the first promoted component in the list
+        // then recurse to render the rest of the list
+        var comp = promcomp(car(svcs), cassoc);
+        if (isNil(comp))
+            return renderproms(cdr(svcs), cassoc, rendermove(car(svcs), cassoc, pos));
+
+        var cpos = graph.comppos(comp, pos);
+        return cons(rendercomp(comp, cassoc, cpos), renderproms(cdr(svcs), cassoc, rendermove(comp, cassoc, cpos)));
+    }
+
+    // Render the promoted service components
+    var rproms = renderproms(proms, cassoc, pos.clone().rmove(graph.tabsz * 4, graph.tabsz * 4));
+
+    if (aspalette) {
+
+        // Prefix ids of palette component elements with 'palette:' and
+        // move them to the palette area
+        return map(function(r) {
+                r.id = 'palette:' + r.id;
+                var gpos = r.pos;
+                graph.move(r, graph.mkpath().pos(gpos.xpos() - graph.palcx, gpos.ypos()));
+                return r;
+            }, rproms);
+
+    } else {
+
+        // Link app component elements to the containing composite
+        return map(function(r) { r.compos = compos; return r; }, rproms);
+    }
+};
+
+/**
+ * Return a component unique id.
+ */
+graph.ucid = function(prefix, compos1, compos2, clone) {
+
+    // Build an assoc list keyed by component name
+    var comps = map(function(c) { return mklist(scdl.name(c), c); }, append(namedElementChildren("'component", compos1), namedElementChildren("'component", compos2)));
+
+    if (!clone && isNil(assoc(prefix, comps)))
+        return prefix;
+
+    /**
+     * Find a free component id.
+     */
+    function ucid(p, id) {
+        if (isNil(assoc(p + id, comps)))
+            return p + id;
+        return ucid(p, id + 1);
+    }
+
+    /**
+     * Remove trailing digits from a prefix.
+     */
+    function untrail(p) { 
+        if (p.length < 2 || p[p.length - 1] < '0' || p[p.length - 1] > '9')
+            return p;
+        return untrail(p.substring(0, p.length - 1));
+    }
+
+    return ucid(prefix == ''? 'comp' : (clone? untrail(prefix) : prefix), 1);
+};
+
+/**
+ * Clone a palette component node.
+ */
+graph.clonepalette = function(e, compos, g) {
+
+    // Clone the SCDL component and give it a unique name
+    var wcomp = append(mklist(element, "'component", mklist(attribute, "'name", graph.ucid(scdl.name(e.comp), compos, compos, true))),
+                filter(function(c) { return !(isAttribute(c) && attributeName(c) == "'name")}, elementChildren(e.comp)));
+    var x = '<composite>' + writeXML(mklist(wcomp), false) + '</composite>';
+    var rcompos = scdl.composite(readXML(mklist(x)));
+    var comp = car(scdl.components(mklist(rcompos)));
+
+    // Update component position
+    setElement(comp, graph.movecomp(comp, graph.abspos(e, g).rmove(graph.palcx, 0)));
+
+    return comp;
+};
+
+/**
+ * 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) == "'x" || attributeName(e) == "'y")); }, elementChildren(comp)));
+    return append(mklist(element, "'component", mklist(attribute, "'x", '' + (pos.xpos() - graph.palcx)), mklist(attribute, "'y", '' + pos.ypos())),
+            filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'x" || attributeName(e) == "'y")); }, elementChildren(comp)));
+};
+
+/**
+ * Align a pos along a 10pixel grid.
+ */
+graph.gridsnap = function(x) {
+    return Math.round(x / 10) * 10;
+}
+
+/**
+ * Clone a component node and all the components it references.
+ */
+graph.clonecomp = function(e, compos, g) {
+
+    // Write the component and the components it references to XML
+    function collectcomp(e) {
+        function collectrefs(refpos) {
+            if (isNil(refpos))
+                return mklist();
+            var r = car(refpos);
+            var n = caddr(r);
+            if (isNil(n))
+                return collectrefs(cdr(refpos));
+            return append(collectcomp(n), collectrefs(cdr(refpos)));
+        }
+
+        return cons(e.comp, collectrefs(e.refpos));
+    }
+
+    var allcomps = collectcomp(e);
+    var ls = map(function(e) { return writeXML(mklist(e), false); }, allcomps);
+    var x = '<composite>' + writeStrings(ls) + '</composite>';
+
+    // Read them back from XML to clone them
+    var rcompos = scdl.composite(readXML(mklist(x)));
+    var comps = scdl.components(mklist(rcompos));
+
+    // Give them new unique names
+    map(function(e) {
+
+        // Rename each component
+        var oname = scdl.name(e);
+        var name = graph.ucid(oname, compos, rcompos, true);
+        setElement(e, append(mklist(element, "'component", mklist(attribute, "'name", name)),
+                        filter(function(c) { return !(isAttribute(c) && attributeName(c) == "'name")}, elementChildren(e))));
+
+        // Refactor references to the component
+        map(function(c) { return graph.refactorrefs(scdl.references(c), oname, name); }, comps);
+    }, comps);
+
+    // Update the top component position
+    var comp = car(comps);
+    setElement(comp, graph.movecomp(comp, graph.abspos(e, g).rmove(10, 10)));
+
+    return comps;
+};
+
+/**
+ * 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 list of components to a SCDL composite. The first
+ * component in the list is a promoted component.
+ */
+graph.addcomps = function(comps, compos) {
+    var comp = car(comps);
+    var name = scdl.name(comp);
+    var prom = mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name));
+    return append(mklist(element, "'composite"), append(elementChildren(compos), cons(prom, comps)));
+};
+
+/**
+ * Remove a component from a SCDL composite.
+ */
+graph.removecomp = function(comp, compos) {
+    var name = scdl.name(comp);
+    return append(mklist(element, "'composite"),
+            filter(function(c) { return !(isElement(c) && scdl.name(c) == name); }, elementChildren(compos)));
+};
+
+/**
+ * Garbage collect components not referenced or promoted.
+ */
+graph.gcollect = function(compos) {
+
+    // List the promoted components
+    var proms = map(function(s) { return mklist(scdl.promote(s), true); }, scdl.promotions(mklist(compos)));
+
+    // List the referenced components
+    var refs = reduce(function(a, comp) {
+                return append(a,
+                    map(function(ref) { return mklist(scdl.target(ref), true); }, filter(function(ref) { return scdl.target(ref) != null; }, scdl.references(comp))));
+            }, mklist(), scdl.components(mklist(compos)));
+
+    // Filter out the unused components
+    var used = append(proms, refs);
+    return append(mklist(element, "'composite"),
+            filter(function(c) { return !(isElement(c) && elementName(c) == "'component" && isNil(assoc(scdl.name(c), used))); }, elementChildren(compos)));
+}
+
+/**
+ * Clone and cleanup clonable references.
+ */
+graph.clonerefs = function(compos) {
+    return append(mklist(element, "'composite"),
+            map(function(c) {
+                if (elementName(c) != "'component")
+                    return c;
+
+                // If the references are clonable
+                var refs = scdl.references(c);
+                if (isNil(refs))
+                    return c;
+                if (scdl.clonable(car(refs)) != 'true')
+                    return c;
+                    
+                // Filter out the unwired references and add a fresh unwired
+                // reference at the end of the list
+                var cc = append(
+                    filter(function(e) { return !(elementName(e) == "'reference" && scdl.target(e) == null); }, elementChildren(c)),
+                    mklist(mklist(element, "'reference", mklist(attribute, "'name", scdl.name(car(refs))), mklist(attribute, "'clonable", "true"))));
+                return append(mklist(element, "'component"), cc);
+            
+            }, elementChildren(compos)));
+}
+
+/**
+ * Refactor references to a component.
+ */
+graph.refactorrefs = function(refs, oname, nname) {
+    if (isNil(refs))
+        return true;
+    var ref = car(refs);
+    if (scdl.target(ref) != oname)
+        return graph.refactorrefs(cdr(refs), oname, nname);
+
+    // Change the reference's target attribute
+    setElement(ref, append(mklist(element, "'reference"),
+        append(filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'target"); }, elementChildren(ref)),
+            mklist(mklist(attribute, "'target", nname)))));
+
+    return graph.refactorrefs(cdr(refs), oname, nname);
+};
+
+/**
+ * Rename a component.
+ */
+graph.renamecomp = function(comp, compos, name) {
+
+    // Refactor all the references to the renamed component
+    var oname = scdl.name(comp);
+    map(function(c) { return graph.refactorrefs(scdl.references(c), oname, name); }, namedElementChildren("'component", compos));
+
+    // Rename the SCDL promoted service and component
+    var proms = filter(function(s) { return scdl.name(s) == oname }, scdl.services(compos));
+    if (!isNil(proms))
+        setElement(car(proms), mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name)));
+    setElement(comp, append(mklist(element, "'component"),
+        cons(mklist(attribute, "'name", name),
+            filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'name"); }, elementChildren(comp)))));
+
+    return append(mklist(element, "'composite"), elementChildren(compos));
+};
+
+/**
+ * Cut the wire to a component node and make that node a
+ * top level component node.
+ */
+graph.cutwire = function(node, compos, g) {
+
+    /**
+     * Find the reference wired to a node and cut its wire.
+     */
+    function cutref(refs, node) {
+        if (isNil(refs))
+            return true;
+        var ref = car(refs);
+        if (caddr(ref) == node) {
+            setlist(ref, mklist(car(ref), cadr(ref), null));
+            setElement(car(ref),
+                append(mklist(element, "'reference"),
+                    filter(function(e) { return !(isAttribute(e) && attributeName(e) == "'target"); }, elementChildren(car(ref)))));
+        }
+        return cutref(cdr(refs), node);
+    }
+
+    // Cut any reference wire, if found
+    cutref(node.parentNode.refpos, node);
+
+    // Make the component node a top level node.
+    node.compos = g.compos;
+
+    // Update the SCDL composite, add a promote element for
+    // that component
+    var comp = node.comp;
+    var name = scdl.name(comp);
+    var prom = mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name));
+    return append(mklist(element, "'composite"),
+            append(mklist(prom), filter(function(c) { return !(isElement(c) && elementName(c) == "'service" && scdl.name(c) == name); }, elementChildren(compos))));
+}
+
+/**
+ * Wire a component to the closest neighbor reference.
+ */
+graph.wire = function(n, compos, g) {
+
+    // Compute position of the component's service node
+    var spos = cadr(car(n.svcpos));
+    var aspos = graph.abspos(n, g).rmove(spos.xpos(), spos.ypos());
+
+    /**
+     * Find closest unwired reference node among all the references
+     * of all the components.
+     */
+    function closecomprefs(nodes, spos, cref) {
+
+        /**
+         * Find the closest unwired reference node among all the
+         * references of a node.
+         */
+        function closerefs(npos, refs, spos, cref) {
+            if (isNil(refs))
+                return cref;
+            var fdist = cadddr(cref);
+            var ref = car(refs);
+
+            // Skip wired reference
+            if (!isNil(filter(function(n) { return isAttribute(n) && attributeName(n) == "'target"; }, car(ref))))
+                return closerefs(npos, cdr(refs), spos, cref);
+
+            // Compute distance between service node and reference node
+            var rpos = cadr(ref).clone().rmove(npos.xpos(), npos.ypos());
+            var dx = Math.pow(rpos.xpos() - spos.xpos(), 2);
+            var dy = Math.pow(rpos.ypos() - spos.ypos(), 2);
+
+            // Check for proximity threshold
+            var rdist = (dx < (graph.proxcx * graph.proxcx) && dy < (graph.proxcy * graph.proxcy))? Math.sqrt(dx + dy) : 25000000;
+
+            // Go through all the references in the component
+            return closerefs(npos, cdr(refs), spos, fdist < rdist? cref : mklist(car(ref), cadr(ref), caddr(ref), rdist));
+        }
+
+        if (isNil(nodes))
+            return cref;
+
+        // Skip non-component nodes
+        var node = car(nodes);
+        if (isNil(node.comp))
+            return closecomprefs(cdr(nodes), spos, cref);
+
+        // Compute the component absolute position
+        var npos = graph.abspos(node, g);
+
+        // Go through all the components and their references
+        return closecomprefs(append(nodeList(node.childNodes), cdr(nodes)), spos, closerefs(npos, node.refpos, spos, cref));
+    }
+
+    // Find closest reference node
+    var cref = closecomprefs(nodeList(g.childNodes), aspos, mklist(null, graph.mkpath(), null, 25000000));
+    if (car(cref) == null)
+        return compos;
+    if (cadddr(cref) == 25000000)
+        return compos;
+
+    // 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);
+    return append(mklist(element, "'composite"),
+            filter(function(c) { return !(isElement(c) && elementName(c) == "'service" && scdl.name(c) == name); }, elementChildren(compos)));
+}
+
+/**
+ * Display a list of graphical nodes.
+ */
+graph.display = function(nodes, g, svg) {
+    var suspend = svg.suspendRedraw(10);
+
+    // Append the nodes to the graphical canvas
+    appendNodes(nodes, g);
+    
+    svg.unsuspendRedraw(suspend);
+    return nodes;
+};
+
+/**
+ * Hide a graph.
+ */
+graph.hide = function(g) {
+
+    // Remove nodes from the graph
+    map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { g.removeChild(n); } return n; }, nodeList(g.childNodes));
+    return g;
+};
+
+/**
+ * Refresh a graph.
+ */
+graph.refresh = function(g) {
+    //log('refresh');
+
+    // Remove existing nodes from the graph
+    map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { g.removeChild(n); } return n; }, nodeList(g.childNodes));
+
+    // Redisplay the composite associated with the graph
+    var nodes = graph.composite(g.compos, graph.mkpath().pos(graph.palcx,0), false, g);
+    appendNodes(nodes, g);
+    return nodes;
+};
+
+/**
+ * Display and enable editing of a composite and the graphical
+ * nodes that represent it.
+ */
+graph.edit = function(appname, compos, nodes, onchange, onselect, g) {
+    var suspend = g.suspendRedraw(10);
+
+    // Store the appname and composite in the graphical canvas
+    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;
+
+    // Remove existing nodes from the graph
+    map(function(n) { if (!isNil(n.comp) && n.id.substr(0, 8) != 'palette:') { g.removeChild(n); } return n; }, nodeList(g.childNodes));
+
+    // Display the composite nodes
+    appendNodes(nodes, g);
+
+    g.unsuspendRedraw(suspend);
+    return nodes;
+};
+
+/**
+ * Track the current app composite and corresponding saved XML content.
+ */
+var savedcomposxml = '';
+var composite;
+
+/**
+ * Track the composition graph, whether it's visible or not and the selected component.
+ */
+var g;
+var gdiv;
+var bg;
+var gvisible = true;
+var gcomp = null;
+var cdiv = $('contentdiv');
+var pdiv = $('playdiv');
+
+// Position play div inside the content div
+pdiv.style.position = 'absolute';
+pdiv.style.top = cdiv.offsetTop + 'px';
+
+/**
+ * Track the palettes.
+ */
+var gpalettes = new Array();
+var spalette = 'control';
+var bpalette = null;
+
+/**
+ * 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 false;
+    showStatus('Loading');
+
+    return composites.get(name, function(doc) {
+
+        // Stop now if we didn't get a composite
+        if (doc == null) {
+            showStatus('No data');
+            return false;
+        }
+        showStatus(defaultStatus());
+
+        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" ' +
+                'targetNamespace="http://app" name="app"></composite>';
+            composite = readXML(mklist(x));
+        }
+
+        // Display the composite
+        graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(graph.palcx,0), false, g), 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, svg, palette, gpalettes) {
+    if (isNil(name))
+        return;
+    if (isNil(gpalettes[name])) {
+
+        // Get the palette from the server
+        palettes.get(name, function(doc) {
+            gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(2580,0), true, g);
+            graph.display(gpalettes[name], g, svg);
+        });
+        return true;
+    }
+    graph.display(gpalettes[name], g, svg);
+    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, g);
+    b.onclick = function(e) {
+
+        // Swap the selected palette
+        graph.paletteselect(bpalette, false);
+        displaypalette(spalette, bg, g, palette, gpalettes);
+        bpalette = b;
+        graph.paletteselect(b, true);
+        spalette = name;
+        return displaypalette(spalette, g, 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
+    graph.paletteselect(b, true);
+    displaypalette(name, g, g, palette, gpalettes);
+
+    return b;
+}
+
+/**
+ * Save the current composite.
+ */
+function save(savexml) {
+    showStatus('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, function(e) {
+        if (e) {
+            showStatus('Local copy');
+            return false;
+        }
+        showStatus('Saved');
+        return false;
+    });
+    return true;
+}
+
+/**
+ * Handle a composite change event.
+ */
+function oncomposchange(prop) {
+    var newxml = car(writeXML(composite, false));
+    if (savedcomposxml == newxml)
+        return false;
+    showStatus('Modified');
+
+    // Save property changes right away
+    if (prop)
+        return save(newxml);
+
+    // Autosave other changes after 1 second
+    showStatus('Modified');
+    setTimeout(function() {
+        if (savedcomposxml == newxml) {
+            showStatus('Saved');
+            return false;
+        }
+        return save(newxml);
+    }, 1000);
+    return true;
+}
+
+/**
+ * Return the link to a component.
+ */
+function complink(appname, cname) {
+    if (cname == '' || isNil(cname))
+        return '';
+    var protocol = location.protocol;
+    var host = location.hostname;
+    var port = ':' + location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + host + port + '/' + appname + '/c/' + cname;
+    return link;
+}
+
+/**
+ * Handle a component select event.
+ */
+function oncompselect(gsel) {
+    if (gsel == gcomp)
+        return true;
+    gcomp = gsel;
+
+    function updateButton(b, v) {
+        b.style.color = v? '#000000' : '#808080';
+    }
+
+    updateButton(cdelete, !isNil(gsel));
+    updateButton(ccopy, !isNil(gsel));
+    updateButton(cplay, !isNil(gsel));
+    return true;
+}
+
+/**
+ * Show the result data of a component.
+ */
+function showdata(gcomp) {
+    if (!gvisible)
+        return true;
+    if (isNil(gcomp))
+        return true;
+    cvalue.value = complink(appname, gcomp.id);
+    cplay.innerHTML = '&lt;';
+    gvisible = false;
+    pdiv.innerHTML = '';
+    pdiv.style.visibility = 'visible';
+
+    // Get the component result data
+    var comp = sca.component(gcomp.id, appname);
+    comp.get('', function(doc) {
+        function displaydata(t, w) {
+            pdiv.style.width = w;
+            pdiv.innerHTML = t;
+            return true;
+        }
+
+        // Stop now if we didn't get the doc
+        if (doc == null)
+            return displaydata('No content', '2500px');
+
+        // Format data table
+        if (json.isJSON(mklist(doc)))
+            return displaydata(ui.datatable(json.readJSON(mklist(doc))), '2500px');
+
+        if (atom.isATOMEntry(mklist(doc)))
+            return displaydata(ui.datatable(atom.readATOMEntry(mklist(doc))), '2500px');
+
+        if (atom.isATOMFeed(mklist(doc)))
+            return display(ui.datatable(atom.readATOMFeed(mklist(doc))), '2500px');
+
+        // Insert the doc as is in an iframe
+        var t = '<table class="datatable" style="width: 100%;">' +
+                '<tr><td class="datatdltop">' + 'value' + '</td>' + '<td class="datatdr">' +
+                '<iframe style="width: 100%; height: 5000px;" scrolling="no" frameborder="0" src="' + clink + '"/>' +
+                '</td></tr></table>'
+        return displaydata(t, '100%');
+    });
+
+    setTimeout(function() {
+        gdiv.style.visibility = 'hidden'
+    }, 0);
+    return true;
+}
+
+/**
+ * Show the composition graph.
+ */
+function showgraph(gcomp) {
+    if (gvisible)
+        return true;
+    cplay.innerHTML = '&gt;';
+    gdiv.style.visibility = 'visible'
+    gvisible = true;
+    graph.compselect(gcomp, true, cvalue, ccopy, cdelete);
+    setTimeout(function() {
+        pdiv.style.visibility = 'hidden';
+        pdiv.innerHTML = '';
+    }, 0);
+    return true;
+}
+
+/**
+ * Handle play component button event.
+ */
+cplay.onclick = function() {
+    if (gcomp == null)
+        return false;
+    if (!gvisible)
+        return showgraph(gcomp);
+    return showdata(gcomp);
+}
+
+// Create editor graph area
+g = graph.mkgraph(cdiv, graph.mkpath().move(-2500,0), cvalue, cadd, ccopy, cdelete);
+gdiv = g.parentNode;
+bg = graph.mkgroup(graph.mkpath());
+
+// Install the palettes
+var pos = graph.mkpath().move(0, 0);
+bpalette = installpalette('control', pos.rmove(5,2), g, bg, spalette, gpalettes);
+installpalette('values', pos.rmove(0,28), g, bg, spalette, gpalettes);
+installpalette('lists', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('transform', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('text', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('http', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('animation', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('talk', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('social', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('search', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('database', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('logic', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('math', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+installpalette('python', pos.rmove(0, 28), g, bg, spalette, gpalettes);
+
+// Get and display the current app
+getapp(appname, g);
+
+</script>
+
+</div>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/home/home.b64 b/sca-cpp/trunk/hosting/server/htdocs/home/home.b64
new file mode 100644
index 0000000000..9131135881
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/home/home.b64
@@ -0,0 +1 @@
+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
+\ No newline at end of file
diff --git a/sca-cpp/trunk/hosting/server/htdocs/home/home.png b/sca-cpp/trunk/hosting/server/htdocs/home/home.png
new file mode 100644
index 0000000000..8f5a0b0d86
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/home/home.png
diff --git a/sca-cpp/trunk/hosting/server/htdocs/home/index.html b/sca-cpp/trunk/hosting/server/htdocs/home/index.html
new file mode 100644
index 0000000000..6fb9b558bf
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/home/index.html
@@ -0,0 +1,68 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="h1"></span></h2></td>
+<td style="vertical-align: middle; text-align: right;"><span id="status" style="font-weight: bold; color: #808080;"></span></td>
+</tr>
+</table>
+
+<div style="margin-left: auto; margin-right: auto; text-align: center;">
+
+<div id="maintitle" style="font-size: 150%;"></div>
+
+<div id="maindiagram"><div id="diagram" style="width: 320px; height: 280px; padding: 0px; margin: 0px auto;"></div></div>
+
+<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/>
+<div>Requires Safari 5+, Chrome 11+, Firefox 4+, IE 9+</div>
+
+</div>
+
+<script type="text/javascript">
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname);
+$('h1').innerHTML = ui.hometitle(location.hostname);
+
+$('maintitle').innerHTML = isNil(config.maintitle)? 'Simple App Builder' : config.maintitle;
+$('getstarted').onclick = function() {
+    return ui.navigate('/#view=store', '_view');
+};
+
+// Display the main diagram
+var diagram = $('diagram');
+diagram.style.background = 'url(\'' + ui.b64img(appcache.get('/home/home.b64')) + '\')';
+var bgpos = 0;
+setInterval(function() {
+    bgpos = bgpos -280;
+    if (bgpos == -2800)
+        bgpos = 0;
+    diagram.style.backgroundPosition = '0px ' + ui.pixpos(bgpos);
+}, 2000);
+
+showStatus(defaultStatus());
+
+</script>
+
+</div>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/index.html b/sca-cpp/trunk/hosting/server/htdocs/index.html
new file mode 100644
index 0000000000..3bc1529dbb
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/index.html
@@ -0,0 +1,525 @@
+<!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 manifest="/cache-manifest.cmf">
+<head>
+<title></title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-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"/>
+<base href="/"/>
+<script type="text/javascript">
+
+window.appcache = {};
+
+/**
+ * Get and cache a resource.
+ */
+appcache.get = function(uri) {
+    var h = uri.indexOf('#');
+    var u = h == -1? uri : uri.substring(0, h);
+
+    // Get resource from local storage first
+    var item = localStorage.getItem(u);
+    if (item != null && item != '')
+        return item;
+
+    // Get resource from network
+    var http = new XMLHttpRequest();
+    http.open("GET", u, false);
+    http.send(null);
+    if (http.status == 200) {
+        if (http.getResponseHeader("X-Login") != null) {
+            if (log) log('http error', u, 'X-Login');
+            // Redirect to login page if not signed in
+            document.location = '/login/';
+            return null;
+        } else if (http.responseText == '' || http.getResponseHeader("Content-Type") == null) {
+            if (log) log('http error', u, 'No-Content');
+            return null;
+        }
+        localStorage.setItem(u, http.responseText);
+        return http.responseText;
+    }
+    if (log) log('http error', u, http.status, http.statusText);
+    // Redirect to login page if not signed in
+    if (http.status == 403)
+        document.location = '/login/';
+    return null;
+};
+
+// Load Javascript and CSS
+(function() {
+    var bootjs = document.createElement('script');
+    bootjs.type = 'text/javascript';
+    bootjs.text = appcache.get('/all-min.js');
+    document.head.appendChild(bootjs);
+    document.head.appendChild(ui.declareCSS(appcache.get('/ui-min.css')));
+})();
+
+// Redirect to login page if not signed in
+if (document.location.protocol == 'https:' && !ui.signedin())
+    document.location = '/login/';
+
+</script>
+</head>
+<body class="delayed" onload="onload();">
+<div id="mainbodydiv" class="mainbodydiv" style="overflow: visible;">
+
+<div id="headdiv" class="hsection">
+<script type="text/javascript">
+(function() {
+$('headdiv').appendChild(ui.declareScript(appcache.get('/config-min.js')));
+})();
+</script>
+</div>
+
+<div id="menubackground" style="position: absolute; top: 0px; left: 0px; z-index: -1; width: 100%; visibility: hidden;">
+<table cellpadding="0" cellspacing="0" width="100%" class="tbar"><tr><td class="dtbar">
+<table border="0" cellspacing="0" cellpadding="0"><tr><td class="ltbar"><span class="tbarsmenu">>&nbsp</span></td></tr></table>
+</td></tr></table>
+</div>
+
+<div id="menu"></div>
+
+<div id="content" class="bodydiv" style="overflow: visible;">
+<div id="viewcontainer"></div>
+</div>
+
+<script type="text/javascript">
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname);
+
+// Init div variables
+var bdiv = $('mainbodydiv');
+var mdiv = $('menu'); 
+var cdiv = $('content'); 
+var mbgdiv = $('menubackground'); 
+mbgdiv.style.top = ui.pixpos(mdiv.offsetTop);
+var vcontainer = $('viewcontainer');
+vcontainer.className = ui.isMobile()? 'viewcontainer3dm' : 'viewcontainer3d';
+
+/**
+ * Pre-fetch app resources.
+ */
+var appresources = [
+    ['/all-min.js'],
+    ['/ui-min.css'],
+    ['/account/', 'flip'],
+    ['/clone/', 'flip'],
+    ['/create/', 'flip'],
+    ['/graph/', 'flip'],
+    ['/config-min.js'],
+    ['/home/', 'right'],
+    ['/home/home.b64'],
+    ['/page/', 'flip'],
+    ['/public/app.b64'],
+    ['/public/config-min.js'],
+    ['/public/grid72.b64'],
+    ['/public/iframe-min.html'],
+    ['/public/img.b64'],
+    ['/public/user.b64'],
+    ['/stats/', 'flip'],
+    ['/store/', 'left']
+];
+
+/**
+ * Handle application cache events.
+ */
+applicationCache.addEventListener('checking', function(e) {
+    //log('appcache checking', e);
+    showStatus('Checking');
+}, false);
+applicationCache.addEventListener('error', function(e) {
+    //log('appcache error', e);
+    showStatus(defaultStatus());
+}, false);
+applicationCache.addEventListener('noupdate', function(e) {
+    //log('appcache noupdate', e);
+    showStatus(defaultStatus());
+}, false);
+applicationCache.addEventListener('downloading', function(e) {
+    //log('appcache downloading', e);
+    showStatus('Updating');
+}, false);
+applicationCache.addEventListener('progress', function(e) {
+    //log('appcache progress', e);
+    showStatus('Updating');
+}, false);
+applicationCache.addEventListener('updateready', function(e) {
+    //log('appcache updateready', e);
+    applicationCache.swapCache();
+    showStatus(defaultStatus());
+    //log('appcache swapped', e);
+}, false);
+applicationCache.addEventListener('cached', function(e) {
+    //log('appcache cached', e);
+    map(function(res) {
+        showStatus('Updating');
+        appcache.get(res[0]);
+    }, appresources);
+    showStatus(defaultStatus());
+}, false);
+
+/**
+ * Handle network offline/online events.
+ */
+window.addEventListener('offline', function(e) {
+    //log('going offline');
+    showStatus('Offline');
+}, false);
+window.addEventListener('online', function(e) {
+    //log('going online');
+    showStatus('Online');
+}, false);
+
+//log(navigator.onLine? 'online' : 'offline');
+
+/**
+ * Handle view transitions.
+ */
+
+// Keep track of the current view url and uri
+var viewurl = '';
+var viewuri = '';
+var viewidx = '';
+var viewdiv;
+
+/**
+ * Record which transitions should be applied to each resource.
+ */
+var apptransitions = {};
+map(function(res) {
+    if (res.length > 1)
+        apptransitions[res[0]] = res[1];
+}, appresources);
+
+/**
+ * Return the transition that should be applied to a resource.
+ */
+function viewtransition(uri) {
+    var t = apptransitions[uri];
+    return isNil(t)? 'left' : t;
+}
+
+/**
+ * Create a new view div.
+ */
+function mkviewdiv(cname) {
+    var vdiv = document.createElement('div');
+    vdiv.className = cname;
+    if (!ui.isMobile())
+        return vdiv;
+
+    // Handle view transition end
+    function viewdivtransitionend(e) {
+        if (e.target.className == 'leftviewunloaded3dm' || e.target.className == 'rightviewunloaded3dm' || e.target.className == 'flipviewunloaded3dm')
+            e.target.parentNode.removeChild(e.target);
+    }
+    vdiv.addEventListener('webkitTransitionEnd', viewdivtransitionend, false);
+    vdiv.addEventListener('transitionend', viewdivtransitionend, false);
+    return vdiv;
+}
+
+/**
+ * Return the last visited location.
+ */
+function lastvisited() {
+    return localStorage.getItem('ui.lastvisited')
+}
+
+/**
+ * Build and show the menu bar.
+ */
+function showmenu(mdiv, view, appname) {
+    mdiv.innerHTML = ui.menubar(
+        append(mklist(ui.menu('Home', '/', '_view', view == 'home'), ui.menu('Store', '/#view=store', '_view', view === 'store')),
+                (isNil(appname) || appname == 'undefined')?
+                    mklist() :
+                    mklist(
+                        ui.menu('Stats', '/#view=stats&app=' + appname, '_view', view == 'stats'),
+                        ui.menu('Page', '/#view=page&app=' + appname, '_view', view == 'page'),
+                        ui.menu(isNil(config.compose)? 'Composition' : config.compose, '/#view=graph&app=' + appname, '_view', view == 'graph'))),
+        mklist(
+            ui.menu('Account', '/#view=account', '_view', view == 'account'),
+            ui.signedin()? ui.menufunc('Sign out', 'logout();', false) : ui.menu('Sign in', '/login/', '_self', false)));
+}
+
+/**
+ * Show a status message.
+ */
+function showStatus(s) {
+    var sdiv = $('status');
+    if (isNil(sdiv))
+        return s;
+    sdiv.innerHTML = s;
+    return s;
+}
+
+/**
+ * Return the default status message.
+ */
+function defaultStatus() {
+    return navigator.onLine? 'Online' : 'Offline';
+}
+
+/**
+ * Show a view.
+ */
+function showview(url) {
+    //log('showview', url);
+
+    // Save last visited location
+    localStorage.setItem('ui.lastvisited', url);
+
+    // Determine the view to show
+    var params = ui.fragmentParams(url);
+    var view = isNil(params['view'])? 'home' : params['view'];;
+    var uri = '/' + view + '/';
+    var idx = isNil(params['idx'])? '1' : params['idx'];
+
+    // Determine the transition to use
+    var vt = viewtransition(uri);
+    var ovt = viewtransition(viewuri);
+    var vtransition;
+    if (ovt == 'flip')
+        vtransition = 'flip';
+    else if (uri == viewuri && (vt == 'left' || vt == 'right'))
+        vtransition = idx >= viewidx? 'left' : 'right';
+    else
+        vtransition = vt;
+
+    // Track current view url and uri
+    viewurl = url;
+    viewuri = uri;
+    viewidx = idx;
+
+    // Show the menu bar
+    var appname = params['app'];
+    showmenu(mdiv, view, appname);
+    cdiv.style.top = ui.pixpos(mdiv.offsetTop + mdiv.offsetHeight);
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    // Compute the viewport size
+    var iswide = view == 'graph' || view == 'page';
+    var vwidth = iswide? '2500px' : '100%';
+    mbgdiv.style.visibility = iswide? 'visible' : 'hidden';
+    mbgdiv.style.width = vwidth;
+
+    // Start to unload the front view and create a new view
+    if (ui.isMobile()) {
+        // Prepare current view for transition out
+        var ovdiv = viewdiv;
+        if (!isNil(ovdiv)) {
+            ovdiv.skipNode = true;
+            ovdiv.className = 'viewunloading3dm';
+        }
+
+        // Load the requested doc into a new view
+        var vdiv = mkviewdiv(vtransition + 'viewloading3dm');
+        vcontainer.appendChild(vdiv);
+        var vdoc = appcache.get(uri);
+        vdiv.innerHTML = vdoc;
+        map(ui.evalScript, ui.innerScripts(vdiv));
+
+        // Show the document
+        if (document.body.style.visibility != 'visible')
+            document.body.style.visibility = 'visible';
+
+        setTimeout(function() {
+            // Transition the old view out
+            if (!isNil(ovdiv))
+                ovdiv.className = vtransition + 'viewunloaded3dm';
+
+            // Transition the new view in
+            vdiv.className = 'viewloaded3dm';
+        }, 0);
+    } else {
+        // Prepare current view for transition out
+        var ovdiv = viewdiv;
+        if (!isNil(ovdiv))
+            ovdiv.skipNode = true;
+
+        // Load the requested doc into the view
+        var vdiv = mkviewdiv('viewloading3d');
+        vcontainer.appendChild(vdiv);
+        var vdoc = appcache.get(uri);
+        vdiv.innerHTML = vdoc;
+        map(ui.evalScript, ui.innerScripts(vdiv));
+
+        // Show the document
+        if (document.body.style.visibility != 'visible')
+            document.body.style.visibility = 'visible';
+
+        setTimeout(function() {
+            // Transition the new view in
+            vdiv.className = 'viewloaded3d';
+
+            // Transition the old view out
+            if (!isNil(ovdiv))
+                ovdiv.parentNode.removeChild(ovdiv);
+        }, 0);
+    }
+
+    // Track the current visible view
+    viewdiv = vdiv;
+
+    return true;
+}
+
+/**
+ * Update the browser window location.
+ */
+function updatelocation(url) {
+    //log('updatelocation', url);
+
+    // Add url to the history if necessary
+    if (url != ui.pathandparams(location)) {
+        history.pushState(null, null, url);
+        //log('pushstate', history.length);
+
+        // Update the location hash if necessary
+        var f = ui.fragment(url);
+        if (f != '' && f != location.hash) {
+            location.hash = f;
+            //log('hash', f);
+        }
+    }
+    return url;
+}
+
+/**
+ * Handle navigations.
+ */
+window.onnavigate = function(url) {
+    //log('onnavigate', url);
+
+    updatelocation(url);
+
+    // Show the specified view
+    if (url == viewurl)
+        return true;
+    return showview(url);
+};
+
+/**
+ * Handle login redirect.
+ */
+window.onloginredirect = function(e) {
+    document.location = '/login/';
+};
+
+/**
+ * Log the current user out.
+ */
+function logout() {
+    // Clear session cookie and user-specific local storage entries
+    var reset = 'TuscanyOpenAuth=; expires=' + new Date(1970,01,01).toGMTString() + '; domain=.' + domainname(window.location.hostname) + '; path=/';
+    document.cookie = reset;
+    localStorage.removeItem('/r/EditWidget/accounts');
+    localStorage.removeItem('/r/EditWidget/dashboards');
+    //localStorage.clear();
+    document.location = '/login/';
+    return true;
+}
+
+/**
+ * Handle history.
+ */
+window.addEventListener('popstate', function(e) {
+    //log('onpopstate', history.length);
+    var furl = ui.fragment(location);
+    var url = location.pathname + (furl == ''? '' : '#' + furl);
+
+    // Show the current view
+    if (url == viewurl)
+        return true;
+    return showview(url);
+
+}, false);
+
+window.addEventListener('hashchange', function(e) {
+    //log('onhashchange');
+    var furl = ui.fragment(location);
+    var url = location.pathname + (furl == ''? '' : '#' + furl);
+
+    // Show the current view
+    if (url == viewurl)
+        return true;
+    return showview(url);
+
+}, false);
+
+/**
+ * Handle orientation change.
+ */
+document.body.onorientationchange = function(e) {
+    //log('onorientationchange');
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    return true;
+};
+
+/**
+ * Document load post processing.
+ */
+function onload() {
+    //log('onload', history.length);
+    var furl = ui.fragment(location);
+
+    // Show the view specified in the given url fragment
+    if (furl != '') {
+        var url = location.pathname + '#' + furl;
+        if (url == viewurl)
+            return true;
+        return showview(url);
+    }
+
+    // Show the last visited view
+    if (ui.isMobile() && (document.referrer == null || document.referrer == '')) {
+        //log('show lastvisited');
+        var lv = lastvisited();
+        var url = isNil(lv)? location.pathname : lv;
+        updatelocation(url);
+        if (url == viewurl)
+            return true;
+        return showview(url);
+    }
+
+    // Show the main home view
+    var url = location.pathname;
+    if (url == viewurl)
+        return true;
+    return showview(url);
+}
+
+</script>
+
+<div id="footdiv" class="fsection">
+</div>
+
+</div>
+</body>
+</html>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/login/index.html b/sca-cpp/trunk/hosting/server/htdocs/login/index.html
new file mode 100644
index 0000000000..9052abe8d3
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/login/index.html
@@ -0,0 +1,156 @@
+<!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>Sign in</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<base href="/login/"/>
+<link rel="stylesheet" type="text/css" href="/ui-min.css"/>
+<script type="text/javascript" src="/all-min.js"></script>
+</head>
+<body class="delayed" onload="onload();">
+<div id="bodydiv" class="bodydiv">
+
+<h1>Sign in</h1>
+
+<form name="openIDForm">
+<table border="0">
+<tr><td><b>Sign in with your Google account</b></td></tr>
+<tr><td><input type="button" value="Sign in" class="graybutton" style="font-weight: bold;" onclick="submitOpenIDSignin(withGoogle)"/></td></tr>
+</table>
+</form>
+
+<form name="oauth2Form">
+<table border="0">
+<tr><td><b>Sign in with your Facebook account</b></td></tr>
+<tr><td><input type="button"  value="Sign in" class="graybutton" style="font-weight: bold;" onclick="submitOAuth2Signin(withFacebook)"/></td></tr>
+</table>
+</form>
+
+<form name="openIDSignin" action="/" method="GET">
+<input type="hidden" name="openid_identifier" value=""/>
+</form>
+
+<form name="oauth2Signin" action="/" method="GET">
+<input type="hidden" name="mod_oauth2_authorize" value=""/>
+<input type="hidden" name="mod_oauth2_access_token" value=""/>
+<input type="hidden" name="mod_oauth2_client_id" value=""/>
+<input type="hidden" name="mod_oauth2_info" value=""/>
+<input type="hidden" name="mod_oauth2_display" value=""/>
+<input type="hidden" name="mod_oauth2_step" value="authorize"/>
+</form>
+
+<script type="text/javascript">
+function queryParams() {
+    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;
+}
+
+function openauthReferrer() {
+    var r = queryParams()['openauth_referrer'];
+    if (typeof(r) == 'undefined' || domainname(r) != domainname(window.location.hostname))
+        return '/';
+    var q = r.indexOf('?');
+    if (q > 0)
+        return r.substring(0, q);
+    return r;
+}
+
+/**
+ * Signin with OpenID.
+ */
+function submitOpenIDSignin(w) {
+    var reset = 'TuscanyOpenAuth=; expires=' + new Date(1970,01,01).toGMTString() + '; domain=.' + domainname(window.location.hostname) + '; path=/';
+    document.cookie = reset;
+    localStorage.removeItem('/r/EditWidget/accounts');
+    localStorage.removeItem('/r/EditWidget/dashboards');
+    //localStorage.clear();
+    document.openIDSignin.openid_identifier.value = w();
+    document.openIDSignin.action = openauthReferrer();
+    document.openIDSignin.submit();
+}
+
+function withGoogle() {
+    return 'https://www.google.com/accounts/o8/id';
+}
+
+/**
+ * Signin with OAuth 2.0.
+ */
+function submitOAuth2Signin(w) {
+    parms = w();
+    var reset = 'TuscanyOpenAuth=; expires=' + new Date(1970,01,01).toGMTString() + '; domain=.' + domainname(window.location.hostname) + '; path=/';
+    document.cookie = reset;
+    localStorage.removeItem('/r/EditWidget/accounts');
+    localStorage.removeItem('/r/EditWidget/dashboards');
+    //localStorage.clear();
+    document.oauth2Signin.mod_oauth2_authorize.value = parms[0];
+    document.oauth2Signin.mod_oauth2_access_token.value = parms[1];
+    document.oauth2Signin.mod_oauth2_client_id.value = parms[2];
+    document.oauth2Signin.mod_oauth2_info.value = parms[3];
+    document.oauth2Signin.mod_oauth2_display.value = parms[4];
+    document.oauth2Signin.action = openauthReferrer();
+    document.oauth2Signin.submit();
+}
+
+function withFacebook() {
+    var parms = ['https://graph.facebook.com/oauth/authorize', 'https://graph.facebook.com/oauth/access_token', 'facebook.com', 'https://graph.facebook.com/me', ui.isMobile()? 'touch' : 'page'];
+    return parms;
+}
+
+/**
+ * Handle orientation change.
+ */
+document.body.onorientationchange = function(e) {
+    //log('onorientationchange');
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    return true;
+};
+
+/**
+ * Document load post processing.
+ */
+function onload() {
+    //log('onload');
+
+    // Show the page
+    document.body.style.visibility = 'visible';
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+    return true;
+}
+
+</script>
+
+</div>
+</body>
+</html>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/page/index.html b/sca-cpp/trunk/hosting/server/htdocs/page/index.html
new file mode 100644
index 0000000000..9482cb4e32
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/page/index.html
@@ -0,0 +1,987 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv" style="overflow: visible;">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="appNameHeader"></span></h2></td>
+<td style="vertical-align: middle; text-align: right; padding-right: 8px;"><span id="status" style="font-weight: bold; color: #808080;"></span></td>
+</tr>
+</table>
+
+<table id="widgetValueBackground" style="width: 2500px; position: absolute; top: 59px; left: 0px; z-index: -1;">
+<tr>
+<th class="thr thl"><span style="display: inline-block; padding-top: 0px; padding-bottom: 0px; height: 24px;"></span></th>
+</tr>
+</table>
+
+<table id="widgetValueTable" style="width: 100%;">
+<tr>
+<td class="thl thr" style="text-align: right; padding-right: 2px; vertical-align: top;">
+<span id="deleteWidgetButton" title="Delete a Widget" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">-</span>
+
+<span id="copyWidgetButton" title="Copy a Widget" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">c</span>
+
+<span id="addWidgetButton" title="Add a Widget" class="graybutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span>
+
+<span id="playPageButton" title="View page" class="graybutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; middle; text-align: center; margin-left: 0px; margin-right: 0px;">&gt;</span>
+</td>
+
+<td class="thl thr" style="padding-left: 2px; padding-right: 2px; vertical-align: top; width: 100%;">
+<input id="widgetValue" type="text" value="" title="Widget value" autocapitalize="off" placeholder="Value" style="position: relative; visibility: hidden; width: 100%;"/>
+</td>
+</tr>
+</table>
+
+<div id="contentdiv" style="margin-top: 4px; width: 2500px;">
+<div id="editdiv" style="visibility: visible; position: relative; top: 0px; left: -2500px; width: 2500px; height: 5000px;">
+
+<div style="position: relative; left: 2500px; top: 0px; right: 0px; height: 5000px; border:1px; border-style: solid; border-color: #a2bae7;"><span id="editgrid"></span></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-min.html"><span class="fakeframe"><span>frame ...</span></span></a></span>
+<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 430px;"><img id="imgimg"/></span>
+</div>
+
+<div id="playdiv" style="visibility: hidden; position: absolute; top: 0px; left: 0px; width: 2500px; height: 5000px;">
+</div>
+
+</div>
+
+<div id="buffer" style="visibility: hidden; width: 0px; height: 0px"></div>
+
+<script type="text/javascript">
+
+// Get the app name
+var appname = ui.fragmentParams(location)['app'];
+
+/**
+ * Return the link to an app.
+ */
+function applink(appname) {
+    var protocol = location.protocol;
+    var host = location.hostname;
+    var port = ':' + location.port;
+    if (port == ':80' || port == ':443' || port == ':')
+        port = '';
+    var link = protocol + '//' + host + port + '/' + appname + '/';
+    return link;
+}
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname) + ' - Page - ' + appname;
+$('appNameHeader').innerHTML = '<a href=\"/' + appname + '/\" target=\"' + '_blank' + '\">' + appname + '</a>';
+
+/**
+ * Page editor area, widget value field, add, delete and play page buttons.
+ */
+var cdiv = $('contentdiv');
+var ediv = $('editdiv');
+var evisible = true;
+var pdiv = $('playdiv');
+var wvalue = $('widgetValue');
+var wadd = $('addWidgetButton');
+var wdelete = $('deleteWidgetButton');
+var wcopy = $('copyWidgetButton');
+var pplay = $('playPageButton');
+
+// Set images
+$('editgrid').parentNode.style.background = 'url(\'' + ui.b64img(appcache.get('/public/grid72.b64')) + '\')';
+$('imgimg').src = ui.b64img(appcache.get('/public/img.b64'));
+
+// Position edit and play divs inside the content div
+ediv.style.position = 'absolute';
+ediv.style.top = cdiv.offsetTop + 'px';
+pdiv.style.position = 'absolute';
+pdiv.style.top = cdiv.offsetTop + 'px';
+
+// Position background divs
+var wvbackground = $('widgetValueBackground');
+var wvtable = $('widgetValueTable');
+wvbackground.style.top = ui.pixpos(wvtable.offsetTop);
+
+/**
+ * Adjust widget value field size.
+ */
+function resizeFields() {
+    wvalue.style.width = '0px';
+    wvalue.style.width = ui.pixpos(wvalue.parentNode.clientWidth - 18);
+    return true;
+}
+
+resizeFields();
+window.onresize = resizeFields;
+
+// Init component references
+var editWidget = sca.component('EditWidget');
+var pages = sca.reference(editWidget, 'pages');
+
+/**
+ * Page editing functions.
+ */
+var page = {};
+
+/**
+ * Default positions and sizes.
+ */
+page.palcx = 2500;
+
+/**
+ * Init a page editor. Works with all browsers except IE.
+ */
+page.edit = function(elem, wvalue, wadd, wcopy, wdelete, onchange, onselect) {
+
+    // Track element dragging and selection
+    page.dragging = null;
+    page.selected = null;
+    wvalue.disabled = true;
+    wvalue.style.visibility = 'hidden';
+    wcopy.disabled = true;
+    wdelete.disabled = true;
+
+    // Trigger widget select and page change events
+    page.onpagechange = onchange;
+    page.onwidgetselect = onselect;
+
+    /**
+     * Handle a mouse down event.
+     */
+    elem.onmousedown = function(e) {
+
+        // On mouse controlled devices, engage the click component selection
+        // logic right away
+        if (typeof e.touches == 'undefined')
+            elem.onclick(e);
+
+        // Find a draggable element
+        var dragging = page.draggable(e.target, elem);
+        if (dragging == null || dragging != page.selected)
+            return true;
+        page.dragging = dragging;
+
+        // Remember mouse position
+        var pos = typeof e.touches != "undefined"? e.touches[0] : e;
+        page.dragX = pos.screenX;
+        page.dragY = pos.screenY;
+
+        if (e.preventDefault)
+            e.preventDefault();
+        else
+            e.returnValue = false;
+        return true;
+    };
+
+    // Support touch devices
+    elem.ontouchstart = elem.onmousedown;
+
+    /**
+     * Handle a mouse up event.
+     */
+    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);
+
+        // Forget dragged element
+        page.dragging = null;
+
+        // 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;
+
+        // Get the mouse position
+        var pos = typeof e.touches != "undefined"? e.touches[0] : e;
+        if (pos.screenX == page.dragX && pos.screenY == page.dragY)
+            return true;
+
+        // Compute position of dragged element
+        var curX = ui.numpos(page.dragging.style.left);
+        var curY = ui.numpos(page.dragging.style.top);
+        var newX = curX + (pos.screenX - page.dragX);
+        var newY = curY + (pos.screenY - page.dragY);
+        if (newX >= page.palcx)
+            page.dragX = pos.screenX;
+        else
+            newX = page.palcx;
+        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;
+    };
+
+    // Support touch devices
+    elem.ontouchmove = window.onmousemove;
+
+    /**
+     * Handle a mouse click event.
+     */
+    elem.onclick = function(e) {
+
+        // Find selected element
+        var selected = page.draggable(e.target, elem);
+        if (selected == null) {
+            if (page.selected != null) {
+
+                // Reset current selection
+                page.widgetselect(page.selected, false, wvalue, wcopy, wdelete);
+                page.selected = null;
+
+                // Trigger widget select event
+                page.onwidgetselect(null);
+            }
+
+            // Dismiss the palette
+            if (ui.numpos(elem.style.left) != (page.palcx * -1))
+                elem.style.left = ui.pixpos(page.palcx * -1);
+
+            return true;
+        }
+
+        // Deselect the previously selected element
+        page.widgetselect(page.selected, false, wvalue, wcopy, wdelete);
+
+        // Clone element dragged from palette
+        if (selected.id.substring(0, 8) == 'palette:') {
+            page.selected = page.clone(selected);
+
+            // Move into the editing area and hide the palette
+            page.selected.style.left = ui.pixpos(ui.numpos(page.selected.style.left) + page.palcx);
+            page.selected.cover.style.left = ui.pixpos(ui.numpos(page.selected.cover.style.left) + page.palcx);
+            elem.style.left = ui.pixpos(page.palcx * -1);
+        
+            // Bring it to the top
+            page.bringtotop(page.selected);
+
+            // Trigger page change event
+            page.onpagechange(true);
+
+        } else {
+
+            // Bring selected element to the top
+            page.selected = selected;
+            page.bringtotop(page.selected);
+        }
+
+        // Select the element
+        page.widgetselect(page.selected, true, wvalue, wcopy, wdelete);
+
+        // Trigger widget select event
+        page.onwidgetselect(page.selected);
+
+        return true;
+    };
+
+    /**
+     * Handle field on change events.
+     */
+    wvalue.onchange = wvalue.onblur = function() {
+        if (page.selected == null)
+            return false;
+        page.settext(page.selected, wvalue.value);
+        page.selected.cover.style.width = ui.pixpos(page.selected.clientWidth + 4);
+        page.selected.cover.style.height = ui.pixpos(page.selected.clientHeight + 4);
+
+        // Trigger page change event
+        page.onpagechange(true);
+        return false;
+    };
+
+    // Handle add widget event.
+    wadd.onclick = function() {
+
+        // Show the palette
+        elem.style.left = ui.pixpos(0);
+        return false;
+    };
+
+    // Handle delete event.
+    wdelete.onclick = function() {
+        if (page.selected == null)
+            return false;
+
+        // Reset current selection
+        page.widgetselect(page.selected, false, wvalue, wcopy, wdelete);
+
+        // Remove selected widget
+        page.selected.parentNode.removeChild(page.selected);
+        page.selected.cover.parentNode.removeChild(page.selected.cover);
+        page.selected = null;
+
+        // Trigger widget select event
+        page.onwidgetselect(null);
+
+        // Trigger page change event
+        page.onpagechange(true);
+        return false;
+    };
+
+    // Handle copy event.
+    wcopy.onclick = function() {
+        if (page.selected == null)
+            return false;
+        if (page.selected.id.substring(0, 8) == 'palette:')
+            return false;
+
+        // Reset current selection
+        page.widgetselect(page.selected, false, wvalue, wcopy, wdelete);
+
+        // Clone selected widget
+        page.selected = page.clone(page.selected);
+
+        // Move 10 pixels down right
+        page.selected.style.left = ui.pixpos(ui.numpos(page.selected.style.left) + 10);
+        page.selected.style.top = ui.pixpos(ui.numpos(page.selected.style.top) + 10);
+        page.selected.cover.style.left = ui.pixpos(ui.numpos(page.selected.cover.style.left) + 10);
+        page.selected.cover.style.top = ui.pixpos(ui.numpos(page.selected.cover.style.top) + 10);
+    
+        // Bring it to the top
+        page.bringtotop(page.selected);
+
+        // Select the element
+        page.widgetselect(page.selected, true, wvalue, wcopy, wdelete);
+
+        // Trigger widget select event
+        page.onwidgetselect(page.selected);
+
+        // 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.
+ */
+page.text = function(e) {
+    function formula(e) {
+        var f = e.id;
+        if (f.substring(0, 5) != 'page:')
+            return '=' + f;
+        return '';
+    }
+
+    function constant(e, f) {
+        if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') {
+            var t = car(childElements(e)).innerHTML;
+            return t == f? '' : t;
+        }
+        if (e.className == 'button' || e.className == 'checkbox') {
+            var t = car(childElements(e)).value;
+            return t == f? '' : t;
+        }
+        if (e.className == 'entry' || e.className == 'password') {
+            var t = car(childElements(e)).defaultValue;
+            return t == f? '' : t;
+        }
+        if (e.className == 'select') {
+            var t = car(childElements(car(childElements(e)))).value;
+            return t == f? '' : t;
+        }
+        if (e.className == 'link') {
+            var lhr = car(childElements(e)).href;
+            var hr = lhr.substring(0, 5) == 'link:'? lhr.substring(5) : '';
+            var t = car(childElements(car(childElements(e)))).innerHTML;
+            return t == f? hr : (t == hr? hr : (t == ''? hr : hr + ',' + t));
+        }
+        if (e.className == 'img') {
+            var src = car(childElements(e)).src;
+            return src == location.href? '' : src;
+        }
+        if (e.className == 'iframe') {
+            var hr = car(childElements(e)).href;
+            return hr == location.href? '' : hr;
+        }
+        if (e.className == 'list')
+            return '';
+        if (e.className == 'table')
+            return '';
+        return '';
+    }
+
+    var f = formula(e);
+    var c = constant(e, f);
+    return f == ''? c : (c == ''? f : f + ',' + c);
+};
+
+/**
+ * Return true if a widget has editable text.
+ */
+page.hastext = function(e) {
+    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section')
+        return true;
+    if (e.className == 'button' || e.className == 'checkbox')
+        return true;
+    if (e.className == 'entry' || e.className == 'password')
+        return true;
+    if (e.className == 'select')
+        return false;
+    if (e.className == 'link')
+        return true;
+    if (e.className == 'img')
+        return true;
+    if (e.className == 'iframe')
+        return true;
+    if (e.className == 'list')
+        return false;
+    if (e.className == 'table')
+        return false;
+    return false;
+};
+
+/**
+ * Set the text of a widget.
+ */
+page.settext = function(e, t) {
+    function formula(t) {
+        if (t.length > 1 && t.substring(0, 1) == '=')
+            return car(t.split(','));
+        return '';
+    }
+
+    function constant(t) {
+        return t.length > 1 && t.substring(0, 1) == '='? cdr(t.split(',')) : t.split(',');
+    }
+
+    var f = formula(t);
+    var c = constant(t);
+
+    e.id = f != ''? f.substring(1) : ('page:' + e.className);
+
+    if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') {
+        car(childElements(e)).innerHTML = isNil(c)? f : car(c);
+        return t;
+    }
+    if (e.className == 'button' || e.className == 'entry' || e.className == 'password') {
+        car(childElements(e)).defaultValue = isNil(c)? f : car(c);
+        return t;
+    }
+    if (e.className == 'checkbox') {
+        car(childElements(e)).value = isNil(c)? f : car(c);
+        map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = isNil(c)? f : car(c); return n; }, nodeList(e.childNodes));
+        return t;
+    }
+    if (e.className == 'select') {
+        var ce = car(childElements(car(childElements(e))));
+        ce.value = isNil(c)? f : car(c);
+        ce.innerHTML = isNil(c)? f : car(c);
+        return t;
+    }
+    if (e.className == 'list') {
+        e.innerHTML = '<table class="datatable" style="width: 100%;;"><tr><td class="datatd">' + (isNil(c)? f : car(c)) + '</td></tr><tr><td class="datatd">...</td></tr></table>';
+        return t;
+    }
+    if (e.className == 'table') {
+        e.innerHTML = '<table class="datatable" style="width: 100%;"><tr><td class="datatdl">' + (isNil(c)? f : car(c)) + '</td><td class="datatdr">...</td></tr><tr><td class="datatdl">...</td><td class="datatdr">...</td></tr></table>';
+        return t;
+    }
+    if (e.className == 'link') {
+        var ce = car(childElements(e));
+        ce.href = isNil(c)? 'link:/index.html' : ('link:' + car(c));
+        car(childElements(ce)).innerHTML = isNil(c)? (f != ''? f : '/index.html') : isNil(cdr(c))? (f != ''? f : car(c)) : cadr(c);
+        return t;
+    }
+    if (e.className == 'img') {
+        car(childElements(e)).src = isNil(c)? '/public/img.png' : car(c);
+        return t;
+    }
+    if (e.className == 'iframe') {
+        car(childElements(e)).href = isNil(c)? '/public/iframe-min.html' : car(c);
+        return t;
+    }
+    return '';
+};
+
+/**
+ * Initial fixup of a widget.
+ */
+page.fixupwidget = function(e) {
+    if (e.className == 'iframe') {
+        var f = car(childElements(e));
+        //e.innerHTML = '<iframe src="' + f.href + '" frameborder="no" scrolling="no"></iframe>';
+        return e;
+    }
+    if (e.className == 'section') {
+        e.style.width = '100%';
+        return e;
+    }
+    if (e.className == 'list') {
+        e.style.width = '100%';
+        car(childElements(e)).style.width = '100%';
+        return e;
+    }
+    if (e.className == 'table') {
+        e.style.width = '100%';
+        car(childElements(e)).style.width = '100%';
+        return e;
+    }
+    if (e.className == 'img') {
+        var i = car(childElements(e));
+        if (i.src != '' && i.src.substring(0, 5) == 'data:')
+            i.src = '/public/img.png';
+        return e;
+    }
+    return e;
+}
+
+/**
+ * Find a draggable element in a hierarchy of elements.
+ */
+page.draggable = function(n, e) {
+    if (n == e)
+        return null;
+    if (n.id != '')
+        return n;
+    if (n.covered)
+        return n.covered;
+    return page.draggable(n.parentNode, e);
+}
+
+/**
+ * Align a pos along a 9pixel grid.
+ */
+page.gridsnap = function(x) {
+    return Math.round(x / 9) * 9;
+}
+
+/**
+ * Bring an element and its parent to the top.
+ */
+page.bringtotop = function(n) {
+    n.parentNode.appendChild(n);
+    n.cover.parentNode.appendChild(n.cover);
+}
+
+/**
+ * Draw widget selection.
+ */
+page.widgetselect = function(n, s, wvalue, wcopy, wdelete) {
+    if (isNil(n) || !s) {
+        // Clear the widget value field
+        wvalue.value = '';
+        wvalue.disabled = true;
+        wvalue.style.visibility = 'hidden';
+        wcopy.disabled = true;
+        wdelete.disabled = true;
+
+        // Clear the widget outline
+        if (!isNil(n))
+            n.cover.style.borderWidth = '0px';
+        return true;
+    }
+
+    // Update the widget value field
+    wvalue.value = page.text(n);
+    wvalue.disabled = false;
+    wvalue.style.visibility = 'visible';
+    wcopy.disabled = false;
+    wdelete.disabled = false;
+
+    // Outline the widget
+    n.cover.style.borderWidth = '2px';
+    return true;
+};
+
+/**
+ * Cover a page element with a <span> element to prevent
+ * any input events to reach it.
+ */
+page.cover = function(e) {
+    if (e.id == '' || isNil(e.style))
+        return e;
+    var cover = document.createElement('div');
+    cover.style.position = 'absolute';
+    cover.style.left = ui.pixpos(ui.numpos(e.style.left) - 2);
+    cover.style.top = ui.pixpos(ui.numpos(e.style.top) - 2);
+    cover.style.width = ui.pixpos(e.clientWidth + 4);
+    cover.style.height = ui.pixpos(e.clientHeight + 4);
+    cover.style.visibility = 'inherit';
+    cover.style.borderStyle = 'solid';
+    cover.style.borderWidth = '0px';
+    cover.style.borderColor = '#598edd';
+    cover.style.padding = '0px';
+    cover.style.margin = '0px';
+    cover.covered = e;
+    e.cover = cover;
+    e.parentNode.appendChild(cover);
+    return e;
+}
+
+/**
+ * Clone a palette element.
+ */
+page.clone = function(e) {
+
+    /**
+     * Clone an element's HTML.
+     */
+    function mkclone(e) {
+        var ne = document.createElement('span');
+
+        // Skip the palette: prefix
+        ne.id = 'page:' + e.id.substr(8);
+
+        // Copy the class and HTML content
+        ne.className = e.className;
+        ne.innerHTML = e.innerHTML;
+
+        // Fixup the widget style
+        page.fixupwidget(ne);
+
+        return ne;
+    }
+
+    /**
+     * Clone an element's position.
+     */
+    function posclone(ne, e) {
+        ne.style.position = 'absolute';
+        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;
+    }
+
+    return posclone(mkclone(e), e);
+};
+
+/**
+ * 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 = '';
+
+/**
+ * Track the current widget.
+ */
+var widget = null;
+
+/**
+ * Get and display an app page.
+ */
+function getpage(name, ediv) {
+    if (isNil(name))
+        return false;
+    showStatus('Loading');
+
+    return pages.get(name, function(doc) {
+
+        // Stop now if we didn't get a page
+        if (doc == null) {
+            showStatus('No data');
+            return false;
+        }
+        showStatus(defaultStatus());
+
+        // 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"></div>';
+        else
+            buffer.innerHTML = writeStrings(writeXML(el, false));
+
+        // Remove any existing page nodes from the editor div
+        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(ediv.childNodes));
+
+        map(function(e) {
+            ediv.removeChild(e);
+        }, fnodes);
+
+        // Append new page nodes to editor
+        map(function(e) {
+                ediv.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(ediv);
+        return true;
+    });
+}
+
+/**
+ * Handle add widget button click event.
+ */
+wadd.onclick = function(e) {
+    // Show the widget palette
+    ediv.style.left = ui.pixpos(0);
+};
+
+/**
+ * Return the current page XHTML content.
+ */
+function pagexhtml(ediv) {
+
+    // Copy page DOM to hidden buffer
+    var buffer = $('buffer');
+    buffer.innerHTML = '<div id="page"></div>'
+    var div = buffer.childNodes[0];
+
+    // Capture the nodes inside the page div
+    div.innerHTML = ediv.innerHTML;
+    var nodes = nodeList(div.childNodes);
+    map(function(e) {
+        div.removeChild(e);
+        return e;
+    }, nodes);
+
+    // 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;
+    }, nodes);
+
+    // 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 the sorted nodes back to the div in order
+    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(newxml) {
+    showStatus('Saving');
+
+    // Get the current page XHTML content
+    savedpagexhtml = newxml;
+
+    // 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">' +
+        newxml + '</content></entry>';
+
+    pages.put(appname, entry, function(e) {
+        if (e) {
+            showStatus('Local copy');
+            return false;
+        }
+        showStatus('Saved');
+        return false;
+    });
+    return true;
+};
+
+/**
+ * Handle a page change event
+ */
+function onpagechange(prop) {
+    var newxml = pagexhtml(ediv);
+    if (savedpagexhtml == newxml)
+        return false;
+    showStatus('Modified');
+
+    // Save property changes right away
+    if (prop)
+        return save(newxml);
+
+    // Autosave other changes after 1 second
+    setTimeout(function() {
+        if (savedpagexhtml == newxml) {
+            showStatus('Saved');
+            return false;
+        }
+        return save(newxml);
+    }, 1000);
+    return true;
+}
+
+/**
+ * Handle a widget select event.
+ */
+function onwidgetselect(w) {
+    if (w == widget)
+        return true;
+    widget = w;
+
+    function updateButton(b, v) {
+        b.style.color = v? '#000000' : '#808080';
+    }
+
+    updateButton(wdelete, !isNil(w));
+    updateButton(wcopy, !isNil(w));
+    return true;
+}
+
+/**
+ * Play page in a frame.
+ */
+function playpage() {
+    if (!evisible)
+        return true;
+    page.widgetselect(widget, false, wvalue, wcopy, wdelete);
+    page.selected = null;
+    wvalue.value = applink(appname);
+    pplay.innerHTML = '&lt;';
+    evisible = false;
+    pdiv.style.visibility = 'visible';
+    pdiv.innerHTML = '';
+    pdiv.innerHTML = '<iframe id="playappframe" style="position: relative; height: 5000px; width: 2500px; border: 0px;" scrolling="no" frameborder="0" src="/' +
+                        appname + '"></iframe>';
+    setTimeout(function() {
+        ediv.style.visibility = 'hidden'
+    }, 0);
+    return true;
+}
+
+/**
+ * Show the page editor.
+ */
+function showedit() {
+    if (evisible)
+        return true;
+    pplay.innerHTML = '&gt;';
+    ediv.style.visibility = 'visible'
+    evisible = true;
+    page.widgetselect(widget, true, wvalue, wcopy, wdelete);
+    page.selected = widget;
+    setTimeout(function() {
+        pdiv.style.visibility = 'hidden';
+        pdiv.innerHTML = '';
+    }, 0);
+    return true;
+}
+
+/**
+ * Handle play page button event.
+ */
+pplay.onclick = function() {
+    if (!evisible)
+        return showedit();
+    return playpage();
+}
+
+// Initialize the page editor
+page.edit(ediv, wvalue, wadd, wcopy, wdelete, onpagechange, onwidgetselect);
+
+// Get and display the current app page
+getpage(appname, ediv);
+
+</script>
+
+</div>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/app.b64 b/sca-cpp/trunk/hosting/server/htdocs/public/app.b64
new file mode 100644
index 0000000000..7ed235aa14
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/app.b64
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAgMAAABjUWAiAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFyN+N+dR1/PCI////6HjE5gAAADJJREFUKM9j+I8EPjBQifeBAQSY6coLBYN6inhaq0Bg6SDn/f//akB466ExTS6P2ukMAKumzarJO/66AAAAAElFTkSuQmCC
+\ No newline at end of file
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/app.png b/sca-cpp/trunk/hosting/server/htdocs/public/app.png
new file mode 100644
index 0000000000..1f73274b76
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/app.png
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/app.xcf b/sca-cpp/trunk/hosting/server/htdocs/public/app.xcf
new file mode 100644
index 0000000000..741b7ff43f
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/app.xcf
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/delete.b64 b/sca-cpp/trunk/hosting/server/htdocs/public/delete.b64
new file mode 100644
index 0000000000..c8137d7ab4
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/delete.b64
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAAZiS0dEANAAPwBBXloXjQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sEFhQaKzNh4PgAAAMKSURBVEjHxZZPTBNBFMa/maVbWjcUi0YiIHIoNBADTUgsqCWgUUFjwkk5CXLUBKIc9KIXjx64oMSDoiggGC8koImCGDWYkADRIiQQgikWCq0WoXW33R0PpYjSLeWP8btN3sv85s17894QrKNeIBng8gFmJSDZgGIAqJeBjQCkH5AHioGZaHsQNUMP+ByKYB0ByVjvIAxsUkHcrRJI9pggXYBWB1pLQUqxQSlg3X4o9WWAqArpAhL04JoIYMQmxQCPD3JlGbCwBtIFaPXgWrcC+AtUEY6Ihg060NrtACyf3KgDrQ2v6e8kbzwH0URBSnvA56xAKIJ1kRzNbS2ZNhYssjodVj41VbPaxqemaqxOh9XGgkXmtpbMyKDQvqQXSKbg2iKGzfPE0v8uV7BYDIuDg95B66FhJkmM8DyxfHifK+TlGRaHhryDBwuHmSSxyBUnn6Ohh6aSQElin86U26XZWVGwWAxZD5tMAGBufmAS8vIMkssl2s+Uj6gBQuLySS/oTQpyONr9GmxHhAMvnltovJZ+73vjTiyyJSmipHw8WTrkfd33Y52385arAr1EAF00R3HqixRwu38mnT61O35/uh4AJq7Ujc0/affEUGsCDfWi9TXX3uEOeDwBABCnp/3OO42uGPuAgQLUG4urueVRlsZo1ACANiVFZ7rTkBFjMXtpqJtGV9q1q3uNJ47vlpd88kTt5VEWCLLk6gtpeyrP74qheY5wlaB6AhSqOSUUFOzIun8vh8RxZKKmZvRrw20X0WjkxCKbceexo0Z3Z+d8wDUXVIeQdgrIA6rFl5DAmVsfZ1MtT+faO5zOxrtzADB1/Ybj28tX85wgxOU8e5pN9XqqHos8QIuBGQY2GTEPD5tM8en79P7x8aWxqurx1bbPZytGRYfDrzOZBHPzA5PanCkGZki4d3GQG7DNksFdLIFkpwBQAsmugHVvJ0AB6w5PypW79EOpZ4BnOwAM8Pih1P/R6gGgDBB9kCu3Clo1GcU1kGXQgg9yxWavTgHrXp6IC///t/Iv/l2/AGa0Qa2X0eC0AAAAAElFTkSuQmCC
+\ No newline at end of file
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/delete.png b/sca-cpp/trunk/hosting/server/htdocs/public/delete.png
new file mode 100644
index 0000000000..fb56bae030
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/delete.png
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/delete.xcf b/sca-cpp/trunk/hosting/server/htdocs/public/delete.xcf
new file mode 100644
index 0000000000..7691f50cc5
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/delete.xcf
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/grid72.b64 b/sca-cpp/trunk/hosting/server/htdocs/public/grid72.b64
new file mode 100644
index 0000000000..34be13e5ca
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/grid72.b64
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAgMAAAAog1vUAAAABGdBTUEAALGPC/xhBQAAAAlQTFRFwuD84/T+////fj9v9QAAACxJREFUOMtjWLUqa9WsVctWrYQxVjAMCqFQdBDCMOrUUaeOOnXUqYPPqZgAABmg/C7pJC7lAAAAAElFTkSuQmCC
+\ No newline at end of file
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/grid72.png b/sca-cpp/trunk/hosting/server/htdocs/public/grid72.png
new file mode 100644
index 0000000000..cf6008171a
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/grid72.png
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/iframe.html b/sca-cpp/trunk/hosting/server/htdocs/public/iframe.html
new file mode 100644
index 0000000000..e2b862dbaa
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/iframe.html
@@ -0,0 +1,28 @@
+<!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>
+</head>
+<body style="margin:3px; padding: 0px; background-color: #dcdcdc;">
+
+<div>frame ...</div>
+
+</body>
+</html>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/img.b64 b/sca-cpp/trunk/hosting/server/htdocs/public/img.b64
new file mode 100644
index 0000000000..97dae687a0
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/img.b64
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAIRQTFRFwdt/w9yEw9+MxN2GxN6NxN+Oxd2Mxd6Nxt6Lx96Lx96Nx9+NyN6MyN+MyN+N8u2I8+2I+NBq+NFr+NFt+NFu+NJz+NN0+dR1+dR3+dZw+dh4+9Fy+9Nz++5++++B+++F/NNz/PCH/PCI/PGW/PKc/fKd/vzp/vzq/v7+/v/z/9Jx////nQZfHwAAAIxJREFUOMtj0CYAGKiiQANdUAPdBAZmFMCIYQUzHwrgpKECblYwYEJ2LYoCHi0FMBCEAmF0E3hkxFGABJICXnYWFhY2aVE4EENTwCWgCARKCCCFoUAJFQw9BYycnBz8eBSA04cqPhNAQIX+CiSFhIRE8CiQ10ROMNgUqKNnHGU5FCCrhqZAg7Z5Ey8AALiBh6brcmloAAAAAElFTkSuQmCC
+\ No newline at end of file
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/img.png b/sca-cpp/trunk/hosting/server/htdocs/public/img.png
new file mode 100644
index 0000000000..2363b25e8e
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/img.png
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/img.xcf b/sca-cpp/trunk/hosting/server/htdocs/public/img.xcf
new file mode 100644
index 0000000000..ffcc124584
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/img.xcf
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/notauth/index.html b/sca-cpp/trunk/hosting/server/htdocs/public/notauth/index.html
new file mode 100644
index 0000000000..21f70f8a65
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/notauth/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>Sorry</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<base href="/public/notauth/"/>
+<script type="text/javascript">
+
+window.appcache = {};
+
+/**
+ * Get and cache a resource.
+ */
+appcache.get = function(uri) {
+    var h = uri.indexOf('#');
+    var u = h == -1? uri : uri.substring(0, h);
+
+    // Get resource from local storage first
+    var item = localStorage.getItem(u);
+    if (item != null && item != '')
+        return item;
+
+    // Get resource from network
+    var http = new XMLHttpRequest();
+    http.open("GET", u, false);
+    http.send(null);
+    if (http.status == 200) {
+        if (http.getResponseHeader("X-Login") != null) {
+            if (log) log('http error', u, 'X-Login');
+            return null;
+        } else if (http.responseText == '' || http.getResponseHeader("Content-Type") == null) {
+            if (log) log('http error', u, 'No-Content');
+            return null;
+        }
+        localStorage.setItem(u, http.responseText);
+        return http.responseText;
+    }
+    if (log) log('http error', u, http.status, http.statusText);
+    return null;
+};
+
+// Load Javascript and CSS
+(function() {
+    var bootjs = document.createElement('script');
+    bootjs.type = 'text/javascript';
+    bootjs.text = appcache.get('/all-min.js');
+    document.head.appendChild(bootjs);
+    document.head.appendChild(ui.declareCSS(appcache.get('/ui-min.css')));
+})();
+
+</script>
+</head>
+<body class="delayed" onload="onload();">
+<div id="bodydiv" class="mainbodydiv">
+
+<div id="headdiv" class="hsection">
+<script type="text/javascript">
+(function() {
+$('headdiv').appendChild(ui.declareScript(appcache.get('/public/config-min.js')));
+})();
+</script>
+</div>
+
+<div id="menu"></div>
+
+<div id="content" class="viewloaded3d">
+
+<table style="width: 100%;">
+<tr><td><h2><span id="h1"></span></h2></td></tr>
+</table>
+
+<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>
+
+<script type="text/javascript">
+
+// Set page title
+$('h1').innerHTML = ui.hometitle(location.hostname);
+
+// Init div variables
+var mdiv = $('menu'); 
+var cdiv = $('content'); 
+
+/**
+ * Build and show the menu bar.
+ */
+function showmenu(mdiv) {
+    mdiv.innerHTML = ui.menubar(
+        mklist(ui.menu('Home', '/', '_view', false)),
+            mklist(ui.signedin()? ui.menufunc('Sign out', 'logout();', false) : ui.menu('Sign in', '/login/', '_self', false)));
+}
+
+showmenu(mdiv);
+cdiv.style.top = ui.pixpos(mdiv.offsetTop + mdiv.offsetHeight);
+
+/**
+ * Log the current user out.
+ */
+function logout() {
+    // Clear session cookie and user-specific local storage entries
+    var reset = 'TuscanyOpenAuth=; expires=' + new Date(1970,01,01).toGMTString() + '; domain=.' + domainname(window.location.hostname) + '; path=/';
+    document.cookie = reset;
+    localStorage.removeItem('/r/EditWidget/accounts');
+    localStorage.removeItem('/r/EditWidget/dashboards');
+    //localStorage.clear();
+    document.location = '/login/';
+    return true;
+}
+
+/**
+ * Handle orientation change.
+ */
+document.body.onorientationchange = function(e) {
+    //log('onorientationchange');
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    return true;
+};
+
+/**
+ * Load post processing.
+ */
+function onload() {
+    //log('onload');
+
+    // Show the page
+    document.body.style.visibility = 'visible';
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+    return true;
+}
+
+</script>
+
+<div id="footdiv" class="fsection">
+</div>
+
+</div>
+</body>
+</html>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/notfound/index.html b/sca-cpp/trunk/hosting/server/htdocs/public/notfound/index.html
new file mode 100644
index 0000000000..839cc3395b
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/notfound/index.html
@@ -0,0 +1,167 @@
+<!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>Page not found</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<base href="/public/notfound/"/>
+<script type="text/javascript">
+
+window.appcache = {};
+
+/**
+ * Get and cache a resource.
+ */
+appcache.get = function(uri) {
+    var h = uri.indexOf('#');
+    var u = h == -1? uri : uri.substring(0, h);
+
+    // Get resource from local storage first
+    var item = localStorage.getItem(u);
+    if (item != null && item != '')
+        return item;
+
+    // Get resource from network
+    var http = new XMLHttpRequest();
+    http.open("GET", u, false);
+    http.send(null);
+    if (http.status == 200) {
+        if (http.getResponseHeader("X-Login") != null) {
+            if (log) log('http error', u, 'X-Login');
+            return null;
+        } else if (http.responseText == '' || http.getResponseHeader("Content-Type") == null) {
+            if (log) log('http error', u, 'No-Content');
+            return null;
+        }
+        localStorage.setItem(u, http.responseText);
+        return http.responseText;
+    }
+    if (log) log('http error', u, http.status, http.statusText);
+    return null;
+};
+
+// Load Javascript and CSS
+(function() {
+    var bootjs = document.createElement('script');
+    bootjs.type = 'text/javascript';
+    bootjs.text = appcache.get('/all-min.js');
+    document.head.appendChild(bootjs);
+    document.head.appendChild(ui.declareCSS(appcache.get('/ui-min.css')));
+})();
+
+</script>
+</head>
+<body class="delayed" onload="onload();">
+<div id="bodydiv" class="mainbodydiv">
+
+<div id="headdiv" class="hsection">
+<script type="text/javascript">
+(function() {
+$('headdiv').appendChild(ui.declareScript(appcache.get('/public/config-min.js')));
+})();
+</script>
+</div>
+
+<div id="menu"></div>
+
+<div id="content" class="viewloaded3d">
+
+<table style="width: 100%;">
+<tr><td><h2><span id="h1"></span></h2></td></tr>
+</table>
+
+<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 = ui.hometitle(location.hostname);
+
+// Init div variables
+var mdiv = $('menu'); 
+var cdiv = $('content'); 
+
+/**
+ * Build and show the menu bar.
+ */
+function showmenu(mdiv) {
+    mdiv.innerHTML = ui.menubar(
+        mklist(ui.menu('Home', '/', '_view', false)),
+            mklist(ui.signedin()? ui.menufunc('Sign out', 'logout();', false) : ui.menu('Sign in', '/login/', '_self', false)));
+}
+
+showmenu(mdiv);
+cdiv.style.top = ui.pixpos(mdiv.offsetTop + mdiv.offsetHeight);
+
+/**
+ * Log the current user out.
+ */
+function logout() {
+    // Clear session cookie and user-specific local storage entries
+    var reset = 'TuscanyOpenAuth=; expires=' + new Date(1970,01,01).toGMTString() + '; domain=.' + domainname(window.location.hostname) + '; path=/';
+    document.cookie = reset;
+    localStorage.removeItem('/r/EditWidget/accounts');
+    localStorage.removeItem('/r/EditWidget/dashboards');
+    //localStorage.clear();
+    document.location = '/login/';
+    return true;
+}
+
+/**
+ * Handle orientation change.
+ */
+document.body.onorientationchange = function(e) {
+    //log('onorientationchange');
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    return true;
+};
+
+/**
+ * Load post processing.
+ */
+function onload() {
+    //log('onload');
+
+    // Show the page
+    document.body.style.visibility = 'visible';
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+    return true;
+}
+
+</script>
+
+<div id="footdiv" class="fsection">
+</div>
+
+</div>
+</body>
+</html>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/notyet/index.html b/sca-cpp/trunk/hosting/server/htdocs/public/notyet/index.html
new file mode 100644
index 0000000000..c014c7266e
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/notyet/index.html
@@ -0,0 +1,167 @@
+<!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>Page not found</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<base href="/public/notyet/"/>
+<script type="text/javascript">
+
+window.appcache = {};
+
+/**
+ * Get and cache a resource.
+ */
+appcache.get = function(uri) {
+    var h = uri.indexOf('#');
+    var u = h == -1? uri : uri.substring(0, h);
+
+    // Get resource from local storage first
+    var item = localStorage.getItem(u);
+    if (item != null && item != '')
+        return item;
+
+    // Get resource from network
+    var http = new XMLHttpRequest();
+    http.open("GET", u, false);
+    http.send(null);
+    if (http.status == 200) {
+        if (http.getResponseHeader("X-Login") != null) {
+            if (log) log('http error', u, 'X-Login');
+            return null;
+        } else if (http.responseText == '' || http.getResponseHeader("Content-Type") == null) {
+            if (log) log('http error', u, 'No-Content');
+            return null;
+        }
+        localStorage.setItem(u, http.responseText);
+        return http.responseText;
+    }
+    if (log) log('http error', u, http.status, http.statusText);
+    return null;
+};
+
+// Load Javascript and CSS
+(function() {
+    var bootjs = document.createElement('script');
+    bootjs.type = 'text/javascript';
+    bootjs.text = appcache.get('/all-min.js');
+    document.head.appendChild(bootjs);
+    document.head.appendChild(ui.declareCSS(appcache.get('/ui-min.css')));
+})();
+
+</script>
+</head>
+<body class="delayed" onload="onload();">
+<div id="bodydiv" class="mainbodydiv">
+
+<div id="headdiv" class="hsection">
+<script type="text/javascript">
+(function() {
+$('headdiv').appendChild(ui.declareScript(appcache.get('/public/config-min.js')));
+})();
+</script>
+</div>
+
+<div id="menu"></div>
+
+<div id="content" class="viewloaded3d">
+
+<table style="width: 100%;">
+<tr><td><h2><span id="h1"></span></h2></td></tr>
+</table>
+
+<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 = ui.hometitle(location.hostname);
+
+// Init div variables
+var mdiv = $('menu'); 
+var cdiv = $('content'); 
+
+/**
+ * Build and show the menu bar.
+ */
+function showmenu(mdiv) {
+    mdiv.innerHTML = ui.menubar(
+        mklist(ui.menu('Home', '/', '_view', false)),
+            mklist(ui.signedin()? ui.menufunc('Sign out', 'logout();', false) : ui.menu('Sign in', '/login/', '_self', false)));
+}
+
+showmenu(mdiv);
+cdiv.style.top = ui.pixpos(mdiv.offsetTop + mdiv.offsetHeight);
+
+/**
+ * Log the current user out.
+ */
+function logout() {
+    // Clear session cookie and user-specific local storage entries
+    var reset = 'TuscanyOpenAuth=; expires=' + new Date(1970,01,01).toGMTString() + '; domain=.' + domainname(window.location.hostname) + '; path=/';
+    document.cookie = reset;
+    localStorage.removeItem('/r/EditWidget/accounts');
+    localStorage.removeItem('/r/EditWidget/dashboards');
+    //localStorage.clear();
+    document.location = '/login/';
+    return true;
+}
+
+/**
+ * Handle orientation change.
+ */
+document.body.onorientationchange = function(e) {
+    //log('onorientationchange');
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    return true;
+};
+
+/**
+ * Load post processing.
+ */
+function onload() {
+    //log('onload');
+
+    // Show the page
+    document.body.style.visibility = 'visible';
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+    return true;
+}
+
+</script>
+
+<div id="footdiv" class="fsection">
+</div>
+
+</div>
+</body>
+</html>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/oops/index.html b/sca-cpp/trunk/hosting/server/htdocs/public/oops/index.html
new file mode 100644
index 0000000000..2ef7754919
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/oops/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>Oops</title>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+<base href="/public/oops/"/>
+<script type="text/javascript">
+
+window.appcache = {};
+
+/**
+ * Get and cache a resource.
+ */
+appcache.get = function(uri) {
+    var h = uri.indexOf('#');
+    var u = h == -1? uri : uri.substring(0, h);
+
+    // Get resource from local storage first
+    var item = localStorage.getItem(u);
+    if (item != null && item != '')
+        return item;
+
+    // Get resource from network
+    var http = new XMLHttpRequest();
+    http.open("GET", u, false);
+    http.send(null);
+    if (http.status == 200) {
+        if (http.getResponseHeader("X-Login") != null) {
+            if (log) log('http error', u, 'X-Login');
+            return null;
+        } else if (http.responseText == '' || http.getResponseHeader("Content-Type") == null) {
+            if (log) log('http error', u, 'No-Content');
+            return null;
+        }
+        localStorage.setItem(u, http.responseText);
+        return http.responseText;
+    }
+    if (log) log('http error', u, http.status, http.statusText);
+    return null;
+};
+
+// Load Javascript and CSS
+(function() {
+    var bootjs = document.createElement('script');
+    bootjs.type = 'text/javascript';
+    bootjs.text = appcache.get('/all-min.js');
+    document.head.appendChild(bootjs);
+    document.head.appendChild(ui.declareCSS(appcache.get('/ui-min.css')));
+})();
+
+</script>
+</head>
+<body class="delayed" onload="onload();">
+<div id="bodydiv" class="mainbodydiv">
+
+<div id="headdiv" class="hsection">
+<script type="text/javascript">
+(function() {
+$('headdiv').appendChild(ui.declareScript(appcache.get('/public/config-min.js')));
+})();
+</script>
+</div>
+
+<div id="menu"></div>
+
+<div id="content" class="viewloaded3d">
+
+<table style="width: 100%;">
+<tr><td><h2><span id="h1"></span></h2></td></tr>
+</table>
+
+<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 = ui.hometitle(location.hostname);
+
+// Init div variables
+var mdiv = $('menu'); 
+var cdiv = $('content'); 
+
+/**
+ * Build and show the menu bar.
+ */
+function showmenu(mdiv) {
+    mdiv.innerHTML = ui.menubar(
+        mklist(ui.menu('Home', '/', '_view', false)),
+            mklist(ui.signedin()? ui.menufunc('Sign out', 'logout();', false) : ui.menu('Sign in', '/login/', '_self', false)));
+}
+
+showmenu(mdiv);
+cdiv.style.top = ui.pixpos(mdiv.offsetTop + mdiv.offsetHeight);
+
+/**
+ * Log the current user out.
+ */
+function logout() {
+    // Clear session cookie and user-specific local storage entries
+    var reset = 'TuscanyOpenAuth=; expires=' + new Date(1970,01,01).toGMTString() + '; domain=.' + domainname(window.location.hostname) + '; path=/';
+    document.cookie = reset;
+    localStorage.removeItem('/r/EditWidget/accounts');
+    localStorage.removeItem('/r/EditWidget/dashboards');
+    //localStorage.clear();
+    document.location = '/login/';
+    return true;
+}
+
+/**
+ * Handle orientation change.
+ */
+document.body.onorientationchange = function(e) {
+    //log('onorientationchange');
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+
+    return true;
+};
+
+/**
+ * Load post processing.
+ */
+function onload() {
+    //log('onload');
+
+    // Show the page
+    document.body.style.visibility = 'visible';
+
+    // Scroll to the top and hide the address bar
+    window.scrollTo(0, 0);
+    return true;
+}
+
+</script>
+
+<div id="footdiv" class="fsection">
+</div>
+
+</div>
+</body>
+</html>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.b64 b/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.b64
new file mode 100644
index 0000000000..2239f6ae0f
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.b64
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAADkAAAA5CAIAAAADehTSAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sDGxMkCJXGmL8AAAHwSURBVGje7ZpNbhNBEIXf625sCzA/QUhkg8SGiGxZcpDcgRux5hLkEjkE7BAS9gIyk+muxyZIsSeOG09bsXHX0p4pfVNdP8/loSTsiTnsj1XWyrrMutVSG+ic/ftNqe1mIMtSjsPUu9EQJ6H/UdvNLr59cgwFWaM1p8dnLx6dFGYF6RhIXzLVGIChB3VX8Fg0DWrPqqyHxTq4MUnKKEEBoNvIN4uxiqTkofUXpgZKsqtMx3Djpb45lNWAxxbfXf6wtdH9+vkKBLLGrFLz4M1HTk+K5gAIgBCVcaTI1gOK/acazqqbw2PdYzE7tdyh9AFJTL0zNDIJMInAZpKPzBzmIZuUnjoa9QQkOBHAyWbigYDaTslybg/59f7Q4+003pqwhqcbqjLH9H2OXw0Ksl6XsWB/a39lhf1rz8vOnKoHKmtlrayVtbLuuc6SFK1Z2hEZkBwAv1us4zA9PT7rDX3v9dPiOeBxT/uY0A+qd6Pbl2Sax/kXDN9LlcrXO3Rk9k/QWluVtbIe2O5toBGwFum3bLH/pEso7RarrPNHH/D8JbBIpsjJqx2Lq3Xu2Xv61yvXJzf6/b3nK2Htyu8WB9P/XltF/wfVllgFxet9azGL+bjMD5IUYbPSMktwT8hRSdalkizcufKcs77vUlkr61bsD5lbwtgOKPT2AAAAAElFTkSuQmCC
+\ No newline at end of file
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.png b/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.png
new file mode 100644
index 0000000000..f22c33d2a0
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.png
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.xcf b/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.xcf
new file mode 100644
index 0000000000..fc713b478b
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/touchicon.xcf
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/user.b64 b/sca-cpp/trunk/hosting/server/htdocs/public/user.b64
new file mode 100644
index 0000000000..7ed235aa14
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/user.b64
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAgMAAABjUWAiAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFyN+N+dR1/PCI////6HjE5gAAADJJREFUKM9j+I8EPjBQifeBAQSY6coLBYN6inhaq0Bg6SDn/f//akB466ExTS6P2ukMAKumzarJO/66AAAAAElFTkSuQmCC
+\ No newline at end of file
diff --git a/sca-cpp/trunk/hosting/server/htdocs/public/user.png b/sca-cpp/trunk/hosting/server/htdocs/public/user.png
new file mode 100644
index 0000000000..1f73274b76
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/public/user.png
diff --git a/sca-cpp/trunk/hosting/server/htdocs/robots.txt b/sca-cpp/trunk/hosting/server/htdocs/robots.txt
new file mode 100644
index 0000000000..1f53798bb4
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/sca-cpp/trunk/hosting/server/htdocs/stats/index.html b/sca-cpp/trunk/hosting/server/htdocs/stats/index.html
new file mode 100644
index 0000000000..81f06c95e4
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/stats/index.html
@@ -0,0 +1,161 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="h1"></span><span id="appNameHeader"></span></h2></td>
+<td style="vertical-align: middle; text-align: right;"><span id="status" style="font-weight: bold; color: #808080;"></span></td>
+</tr>
+</table>
+
+<table style="width: 100%;">
+<tr>
+<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px; padding-left: 2px; padding-right: 2px; ">Stats</th>
+
+<th class="thl thr" style="width: 100%; text-align: right; padding-right: 2px; padding-top: 0px; padding-bottom: 0px;">
+<input type="button" class="graybutton" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px; height: 24px;" id="cloneApp" value="Clone" title="Clone this app"/>
+</th>
+</tr>
+</table>
+
+<form id="appForm">
+<table style="width: 100%;">
+<tr><tr><td><b>App Icon:</b></td></tr>
+<tr><td><img id="appimg" 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>
+
+<script type="text/javascript">
+
+// Get the app name
+var appname = ui.fragmentParams(location)['app'];
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname) + ' - Stats - ' + appname;
+$('appNameHeader').innerHTML = '<a href=\"/' + appname + '/\" target=\"' + '_blank' + '\">' + appname + '</a>';
+var tclone = isNil(config.clone)? 'Clone' : config.clone;
+$('cloneApp').value = tclone;
+$('cloneApp').title = tclone + ' this app';
+
+// Set images
+$('appimg').src = ui.b64img(appcache.get('/public/app.b64'));
+
+// Init service references
+var editWidget = sca.component("EditWidget");
+var dashboards = sca.reference(editWidget, "dashboards");
+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;
+    showStatus('Loading');
+
+    return apps.get(name, function(doc) {
+
+        // Stop now if we didn't get the app
+        if (doc == null) {
+            showStatus('No data');
+            return false;
+        }
+        showStatus(defaultStatus());
+
+        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) {
+    showStatus('Saving');
+    savedappentryxml = entryxml;
+    dashboards.put(appname, savedappentryxml, function(e) {
+        if (e) {
+            showStatus('Local copy');
+            return false;
+        }
+
+        showStatus('Saved');
+        return false;
+    });
+    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;
+    showStatus('Modified');
+    return save(entryxml);
+}
+
+$('appTitle').onchange = onappchange;
+$('appDescription').onchange = onappchange;
+
+/**
+ * Handle a form submit event.
+ */
+$('appForm').onsubmit = function() {
+    onappchange();
+    return false;
+};
+
+/**
+ * Handle Clone button event.
+ */
+$('cloneApp').onclick = function() {
+    return ui.navigate('/#view=clone&app=' + appname, '_view');
+}
+
+// Get the current app
+getapp(appname);
+
+</script>
+
+</div>
diff --git a/sca-cpp/trunk/hosting/server/htdocs/store/index.html b/sca-cpp/trunk/hosting/server/htdocs/store/index.html
new file mode 100644
index 0000000000..bcb3ba7c85
--- /dev/null
+++ b/sca-cpp/trunk/hosting/server/htdocs/store/index.html
@@ -0,0 +1,168 @@
+<!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.    
+-->
+<div id="bodydiv" class="bodydiv">
+
+<table style="width: 100%;">
+<tr>
+<td><h2><span id="h1"></span></h2></td>
+<td style="vertical-align: middle; text-align: right;"><span id="status" style="font-weight: bold; color: #808080;"></span></td>
+</tr>
+</table>
+
+<div id="catmenu"></div>
+
+<div id="apps"></div>
+
+<script type="text/javascript">
+
+// Set page titles
+document.title = ui.windowtitle(location.hostname) + ' - Store';
+$('h1').innerHTML = ui.hometitle(location.hostname);
+
+// Get the store category
+var category = ui.fragmentParams(location)['category'];
+if (isNil(category))
+    category = 'myapps';
+
+/**
+ * Build store menu bar
+ */
+function catmenu() {
+    function catmenuitem(name, cat, idx) {
+        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('/#view=store&category=' + cat + '&idx=' + idx, '_view', '<span class="' + c + '">' + name + '</span>') + '</th>';
+    }
+
+    var m = '<table style="width: 100%; margin-bottom: 2px;"><tr>';
+    m += catmenuitem('My Apps', 'myapps', '1');
+    m += catmenuitem('New', 'new', '2');
+    m += catmenuitem('Top', 'top', '3');
+    m += catmenuitem('Featured', 'featured', '4');
+    m += catmenuitem('All', 'all', '5');
+    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="graybutton" 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();
+
+/**
+ * Service references.
+ */
+var editWidget = sca.component("EditWidget");
+var store = sca.reference(editWidget, "store");
+var dashboards = sca.reference(editWidget, "dashboards");
+
+/**
+ * Edit an app.
+ */
+function editApp(appname) {
+    return ui.navigate('/#view=page&app=' + appname, '_view');
+}
+
+/**
+ * View an app.
+ */
+function viewApp(appname) {
+    return ui.navigate('/#view=stats&app=' + appname, '_view');
+}
+
+/**
+ * Create an app.
+ */
+if (category == 'myapps') {
+    $('createApp').onclick = function() {
+        return ui.navigate('/#view=create', '_view');
+    }
+}
+
+/**
+ * Get and display list of apps.
+ */
+function getapps(category) {
+    //log('category', category);
+    showStatus('Loading');
+
+    function display(doc) {
+
+        // Stop now if we didn't get the apps
+        if (doc == null) {
+            showStatus('No data');
+            return false;
+        }
+        showStatus(defaultStatus());
+
+        var apps = '<div>';
+        var feed = car(elementsToValues(atom.readATOMFeed(mklist(doc))));
+        var aentries = assoc("'entry", cdr(feed));
+        var entries = isNil(aentries)? mklist() : isList(car(cadr(aentries)))? cadr(aentries) : mklist(cdr(aentries));
+
+        var appimg = ui.b64img(appcache.get('/public/app.b64'));
+
+        function displayentries(entries) {
+            if (isNil(entries))
+                return apps;
+            var entry = car(entries);
+            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: 150px; display: inline-block; border: 1px; border-style: solid; border-color: #dcdcdc; border-collapse: collapse; margin: 2px; padding: 2px; vertical-align: top;">'
+            apps += '<table><tr>';
+            apps += '<td>';
+            apps += '<div>' + ui.ahref('/#view=stats&app=' + name, '_view', '<img src="' + appimg + '" width="50" height="50" style="height: 50px; width: 50px; vertical-align: top; margin: 0px; padding: 0px;"></img>') + '</div>';
+            apps += '</td>';
+            apps += '<td class="tdw">';
+            apps += '<div style="font-weight: bold">' + ui.ahref('/' + 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 += '</td>';
+            apps += '</tr></table>';
+            apps += '</div>';
+            return displayentries(cdr(entries));
+        }
+
+        displayentries(entries);
+
+        apps += '</div>';
+        $('apps').innerHTML = apps;
+    }
+
+    if (category == 'myapps')
+        return dashboards.get('', display);
+    return store.get(category, display);
+}
+
+// Get and display the list of apps
+getapps(category);
+
+</script>
+
+</div>
author	jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>	2012-01-30 15:56:11 +0000
committer	jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>	2012-01-30 15:56:11 +0000
commit	f4c4803ce0c14585e3c2af3641d94b651877e04c (patch)
tree	9f10df32f2d34a3c697aaee897bad0b180922095 /sca-cpp/trunk/hosting/server/htdocs
parent	1b10f18fce6baeb721a725661ded630614831304 (diff)