modules/js/htdocs/ui.js - tuscany-sca-cpp - Git at Google

 /*
  * 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.
  */

 /**
  * UI utility functions.
  */

 var ui = {};

 /**
  * Return a child element of a node with the given id.
  */
 ui.elementByID = function(node, id) {
     if (node.skipNode == true)
         return null;
     if (node == document)
         return document.getElementById(id);
     for (var i in node.childNodes) {
         var child = node.childNodes[i];
         if (isNull(child))
             continue;
         if (child.id == id)
             return child;
         var gchild = ui.elementByID(child, id);
         if (gchild != null)
             return gchild;
     }
     return null;
 };

 /**
  * Remove ids in a tree of elements.
  */
 ui.removeElementIDs = function(node) {
     if (!isNull(node.id))
         node.id = null;
     for (var i in node.childNodes) {
         var child = node.childNodes[i];
         if (isNull(child))
             continue;
         ui.removeElementIDs(child);
     }
     return true;
 };

 /**
  * Return the current document, or a child element with the given id.
  */
 function $(id) {
     if (id == document)
         return document;
     return memo(document, '$' + id, function() {
         return ui.elementByID($(document), id);
     });
 }

 /**
  * Un-memoize elements previously found by id.
  */
 ui.unmemo$ = function(prefix) {
     return prefix? unmemo(document, '$' + prefix) : unmemo(document);
 };

 /**
  * Return a list of elements with the given class name.
  */
 ui.elementsByClassName = function(node, c) {
     return nodeList(node.getElementsByClassName(c));
 };

 /**
  * Return the query string of a URL.
  */
 ui.query = function(url) {
     var u = '' + url;
     var q = u.indexOf('?');
     return q >= 0? u.substring(q + 1) : '';
 };

 /**
  * Return the fragment part of a URL.
  */
 ui.fragment = function(url) {
     var u = '' + url;
     var h = u.indexOf('#');
     return h >= 0? u.substring(h + 1) : '';
 };

 /**
  * Return the path and parameters of a URL.
  */
 ui.pathandparams = function(url) {
     var u = '' + url;
     var ds = u.indexOf('//');
     var u2 = ds > 0? u.substring(ds + 2) : u;
     var s = u2.indexOf('/');
     return s > 0? u2.substring(s) : '';
 };

 /**
  * Return a dictionary of query parameters in a URL.
  */
 ui.queryParams = function(url) {
     var qp = new Array();
     var qs = ui.query(url).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;
 };

 /**
  * Return a dictionary of fragment parameters in a URL.
  */
 ui.fragmentParams = function(url) {
     var qp = new Array();
     var qs = ui.fragment(url).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;
 };

 /**
  * Convert a base64-encoded PNG image to a data URL.
  */
 ui.b64png = function(b64) {
     return 'data:image/png;base64,' + b64.trim();
 };

 /**
  * Convert a base64-encoded JPEG image to a data URL.
  */
 ui.b64jpeg = function(b64) {
     return 'data:image/jpeg;base64,' + b64.trim();
 };

 /**
  * Convert a data URL to a base64-encoded image.
  */
 ui.imgb64 = function(img) {
     if (img.startsWith('data:'))
         return img.split(',')[1]
     return '';
 };

 /**
  * Declare a CSS stylesheet.
  */
 ui.declareCSS = function(s) {
     var e = document.createElement('style');
     e.type = 'text/css';
     e.textContent = s;
     return e;
 };

 /**
  * Include a CSS stylesheet.
  */
 ui.includeCSS = function(s) {
     var e = ui.declareCSS(s);
     var head = document.getElementsByTagName('head')[0];
     head.appendChild(e);
     return e;
 };

 /**
  * Declare a script.
  */
 ui.declareScript = function(s) {
     var e = document.createElement('script');
     e.type = 'text/javascript';
     e.text = s;
     return e;
 };

 /**
  * Return the scripts elements under a given element.
  */
 ui.innerScripts = function(e) {
     return map(function(s) { return s.text; },  nodeList(e.getElementsByTagName('script')));
 };

 /**
  * Evaluate a script.
  */
 ui.evalScript = function(s) {
     return eval('(function evalscript() { try { \n' + s + '\n} catch(e) { debug(e.stack); throw e; }})();');
 };

 /**
  * Include a script.
  */
 ui.includeScript = function(s) {
     //debug('include', s);
     return eval('try { \n' + s + '\n} catch(e) { debug(e.stack); throw e; }');
 };

 /**
  * Return true if the client is a mobile device.
  */
 ui.mobiledetected = false;
 ui.mobile = false;
 ui.isMobile = function() {
     if (ui.mobiledetected)
         return ui.mobile;
     var ua = navigator.userAgent;
     if (ua.match(/iPhone/i) || ua.match(/iPad/i) || ua.match(/iPod/i) || ua.match(/Android/i) || ua.match(/Blackberry/i) || ua.match(/WebOs/i))
         ui.mobile = true;
     ui.mobiledetected = true;
     return ui.mobile;
 };

 /**
  * Return true if the client is Webkit based.
  */
 ui.isWebkit = function() {
     return navigator.userAgent.match(/WebKit/i);
 };

 /**
  * Return the Webkit version.
  */
 ui.webkitVersion = function() {
     return Number(navigator.userAgent.replace(/.*AppleWebKit\/(\d+\.\d+).*/, '$1'));
 };

 /**
  * Return the Safari version.
  */
 ui.browserVersion = function() {
     return Number(navigator.userAgent.replace(/.*Version\/(\d+\.\d+).*/, '$1'));
 };

 /**
  * Return true if the client is Android based.
  */
 ui.isAndroid = function() {
     return navigator.userAgent.match(/Android/i);
 };

 /**
  * Return true if the client is Firefox.
  */
 ui.isFirefox = function() {
     return navigator.userAgent.match(/Firefox/i);
 };

 /**
  * Return the Firefox version.
  */
 ui.firefoxVersion = function() {
     return Number(navigator.userAgent.replace(/.*Firefox\/(\d+\.\d+).*/, '$1'));
 };

 /**
  * Return true if the client is Safari.
  */
 ui.isSafari = function() {
     return navigator.userAgent.match(/Safari/i);
 };

 /**
  * Return true if the client is Chrome.
  */
 ui.isChrome = function() {
     return navigator.userAgent.match(/Chrome/i);
 };

 /**
  * Return true if the client is Internet Explorer.
  */
 ui.isMSIE = function() {
     return navigator.userAgent.match(/MSIE/i);
 };

 /**
  * Return the Internet Explorer version.
  */
 ui.msieVersion = function() {
     return Number(navigator.userAgent.replace(/.*MSIE (\d+\.\d+).*/, '$1'));
 };

 /**
  * Run a UI rendering function asynchronously.
  */
 ui.async = function(f, t) {
     window.setTimeout(function() {
         return f();
     }, isNull(t)? 0 : t);
     return true;
 };

 /**
  * Delay the execution of a function.
  */
 ui.delayed = {}
 ui.delay = function(f, t) {
     var id = window.setTimeout(function() {
         delete ui.delayed[id];
         return f();
     }, isNull(t)? 0 : t);
     ui.delayed[id] = id;
     return id;
 };

 /**
  * Cancel the execution of a delayed function.
  */
 ui.cancelDelay = function(id) {
     delete ui.delayed[id];
     return window.clearTimeout(id);
 };

 /**
  * Run a UI animation.
  */
 ui.animationFrame = null;
 ui.animation = function(f) {
     if (isNull(ui.animationFrame))
         // Use requestAnimationFrame when available, fallback to setInterval
         ui.animationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
             function(f) {
                 if (!('interval' in f) || isNull(f.interval)) {
                     // First call, setup the interval
                     f.interval = window.setInterval(function animation() {
                         f.clearInterval = true;
                         try {
                             f();
                         } catch(ex) {}
                         // If the animation function didn't call ui.animation again to
                         // request another animation frame, clear the interval
                         if (f.clearInterval) {
                             f.clearInterval = false;
                             window.clearInterval(f.interval);
                             f.interval = null;
                         }
                     }, 16);
                 } else {
                     // Called to request another animation frame, do not clear the
                     // interval
                     f.clearInterval = false;
                 }
             };
     return ui.animationFrame.call(window, f);
 };

 /**
  * Convert a CSS position to a numeric position.
  */
 ui.numpos = function(p) {
     return p == ''? 0 : Number(p.substr(0, p.length - 2));
 };

 /**
  * Convert a numeric position to a CSS pixel position.
  */
 ui.pixpos = function(p) {
     return p + 'px';
 };

 /**
  * Default page load behavior.
  */
 ui.filler = null;
 ui.onload = function() {

     // Add a filler div to make sure we can scroll
     if (ui.isMobile()) {
         ui.filler = document.createElement('div');
         ui.filler.id = 'filler';
         ui.filler.className = 'filler';
         ui.filler.style.height = ui.pixpos(window.orientation == 0? screen.height : screen.width * 2);
         document.body.appendChild(ui.filler);
     } else {
         // Style scroll bars
         var h = document.getElementsByTagName('html');
         if (!isNull(h))
             h[0].className = h[0].className? h[0].classname + ' flatscrollbars' : 'flatscrollbars';
     }

     // Scroll to hide the address bar
     document.body.style.display = 'block';
     window.scrollTo(0, 0);

     // Set unload handler
     window.onunload = function() {
         window.scrollTo(0, 0);
         return true;
     };

     return true;
 };

 /**
  * Default orientation change behavior.
  */
 ui.onorientationchange = function(e) {

     // Adjust filler height
     if (!isNull(ui.filler))
         ui.filler.style.height = ui.pixpos(window.orientation == 0? screen.height : screen.width);

     // Scroll to hide the address bar
     window.scrollTo(0, 0);
     return true;
 };

 /**
  * Navigate to a new document.
  */
 ui.navigate = function(url, win) {
     //debug('navigate', url, win);

     // Open a new window
     if (win == '_blank') {
         window.top.open(url, win);
         return false;
     }

     // Open a new document in the current window
     if (win == '_self') {
         window.top.open(url, win);
         return false;
     }

     // Reload the current window
     if (win == '_reload') {
         window.top.location = url;
         window.top.location.reload();
         return false;
     }

     // Let the current top window handle the navigation
     if (win == '_view') {
         if (!window.top.onnavigate)
             return window.top.open(url, '_self');

         // Cleanup window event handlers
         window.onclick = null;
         if (!ui.isMobile()) {
             window.onmousedown = null;
             window.onmouseup = null;
             window.onmousemove = null;
         } else {
             window.ontouchstart = null;
             window.ontouchend = null;
             window.ontouchmove = null;
         }

         // Cancel any cancelable HTTP requests
         HTTPBindingClient.cancelRequests();

         // Cleanup memoized element lookups
         ui.unmemo$();

         // Cancel any timers
         for (d in ui.delayed)
             ui.cancelDelay(d);

         // Navigate
         window.top.onnavigate(url);
         return false;
     }

     window.top.open(url, win);
     return false;
 }

 /**
  * Bind a click handler to a widget.
  */
 ui.ontouchstart = function(widget, e) {
     //debug('ontouchstart');
     widget.down = true;
     widget.moved = false;
     var t = e.touches[0];
     widget.moveX = t.clientX;
     widget.moveY = t.clientY;
 };

 ui.ontouchmove = function(widget, e) {
     //debug('ontouchmove');
     var t = e.touches[0];
     if (t.clientX != widget.moveX) {
         widget.moveX = t.clientX;
         widget.moved = true;
     }
     if (t.clientY != widget.moveY) {
         widget.moveY = t.clientY;
         widget.moved = true;
     }
 };

 ui.ontouchend = function(widget, e) {
     //debug('ontouchend');
     widget.down = false;
     if (!widget.moved) {
         e.preventDefault();
         return widget.onclick(e);
     }
 };

 ui.onclick = function(widget, handler) {
     if (ui.isMobile()) {
         widget.ontouchstart = function(e) {
             return ui.ontouchstart(widget, e);
         };
         widget.ontouchmove = function(e) {
             return ui.ontouchmove(widget, e);
         };
         widget.ontouchend = function(e) {
             return ui.ontouchend(widget, e);
         };
     }
     widget.onclick = function(e) {
         //debug('onclick');
         return handler(e);
     };
     return widget;
 };

 /**
  * Build a portable <a href> tag.
  */
 ui.href = function(id, loc, target, html) {
     if (target == '_blank')
         return '<a id="' + id + '" href="' + loc + '" target="_blank">' + html + '</a>';
     return '<a id="' + id + '" href="' + loc + '" ' + (ui.isMobile()? 'ontouchstart="return ui.ontouchstart(this, event);" ontouchmove="return ui.ontouchmove(this, event);" ontouchend="return ui.ontouchend(this, event);" ' : '') + 'onclick="return ui.navigate(\'' + loc + '\', \'' + target + '\');">' + html + '</a>';
 };

 /**
  * Build a menu bar.
  */
 ui.menu = function(id, name, href, target, hilight) {
     function Menu() {
         this.content = function() {
             if (hilight == true)
                 return ui.href(id, href, target, '<span class="tbarsmenu">' + name + '</span>');
             else if (hilight == false)
                 return ui.href(id, href, target, '<span class="tbaramenu">' + name + '</span>');
             else
                 return ui.href(id, href, target, '<span class="' + hilight + '">' + name + '</span>');
         };
     }
     return new Menu();
 };

 ui.menufunc = function(id, name, fun, hilight) {
     function Menu() {
         this.content = function() {
             function href(id, fun, html) {
                 return '<a id="' + id + '" href="/" ' + (ui.isMobile()? 'ontouchstart="return ui.ontouchstart(this, event);" ontouchmove="return ui.ontouchmove(this, event);" ontouchend="return ui.ontouchend(this, event);" ' : '') + 'onclick="' + fun + '">' + html + '</a>';
             }

             if (hilight == true)
                 return href(id, fun, '<span class="tbarsmenu">' + name + '</span>');
             else if (hilight == false)
                 return href(id, fun, '<span class="tbaramenu">' + name + '</span>');
             else
                 return href(id, fun, '<span class="' + hilight + '">' + name + '</span>');
         };
     }
     return new Menu();
 };

 ui.menubar = function(left, right) {
     var bar = '';
     for (i in left)
         bar = bar + '<span class="tbarleft">' + left[i].content() + '</span>';
     for (i in right)
         bar = bar + '<span class="tbarright">' + right[i].content() + '</span>';
     return bar;
 };

 /**
  * Convert a list of elements to an HTML table.
  */
 ui.datatable = function(l) {

     function indent(i) {
         if (i == 0)
             return '';
         return '&nbsp;&nbsp;' + indent(i - 1);
     }

     function rows(l, i) {
         if (isNull(l))
             return '';
         var e = car(l);

         // Convert a list of simple values into a list of name value pairs
         if (!isList(e))
             return rows(expandElementValues("'value", l), i);

         // Convert a list of complex values into a list of name value pairs
         if (isList(car(e)))
             return rows(expandElementValues("'value", l), i);

         // Generate table row for a simple element value
         if (elementHasValue(e)) {
             var v = elementValue(e);
             if (!isList(v)) {
                 return '<tr><td class="datatdl">' + indent(i) + elementName(e).slice(1) + '</td>' +
                     '<td class="datatdr tdw">' + (v != null? v : '') + '</td></tr>' +
                     rows(cdr(l), i);
             }

             return rows(expandElementValues(elementName(e), v), i) + rows(cdr(l), i);
         }

         // Generate table row for an element with children
         return '<tr><td class="datatdl">' + indent(i) + elementName(e).slice(1) + '</td>' +
             '<td class="datatdr tdw">' + '</td></tr>' +
             rows(elementChildren(e), i + 1) +
             rows(cdr(l), i);
     }

     return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
 };

 /**
  * Convert a list of elements to an HTML single column table.
  */
 ui.datalist = function(l) {

     function rows(l, i) {
         if (isNull(l))
             return '';
         var e = car(l);

         // Convert a list of simple values into a list of name value pairs
         if (!isList(e))
             return rows(expandElementValues("'value", l), i);

         // Convert a list of complex values into a list of name value pairs
         if (isList(car(e)))
             return rows(expandElementValues("'value", l), i);

         // Generate table row for a simple element value
         if (elementHasValue(e)) {
             var v = elementValue(e);
             if (!isList(v)) {
                 return '<tr><td class="datatd tdw">' + (v != null? v : '') + '</td></tr>' +
                     rows(cdr(l), i);
             }

             return rows(expandElementValues(elementName(e), v), i) + rows(cdr(l), i);
         }

         // Generate rows for an element's children
         return rows(elementChildren(e), i + 1) + rows(cdr(l), i);
     }

     return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
 };

 /**
  * Read a file and convert it to a data url.
  */
 ui.readfile = function(file, onerror, onprogress, onload) {
     var reader = new FileReader();
     reader.onerror = function(e) {
         return onerror();
     };
     reader.onprogress = function(e) {
         return onprogress(e.lengthComputable? Math.round((e.loaded / e.total) * 90) : 50);
     };
     reader.onload = function(r) {
         return onload(r.target.result);
     };
     return reader.readAsDataURL(file);
 };

 /**
  * Read an image url and convert it to a data url.
  */
 ui.readimageurl = function(url, onerror, onprogress, onload, width, height) {
     // Create a canvas to draw the image
     var canvas = document.createElement('canvas');
     if (width)
         canvas.width = width;
     if (height)
         canvas.height = height;

     // Create an image
     var img = new Image();
     img.onerror = function(e) {
         return onerror();
     };
     img.onload = function() {
         // Draw the image
         var ctx = canvas.getContext('2d');
         if (width || height)
             ctx.drawImage(img, 0, 0, width, height);
         else
             ctx.drawImage(img, 0, 0);

         // Convert new canvas image to a data url
         return onload(canvas.toDataURL('image/png'));
     };

     // Load the image
     onprogress(90);
     img.src = url;
     return true;
 };

 /**
  * Read an image file or url and convert it to a data url.
  */
 ui.readimage = function(img, onerror, onprogress, onload, width, height) {
     if (isString(img))
         return ui.readimageurl(img, onerror, onprogress, onload, width, height);
     return ui.readfile(img, onerror, onprogress, function(url) {
             return ui.readimageurl(url, onerror, onprogress, onload, width, height);
         }, width, height);
 };
	/*
	* 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.
	*/

	/**
	* UI utility functions.
	*/

	var ui = {};

	/**
	* Return a child element of a node with the given id.
	*/
	ui.elementByID = function(node, id) {
	if (node.skipNode == true)
	return null;
	if (node == document)
	return document.getElementById(id);
	for (var i in node.childNodes) {
	var child = node.childNodes[i];
	if (isNull(child))
	continue;
	if (child.id == id)
	return child;
	var gchild = ui.elementByID(child, id);
	if (gchild != null)
	return gchild;
	}
	return null;
	};

	/**
	* Remove ids in a tree of elements.
	*/
	ui.removeElementIDs = function(node) {
	if (!isNull(node.id))
	node.id = null;
	for (var i in node.childNodes) {
	var child = node.childNodes[i];
	if (isNull(child))
	continue;
	ui.removeElementIDs(child);
	}
	return true;
	};

	/**
	* Return the current document, or a child element with the given id.
	*/
	function $(id) {
	if (id == document)
	return document;
	return memo(document, '$' + id, function() {
	return ui.elementByID($(document), id);
	});
	}

	/**
	* Un-memoize elements previously found by id.
	*/
	ui.unmemo$ = function(prefix) {
	return prefix? unmemo(document, '$' + prefix) : unmemo(document);
	};

	/**
	* Return a list of elements with the given class name.
	*/
	ui.elementsByClassName = function(node, c) {
	return nodeList(node.getElementsByClassName(c));
	};

	/**
	* Return the query string of a URL.
	*/
	ui.query = function(url) {
	var u = '' + url;
	var q = u.indexOf('?');
	return q >= 0? u.substring(q + 1) : '';
	};

	/**
	* Return the fragment part of a URL.
	*/
	ui.fragment = function(url) {
	var u = '' + url;
	var h = u.indexOf('#');
	return h >= 0? u.substring(h + 1) : '';
	};

	/**
	* Return the path and parameters of a URL.
	*/
	ui.pathandparams = function(url) {
	var u = '' + url;
	var ds = u.indexOf('//');
	var u2 = ds > 0? u.substring(ds + 2) : u;
	var s = u2.indexOf('/');
	return s > 0? u2.substring(s) : '';
	};

	/**
	* Return a dictionary of query parameters in a URL.
	*/
	ui.queryParams = function(url) {
	var qp = new Array();
	var qs = ui.query(url).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;
	};

	/**
	* Return a dictionary of fragment parameters in a URL.
	*/
	ui.fragmentParams = function(url) {
	var qp = new Array();
	var qs = ui.fragment(url).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;
	};

	/**
	* Convert a base64-encoded PNG image to a data URL.
	*/
	ui.b64png = function(b64) {
	return 'data:image/png;base64,' + b64.trim();
	};

	/**
	* Convert a base64-encoded JPEG image to a data URL.
	*/
	ui.b64jpeg = function(b64) {
	return 'data:image/jpeg;base64,' + b64.trim();
	};

	/**
	* Convert a data URL to a base64-encoded image.
	*/
	ui.imgb64 = function(img) {
	if (img.startsWith('data:'))
	return img.split(',')[1]
	return '';
	};

	/**
	* Declare a CSS stylesheet.
	*/
	ui.declareCSS = function(s) {
	var e = document.createElement('style');
	e.type = 'text/css';
	e.textContent = s;
	return e;
	};

	/**
	* Include a CSS stylesheet.
	*/
	ui.includeCSS = function(s) {
	var e = ui.declareCSS(s);
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(e);
	return e;
	};

	/**
	* Declare a script.
	*/
	ui.declareScript = function(s) {
	var e = document.createElement('script');
	e.type = 'text/javascript';
	e.text = s;
	return e;
	};

	/**
	* Return the scripts elements under a given element.
	*/
	ui.innerScripts = function(e) {
	return map(function(s) { return s.text; }, nodeList(e.getElementsByTagName('script')));
	};

	/**
	* Evaluate a script.
	*/
	ui.evalScript = function(s) {
	return eval('(function evalscript() { try { \n' + s + '\n} catch(e) { debug(e.stack); throw e; }})();');
	};

	/**
	* Include a script.
	*/
	ui.includeScript = function(s) {
	//debug('include', s);
	return eval('try { \n' + s + '\n} catch(e) { debug(e.stack); throw e; }');
	};

	/**
	* Return true if the client is a mobile device.
	*/
	ui.mobiledetected = false;
	ui.mobile = false;
	ui.isMobile = function() {
	if (ui.mobiledetected)
	return ui.mobile;
	var ua = navigator.userAgent;
	if (ua.match(/iPhone/i) \|\| ua.match(/iPad/i) \|\| ua.match(/iPod/i) \|\| ua.match(/Android/i) \|\| ua.match(/Blackberry/i) \|\| ua.match(/WebOs/i))
	ui.mobile = true;
	ui.mobiledetected = true;
	return ui.mobile;
	};

	/**
	* Return true if the client is Webkit based.
	*/
	ui.isWebkit = function() {
	return navigator.userAgent.match(/WebKit/i);
	};

	/**
	* Return the Webkit version.
	*/
	ui.webkitVersion = function() {
	return Number(navigator.userAgent.replace(/.AppleWebKit\/(\d+\.\d+)./, '$1'));
	};

	/**
	* Return the Safari version.
	*/
	ui.browserVersion = function() {
	return Number(navigator.userAgent.replace(/.Version\/(\d+\.\d+)./, '$1'));
	};

	/**
	* Return true if the client is Android based.
	*/
	ui.isAndroid = function() {
	return navigator.userAgent.match(/Android/i);
	};

	/**
	* Return true if the client is Firefox.
	*/
	ui.isFirefox = function() {
	return navigator.userAgent.match(/Firefox/i);
	};

	/**
	* Return the Firefox version.
	*/
	ui.firefoxVersion = function() {
	return Number(navigator.userAgent.replace(/.Firefox\/(\d+\.\d+)./, '$1'));
	};

	/**
	* Return true if the client is Safari.
	*/
	ui.isSafari = function() {
	return navigator.userAgent.match(/Safari/i);
	};

	/**
	* Return true if the client is Chrome.
	*/
	ui.isChrome = function() {
	return navigator.userAgent.match(/Chrome/i);
	};

	/**
	* Return true if the client is Internet Explorer.
	*/
	ui.isMSIE = function() {
	return navigator.userAgent.match(/MSIE/i);
	};

	/**
	* Return the Internet Explorer version.
	*/
	ui.msieVersion = function() {
	return Number(navigator.userAgent.replace(/.MSIE (\d+\.\d+)./, '$1'));
	};

	/**
	* Run a UI rendering function asynchronously.
	*/
	ui.async = function(f, t) {
	window.setTimeout(function() {
	return f();
	}, isNull(t)? 0 : t);
	return true;
	};

	/**
	* Delay the execution of a function.
	*/
	ui.delayed = {}
	ui.delay = function(f, t) {
	var id = window.setTimeout(function() {
	delete ui.delayed[id];
	return f();
	}, isNull(t)? 0 : t);
	ui.delayed[id] = id;
	return id;
	};

	/**
	* Cancel the execution of a delayed function.
	*/
	ui.cancelDelay = function(id) {
	delete ui.delayed[id];
	return window.clearTimeout(id);
	};

	/**
	* Run a UI animation.
	*/
	ui.animationFrame = null;
	ui.animation = function(f) {
	if (isNull(ui.animationFrame))
	// Use requestAnimationFrame when available, fallback to setInterval
	ui.animationFrame = window.requestAnimationFrame \|\| window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\| window.oRequestAnimationFrame \|\| window.msRequestAnimationFrame \|\|
	function(f) {
	if (!('interval' in f) \|\| isNull(f.interval)) {
	// First call, setup the interval
	f.interval = window.setInterval(function animation() {
	f.clearInterval = true;
	try {
	f();
	} catch(ex) {}
	// If the animation function didn't call ui.animation again to
	// request another animation frame, clear the interval
	if (f.clearInterval) {
	f.clearInterval = false;
	window.clearInterval(f.interval);
	f.interval = null;
	}
	}, 16);
	} else {
	// Called to request another animation frame, do not clear the
	// interval
	f.clearInterval = false;
	}
	};
	return ui.animationFrame.call(window, f);
	};

	/**
	* Convert a CSS position to a numeric position.
	*/
	ui.numpos = function(p) {
	return p == ''? 0 : Number(p.substr(0, p.length - 2));
	};

	/**
	* Convert a numeric position to a CSS pixel position.
	*/
	ui.pixpos = function(p) {
	return p + 'px';
	};

	/**
	* Default page load behavior.
	*/
	ui.filler = null;
	ui.onload = function() {

	// Add a filler div to make sure we can scroll
	if (ui.isMobile()) {
	ui.filler = document.createElement('div');
	ui.filler.id = 'filler';
	ui.filler.className = 'filler';
	ui.filler.style.height = ui.pixpos(window.orientation == 0? screen.height : screen.width * 2);
	document.body.appendChild(ui.filler);
	} else {
	// Style scroll bars
	var h = document.getElementsByTagName('html');
	if (!isNull(h))
	h[0].className = h[0].className? h[0].classname + ' flatscrollbars' : 'flatscrollbars';
	}

	// Scroll to hide the address bar
	document.body.style.display = 'block';
	window.scrollTo(0, 0);

	// Set unload handler
	window.onunload = function() {
	window.scrollTo(0, 0);
	return true;
	};

	return true;
	};

	/**
	* Default orientation change behavior.
	*/
	ui.onorientationchange = function(e) {

	// Adjust filler height
	if (!isNull(ui.filler))
	ui.filler.style.height = ui.pixpos(window.orientation == 0? screen.height : screen.width);

	// Scroll to hide the address bar
	window.scrollTo(0, 0);
	return true;
	};

	/**
	* Navigate to a new document.
	*/
	ui.navigate = function(url, win) {
	//debug('navigate', url, win);

	// Open a new window
	if (win == '_blank') {
	window.top.open(url, win);
	return false;
	}

	// Open a new document in the current window
	if (win == '_self') {
	window.top.open(url, win);
	return false;
	}

	// Reload the current window
	if (win == '_reload') {
	window.top.location = url;
	window.top.location.reload();
	return false;
	}

	// Let the current top window handle the navigation
	if (win == '_view') {
	if (!window.top.onnavigate)
	return window.top.open(url, '_self');

	// Cleanup window event handlers
	window.onclick = null;
	if (!ui.isMobile()) {
	window.onmousedown = null;
	window.onmouseup = null;
	window.onmousemove = null;
	} else {
	window.ontouchstart = null;
	window.ontouchend = null;
	window.ontouchmove = null;
	}

	// Cancel any cancelable HTTP requests
	HTTPBindingClient.cancelRequests();

	// Cleanup memoized element lookups
	ui.unmemo$();

	// Cancel any timers
	for (d in ui.delayed)
	ui.cancelDelay(d);

	// Navigate
	window.top.onnavigate(url);
	return false;
	}

	window.top.open(url, win);
	return false;
	}

	/**
	* Bind a click handler to a widget.
	*/
	ui.ontouchstart = function(widget, e) {
	//debug('ontouchstart');
	widget.down = true;
	widget.moved = false;
	var t = e.touches[0];
	widget.moveX = t.clientX;
	widget.moveY = t.clientY;
	};

	ui.ontouchmove = function(widget, e) {
	//debug('ontouchmove');
	var t = e.touches[0];
	if (t.clientX != widget.moveX) {
	widget.moveX = t.clientX;
	widget.moved = true;
	}
	if (t.clientY != widget.moveY) {
	widget.moveY = t.clientY;
	widget.moved = true;
	}
	};

	ui.ontouchend = function(widget, e) {
	//debug('ontouchend');
	widget.down = false;
	if (!widget.moved) {
	e.preventDefault();
	return widget.onclick(e);
	}
	};

	ui.onclick = function(widget, handler) {
	if (ui.isMobile()) {
	widget.ontouchstart = function(e) {
	return ui.ontouchstart(widget, e);
	};
	widget.ontouchmove = function(e) {
	return ui.ontouchmove(widget, e);
	};
	widget.ontouchend = function(e) {
	return ui.ontouchend(widget, e);
	};
	}
	widget.onclick = function(e) {
	//debug('onclick');
	return handler(e);
	};
	return widget;
	};

	/**
	* Build a portable <a href> tag.
	*/
	ui.href = function(id, loc, target, html) {
	if (target == '_blank')
	return '<a id="' + id + '" href="' + loc + '" target="_blank">' + html + '</a>';
	return '<a id="' + id + '" href="' + loc + '" ' + (ui.isMobile()? 'ontouchstart="return ui.ontouchstart(this, event);" ontouchmove="return ui.ontouchmove(this, event);" ontouchend="return ui.ontouchend(this, event);" ' : '') + 'onclick="return ui.navigate(\'' + loc + '\', \'' + target + '\');">' + html + '</a>';
	};

	/**
	* Build a menu bar.
	*/
	ui.menu = function(id, name, href, target, hilight) {
	function Menu() {
	this.content = function() {
	if (hilight == true)
	return ui.href(id, href, target, '<span class="tbarsmenu">' + name + '</span>');
	else if (hilight == false)
	return ui.href(id, href, target, '<span class="tbaramenu">' + name + '</span>');
	else
	return ui.href(id, href, target, '<span class="' + hilight + '">' + name + '</span>');
	};
	}
	return new Menu();
	};

	ui.menufunc = function(id, name, fun, hilight) {
	function Menu() {
	this.content = function() {
	function href(id, fun, html) {
	return '<a id="' + id + '" href="/" ' + (ui.isMobile()? 'ontouchstart="return ui.ontouchstart(this, event);" ontouchmove="return ui.ontouchmove(this, event);" ontouchend="return ui.ontouchend(this, event);" ' : '') + 'onclick="' + fun + '">' + html + '</a>';
	}

	if (hilight == true)
	return href(id, fun, '<span class="tbarsmenu">' + name + '</span>');
	else if (hilight == false)
	return href(id, fun, '<span class="tbaramenu">' + name + '</span>');
	else
	return href(id, fun, '<span class="' + hilight + '">' + name + '</span>');
	};
	}
	return new Menu();
	};

	ui.menubar = function(left, right) {
	var bar = '';
	for (i in left)
	bar = bar + '<span class="tbarleft">' + left[i].content() + '</span>';
	for (i in right)
	bar = bar + '<span class="tbarright">' + right[i].content() + '</span>';
	return bar;
	};

	/**
	* Convert a list of elements to an HTML table.
	*/
	ui.datatable = function(l) {

	function indent(i) {
	if (i == 0)
	return '';
	return '  ' + indent(i - 1);
	}

	function rows(l, i) {
	if (isNull(l))
	return '';
	var e = car(l);

	// Convert a list of simple values into a list of name value pairs
	if (!isList(e))
	return rows(expandElementValues("'value", l), i);

	// Convert a list of complex values into a list of name value pairs
	if (isList(car(e)))
	return rows(expandElementValues("'value", l), i);

	// Generate table row for a simple element value
	if (elementHasValue(e)) {
	var v = elementValue(e);
	if (!isList(v)) {
	return '<tr><td class="datatdl">' + indent(i) + elementName(e).slice(1) + '</td>' +
	'<td class="datatdr tdw">' + (v != null? v : '') + '</td></tr>' +
	rows(cdr(l), i);
	}

	return rows(expandElementValues(elementName(e), v), i) + rows(cdr(l), i);
	}

	// Generate table row for an element with children
	return '<tr><td class="datatdl">' + indent(i) + elementName(e).slice(1) + '</td>' +
	'<td class="datatdr tdw">' + '</td></tr>' +
	rows(elementChildren(e), i + 1) +
	rows(cdr(l), i);
	}

	return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
	};

	/**
	* Convert a list of elements to an HTML single column table.
	*/
	ui.datalist = function(l) {

	function rows(l, i) {
	if (isNull(l))
	return '';
	var e = car(l);

	// Convert a list of simple values into a list of name value pairs
	if (!isList(e))
	return rows(expandElementValues("'value", l), i);

	// Convert a list of complex values into a list of name value pairs
	if (isList(car(e)))
	return rows(expandElementValues("'value", l), i);

	// Generate table row for a simple element value
	if (elementHasValue(e)) {
	var v = elementValue(e);
	if (!isList(v)) {
	return '<tr><td class="datatd tdw">' + (v != null? v : '') + '</td></tr>' +
	rows(cdr(l), i);
	}

	return rows(expandElementValues(elementName(e), v), i) + rows(cdr(l), i);
	}

	// Generate rows for an element's children
	return rows(elementChildren(e), i + 1) + rows(cdr(l), i);
	}

	return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + rows(l, 0) + '</table>';
	};

	/**
	* Read a file and convert it to a data url.
	*/
	ui.readfile = function(file, onerror, onprogress, onload) {
	var reader = new FileReader();
	reader.onerror = function(e) {
	return onerror();
	};
	reader.onprogress = function(e) {
	return onprogress(e.lengthComputable? Math.round((e.loaded / e.total) * 90) : 50);
	};
	reader.onload = function(r) {
	return onload(r.target.result);
	};
	return reader.readAsDataURL(file);
	};

	/**
	* Read an image url and convert it to a data url.
	*/
	ui.readimageurl = function(url, onerror, onprogress, onload, width, height) {
	// Create a canvas to draw the image
	var canvas = document.createElement('canvas');
	if (width)
	canvas.width = width;
	if (height)
	canvas.height = height;

	// Create an image
	var img = new Image();
	img.onerror = function(e) {
	return onerror();
	};
	img.onload = function() {
	// Draw the image
	var ctx = canvas.getContext('2d');
	if (width \|\| height)
	ctx.drawImage(img, 0, 0, width, height);
	else
	ctx.drawImage(img, 0, 0);

	// Convert new canvas image to a data url
	return onload(canvas.toDataURL('image/png'));
	};

	// Load the image
	onprogress(90);
	img.src = url;
	return true;
	};

	/**
	* Read an image file or url and convert it to a data url.
	*/
	ui.readimage = function(img, onerror, onprogress, onload, width, height) {
	if (isString(img))
	return ui.readimageurl(img, onerror, onprogress, onload, width, height);
	return ui.readfile(img, onerror, onprogress, function(url) {
	return ui.readimageurl(url, onerror, onprogress, onload, width, height);
	}, width, height);
	};