add skeleton of demo, it's only import from jsPlumb demo

ui/css/demo-new.css

+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+ 	src:local('Open Sans'), 
+ 		local('OpenSans'),
+ 		url("../font/OpenSans-Regular.ttf") format('truetype'),
+ 		url("../font/OpenSans.woff") format('woff'); 		
+}
+
+body {
+    padding:0;
+    margin:0;
+    background-color:white;    
+    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    text-align:center;	
+}
+#headerWrapper {
+	width:100%;
+	background-color:black;
+	position:fixed;
+	top:0;left:0;
+    z-index:10000;
+	height:44px;
+	padding:0;
+	border-bottom:1px solid #999;
+    box-shadow: 0px 2px 19px #aaa;
+   -o-box-shadow: 0px 2px 19px #aaa;
+   -webkit-box-shadow: 0px 2px 19px #aaa;
+   -moz-box-shadow: 0px 2px 19px #aaa;
+   
+   opacity:0.8;
+}
+
+#header {
+	margin-top:0;
+    height:44px;
+    font-size:80%;
+	margin-left:auto;
+	margin-right:auto;    
+    width:950px;
+    background-image:url(../../img/logo_bw_44h.jpg);
+    background-repeat:no-repeat;    
+}
+
+#intro {
+	margin-top:59px;
+}
+
+ #main {
+    /* these two margins settings are here just to ensure that jsPlumb handles
+    margins properly.*/  
+    margin-top:44px;
+    margin-left: auto;
+    position: relative;
+    font-size: 80%;
+    margin-right: auto;
+    width: 850px;
+    border-left: 2px solid #456;
+    border-right: 2px solid #456;
+    border-bottom: 2px solid #456;
+    height: 600px;
+    overflow: hidden;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    background-color:#eaedef;
+}
+
+#sidebar {            
+    margin-left:auto;
+	margin-right:auto;
+    width:800px;        
+    font-size:13px;    
+}
+
+
+/* demo elements */
+
+.menu,#render, #explanation { 
+    
+	background-color:#fff;	    
+}
+
+.menu {    
+    height: 15px;
+	float:right;
+    padding-top:1em;
+    padding-bottom:0.4em;   
+    background-color: transparent;
+	margin-right:30px;
+}
+
+#render {
+	padding-top:2px;
+    margin-left:auto;
+	margin-right:auto;
+    z-index:5000;
+	margin-top:0px;  
+    text-align: center;
+    background-color:white;
+}
+
+#render ul {
+    padding-left:1em;
+}
+#render ul li {
+    list-style-type:none;
+}
+#render h5 {
+    display:inline;
+}
+
+.otherLibraries {
+    display:inline;
+}
+
+a, a:visited {
+    text-decoration:none;
+    color:#01a3c6;    
+    font-family:helvetica;
+    padding:0.3em;
+    border-radius:0.2em;
+}
+
+a:hover {
+    color:#1b911b;
+}
+
+.selected {
+	color:rgb(189,11,11) !important;
+}
+
+.window, .label { 
+    background-color:white;
+    text-align:center;
+    z-index:23;
+	cursor:pointer;
+	box-shadow: 2px 2px 19px #aaa;
+   -o-box-shadow: 2px 2px 19px #aaa;
+   -webkit-box-shadow: 2px 2px 19px #aaa;
+   -moz-box-shadow: 2px 2px 19px #aaa;
+    
+}
+path, ._jsPlumb_endpoint { cursor:pointer; }
+
+/* z index stuff */
+
+._jsPlumb_connector { z-index:18; }
+._jsPlumb_endpoint { z-index:19; }
+._jsPlumb_overlay { z-index:23; }
+
+._jsPlumb_connector._jsPlumb_hover {
+    z-index:21 !important;
+}
+
+._jsPlumb_endpoint._jsPlumb_hover {
+    z-index:22 !important;
+}

ui/css/flowchartDemo.css

+.window { border:1px solid #346789;
+box-shadow: 2px 2px 19px #aaa;
+   -o-box-shadow: 2px 2px 19px #aaa;
+   -webkit-box-shadow: 2px 2px 19px #aaa;
+   -moz-box-shadow: 2px 2px 19px #aaa;
+-moz-border-radius:0.5em;
+border-radius:0.5em;
+opacity:0.8;
+filter:alpha(opacity=80);
+width:5em; height:5em;
+line-height:5em;
+text-align:center;
+z-index:20; position:absolute;
+background-color:#eeeeef;
+color:black;
+font-family:helvetica;padding:0.5em;
+font-size:0.9em;}
+.window:hover {
+
+box-shadow: 2px 2px 19px #444;
+   -o-box-shadow: 2px 2px 19px #444;
+   -webkit-box-shadow: 2px 2px 19px #444;
+   -moz-box-shadow: 2px 2px 19px #444;
+    opacity:0.6;
+filter:alpha(opacity=60);
+
+}
+
+.active {
+	border:1px dotted green;
+}
+.hover {
+	border:1px dotted red;
+}
+
+#window1 { top:34em;left:5em;}
+#window2 { top:7em; left:36em;}
+#window3 { top:27em;left:48em; }
+#window4 { top:23em; left:22em;}
+._jsPlumb_connector { z-index:4; }
+._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; }
+.hl { border:3px solid red; }
+#debug { position:absolute; background-color:black; color:red; z-index:5000 }
+
+.aLabel {
+ 	background-color:white; 
+	padding:0.4em; 
+	font:12px sans-serif; 
+	color:#444;
+	z-index:21;
+	border:1px dotted gray;
+	opacity:0.8;
+	filter:alpha(opacity=80);
+}
\ No newline at end of file

ui/index.html

+<!doctype html>
+<html>
+	<head>
+		<title>jsPlumb 1.4.0 - flowchart connectors demonstration - jQuery</title>
+		<link rel="stylesheet" href="css/demo-new.css">
+		<link rel="stylesheet" href="css/flowchartDemo.css">
+	</head>
+	<body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
+		
+		<div id="headerWrapper"><div id="header"></div></div>		
+        <div id="main">
+			<div id="render"></div>
+			<div class="window" id="window1"><strong>1</strong><br/><br/></div>
+			<div class="window" id="window2"><strong>2</strong><br/><br/></div>
+		    <div class="window" id="window3"><strong>3</strong><br/><br/></div>
+		    <div class="window" id="window4"><strong>4</strong><br/><br/></div>		
+	    </div>
+		<div id="sidebar">			
+            <div id="explanation">
+                <p>This is a demonstration of Flowchart connectors</p>
+				<p>Hover over connections to highlight them, click to delete. </p>
+				<p>Drag new connections from blue dots to green dots. You can also drag connections from green dots onto other green dots or back onto themselves.</p>            
+				<p>This demonstration uses jsPlumb 1.4.0, jQuery 1.8.1 and jQuery UI 1.8.23.</p>
+            </div>			
+        </div>
+
+	    <!-- DEP -->
+	    <script type="text/javascript" src="lib/jquery-1.8.1-min.js"></script>
+		<script type="text/javascript" src="lib/jquery-ui-1.8.23-min.js"></script>
+        <script type="text/javascript" src="lib/jquery.ui.touch-punch.min.js"></script>
+		<!-- /DEP -->
+		
+		<!-- JS -->
+		<!-- support lib for bezier stuff -->
+		<script src="lib/jsBezier-0.5.js"></script>
+		<!-- jsplumb util -->
+		<script src="lib/jsPlumb/jsPlumb-util.js"></script>
+        <!-- base DOM adapter -->
+		<script src="lib/jsPlumb/jsPlumb-dom-adapter.js"></script>
+		<!-- main jsplumb engine -->
+		<script src="lib/jsPlumb/jsPlumb.js"></script>
+        <!-- anchors -->
+		<script src="lib/jsPlumb/jsPlumb-anchors.js"></script>   
+        <!-- endpoint -->
+		<script src="lib/jsPlumb/jsPlumb-endpoint.js"></script>      
+        <!-- connection -->
+		<script src="lib/jsPlumb/jsPlumb-connection.js"></script>
+		<!-- connector editors  -->
+		<script src="lib/jsPlumb/jsPlumb-connector-editors.js"></script>        
+		<!-- connectors, endpoint and overlays  -->
+		<script src="lib/jsPlumb/jsPlumb-defaults.js"></script>
+		<!-- state machine connectors -->
+		<script src="lib/jsPlumb/jsPlumb-connectors-statemachine.js"></script>
+		<!-- flowchart connectors -->
+		<script src="lib/jsPlumb/jsPlumb-connectors-flowchart.js"></script>        
+		<!-- SVG renderer -->
+		<script src="lib/jsPlumb/jsPlumb-renderers-svg.js"></script>
+		<!-- canvas renderer -->
+		<script src="lib/jsPlumb/jsPlumb-renderers-canvas.js"></script>
+		<!-- vml renderer -->
+		<script src="lib/jsPlumb/jsPlumb-renderers-vml.js"></script>
+        <!-- jquery jsPlumb adapter -->
+		<script src="lib/jsPlumb/jquery.jsPlumb.js"></script>
+		<!-- /JS -->
+		
+		<!--  demo code -->
+		<script src="src/flowchartConnectorsDemo.js"></script>
+		
+		<!--  demo helper code -->
+		<script src="src/demo-list.js"></script>
+		<script src="src/demo-helper-jquery.js"></script>
+		
+	</body>
+</html>

ui/lib/jquery.ui.touch-punch.min.js

+/*
+ * jQuery UI Touch Punch 0.2.2
+ *
+ * Copyright 2011, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
\ No newline at end of file

ui/lib/jsPlumb/jsPlumb-dom-adapter.js

+/*
+ * jsPlumb
+ * 
+ * Title:jsPlumb 1.4.0
+ * 
+ * Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
+ * elements, or VML.  
+ * 
+ * This file contains the base functionality for DOM type adapters. 
+ *
+ * Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
+ * 
+ * http://jsplumb.org
+ * http://github.com/sporritt/jsplumb
+ * http://code.google.com/p/jsplumb
+ * 
+ * Dual licensed under the MIT and GPL2 licenses.
+ */
+;(function() {
+    
+		var canvasAvailable = !!document.createElement('canvas').getContext,
+		svgAvailable = !!window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"),
+		// http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
+		vmlAvailable = function() {		    
+            if (vmlAvailable.vml == undefined) { 
+                    var a = document.body.appendChild(document.createElement('div'));
+            a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
+            var b = a.firstChild;
+            b.style.behavior = "url(#default#VML)";
+            vmlAvailable.vml = b ? typeof b.adj == "object": true;
+            a.parentNode.removeChild(a);
+            }
+            return vmlAvailable.vml;
+		};
+        
+    /**
+		Manages dragging for some instance of jsPlumb.
+	*/
+	var DragManager = function(_currentInstance) {		
+		var _draggables = {}, _dlist = [], _delements = {}, _elementsWithEndpoints = {},			
+			// elementids mapped to the draggable to which they belong.
+			_draggablesForElements = {};
+
+        /**
+            register some element as draggable.  right now the drag init stuff is done elsewhere, and it is
+            possible that will continue to be the case.
+        */
+		this.register = function(el) {
+            var jpcl = jsPlumb.CurrentLibrary;
+            el = jpcl.getElementObject(el);
+            var id = _currentInstance.getId(el),
+                domEl = jpcl.getDOMElement(el),
+                parentOffset = jpcl.getOffset(el);
+                    
+            if (!_draggables[id]) {
+                _draggables[id] = el;
+                _dlist.push(el);
+                _delements[id] = {};
+            }
+				
+			// look for child elements that have endpoints and register them against this draggable.
+			var _oneLevel = function(p, startOffset) {
+                if (p) {											
+                    for (var i = 0; i < p.childNodes.length; i++) {
+                        if (p.childNodes[i].nodeType != 3 && p.childNodes[i].nodeType != 8) {
+                            var cEl = jpcl.getElementObject(p.childNodes[i]),
+                                cid = _currentInstance.getId(cEl, null, true);
+                            if (cid && _elementsWithEndpoints[cid] && _elementsWithEndpoints[cid] > 0) {
+                                var cOff = jpcl.getOffset(cEl);
+                                _delements[id][cid] = {
+                                    id:cid,
+                                    offset:{
+                                        left:cOff.left - parentOffset.left,
+                                        top:cOff.top - parentOffset.top
+                                    }
+                                };
+                                _draggablesForElements[cid] = id;
+                            }
+                            _oneLevel(p.childNodes[i]);
+                        }	
+                    }
+                }
+			};
+
+			_oneLevel(domEl);
+		};
+		
+		// refresh the offsets for child elements of this element. 
+		this.updateOffsets = function(elId) {
+			var jpcl = jsPlumb.CurrentLibrary,
+				el = jpcl.getElementObject(elId),
+				id = _currentInstance.getId(el),
+				children = _delements[id],
+				parentOffset = jpcl.getOffset(el);
+				
+			if (children) {
+				for (var i in children) {
+					var cel = jpcl.getElementObject(i),
+						cOff = jpcl.getOffset(cel);
+						
+					_delements[id][i] = {
+						id:i,
+						offset:{
+							left:cOff.left - parentOffset.left,
+							top:cOff.top - parentOffset.top
+						}
+					};
+					_draggablesForElements[i] = id;
+				}
+			}
+		};
+
+		/**
+			notification that an endpoint was added to the given el.  we go up from that el's parent
+			node, looking for a parent that has been registered as a draggable. if we find one, we add this
+			el to that parent's list of elements to update on drag (if it is not there already)
+		*/
+		this.endpointAdded = function(el) {
+			var jpcl = jsPlumb.CurrentLibrary, b = document.body, id = _currentInstance.getId(el), c = jpcl.getDOMElement(el), 
+				p = c.parentNode, done = p == b;
+
+			_elementsWithEndpoints[id] = _elementsWithEndpoints[id] ? _elementsWithEndpoints[id] + 1 : 1;
+
+			while (p != null && p != b) {
+				var pid = _currentInstance.getId(p, null, true);
+				if (pid && _draggables[pid]) {
+					var idx = -1, pEl = jpcl.getElementObject(p), pLoc = jpcl.getOffset(pEl);
+					
+					if (_delements[pid][id] == null) {
+						var cLoc = jsPlumb.CurrentLibrary.getOffset(el);
+						_delements[pid][id] = {
+							id:id,
+							offset:{
+								left:cLoc.left - pLoc.left,
+								top:cLoc.top - pLoc.top
+							}
+						};
+						_draggablesForElements[id] = pid;
+					}
+					break;
+				}
+				p = p.parentNode;
+			}	
+		};
+
+		this.endpointDeleted = function(endpoint) {
+			if (_elementsWithEndpoints[endpoint.elementId]) {
+				_elementsWithEndpoints[endpoint.elementId]--;
+				if (_elementsWithEndpoints[endpoint.elementId] <= 0) {
+					for (var i in _delements) {
+						if (_delements[i]) {
+                            delete _delements[i][endpoint.elementId];
+                            delete _draggablesForElements[endpoint.elementId];
+                        }
+					}
+				}
+			}		
+		};	
+		
+		this.changeId = function(oldId, newId) {				
+			_delements[newId] = _delements[oldId];			
+			_delements[oldId] = {};
+			_draggablesForElements[newId] = _draggablesForElements[oldId];
+			_draggablesForElements[oldId] = null;			
+		};
+
+		this.getElementsForDraggable = function(id) {
+			return _delements[id];	
+		};
+
+		this.elementRemoved = function(elementId) {
+			var elId = _draggablesForElements[elementId];
+			if (elId) {
+				delete _delements[elId][elementId];
+				delete _draggablesForElements[elementId];
+			}
+		};
+
+		this.reset = function() {
+			_draggables = {};
+			_dlist = [];
+			_delements = {};
+			_elementsWithEndpoints = {};
+		};
+		
+	};
+        
+    // for those browsers that dont have it.  they still don't have it! but at least they won't crash.
+	if (!window.console)
+		window.console = { time:function(){}, timeEnd:function(){}, group:function(){}, groupEnd:function(){}, log:function(){} };
+            
+    window.jsPlumbAdapter = {
+        
+        headless:false,
+        
+        appendToRoot : function(node) {
+            document.body.appendChild(node);
+        },
+        getRenderModes : function() {
+            return [ "canvas", "svg", "vml" ]
+        },
+        isRenderModeAvailable : function(m) {
+            return {
+                "canvas":canvasAvailable,
+                "svg":svgAvailable,
+                "vml":vmlAvailable()
+            }[m];
+        },
+        getDragManager : function(_jsPlumb) {
+            return new DragManager(_jsPlumb);
+        },
+        setRenderMode : function(mode) {
+            var renderMode;
+            
+            if (mode) {
+				mode = mode.toLowerCase();            
+			            
+                var canvasAvailable = this.isRenderModeAvailable("canvas"),
+                    svgAvailable = this.isRenderModeAvailable("svg"),
+                    vmlAvailable = this.isRenderModeAvailable("vml");
+                
+                // now test we actually have the capability to do this.						
+                if (mode === "svg") {
+                    if (svgAvailable) renderMode = "svg"
+                    else if (canvasAvailable) renderMode = "canvas"
+                    else if (vmlAvailable) renderMode = "vml"
+                }
+                else if (mode === "canvas" && canvasAvailable) renderMode = "canvas";
+                else if (vmlAvailable) renderMode = "vml";
+            }
+
+			return renderMode;
+        }
+    };
+    
+})();
\ No newline at end of file

ui/lib/jsPlumb/jsPlumb-drag.js

+/*
+ * this is experimental and probably will not be used.  solutions exist for most libraries.  but of course if
+ * i want to support multiple scopes at some stage then i will have to do dragging inside jsPlumb.
+ */ 
+;(function() {
+    
+    window.jsPlumbDrag = function(_jsPlumb) {
+      
+        var ta = new TouchAdapter();
+        
+        this.draggable = function(selector) {
+            var el, elId, da = [], elo, d = false,
+                isInSelector = function(el) {
+                    if (typeof selector == "string")
+                        return selector === _jsPlumb.getId(el);
+                    
+                    for (var i = 0; i < selector.length; i++) {
+                        var _sel = jsPlumb.CurrentLibrary.getDOMElement(selector[i]);
+                        if (_sel == el) return true;
+                    }
+                    return false;
+                };
+				
+			ta.bind(document, "mousedown", function(e) {
+                var target = e.target || e.srcElement;
+                if (isInSelector(target)) {
+                    el = jsPlumb.CurrentLibrary.getElementObject(target);
+                    elId = _jsPlumb.getId(el);
+                    elo = jsPlumb.CurrentLibrary.getOffset(el);
+                    da = [e.pageX, e.pageY];
+                    d = true;
+                }
+			});
+			
+			ta.bind(document, "mousemove", function(e) {
+				if (d) {
+					var dx = e.pageX - da[0],
+						dy = e.pageY - da[1];
+						
+					jsPlumb.CurrentLibrary.setOffset(el, {
+						left:elo.left + dx,
+						top:elo.top + dy
+					});
+					_jsPlumb.repaint(elId);
+					e.preventDefault();
+					e.stopPropagation();
+				}
+			});
+			ta.bind(document, "mouseup", function(e) {
+				el = null;
+				d = false;				
+			});    
+        };
+        
+        var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
+        if (isIOS)
+            _jsPlumb.draggable = this.draggable;
+        
+    };
+    
+})();
\ No newline at end of file

ui/lib/jsPlumb/jsPlumb-overlays-guidelines.js

+    // this is really just a test overlay, so its undocumented and doesnt take any parameters. but i was loth to delete it.
+    jsPlumb.Overlays.GuideLines = function() {
+        var self = this;
+        self.length = 50;
+        self.lineWidth = 5;
+        this.type = "GuideLines";
+		AbstractOverlay.apply(this, arguments);
+        jsPlumb.jsPlumbUIComponent.apply(this, arguments);
+        this.draw = function(connector, currentConnectionPaintStyle, connectorDimensions) {
+
+            var head = connector.pointAlongPathFrom(self.loc, self.length / 2),
+                mid = connector.pointOnPath(self.loc),
+                tail = jsPlumbUtil.pointOnLine(head, mid, self.length),
+                tailLine = jsPlumbUtil.perpendicularLineTo(head, tail, 40),
+                headLine = jsPlumbUtil.perpendicularLineTo(tail, head, 20);
+
+            self.paint(connector, [head, tail, tailLine, headLine], self.lineWidth, "red", null, connectorDimensions);
+
+            return [Math.min(head.x, tail.x), Math.min(head.y, tail.y), Math.max(head.x, tail.x), Math.max(head.y,tail.y)];
+        };
+
+        this.computeMaxSize = function() { return 50; };
+
+    	this.cleanup = function() { };  // nothing to clean up for GuideLines
+    };
+
+// a test
+    jsPlumb.Overlays.svg.GuideLines = function() {
+        var path = null, self = this, path2 = null, p1_1, p1_2;
+        jsPlumb.Overlays.GuideLines.apply(this, arguments);
+        this.paint = function(connector, d, lineWidth, strokeStyle, fillStyle) {
+    		if (path == null) {
+    			path = _node("path");
+    			connector.svg.appendChild(path);
+    			self.attachListeners(path, connector);
+    			self.attachListeners(path, self);
+
+                p1_1 = _node("path");
+    			connector.svg.appendChild(p1_1);
+    			self.attachListeners(p1_1, connector);
+    			self.attachListeners(p1_1, self);
+
+                p1_2 = _node("path");
+    			connector.svg.appendChild(p1_2);
+    			self.attachListeners(p1_2, connector);
+    			self.attachListeners(p1_2, self);
+
+    		}
+
+    		_attr(path, {
+    			"d"		:	makePath(d[0], d[1]),
+    			stroke 	: 	"red",
+    			fill 	: 	null
+    		});
+
+            _attr(p1_1, {
+    			"d"		:	makePath(d[2][0], d[2][1]),
+    			stroke 	: 	"blue",
+    			fill 	: 	null
+    		});
+
+            _attr(p1_2, {
+    			"d"		:	makePath(d[3][0], d[3][1]),
+    			stroke 	: 	"green",
+    			fill 	: 	null
+    		});
+    	};
+
+        var makePath = function(d1, d2) {
+            return "M " + d1.x + "," + d1.y +
+                   " L" + d2.x + "," + d2.y;
+        };
+    };
\ No newline at end of file

ui/src/demo-helper-jquery.js

+/*
+ *  This file contains the JS that handles the first init of each jQuery demonstration, and also switching
+ *  between render modes.
+ */
+jsPlumb.bind("ready", function() {
+
+	jsPlumb.DemoList.init();
+
+	// chrome fix.
+	document.onselectstart = function () { return false; };				
+
+    // render mode
+	var resetRenderMode = function(desiredMode) {
+		var newMode = jsPlumb.setRenderMode(desiredMode);
+		$(".rmode").removeClass("selected");
+		$(".rmode[mode='" + newMode + "']").addClass("selected");		
+
+		$(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
+		$(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
+		$(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
+					
+		jsPlumbDemo.init();
+	};
+     
+	$(".rmode").bind("click", function() {
+		var desiredMode = $(this).attr("mode");
+		if (jsPlumbDemo.reset) jsPlumbDemo.reset();
+		jsPlumb.reset();
+		resetRenderMode(desiredMode);					
+	});	
+
+	resetRenderMode(jsPlumb.SVG);
+       
+});
\ No newline at end of file