Refactor some of the Javascript scripts to use a different namespace per script.

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

19 files changed, 331 insertions, 327 deletions

diff --git a/sca-cpp/trunk/modules/js/htdocs/atomutil.js b/sca-cpp/trunk/modules/js/htdocs/atomutil.js
index 1c9137b668..3499948083 100644
--- a/sca-cpp/trunk/modules/js/htdocs/atomutil.js
+++ b/sca-cpp/trunk/modules/js/htdocs/atomutil.js
@@ -20,61 +20,62 @@
 /**
  * ATOM data conversion functions.
  */
+var atom = new Object();
 
 /**
  * Convert a list of elements to a list of values representing an ATOM entry.
  */
-function entryElementsToValues(e) {
+atom.entryElementsToValues = function(e) {
     var lt = filter(selector(mklist(element, "'title")), e);
     var t = isNil(lt)? '' : elementValue(car(lt));
     var li = filter(selector(mklist(element, "'id")), e);
     var i = isNil(li)? '' : elementValue(car(li));
     var lc = filter(selector(mklist(element, "'content")), e);
     return mklist(t, i, elementValue(car(lc)));
-}
+};
 
 /**
  * Convert a list of elements to a list of values representing ATOM entries.
  */
-function entriesElementsToValues(e) {
+atom.entriesElementsToValues = function(e) {
     if (isNil(e))
         return e;
-    return cons(entryElementsToValues(car(e)), entriesElementsToValues(cdr(e)));
-}
+    return cons(atom.entryElementsToValues(car(e)), atom.entriesElementsToValues(cdr(e)));
+};
 
 /**
  * Convert a list of strings to a list of values representing an ATOM entry.
  */
-function readATOMEntry(l) {
+atom.readATOMEntry = function(l) {
     var e = readXML(l);
     if (isNil(e))
         return mklist();
-    return entryElementsToValues(car(e));
-}
+    return atom.entryElementsToValues(car(e));
+};
 
 /**
  * Convert a list of values representy an ATOM entry to a value.
  */
-function entryValue(e) {
+atom.entryValue = function(e) {
     var v = elementsToValues(mklist(caddr(e)));
     return cons(car(e), (cadr(e), cdr(car(v))));
-}
+};
 
 /**
  * Return true if a list of strings represents an ATOM feed.
  */
-function isATOMFeed(l) {
+atom.isATOMFeed = function(l) {
     if (isNil(l))
         return false;
     if (car(l).substring(0, 5) != "<?xml")
         return false;
     return car(l).match("<feed") != null;
-}
+};
 
 /**
  * Convert a DOM document to a list of values representing an ATOM feed.
  */
-function readATOMFeedDocument(doc) {
+atom.readATOMFeedDocument = function(doc) {
     var f = readXMLDocument(doc);
     if (isNil(f))
         return mklist();
@@ -83,86 +84,86 @@ function readATOMFeedDocument(doc) {
     var e = filter(selector(mklist(element, "'entry")), car(f));
     if (isNil(e))
         return mklist(elementValue(car(t)), elementValue(car(i)));
-    return cons(elementValue(car(t)), cons(elementValue(car(i)), entriesElementsToValues(e)));
-}
+    return cons(elementValue(car(t)), cons(elementValue(car(i)), atom.entriesElementsToValues(e)));
+};
 
 /**
  * Convert a list of strings to a list of values representing an ATOM feed.
  */
-function readATOMFeed(l) {
-    return readAtomFeedDocument(parseXML(l));
-}
+atom.readATOMFeed = function(l) {
+    return atom.readAtomFeedDocument(parseXML(l));
+};
 
 /**
  * Convert an ATOM feed containing elements to an ATOM feed containing values.
  */
-function feedValuesLoop(e) {
-    if (isNil(e))
-        return e;
-    return cons(entryValue(car(e)), feedValuesLoop(cdr(e)));
-}
+atom.feedValues = function(e) {
+    function feedValuesLoop(e) {
+        if (isNil(e))
+            return e;
+        return cons(entryValue(car(e)), feedValuesLoop(cdr(e)));
+    }
 
-function feedValues(e) {
     return cons(car(e), cons(cadr(e), feedValuesLoop(cddr(e))));
-}
+};
 
 /**
  * Convert a list of values representy an ATOM entry to a list of elements.
  */
-function entryElement(l) {
+atom.entryElement = function(l) {
     return mklist(element, "'entry", mklist(attribute, "'xmlns", "http://www.w3.org/2005/Atom"),
             mklist(element, "'title", mklist(attribute, "'type", "text"), car(l)),
             mklist(element, "'id", cadr(l)),
             mklist(element, "'content", mklist(attribute, "'type", (isList(caddr(l))? "application/xml" : "text")), caddr(l)),
             mklist(element, "'link", mklist(attribute, "'href", cadr(l))));
-}
+};
 
 /**
  * Convert a list of values representing ATOM entries to a list of elements.
  */
-function entriesElements(l) {
+atom.entriesElements = function(l) {
     if (isNil(l))
         return l;
-    return cons(entryElement(car(l)), entriesElements(cdr(l)));
-}
+    return cons(atom.entryElement(car(l)), atom.entriesElements(cdr(l)));
+};
 
 /**
  * Convert a list of values representing an ATOM entry to an ATOM entry.
  */
-function writeATOMEntry(l) {
-    return writeXML(mklist(entryElement(l)), true);
-}
+atom.writeATOMEntry = function(l) {
+    return writeXML(mklist(atom.entryElement(l)), true);
+};
 
 /**
  * Convert a list of values representing an ATOM feed to an ATOM feed.
  */
-function writeATOMFeed(l) {
+atom.writeATOMFeed = function(l) {
     var f = mklist(element, "'feed", mklist(attribute, "'xmlns", "http://www.w3.org/2005/Atom"),
             mklist(element, "'title", mklist(attribute, "'type", "text"), car(l)),
             mklist(element, "'id", cadr(l)));
     if (isNil(cddr(l)))
         return writeXML(mklist(f), true);
-    var fe = append(f, entriesElements(cddr(l)));
+    var fe = append(f, atom.entriesElements(cddr(l)));
     return writeXML(mklist(fe), true);
-}
+};
 
 /**
  * Convert an ATOM entry containing a value to an ATOM entry containing an item element.
  */
-function entryValuesToElements(v) {
+atom.entryValuesToElements = function(v) {
     return cons(car(v), cons(cadr(v), valuesToElements(mklist(cons("'item", caddr(v))))));
-}
+};
 
 /**
  * Convert an ATOM feed containing values to an ATOM feed containing elements.
  */
-function feedValuesToElementsLoop(v) {
-    if (isNil(v))
-        return v;
-    return cons(entryValuesToElements(car(v)), feedValuesToElementsLoop(cdr(v)));
-}
+atom.feedValuesToElements = function(v) {
+    function feedValuesToElementsLoop(v) {
+        if (isNil(v))
+            return v;
+        return cons(atom.entryValuesToElements(car(v)), feedValuesToElementsLoop(cdr(v)));
+    }
 
-function feedValuesToElements(v) {
     return cons(car(v), cons(cadr(v), feedValuesToElementsLoop(cddr(v))));
-}
+};
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/component.js b/sca-cpp/trunk/modules/js/htdocs/component.js
index cceb494e2d..97972be226 100644
--- a/sca-cpp/trunk/modules/js/htdocs/component.js
+++ b/sca-cpp/trunk/modules/js/htdocs/component.js
@@ -103,6 +103,36 @@ JSONClient.toJSON = function(o) {
 };
 
 /**
+ * Construct an HTTPBindingClient.
+ */
+function HTTPBindingClient(cname, uri, objectID) {
+    this.uri = "/references/" + cname + "/" + uri;
+    this.objectID = objectID;
+    this.apply = this._createApplyMethod();
+
+    if (typeof DOMParser == "undefined") {
+       DOMParser = function () {}
+    
+       DOMParser.prototype.parseFromString = function (str, contentType) {
+          if (typeof ActiveXObject != "undefined") {
+             var d = new ActiveXObject("MSXML.DomDocument");
+             d.loadXML(str);
+             return d;
+          } else if (typeof XMLHttpRequest != "undefined") {
+             var req = new XMLHttpRequest;
+             req.open("GET", "data:" + (contentType || "application/xml") +
+                             ";charset=utf-8," + encodeURIComponent(str), false);
+             if (req.overrideMimeType) {
+                req.overrideMimeType(contentType);
+             }
+             req.send(null);
+             return req.responseXML;
+          }
+       }
+    }
+}
+
+/**
  * HTTPBindingClient.Exception.
  */
 HTTPBindingClient.Exception = function(code, message, javaStack) {
@@ -498,67 +528,36 @@ HTTPBindingClient.prototype.createXMLHttpRequest = function () {
     }
     alert("XML http request not supported");
     return null;
-}
-
-/**
- * Construct an HTTPBindingClient.
- */
-function HTTPBindingClient(cname, uri, objectID) {
-    this.uri = "/references/" + cname + "/" + uri;
-    this.objectID = objectID;
-    this.apply = this._createApplyMethod();
-
-    if (typeof DOMParser == "undefined") {
-       DOMParser = function () {}
-    
-       DOMParser.prototype.parseFromString = function (str, contentType) {
-          if (typeof ActiveXObject != "undefined") {
-             var d = new ActiveXObject("MSXML.DomDocument");
-             d.loadXML(str);
-             return d;
-          } else if (typeof XMLHttpRequest != "undefined") {
-             var req = new XMLHttpRequest;
-             req.open("GET", "data:" + (contentType || "application/xml") +
-                             ";charset=utf-8," + encodeURIComponent(str), false);
-             if (req.overrideMimeType) {
-                req.overrideMimeType(contentType);
-             }
-             req.send(null);
-             return req.responseXML;
-          }
-       }
-    }
 };
 
 /**
- * Construct a component.
- */
-function ClientComponent(name) {
-    this.name = name;
-}
-
-/**
  * Public API.
  */
 
+var sca = new Object();
+
 /**
  * Return a component.
  */
-function component(name) {
+sca.component = function(name) {
+    function ClientComponent(name) {
+        this.name = name;
+    }
+
     return new ClientComponent(name);
-}
+};
 
 /**
  * Return a reference proxy.
  */
-function reference(comp, name) {
+sca.reference = function(comp, name) {
     return new HTTPBindingClient(comp.name, name);
 };
 
 /**
  * Add proxy functions to a reference proxy.
  */
-function defun(ref) {
+sca.defun = function(ref) {
     function defapply(name) {
         return function() {
             var args = new Array();
diff --git a/sca-cpp/trunk/modules/js/htdocs/elemutil.js b/sca-cpp/trunk/modules/js/htdocs/elemutil.js
index 76eeb9d974..6bebc02101 100644
--- a/sca-cpp/trunk/modules/js/htdocs/elemutil.js
+++ b/sca-cpp/trunk/modules/js/htdocs/elemutil.js
@@ -188,17 +188,17 @@ function valuesToElements(l) {
 /**
  * Return a selector lambda function which can be used to filter elements.
  */
-function evalSelect(s, v) {
-    if (isNil(s))
-        return true;
-    if (isNil(v))
-        return false;
-    if (car(s) != car(v))
-        return false;
-    return evalSelect(cdr(s), cdr(v));
-}
-
 function selector(s) {
+    function evalSelect(s, v) {
+        if (isNil(s))
+            return true;
+        if (isNil(v))
+            return false;
+        if (car(s) != car(v))
+            return false;
+        return evalSelect(cdr(s), cdr(v));
+    }
+
     return function(v) { return evalSelect(s, v); };
 }
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/graph.js b/sca-cpp/trunk/modules/js/htdocs/graph.js
index 07afa37a65..2297f550c2 100644
--- a/sca-cpp/trunk/modules/js/htdocs/graph.js
+++ b/sca-cpp/trunk/modules/js/htdocs/graph.js
@@ -21,40 +21,42 @@
  * SVG and VML component rendering functions.
  */
 
+var graph = new Object();
+
 /**
  * Detect browser VML support.
  */
-function supportsVML() {
-    if (typeof supportsVML.supported != 'undefined')
-        return supportsVML.supported;
-    supportsVML.supported = navigator.appName == 'Microsoft Internet Explorer';
-    return supportsVML.supported;
-}
+graph.supportsVML = function() {
+    if (typeof graph.supportsVML.supported != 'undefined')
+        return graph.supportsVML.supported;
+    graph.supportsVML.supported = navigator.appName == 'Microsoft Internet Explorer';
+    return graph.supportsVML.supported;
+};
 
 /**
  * Detect browser SVG support.
  */
-function supportsSVG() {
-    if (typeof supportsSVG.supported != 'undefined')
-        return supportsSVG.supported;
-    supportsSVG.supported = navigator.appName != 'Microsoft Internet Explorer';
-    return supportsSVG.supported;
-}
+graph.supportsSVG = function() {
+    if (typeof graph.supportsSVG.supported != 'undefined')
+        return graph.supportsSVG.supported;
+    graph.supportsSVG.supported = navigator.appName != 'Microsoft Internet Explorer';
+    return graph.supportsSVG.supported;
+};
 
 /**
  * Basic colors
  */
-var red = 'red';
-var green = 'green';
-var blue = 'blue';
-var yellow = 'yellow';
-var orange = '#ffa500';
-var gray = 'gray'
+graph.red = 'red';
+graph.green = 'green';
+graph.blue = 'blue';
+graph.yellow = 'yellow';
+graph.orange = '#ffa500';
+graph.gray = 'gray'
 
 /**
  * Base path class.
  */
-function BasePath() {
+graph.BasePath = function() {
     this.path = '';
     this.x = 0;
     this.y = 0;
@@ -88,28 +90,26 @@ function BasePath() {
     this.str = function() {
         return this.path;
     };
-}
+};
 
 /**
  * Rendering functions that work both with VML and SVG.
  */
-var mkgraph;
-var mkcompshape;
 var graph;
 
 /**
  * VML rendering.
  */
-if (supportsVML()) {
+if (graph.supportsVML()) {
 
-    var vmlns='urn:schemas-microsoft-com:vml';
+    graph.vmlns='urn:schemas-microsoft-com:vml';
 
     /**
      * Make a shape path.
      */
-    var mkpath = function() {
+    graph.mkpath = function() {
         function Path() {
-            this.BasePath = BasePath;
+            this.BasePath = graph.BasePath;
             this.BasePath();
 
             this.move = function(x, y) {
@@ -134,12 +134,12 @@ if (supportsVML()) {
         }
 
         return new Path();
-    }
+    };
 
     /**
      * Make a title element.
      */
-    var mktitle = function(t) {
+    graph.mktitle = function(t) {
         var title = document.createElement('v:textbox');
         title.style.left = '40';
         title.style.top = '30';
@@ -147,28 +147,26 @@ if (supportsVML()) {
         var tnode = document.createTextNode(t);
         title.appendChild(tnode);
         return title;
-    }
+    };
 
     /**
      * Return the width of a title.
      */
-    var textWidthDiv;
-
-    var titlewidth = function(t) {
-        textWidthDiv.innerHTML = t;
+    graph.titlewidth = function(t) {
+        graph.textWidthDiv.innerHTML = t;
         var twidth = textWidthDiv.offsetWidth + 10;
-        textWidthDiv.innerHTML = '';
+        graph.textWidthDiv.innerHTML = '';
         return twidth;
-    }
+    };
 
     /**
      * Make a component shape.
      */
-    mkcompshape = function(name, color, tsvcs, lsvcs, brefs, rrefs) {
-        var title = mktitle(name);
-        var twidth = titlewidth(name);
+    graph.mkcompshape = function(name, color, tsvcs, lsvcs, brefs, rrefs) {
+        var title = graph.mktitle(name);
+        var twidth = graph.titlewidth(name);
 
-        var d = mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs).str();
+        var d = graph.mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs).str();
 
         var shape = document.createElement('v:shape');
         shape.style.width = 500;
@@ -184,7 +182,7 @@ if (supportsVML()) {
         contour.coordsize = '500,500';
         contour.setAttribute('path', d);
         contour.filled = 'false';
-        contour.strokecolor = gray;
+        contour.strokecolor = graph.gray;
         contour.strokeweight = '3';
         contour.style.top = 1;
         contour.style.left = 1;
@@ -200,26 +198,19 @@ if (supportsVML()) {
         g.appendChild(contour);
         g.appendChild(title);
         return g;
-    }
-
-    /**
-     * Drag and drop support.
-     */
-    var dragX;
-    var dragY;
-    var dragging = null;
+    };
 
     /**
      * Make a graph.
      */
-    mkgraph = function() {
+    graph.mkgraph = function() {
         var div = document.createElement('div');
         div.id = 'vmldiv';
         document.body.appendChild(div);
 
-        textWidthDiv = document.createElement('span');
-        textWidthDiv.style.visibility = 'hidden'
-        div.appendChild(textWidthDiv);
+        graph.textWidthDiv = document.createElement('span');
+        graph.textWidthDiv.style.visibility = 'hidden'
+        div.appendChild(graph.textWidthDiv);
 
         var vmlg = document.createElement('v:group');
         vmlg.style.width = 500;
@@ -227,6 +218,8 @@ if (supportsVML()) {
         vmlg.coordsize = '500,500';
         div.appendChild(vmlg);
 
+        graph.dragging = null;
+
         function draggable(n) {
             if (n == vmlg)
                 return null;
@@ -237,40 +230,40 @@ if (supportsVML()) {
 
         vmlg.onmousedown = function() {
             window.event.returnValue = false;
-            dragging = draggable(window.event.srcElement);
-            if (dragging == null)
+            graph.dragging = draggable(window.event.srcElement);
+            if (graph.dragging == null)
                 return false;
-            dragging.parentNode.appendChild(dragging);
-            dragX = window.event.clientX;
-            dragY = window.event.clientY;
+            graph.dragging.parentNode.appendChild(graph.dragging);
+            graph.dragX = window.event.clientX;
+            graph.dragY = window.event.clientY;
             vmlg.setCapture();
             return false;
         };
 
         vmlg.onmouseup = function() {
-            if (dragging == null)
+            if (graph.dragging == null)
                 return false;
-            dragging = null;
+            graph.dragging = null;
             vmlg.releaseCapture();
             return false;
         };
 
         vmlg.onmousemove = function() {
-            if (dragging == null)
+            if (graph.dragging == null)
                 return false;
-            var origX = dragging.coordorigin.X;
-            var origY = dragging.coordorigin.Y;
-            var newX = origX - (window.event.clientX - dragX);
-            var newY = origY - (window.event.clientY - dragY);
-            dragX = window.event.clientX;
-            dragY = window.event.clientY;
-            dragging.setAttribute('coordorigin', newX + ' ' + newY);
+            var origX = graph.dragging.coordorigin.X;
+            var origY = graph.dragging.coordorigin.Y;
+            var newX = origX - (window.event.clientX - graph.dragX);
+            var newY = origY - (window.event.clientY - graph.dragY);
+            graph.dragX = window.event.clientX;
+            graph.dragY = window.event.clientY;
+            graph.dragging.setAttribute('coordorigin', newX + ' ' + newY);
             return false;
         };
 
-        graph = vmlg;
+        graph.g = vmlg;
         return vmlg;
-    }
+    };
 
     document.write('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />');
 }
@@ -278,16 +271,16 @@ if (supportsVML()) {
 /**
  * SVG rendering.
  */
-if (supportsSVG()) {
+if (graph.supportsSVG()) {
 
-    var svgns='http://www.w3.org/2000/svg';
+    graph.svgns='http://www.w3.org/2000/svg';
 
     /**
      * Make a shape path.
      */
-    var mkpath = function() {
+    graph.mkpath = function() {
         function Path() {
-            this.BasePath = BasePath;
+            this.BasePath = graph.BasePath;
             this.BasePath();
 
             this.move = function(x, y) {
@@ -312,69 +305,64 @@ if (supportsSVG()) {
         }
 
         return new Path();
-    }
+    };
 
     /**
      * Make a title element.
      */
-    var mktitle = function(t) {
-        var title = document.createElementNS(svgns, 'text');
+    graph.mktitle = function(t) {
+        var title = document.createElementNS(graph.svgns, 'text');
         title.setAttribute('text-anchor', 'start');
         title.setAttribute('x', 40);
         title.setAttribute('y', 50);
         title.appendChild(document.createTextNode(t));
-        graph.appendChild(title);
+        graph.g.appendChild(title);
         return title;
-    }
+    };
 
     /**
      * Make a component shape.
      */
-    mkcompshape = function(name, color, tsvcs, lsvcs, brefs, rrefs) {
-        var title = mktitle(name);
+    graph.mkcompshape = function(name, color, tsvcs, lsvcs, brefs, rrefs) {
+        var title = graph.mktitle(name);
         var twidth = title.getBBox().width;
 
-        var d = mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs).str();
+        var d = graph.mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs).str();
 
-        var shape = document.createElementNS(svgns, 'path');
+        var shape = document.createElementNS(graph.svgns, 'path');
         shape.setAttribute('d', d);
         shape.setAttribute('fill', color);
 
-        var contour = document.createElementNS(svgns, 'path');
+        var contour = document.createElementNS(graph.svgns, 'path');
         contour.setAttribute('d', d);
         contour.setAttribute('fill', 'none');
-        contour.setAttribute('stroke', gray);
+        contour.setAttribute('stroke', graph.gray);
         contour.setAttribute('stroke-width', '4');
         contour.setAttribute('stroke-opacity', '0.20');
         contour.setAttribute('transform', 'translate(1,1)');
 
-        var g = document.createElementNS(svgns, 'g');
+        var g = document.createElementNS(graph.svgns, 'g');
         g.appendChild(shape);
         g.appendChild(contour);
         g.appendChild(title);
         return g;
-    }
-
-    /**
-     * Drag and drop support.
-     */
-    var dragX;
-    var dragY;
-    var dragging = null;
+    };
 
     /**
      * Make a graph.
      */
-    mkgraph = function() {
+    graph.mkgraph = function() {
         var div = document.createElement('div');
         div.id = 'svgdiv';
         document.body.appendChild(div);
 
-        var svg = document.createElementNS(svgns, 'svg');
+        var svg = document.createElementNS(graph.svgns, 'svg');
         svg.style.height = '100%';
         svg.style.width = '100%';
         div.appendChild(svg);
 
+        graph.dragging = null;
+
         function draggable(n) {
             if (n == svg)
                 return null;
@@ -388,102 +376,102 @@ if (supportsSVG()) {
                 e.preventDefault();
             else
                 e.returnValue= false;
-            dragging = draggable(e.target);
-            if (dragging == null)
+            graph.dragging = draggable(e.target);
+            if (graph.dragging == null)
                 return false;
-            dragging.parentNode.appendChild(dragging);
+            graph.dragging.parentNode.appendChild(graph.dragging);
             var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            dragX = pos.clientX;
-            dragY = pos.clientY;
+            graph.dragX = pos.clientX;
+            graph.dragY = pos.clientY;
             return false;
         };
 
         svg.ontouchstart = svg.onmousedown;
 
         svg.onmouseup = function(e) {
-            if (dragging == null)
+            if (graph.dragging == null)
                 return false;
-            dragging = null;
+            graph.dragging = null;
             return false;
         };
 
         svg.ontouchend = svg.onmouseup;
 
         svg.onmousemove = function(e) {
-            if (dragging == null)
+            if (graph.dragging == null)
                 return false;
-            var matrix = dragging.getCTM();
+            var matrix = graph.dragging.getCTM();
             var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
-            var newX = Number(matrix.e) + (pos.clientX - dragX);
-            var newY = Number(matrix.f) + (pos.clientY - dragY);
-            dragX = pos.clientX;
-            dragY = pos.clientY;
-            dragging.setAttribute('transform', 'translate(' + newX + ',' + newY + ')');
+            var newX = Number(matrix.e) + (pos.clientX - graph.dragX);
+            var newY = Number(matrix.f) + (pos.clientY - graph.dragY);
+            graph.dragX = pos.clientX;
+            graph.dragY = pos.clientY;
+            graph.dragging.setAttribute('transform', 'translate(' + newX + ',' + newY + ')');
             return false;
         };
 
         svg.ontouchmove = svg.onmousemove;
 
-        graph = svg;
+        graph.g = svg;
         return svg;
-    }
+    };
 }
 
 /**
  * Make a reference shape path, positioned to the right of a component shape.
  */
-function mkrrefpath(path) {
+graph.mkrrefpath = function(path) {
     return path.rline(0,10).rcurve(0,5,-5,0).rcurve(-5,0,0,-5).rcurve(0,-5,-5,0).rcurve(-5,0,0,5).rline(0,20).rcurve(0,5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,5).rline(0,10);
-}
+};
 
 /**
  * Make a reference shape path, positioned at the bottom of a component shape.
  */
-function mkbrefpath(path) {
+graph.mkbrefpath = function(path) {
     return path.rline(-10,0).rcurve(-5,0,0,-5).rcurve(0,-5,5,0).rcurve(5,0,0,-5).rcurve(0,-5,-5,0).rline(-20,0).rcurve(-5,0,0,5).rcurve(0,5,5,0).rcurve(5,0,0,5).rcurve(0,5,-5,0).rline(-10,0);
-}
+};
 
 /**
  * Make a service shape path, positioned to the left of a component shape.
  */
-function mklsvcpath(path) {
+graph.mklsvcpath = function(path) {
     return path.rline(0,-10).rcurve(0,-5,-5,0).rcurve(-5,0,0,5).rcurve(0,5,-5,0).rcurve(-5,0,0,-5).rline(0,-20).rcurve(0,-5,5,0).rcurve(5,0,0,5).rcurve(0,5,5,0).rcurve(5,0,0,-5).rline(0,-10);
-}
+};
 
 /**
  * Make a service shape path, positioned at the top of a component shape.
  */
-function mktsvcpath(path) {
+graph.mktsvcpath = function(path) {
     return path.rline(10,0).rcurve(5,0,0,-5).rcurve(0,-5,-5,0).rcurve(-5,0,0,-5).rcurve(0,-5,5,0).rline(20,0).rcurve(5,0,0,5).rcurve(0,5,-5,0).rcurve(-5,0,0,5).rcurve(0,5,5,0).rline(10,0);
-}
+};
 
 
 /**
 * Make a component shape path.
 */
-function mkcomppath(twidth, tsvcs, lsvcs, brefs, rrefs) {
+graph.mkcomppath = function(twidth, tsvcs, lsvcs, brefs, rrefs) {
     var height = Math.max(lsvcs, rrefs) * 40 + 60;
     var width = Math.max(Math.max(tsvcs, brefs) * 40 + 60, twidth + 20);
 
-    var path = mkpath().rmove(40,30).rline(20,0);
+    var path = graph.mkpath().rmove(40,30).rline(20,0);
     for (var s = 0; s < tsvcs; s++)
-        path = mktsvcpath(path);
+        path = graph.mktsvcpath(path);
 
     path = path.line(20 + width,path.ypos()).rcurve(10,0,0,10).rline(0,20);
     for (var r = 0; r < rrefs; r++)
-        path = mkrrefpath(path);
+        path = graph.mkrrefpath(path);
 
     var boffset = 10 + 30 + (brefs * 40);
-    path = path.line(path.xpos(),20 + height).rcurve(0,10,-10,0).line(20 + boffset,path.ypos());
+    path = path.line(path.xpos(),20 + height).rcurve(0,10,-10,0).line(20 + boffset, path.ypos());
     for (var r = 0; r < brefs; r++)
-        path = mkbrefpath(path);
+        path = graph.mkbrefpath(path);
 
     var loffset = 10 + 30 + (lsvcs * 40);
     path = path.line(40,path.ypos()).rcurve(-10,0,0,-10).line(path.xpos(), 20 + loffset);
     for (var s = 0; s < lsvcs; s++)
-        path = mklsvcpath(path);
+        path = graph.mklsvcpath(path);
 
     path = path.line(30,40).rcurve(0,-10,10,0);
     return path.end();
-}
+};
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/scdl.js b/sca-cpp/trunk/modules/js/htdocs/scdl.js
index 5f3934b060..afdb74ac3b 100644
--- a/sca-cpp/trunk/modules/js/htdocs/scdl.js
+++ b/sca-cpp/trunk/modules/js/htdocs/scdl.js
@@ -20,28 +20,36 @@
 /**
  * SCDL parsing functions.
  */
+var scdl = new Object();
 
 /**
  * Returns a list of components in a composite.
  */
-function components(l) {
+scdl.components = function(l) {
     var cs = namedElementChildren("'composite", l);
     if (isNil(cs))
         return cs;
     return namedElementChildren("'component", car(cs));
-}
+};
 
 /**
  * Returns the name of a component, service or reference.
  */
-function name(l) {
+scdl.name = function(l) {
     return namedAttributeValue("'name", l);
-}
+};
+
+/**
+ * Returns the color of a component.
+ */
+scdl.color = function(l) {
+    return namedAttributeValue("'color", l);
+};
 
 /**
  * Returns the implementation of a component.
  */
-function implementation(l) {
+scdl.implementation = function(l) {
     function filterImplementation(v) {
         return isElement(v) && cadr(v).match("implementation.") != null;
     }
@@ -50,58 +58,65 @@ function implementation(l) {
     if (isNil(n))
         return null;
     return car(n);
-}
+};
 
 /**
  * Returns the type of an implementation.
  */
-function implementationType(l) {
+scdl.implementationType = function(l) {
     return elementName(l).substring(1);
-}
+};
 
 /**
  * Returns the URI of a service, reference or implementation.
  */
-function uri(l) {
+scdl.uri = function(l) {
     return namedAttributeValue("'uri", l);
-}
+};
+
+/**
+ * Returns the align attribute of a service or reference.
+ */
+scdl.align = function(l) {
+    return namedAttributeValue("'align", l);
+};
 
 /**
  * Returns a list of services in a component.
  */
-function services(l) {
+scdl.services = function(l) {
     return namedElementChildren("'service", l);
-}
+};
 
 /**
  * Returns a list of references in a component.
  */
-function references(l) {
+scdl.references = function(l) {
     return namedElementChildren("'reference", l);
-}
+};
 
 /**
  * Returns a list of bindings in a service or reference.
  */
-function bindings(l) {
+scdl.bindings = function(l) {
     function filterBinding(v) {
         return isElement(v) && cadr(v).match("binding.") != null;
     }
 
     return filter(filterBinding, l);
-}
+};
 
 /**
  * Returns the type of a binding.
  */
-function bindingType(l) {
+scdl.bindingType = function(l) {
     return elementName(l).substring(1);
-}
+};
 
 /**
  * Returns the target of a reference.
  */
-function target(l) {
+scdl.target = function(l) {
     function bindingsTarget(l) {
         if (isNil(l))
             return null;
@@ -114,20 +129,20 @@ function target(l) {
     var t = namedAttributeValue("'target", l);
     if (!isNil(t))
         return t;
-    return bindingsTarget(bindings(l));
-}
+    return bindingsTarget(scdl.bindings(l));
+};
 
 /**
  * Returns a list of properties in a component.
  */
-function properties(l) {
+scdl.properties = function(l) {
     return namedElementChildren("'property", l);
-}
+};
 
 /**
  * Returns the value of a property.
  */
-function propertyValue(l) {
+scdl.propertyValue = function(l) {
     return elementValue(l);
-}
+};
 
diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.js b/sca-cpp/trunk/modules/js/htdocs/ui.js
index 72c6c6b870..fcd61571d1 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.js
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.js
@@ -21,10 +21,12 @@
  * UI utility functions.
  */
 
+var ui = new Object();
+
 /**
  * Build a menu bar.
  */ 
-function menu(name, href) {
+ui.menu = function(name, href) {
     function Menu(n, h) {
         this.name = n;
         this.href = h;
@@ -44,9 +46,9 @@ function menu(name, href) {
         };
     }
     return new Menu(name, href);
-}
+};
 
-function menubar(left, right) {
+ui.menubar = function(left, right) {
     var bar = '<table cellpadding="0" cellspacing="0" width="100%" class=tbar><tr>' +
     '<td class=ltbar><table border="0" cellspacing="0" cellpadding="0"><tr>';
     for (i in left)
@@ -59,8 +61,7 @@ function menubar(left, right) {
 
     bar = bar + '</tr></table></td></tr></table>';
     return bar;
-}
-
+};
  
 /**
  * Autocomplete / suggest support for input fields
@@ -71,22 +72,22 @@ function menubar(left, right) {
  * then hook it to an input field as follows:
  * suggest(document.yourForm.yourInputField, suggestItems);
  */ 
-function selectSuggestion(node, value) {
+ui.selectSuggestion = function(node, value) {
     for (;;) {
         node = node.parentNode;
         if (node.tagName.toLowerCase() == 'div')
               break;
     }
     node.selectSuggestion(value);
-}
+};
 
-function hilightSuggestion(node, over) {
+ui.hilightSuggestion = function(node, over) {
     if (over)
         node.className = 'suggestHilighted';
     node.className = 'suggestItem';
-}
+};
 
-function suggest(input, suggestFunction) {
+ui.suggest = function(input, suggestFunction) {
     input.suggest = suggestFunction;
       
     input.selectSuggestion = function(value) {
@@ -122,8 +123,8 @@ function suggest(input, suggestFunction) {
             if (items.length == 0)
                 items += '<table class=suggestTable>';
             items += '<tr><td class="suggestItem" ' +
-            'onmouseover="hilightSuggestion(this, true)" onmouseout="hilightSuggestion(this, false)" ' +
-            'onmousedown="selectSuggestion(this, \'' + values[i] + '\')">' + values[i] + '</td></tr>';
+            'onmouseover="ui.hilightSuggestion(this, true)" onmouseout="ui.hilightSuggestion(this, false)" ' +
+            'onmousedown="ui.selectSuggestion(this, \'' + values[i] + '\')">' + values[i] + '</td></tr>';
         }
         if (items.length != 0)
             items += '</table>';
@@ -162,33 +163,33 @@ function suggest(input, suggestFunction) {
     input.onblur = function(event) {
         setTimeout(function() { input.hideSuggestDiv(); }, 50);
     };
-}
+};
 
 /**
  * Return the content document of a window.
  */
-function content(win) {
+ui.content = function(win) {
     if (!isNil(win.document))
         return win.document;
     if (!isNil(win.contentDocument))
         return win.contentDocument;
     return null;
-}
+};
 
 /**
  * Return a child element of a node with the given id.
  */
-function elementByID(node, id) {
+ui.elementByID = function(node, id) {
     for (var i in node.childNodes) {
         var child = node.childNodes[i];
         if (child.id == id)
             return child;
-        var gchild = elementByID(child, id);
+        var gchild = ui.elementByID(child, id);
         if (gchild != null)
             return gchild;
     }
     return null;
-}
+};
 
 /**
  * Return the current document, or a child element with the given id.
@@ -199,34 +200,34 @@ function $(id) {
             return widget;
         return document;
     }
-    return elementByID($(document), id);
-}
+    return ui.elementByID($(document), id);
+};
 
 /**
  * Initialize a widget.
  */
-function onloadwidget() {
-    if (isNil(window.parent) || isNil(window.parent.widgets))
+ui.onloadwidget = function() {
+    if (isNil(window.parent) || isNil(window.parent.ui) || isNil(window.parent.ui.widgets))
         return true;
-    var pdoc = content(window.parent);
-    for (w in window.parent.widgets) {
-        var ww = elementByID(pdoc, w).contentWindow;
+    var pdoc = ui.content(window.parent);
+    for (w in window.parent.ui.widgets) {
+        var ww = ui.elementByID(pdoc, w).contentWindow;
         if (ww == window) {
-            document.widget = elementByID(pdoc, window.parent.widgets[w]);
+            document.widget = ui.elementByID(pdoc, window.parent.ui.widgets[w]);
             document.widget.innerHTML = document.body.innerHTML;
             return true;
         }
     }
     return true;
-}
+};
 
 /**
  * Load a widget into an element.
  */
-var widgets = new Array();
+ui.widgets = new Array();
 
-function bindwidget(f, el) {
-    window.widgets[f] = el;
+ui.bindwidget = function(f, el) {
+    window.ui.widgets[f] = el;
     return f;
-}
+};
 
diff --git a/sca-cpp/trunk/modules/oauth/htdocs/index.html b/sca-cpp/trunk/modules/oauth/htdocs/index.html
index 9a9d833898..7d26567214 100644
--- a/sca-cpp/trunk/modules/oauth/htdocs/index.html
+++ b/sca-cpp/trunk/modules/oauth/htdocs/index.html
@@ -21,8 +21,8 @@
 <head>
 <script type="text/javascript" src="/component.js"></script>
 <script type="text/javascript">
-var protected = component("Protected");
-var userInfo = defun(reference(protected, "userInfo"), "getuser", "getemail", "getnickname", "getfullname", "getfirstname", "getlastname", "getrealm");
+var protected = sca.component("Protected");
+var userInfo = sca.defun(sca.reference(protected, "userInfo"), "getuser", "getemail", "getnickname", "getfullname", "getfirstname", "getlastname", "getrealm");
 var user = userInfo.getuser();
 var email = userInfo.apply("getemail");
 var nickname = userInfo.apply("getnickname");
diff --git a/sca-cpp/trunk/modules/openid/htdocs/index.html b/sca-cpp/trunk/modules/openid/htdocs/index.html
index 38dc9005c2..98bbac0c57 100644
--- a/sca-cpp/trunk/modules/openid/htdocs/index.html
+++ b/sca-cpp/trunk/modules/openid/htdocs/index.html
@@ -21,8 +21,8 @@
 <head>
 <script type="text/javascript" src="/component.js"></script>
 <script type="text/javascript">
-var protected = component("Protected");
-var userInfo = defun(reference(protected, "userInfo"), "getuser", "getemail", "getrealm");
+var protected = sca.component("Protected");
+var userInfo = sca.defun(sca.reference(protected, "userInfo"), "getuser", "getemail", "getrealm");
 var user = userInfo.getuser();
 var email = userInfo.getemail();
 var realm = userInfo.getrealm();
diff --git a/sca-cpp/trunk/samples/store-cluster/htdocs/domains/jane/index.html b/sca-cpp/trunk/samples/store-cluster/htdocs/domains/jane/index.html
index 179d28e9c9..238ed701f0 100644
--- a/sca-cpp/trunk/samples/store-cluster/htdocs/domains/jane/index.html
+++ b/sca-cpp/trunk/samples/store-cluster/htdocs/domains/jane/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-cluster/htdocs/domains/joe/index.html b/sca-cpp/trunk/samples/store-cluster/htdocs/domains/joe/index.html
index 5152b3798b..c1cfc59aa7 100644
--- a/sca-cpp/trunk/samples/store-cluster/htdocs/domains/joe/index.html
+++ b/sca-cpp/trunk/samples/store-cluster/htdocs/domains/joe/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-cpp/htdocs/index.html b/sca-cpp/trunk/samples/store-cpp/htdocs/index.html
index 1967292be9..3945e45bb7 100644
--- a/sca-cpp/trunk/samples/store-cpp/htdocs/index.html
+++ b/sca-cpp/trunk/samples/store-cpp/htdocs/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-gae/htdocs/index.html b/sca-cpp/trunk/samples/store-gae/htdocs/index.html
index 45ebc8626f..a38a8a0e4f 100644
--- a/sca-cpp/trunk/samples/store-gae/htdocs/index.html
+++ b/sca-cpp/trunk/samples/store-gae/htdocs/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = defun(reference(store, "shoppingCart"), "email", "host");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.defun(sca.reference(store, "shoppingCart"), "email", "host");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-java/htdocs/index.html b/sca-cpp/trunk/samples/store-java/htdocs/index.html
index 1967292be9..3945e45bb7 100644
--- a/sca-cpp/trunk/samples/store-java/htdocs/index.html
+++ b/sca-cpp/trunk/samples/store-java/htdocs/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-nosql/htdocs/index.html b/sca-cpp/trunk/samples/store-nosql/htdocs/index.html
index 1967292be9..3945e45bb7 100644
--- a/sca-cpp/trunk/samples/store-nosql/htdocs/index.html
+++ b/sca-cpp/trunk/samples/store-nosql/htdocs/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-python/htdocs/index.html b/sca-cpp/trunk/samples/store-python/htdocs/index.html
index 1967292be9..3945e45bb7 100644
--- a/sca-cpp/trunk/samples/store-python/htdocs/index.html
+++ b/sca-cpp/trunk/samples/store-python/htdocs/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-scheme/htdocs/index.html b/sca-cpp/trunk/samples/store-scheme/htdocs/index.html
index 1967292be9..3945e45bb7 100644
--- a/sca-cpp/trunk/samples/store-scheme/htdocs/index.html
+++ b/sca-cpp/trunk/samples/store-scheme/htdocs/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-sql/htdocs/index.html b/sca-cpp/trunk/samples/store-sql/htdocs/index.html
index 1967292be9..3945e45bb7 100644
--- a/sca-cpp/trunk/samples/store-sql/htdocs/index.html
+++ b/sca-cpp/trunk/samples/store-sql/htdocs/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-vhost/htdocs/domains/jane/index.html b/sca-cpp/trunk/samples/store-vhost/htdocs/domains/jane/index.html
index 179d28e9c9..238ed701f0 100644
--- a/sca-cpp/trunk/samples/store-vhost/htdocs/domains/jane/index.html
+++ b/sca-cpp/trunk/samples/store-vhost/htdocs/domains/jane/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;

 

diff --git a/sca-cpp/trunk/samples/store-vhost/htdocs/domains/joe/index.html b/sca-cpp/trunk/samples/store-vhost/htdocs/domains/joe/index.html
index 5152b3798b..c1cfc59aa7 100644
--- a/sca-cpp/trunk/samples/store-vhost/htdocs/domains/joe/index.html
+++ b/sca-cpp/trunk/samples/store-vhost/htdocs/domains/joe/index.html
@@ -23,10 +23,10 @@
 <script type="text/javascript" src="/component.js"></script>

 

 <script type="text/javascript">

-var store = component("Store");

-var catalog = defun(reference(store, "catalog"), "items");

-var shoppingCart = reference(store, "shoppingCart");

-var shoppingTotal = defun(reference(store, "shoppingTotal"), "total");

+var store = sca.component("Store");

+var catalog = sca.defun(sca.reference(store, "catalog"), "items");

+var shoppingCart = sca.reference(store, "shoppingCart");

+var shoppingTotal = sca.defun(sca.reference(store, "shoppingTotal"), "total");

 

 var catalogItems;