From 3d7bc806cd57bd394a62ce97f19a540b8c3d216d Mon Sep 17 00:00:00 2001
From: lior <lior@6189c7af-7406-0410-a2ce-f22f51069c23>
Date: Tue, 22 Jan 2013 10:17:19 +0000
Subject: [PATCH] Initial development of Rosetta Diagrams on the web

git-svn-id: https://svn.rosettacommons.org/source/trunk/RosettaDiagrams@53275 6189c7af-7406-0410-a2ce-f22f51069c23
---
 js/backbone/app.js                            |    8 +
 .../DiagramConnectionCollection.js            |   10 +
 .../collections/DiagramElementCollection.js   |   22 +
 js/backbone/model/Attribute.js                |   20 +
 js/backbone/model/DiagramConnection.js        |   27 +
 js/backbone/model/DiagramElement.js           |   36 +
 js/backbone/model_old.js                      |   97 +
 js/backbone/view/AttributeView.js             |   45 +
 js/backbone/view/CodeView.js                  |   51 +
 js/backbone/view/DiagramConnectionView.js     |   41 +
 .../view/DiagramElementPropertiesView.js      |   59 +
 js/backbone/view/DiagramElementView.js        |  106 +
 js/backbone/view/XMLMoversView.js             |   19 +
 js/backbone/view/XMLProtocolView.js           |   19 +
 js/backbone/view/appView.js                   |  114 +
 js/backbone/view_old.js                       |  197 +
 js/lib/backbone.js                            | 1533 ++++++++
 js/lib/erd.js                                 |   50 +
 js/lib/joint.arrows.js                        |  116 +
 js/lib/joint.dia.cdm.js                       |  307 ++
 js/lib/joint.dia.devs.js                      |  164 +
 js/lib/joint.dia.erd.js                       |  172 +
 js/lib/joint.dia.fsa.js                       |  158 +
 js/lib/joint.dia.js                           |  910 +++++
 js/lib/joint.dia.org.js                       |   81 +
 js/lib/joint.dia.pn.js                        |  151 +
 js/lib/joint.dia.serializer.js                |  211 +
 js/lib/joint.dia.uml.js                       |  381 ++
 js/lib/joint.js                               | 2320 +++++++++++
 js/lib/json2.js                               |  482 +++
 js/lib/prettify/lang-apollo.js                |    2 +
 js/lib/prettify/lang-clj.js                   |   18 +
 js/lib/prettify/lang-css.js                   |    2 +
 js/lib/prettify/lang-go.js                    |    1 +
 js/lib/prettify/lang-hs.js                    |    2 +
 js/lib/prettify/lang-lisp.js                  |    3 +
 js/lib/prettify/lang-lua.js                   |    2 +
 js/lib/prettify/lang-ml.js                    |    2 +
 js/lib/prettify/lang-n.js                     |    4 +
 js/lib/prettify/lang-proto.js                 |    1 +
 js/lib/prettify/lang-scala.js                 |    2 +
 js/lib/prettify/lang-sql.js                   |    2 +
 js/lib/prettify/lang-tex.js                   |    1 +
 js/lib/prettify/lang-vb.js                    |    2 +
 js/lib/prettify/lang-vhdl.js                  |    3 +
 js/lib/prettify/lang-wiki.js                  |    2 +
 js/lib/prettify/lang-xq.js                    |    3 +
 js/lib/prettify/lang-yaml.js                  |    2 +
 js/lib/prettify/prettify.css                  |    1 +
 js/lib/prettify/prettify.js                   |   28 +
 js/lib/raphael.js                             | 3395 +++++++++++++++++
 js/lib/vkbeautify.0.99.00.beta.js             |  358 ++
 mockup.html                                   |  408 ++
 53 files changed, 12151 insertions(+)
 create mode 100644 js/backbone/app.js
 create mode 100644 js/backbone/collections/DiagramConnectionCollection.js
 create mode 100644 js/backbone/collections/DiagramElementCollection.js
 create mode 100644 js/backbone/model/Attribute.js
 create mode 100644 js/backbone/model/DiagramConnection.js
 create mode 100644 js/backbone/model/DiagramElement.js
 create mode 100644 js/backbone/model_old.js
 create mode 100644 js/backbone/view/AttributeView.js
 create mode 100644 js/backbone/view/CodeView.js
 create mode 100644 js/backbone/view/DiagramConnectionView.js
 create mode 100644 js/backbone/view/DiagramElementPropertiesView.js
 create mode 100644 js/backbone/view/DiagramElementView.js
 create mode 100644 js/backbone/view/XMLMoversView.js
 create mode 100644 js/backbone/view/XMLProtocolView.js
 create mode 100644 js/backbone/view/appView.js
 create mode 100644 js/backbone/view_old.js
 create mode 100644 js/lib/backbone.js
 create mode 100644 js/lib/erd.js
 create mode 100644 js/lib/joint.arrows.js
 create mode 100644 js/lib/joint.dia.cdm.js
 create mode 100644 js/lib/joint.dia.devs.js
 create mode 100644 js/lib/joint.dia.erd.js
 create mode 100644 js/lib/joint.dia.fsa.js
 create mode 100644 js/lib/joint.dia.js
 create mode 100644 js/lib/joint.dia.org.js
 create mode 100644 js/lib/joint.dia.pn.js
 create mode 100644 js/lib/joint.dia.serializer.js
 create mode 100644 js/lib/joint.dia.uml.js
 create mode 100644 js/lib/joint.js
 create mode 100644 js/lib/json2.js
 create mode 100644 js/lib/prettify/lang-apollo.js
 create mode 100644 js/lib/prettify/lang-clj.js
 create mode 100644 js/lib/prettify/lang-css.js
 create mode 100644 js/lib/prettify/lang-go.js
 create mode 100644 js/lib/prettify/lang-hs.js
 create mode 100644 js/lib/prettify/lang-lisp.js
 create mode 100644 js/lib/prettify/lang-lua.js
 create mode 100644 js/lib/prettify/lang-ml.js
 create mode 100644 js/lib/prettify/lang-n.js
 create mode 100644 js/lib/prettify/lang-proto.js
 create mode 100644 js/lib/prettify/lang-scala.js
 create mode 100644 js/lib/prettify/lang-sql.js
 create mode 100644 js/lib/prettify/lang-tex.js
 create mode 100644 js/lib/prettify/lang-vb.js
 create mode 100644 js/lib/prettify/lang-vhdl.js
 create mode 100644 js/lib/prettify/lang-wiki.js
 create mode 100644 js/lib/prettify/lang-xq.js
 create mode 100644 js/lib/prettify/lang-yaml.js
 create mode 100644 js/lib/prettify/prettify.css
 create mode 100644 js/lib/prettify/prettify.js
 create mode 100644 js/lib/raphael.js
 create mode 100644 js/lib/vkbeautify.0.99.00.beta.js
 create mode 100644 mockup.html

diff --git a/js/backbone/app.js b/js/backbone/app.js
new file mode 100644
index 0000000..c3cad62
--- /dev/null
+++ b/js/backbone/app.js
@@ -0,0 +1,8 @@
+app = app || {};
+
+$(function() {
+
+	// Kick things off by creating the **App**.
+	new app.AppView().render();
+
+});
diff --git a/js/backbone/collections/DiagramConnectionCollection.js b/js/backbone/collections/DiagramConnectionCollection.js
new file mode 100644
index 0000000..9fa74bb
--- /dev/null
+++ b/js/backbone/collections/DiagramConnectionCollection.js
@@ -0,0 +1,10 @@
+var app = app || {};
+
+(function() {
+	
+	var DiagramConnectionList = Backbone.Collection.extend({
+		model: app.DiagramConnection
+	});
+	
+	app.Connections = new DiagramConnectionList();
+}());
\ No newline at end of file
diff --git a/js/backbone/collections/DiagramElementCollection.js b/js/backbone/collections/DiagramElementCollection.js
new file mode 100644
index 0000000..2fb28c7
--- /dev/null
+++ b/js/backbone/collections/DiagramElementCollection.js
@@ -0,0 +1,22 @@
+var app = app || {};
+
+(function() {
+	
+	var DiagramElementList = Backbone.Collection.extend({
+		model: app.DiagramElement,
+		
+//		initialize: function() {
+//			this.listenTo(this,'add',this.addModelListener);
+//		},
+//		
+//		addModelListener: function(model,attributes) {
+//			this.listenTo(model,"change",this.invokeChangeEvent);
+//		},
+//		
+//		invokeChangeEvent: function(model,attributes) { 
+//			console.log("The collection recorded a model change" + model);
+//		}
+	});
+	
+	app.Elements = new DiagramElementList();
+}());
\ No newline at end of file
diff --git a/js/backbone/model/Attribute.js b/js/backbone/model/Attribute.js
new file mode 100644
index 0000000..48649d7
--- /dev/null
+++ b/js/backbone/model/Attribute.js
@@ -0,0 +1,20 @@
+var app = app || {};
+(function() {
+		
+	'use strict';
+
+	app.Attribute = Backbone.Model.extend({
+		
+		defaults: { 
+			key: 'key',
+			value:'val',
+		}
+		
+	});
+	
+	
+	app.AttributeList = Backbone.Collection.extend({
+		model: app.Attribute
+	});
+}
+());
\ No newline at end of file
diff --git a/js/backbone/model/DiagramConnection.js b/js/backbone/model/DiagramConnection.js
new file mode 100644
index 0000000..241c77a
--- /dev/null
+++ b/js/backbone/model/DiagramConnection.js
@@ -0,0 +1,27 @@
+(function() {
+	
+	'use strict';
+
+	app.DiagramConnection = Backbone.Model.extend({
+		
+		defaults: {
+			source: undefined,
+			target: undefined,
+			type: undefined,
+			jointObj: undefined
+		},
+		
+	});
+	
+	app.pendingConnection = undefined;
+	
+	/*Flow of creating a connection:
+	1)Click on a 'create connection' button turns on a flag on all DiagramElement models to wait for a connection.
+	2)Click on a DiagramElement creates a connection object (temp/adds to a collection?) and assign the source element to it.
+	3)Click on another DiagramElement sets the target element:
+		3.1)Checks if the source element is already set. If it is , set the target element.
+	4)Once the target element is set , the collection listens to this event and adds it to the collection.
+	5)The ConnectionView also listens to the target-set event and shows the connection.
+	*/
+	
+}());
\ No newline at end of file
diff --git a/js/backbone/model/DiagramElement.js b/js/backbone/model/DiagramElement.js
new file mode 100644
index 0000000..ddad2ec
--- /dev/null
+++ b/js/backbone/model/DiagramElement.js
@@ -0,0 +1,36 @@
+(function() {
+	
+	'use strict';
+
+
+	app.DiagramElement = Backbone.Model.extend({
+		
+		defaults: {
+			x:0,
+			y:0,
+			name:"New_Element",
+			connectionReady: false,
+			deleteMode: false,
+			jointObj: undefined,
+			attributes: undefined,
+			typeObj: undefined
+		},
+		
+		initialize: function() { 
+			var new_attr_list = new app.AttributeList();
+			new_attr_list.add(new app.Attribute({key:'name',value:'element_'+app.elementCounter++}));
+			this.set('attributes', new_attr_list);
+			
+			this.listenTo(new_attr_list,"change",this.attributes_changed);
+			this.listenTo(new_attr_list,"add",this.attributes_changed);
+			this.listenTo(new_attr_list,"remove",this.attributes_changed);
+		},
+		
+		attributes_changed: function() {
+			console.log("Triggering change event");
+			this.trigger("change");
+		}
+		
+	});
+	
+}());
\ No newline at end of file
diff --git a/js/backbone/model_old.js b/js/backbone/model_old.js
new file mode 100644
index 0000000..64a95f8
--- /dev/null
+++ b/js/backbone/model_old.js
@@ -0,0 +1,97 @@
+
+
+var rdiag = rdiag || {};
+
+rdiag.DiagramConnection = Backbone.Model.extend({ 
+	defaults: {
+		source: undefined,
+		target: undefined,
+		type: Joint.dia.uml
+	}
+});
+
+rdiag.DiagramConnectionCollection = Backbone.Collection.extend({
+	model: rdiag.DiagramConnection
+});
+
+
+rdiag.DiagramElement = Backbone.Model.extend({ 
+		
+	defaults: {
+		x:0,
+		y:0,
+		name: "NewMover",
+		canvas: undefined,
+		elem: undefined,
+	},	
+	
+});
+
+rdiag.MenuItem = Backbone.Model.extend( {
+
+	defaults: { 
+		x: 0,
+		y: 0,
+		action: "DDD",
+		img: undefined,
+		diagramElement: undefined
+	},
+	
+});
+
+rdiag.DiagramElementList = Backbone.Collection.extend({
+	model: rdiag.DiagramElement
+});
+
+var MenuItems = Backbone.Collection.extend({
+	model: rdiag.MenuItem
+	
+});
+
+var elementsInCanvas = new rdiag.DiagramElementList();
+
+rdiag.createDiagramElement = function(params) { 
+	var d = new rdiag.DiagramElement(params);
+	elementsInCanvas.add(d);
+	return d;
+};
+
+rdiag.createMenuItem = function(params) { 
+	var m = new rdiag.MenuItem(params);
+	return m;
+}
+
+rdiag.Canvas = Backbone.Model.extend( { 
+
+	defaults: { 
+		elements: new rdiag.DiagramElementList(),
+		connections: new rdiag.DiagramConnectionCollection(),
+		menu: rdiag.createMenuItem(),
+	},
+
+});
+
+rdiag.App = Backbone.Model.extend({
+	defaults:{
+		canvas: new rdiag.Canvas(),
+		sourceElement: undefined,
+		targetElement: undefined,
+		connectionMode: false
+	},
+	connectionReady: function() {
+		var s = this.get('sourceElement');
+		return s != undefined;
+
+	},
+	
+	resetElements: function() {
+		this.set('sourceElement',undefined);
+		this.set('targetElement',undefined);
+	},
+	isInConnectionMode: function() {
+		return this.get('connectionMode');
+	}
+});
+
+
+
diff --git a/js/backbone/view/AttributeView.js b/js/backbone/view/AttributeView.js
new file mode 100644
index 0000000..839f64c
--- /dev/null
+++ b/js/backbone/view/AttributeView.js
@@ -0,0 +1,45 @@
+var app = app || {};
+$(function() {
+	
+	app.AttributeView = Backbone.View.extend({
+		
+		tagName: 'li',
+		template: undefined,
+		
+		events: {
+			"focusout #attr_key" : "update_model",
+			"focusout #attr_value" : "update_model",
+			"keypress #attr_key": "update_model_keypressed",
+			"keypress #attr_value": "update_model_keypressed",
+			"click #deleteBtn": "destroy_attribute"
+		},
+		
+		initialize: function() { 
+			this.template = _.template( $('#attribute_template').html() );
+		},
+		
+		destroy_attribute: function() { 
+			this.model.destroy();
+			this.remove();
+		},
+		
+		render: function() {
+			this.$el.html( this.template( this.model.toJSON() ) );
+			return this;
+		},
+		
+		update_model:function() { 
+			var key = this.$('#attr_key').val();
+			var value = this.$('#attr_value').val();
+			this.model.set('key',key);
+			this.model.set('value',value);
+		},
+		
+		update_model_keypressed: function(e) { 
+			if ( e.which == ENTER_KEY ) {
+				this.update_model();
+			}
+		}
+	
+	});
+});
\ No newline at end of file
diff --git a/js/backbone/view/CodeView.js b/js/backbone/view/CodeView.js
new file mode 100644
index 0000000..d15face
--- /dev/null
+++ b/js/backbone/view/CodeView.js
@@ -0,0 +1,51 @@
+var app = app || {};
+$(function() {
+	
+	app.CodeView = Backbone.View.extend({
+		el:'#code',
+		
+		initialize: function() {
+			this.listenTo(app.Elements,'change',this.render);
+			this.listenTo(app.Connections,'change',this.render);
+		},
+		
+		render: function() { 
+			console.log("rendering code ... ");
+			this.$('#xml_movers').empty();
+			this.$('#xml_filters').empty();
+			app.Elements.each( function(element) {
+				var codeView = new app.XMLMoversView({model: element});
+				var htmlCode = codeView.render().el;
+				var typeObj = element.get('typeObj');
+				this.$(typeObj.codeTemplate).append(htmlCode);
+			});
+			this.renderConnections();
+			//formatXml is located in the utils.js file. it formats the XML file to have better indentation
+			var xml = vkbeautify.xml(this.$el.text());
+			$('#display_code').text(xml);
+			prettyPrint();
+		},
+		
+		renderConnections: function() {
+			var order=[];
+			this.$('#xml_protocols').empty();
+			app.Connections.each(function(con){
+				for(var i=0; i<order.length; ++i ){
+					if (order[i]==con.get('source')){
+						order[i+1] = con.get('target');
+						return;
+					}
+				}
+				
+				order[0]=con.get('source');
+				order[1]=con.get('target');
+			});
+			for(var i=0; i<order.length; ++i){ 
+				var protocolView = new app.XMLProtocolView({model: order[i]});
+				var htmlCode = protocolView.render().el;
+				this.$('#xml_protocols').append(htmlCode);
+			}
+		}
+		
+	});
+});
\ No newline at end of file
diff --git a/js/backbone/view/DiagramConnectionView.js b/js/backbone/view/DiagramConnectionView.js
new file mode 100644
index 0000000..565e7d2
--- /dev/null
+++ b/js/backbone/view/DiagramConnectionView.js
@@ -0,0 +1,41 @@
+var app = app || {};
+$(function() {
+	
+	app.DiagramConnectionView = Backbone.View.extend({
+		
+		initialize: function() {
+			var model = this.model;
+			var source = model.get('source');
+			var target =  model.get('target').get('jointObj');
+			var jointObj = source.get('jointObj').joint(target,Joint.dia.uml);
+			
+			model.set('jointObj',jointObj);
+			
+			var obj = this;
+			jointObj.registerCallback("justConnected",function(side) {
+				var rawElement = this.wholeShape;
+				obj.changeConnectedElement(side,rawElement);
+			});
+		},
+	
+		changeConnectedElement: function(side,rawElement) { 
+			var foundElement = undefined;
+			app.Elements.each(
+					function(element) {
+						var jointObj = element.get('jointObj');  
+						if ( jointObj == rawElement ) {
+							console.log("Element connection is changed to "+element);
+							foundElement = element; 
+						}
+					}
+			);
+			if ( side == "end" ) {
+				this.model.set("target",foundElement);
+			}else { 
+				this.model.set("source",foundElement);
+			}
+		}
+		
+	});
+	
+});
\ No newline at end of file
diff --git a/js/backbone/view/DiagramElementPropertiesView.js b/js/backbone/view/DiagramElementPropertiesView.js
new file mode 100644
index 0000000..75cc985
--- /dev/null
+++ b/js/backbone/view/DiagramElementPropertiesView.js
@@ -0,0 +1,59 @@
+var app = app || {};
+
+
+$(function() {
+	
+	app.DiagramElementPropertiesView = Backbone.View.extend({
+		el:'#mover_properties',
+		eventagg: undefined,
+		model:undefined,
+		
+		events: {
+			'focusout #mover_name': 'set_mover_name',
+			"click #add_attribute": "addAttribute",
+		},
+		initialize: function(options) {
+				this.eventagg = options.eventagg;
+				_.bindAll(this, "editDiagramElement");
+				this.eventagg.bind('editDiagramElement',this.editDiagramElement);
+				this.model = options.model;
+		},
+		
+		render: function() { 
+			
+			var name = this.model.get('name');
+			this.$('#mover_name').val(name);
+			this.$('#attribute_list').empty();
+			var attributes = this.model.get('attributes');
+			var prop = this;
+			attributes.each( function(attr) {
+				prop.createAttributeView(attr);
+			});
+		},
+		
+		editDiagramElement: function(element) {
+			this.model = element;
+			this.render();
+		},
+		
+		addAttribute: function(){
+			var attributes = this.model.get('attributes');
+			var new_attribute = new app.Attribute();
+			attributes.add(new_attribute);
+			this.createAttributeView(new_attribute);
+
+		},
+		
+		createAttributeView: function(new_attribute) {
+			var attr_view = new app.AttributeView({model:new_attribute });
+			var element = attr_view.render().el;
+			this.$('#attribute_list').append(element);
+		},
+		
+		set_mover_name: function() { 
+			var name = this.$('#mover_name').val();
+			this.model.set('name',name);
+		}
+	});
+	
+});
\ No newline at end of file
diff --git a/js/backbone/view/DiagramElementView.js b/js/backbone/view/DiagramElementView.js
new file mode 100644
index 0000000..1093518
--- /dev/null
+++ b/js/backbone/view/DiagramElementView.js
@@ -0,0 +1,106 @@
+var app = app || {};
+$(function() {
+	
+	app.DiagramElementView = Backbone.View.extend({
+		tagName: 'rect',
+		eventagg: undefined,
+		initialize: function(options) {
+			var type = this.model.get('typeObj');
+			var jointObj = Joint.dia.uml.State.create({
+				  rect: {x: this.model.get('x'), y: this.model.get('y'), width: 150, height: 100},
+				  label: this.model.get('name'),
+				  attrs: {
+				    fill: type.jointObjColor
+				  },
+				  shadow: true,
+				  actions: {
+					inner: []
+				  }
+			});
+			
+			this.$el = jQuery(jointObj.wrapper.node);
+			this.eventagg = options.eventagg;
+			this.model.set('jointObj',jointObj);
+			this.listenTo(this.model,"change",this.model_changed);
+			_.bindAll(this, "toggleDeleteMode");
+			this.eventagg.bind("toggleDeleteMode",this.toggleDeleteMode);
+			this.model_changed();
+		},
+		
+		toggleDeleteMode: function() {
+			var delMode = this.model.get('deleteMode');
+			this.model.set('deleteMode',!delMode);
+			
+		},
+		
+		model_changed: function(){
+			console.log("Model changed!!");
+			var jointObj = this.model.get('jointObj');
+			jointObj.properties.label = this.model.get('name');
+			this.refresh_attributes();
+			jointObj.zoom();
+		},
+		
+		refresh_attributes: function() {
+			var attributes = this.model.get('attributes');
+			var jointObj = this.model.get('jointObj');
+			jointObj.properties.actions.inner = [];
+			attributes.each(function (attribute)  { 
+				jointObj.properties.actions.inner.push(attribute.get("key"));
+				jointObj.properties.actions.inner.push(attribute.get("value"));
+			});
+		},
+		events: {
+			"mouseup": "mouseUp",
+			"click": "elementClicked",
+			"mousedown": "mouseDown"
+		},
+		
+		render:function() {
+
+		},
+		
+		mouseUp: function(e) { 
+//			var deleteMode = this.model.get('deleteMode');
+//			console.log("Delete mode is ", deleteMode);
+//			if ( deleteMode ) {
+//				var jointObj = this.model.get('jointObj');
+//				jointObj.shadow.remove();
+//				jointObj.remove();
+//				this.model.destroy();
+//				this.eventagg.trigger("toggleDeleteMode");
+//				this.remove();
+//			}
+//			
+			
+			var connectionMode = this.model.get("connectionReady");
+			if ( ! connectionMode ) {
+				this.eventagg.trigger('editDiagramElement',this.model);
+			}
+		},
+		
+		elementClicked: function(e) {
+			console.log("mouse clicked");
+		},
+		mouseDown: function(e) {
+			
+			var connectionMode = this.model.get("connectionReady");
+			if ( connectionMode == true ) { 
+				console.log("Connection mode is true");
+				if ( app.pendingConnection == undefined ) {
+					console.log("Setting source to be ... " + this.model);
+					app.pendingConnection = new app.DiagramConnection({source: this.model});
+				}else { 
+					console.log("Adding new connection to the list");
+					app.pendingConnection.set("target",this.model);
+					app.Connections.add(app.pendingConnection);
+					app.pendingConnection = undefined;
+				}
+				
+			}
+			
+		}
+		
+	});
+	
+});
\ No newline at end of file
diff --git a/js/backbone/view/XMLMoversView.js b/js/backbone/view/XMLMoversView.js
new file mode 100644
index 0000000..1eb28d0
--- /dev/null
+++ b/js/backbone/view/XMLMoversView.js
@@ -0,0 +1,19 @@
+var app = app || {};
+$(function() {
+	
+	app.XMLMoversView = Backbone.View.extend({
+		
+		tagName: 'pre',
+		template: undefined,
+		initialize: function() { 
+			var typeObj = this.model.get('typeObj');
+			this.template = _.template( $('#movers_template').html() );
+		},
+		
+		render: function() { 
+			
+			this.$el.html( this.template( this.model.toJSON() ) );
+			return this;
+		}
+	});
+});
\ No newline at end of file
diff --git a/js/backbone/view/XMLProtocolView.js b/js/backbone/view/XMLProtocolView.js
new file mode 100644
index 0000000..f0e78b7
--- /dev/null
+++ b/js/backbone/view/XMLProtocolView.js
@@ -0,0 +1,19 @@
+var app = app || {};
+$(function() {
+	
+	app.XMLProtocolView = Backbone.View.extend({
+		
+		tagName: 'pre',
+		template: undefined,
+		initialize: function() { 
+			var typeObj = this.model.get('typeObj');
+			this.template = _.template( $('#protocols_template').html() );
+		},
+		
+		render: function() { 
+			
+			this.$el.html( this.template( this.model.toJSON() ) );
+			return this;
+		}
+	});
+});
\ No newline at end of file
diff --git a/js/backbone/view/appView.js b/js/backbone/view/appView.js
new file mode 100644
index 0000000..178e728
--- /dev/null
+++ b/js/backbone/view/appView.js
@@ -0,0 +1,114 @@
+var app = app || {};
+var ENTER_KEY = 13;
+
+app.elementCounter = 0;
+
+var mover_type = {
+		jointObjColor: "90-#000-green:1-#fff",
+		codeTemplate: '#xml_movers'
+};
+
+var filter_type = {
+		jointObjColor: "90-#000-orange:1-#fff",
+		codeTemplate: '#xml_filters'
+};
+
+$(function( $ ) {
+	
+	var vent = _.extend({}, Backbone.Events);
+	
+	app.AppView = Backbone.View.extend({
+		
+		el: '#container',
+		connectionReady: false,
+		events: {
+			"click #add_mover" : "addMover",
+			"click #add_connection": "toggleConnectionMode",
+			"click #delete_element": "toggleDeleteMode",
+			"click #add_filter" : "addFilter"
+		},
+		
+		toggleDeleteMode: function() { 
+			vent.trigger('toggleDeleteMode');
+			
+		},
+		
+		
+		addFilter: function(e) {
+			app.Elements.add(new app.DiagramElement({typeObj: filter_type, name:"NewFilter"}));
+			
+		},
+		
+		addMover: function(e) {
+			app.Elements.add(new app.DiagramElement({typeObj: mover_type, name:"NewMover"}));
+			console.log("New Mover created!");
+		},
+		
+		toggleConnectionMode: function(e) { 
+			this.connectionReady = !this.connectionReady;
+			console.log("Connection mode is " + this.connectionReady);
+			var conReady = this.connectionReady;
+			app.Elements.each(
+					function(element) {
+						element.set("connectionReady",conReady);
+					}
+			);
+		},
+		
+		initialize: function() {
+			this.listenTo(app.Elements,'add',this.addElementView);
+			this.listenTo(app.Connections,'add', this.addConnectionView);
+			this.addPropertiesView();
+			this.addCodeView();
+		},
+		
+		addPropertiesView: function() {
+			app.propertiesView = new app.DiagramElementPropertiesView({eventagg: vent});
+		},
+		
+		addCodeView: function() {
+			app.codeView = new app.CodeView({eventagg: vent});
+		},
+		
+		addElementView: function(element) {
+			var view = new app.DiagramElementView({model: element, eventagg: vent});
+			view.render();
+			var ElementsArr = [];
+			app.Elements.each(
+					function(element) {
+						ElementsArr.push(element.get('jointObj'));
+					}
+			);
+			
+			app.Connections.each(
+					function(connection) { 
+						var conObj = connection.get('jointObj');
+						conObj.register(ElementsArr);
+					}
+			);
+		},
+		
+		addConnectionView: function(connection) {
+			this.toggleConnectionMode(null);
+			var view = new app.DiagramConnectionView({model:connection});
+			var connectionObj = connection.get('jointObj');
+			view.render();
+			var arr = [];
+			app.Elements.each(
+					function(element) {
+						var jointObj = element.get('jointObj');
+						arr.push(jointObj);
+					}
+			);
+			connectionObj.register(arr);
+		},
+		
+		render: function() {
+			Joint.paper("world",800,800);
+		}
+		
+	});
+	
+	
+	//Create the event aggregator:
+});
\ No newline at end of file
diff --git a/js/backbone/view_old.js b/js/backbone/view_old.js
new file mode 100644
index 0000000..d3bf85b
--- /dev/null
+++ b/js/backbone/view_old.js
@@ -0,0 +1,197 @@
+var rdiag = rdiag || {};
+var uml = Joint.dia.uml;
+
+rdiag.AppView = Backbone.View.extend({
+  el: '#container',
+  canvasView: undefined,
+  render: function () {
+	this.canvasView.render();
+  },
+  
+  events: { 
+	 "click #add_mover": "addDiagramElement",
+	 "click #add_connection": "addConnection"
+  },
+  
+  initialize: function() { 
+    this.canvasView = new rdiag.CanvasView({model: this.model.get('canvas')});
+  },
+  toggleConnection: function(obj,connectionType) {
+	  m = this.model;
+	  if ( m.connectionReady() ) {
+		  console.log("I am now connection ready");
+		  m.set('targetElement',obj);
+		  this.connectNodes(connectionType);
+		  m.resetElements();
+		  m.set('connectionMode',false);
+	  }else { 
+		  console.log("Setting source element");
+		  m.set('sourceElement',obj);
+		  console.log("Source element is now " + this.model.get('sourceElement'));
+	  }
+  },
+  addDiagramElement: function(e) { 
+	  console.log("Add mover clicked!");
+  },
+  
+  addConnection: function(e) {
+  },
+  
+  connectNodes: function(connectionType) {
+	  var source = this.model.get('sourceElement');
+	  var target = this.model.get('targetElement');
+	  console.log("Trying to connect " + source + " And " + target);
+	  this.canvasView.connectNodes(source,target,connectionType);
+  }
+});
+
+rdiag.CanvasView = Backbone.View.extend({ 
+	el: "#world",
+	connectionViewCollection: undefined,
+	initialize: function() { 
+		this.menuView = new rdiag.MenuItemView({model: this.model.get('menu')});
+		this.connectionViewCollection = new rdiag.ConnectionViewCollection();
+	},
+	render: function() {
+		Joint.paper("world", 800, 800);
+	},
+	addDiagramElement: function(params) { 
+		  var modelObj = rdiag.createDiagramElement(params); //add to the model of app....
+		  var view = rdiag.createDiagramElementView({model: modelObj});
+		  view.render();
+	},
+	connectNodes: function(node1,node2,connectionType) {
+		//node1, node2 are instances of DiagramElementView
+		var connectionView = new rdiag.DiagramConnectionView({source: node1, target:node2, connectionType: connectionType});
+		this.connectionViewCollection.add(connectionView);
+	},
+	
+	events: { 'click' : 'handleClick'},
+	
+	handleClick: function(e) { 
+	},
+	
+	showMenu: function()  {
+		this.menuView.show();
+	}
+});
+//add register element for all DiagramElements!
+
+rdiag.DiagramElementView = Backbone.View.extend({
+	initialize: function() { 
+		this.elem = uml.State.create({
+			  rect: {x: this.model.get('x'), y: this.model.get('y'), width: 150, height: 100},
+			  label: this.model.get('name'),
+			  attrs: {
+			    fill: "90-#000-green:1-#fff"
+			  },
+			  shadow: true,
+			  actions: {
+				inner: ["attribute 1", "value 1", "attribute 2" , "value 2"]
+			  }
+		});
+		
+		this.$el = jQuery(this.elem.wrapper.node);
+	},
+	events: { 'mouseup' : 'toggleConnect'},
+	toggleConnect: function(e) { 
+		if ( rdiag.appModel.isInConnectionMode() ){
+			rdiag.appView.toggleConnection(this,uml);
+			console.log("Waiting for the other element...");
+		}
+	},
+	
+	connect: function(target,connectionType) {
+		this.elem.joint(target, connectionType);
+		this.model.addConnection(target);
+	},
+	
+	getRawJoint: function() {
+		return this.elem;
+	}
+});
+rdiag.DiagramConnectionView = Backbone.View.extend( {
+	rawConnection: undefined,
+	source: undefined,
+	target: undefined,
+	connectionType: undefined,
+	initialize: function() {
+		this.source = this.options.source;
+		this.target = this.options.target;
+		this.connectionType = this.options.connectionType;
+		this.model = new rdiag.DiagramConnection({source: this.source.model, target: this.target.model});
+		
+		//creating the actual connection on the canvas:
+		this.rawConnection = this.source.getRawJoint().joint(this.target.getRawJoint(), this.connectionType);
+	},
+	
+	getRawConnection: function() { 
+		return this.rawConnection;
+	}
+});
+rdiag.MenuItemView = Backbone.View.extend( { 
+	
+	className: "menuItem",
+	initialize: function() {
+		$("#world").append(this.el);
+	},
+	
+	show: function() { 
+		var elem = this.$el;
+		var x = this.model.get('x');
+		var y = this.model.get('y');
+		elem.css("top",y);
+		elem.css("left",x);
+		elem.css("display","block");
+	}
+});
+
+rdiag.createDiagramElementView = function(params) {
+	return new rdiag.DiagramElementView(params);
+};
+
+
+rdiag.ConnectionViewCollection = Backbone.View.extend({
+    events: {
+        // only whole collection events (like table sorting)
+        // each child view has it's own events
+    },
+    collection: undefined,
+    initialize: function()
+    {
+        this._ConnectionViewCollection = {}; // view chache for further reuse
+        this.collection = new rdiag.DiagramConnectionCollection();
+    },
+
+    render: function()
+    {
+        // some collection rendering related stuff
+        // like appending <table> or <ul> elements
+        return this;
+    },
+    updateRawConnections: function() {
+        arr = [];
+        for(var cid in this._ConnectionViewCollection){
+        	var view = this._ConnectionViewCollection[cid];
+            arr.push(view.getRawConnection());
+        }
+        for(var i=0; i<arr.length; ++i){
+        	arr[i].register(arr);
+        }
+    },
+    add: function(v)
+    {
+        // cache the view
+    	this.collection.add(v.model);
+        this._ConnectionViewCollection[v.model.cid] = v;
+        this.updateRawConnections();
+        // single model rendering
+        // like appending <tr> or <li> elements
+        //MyElementView.render(); 
+        console.log("Added a new view to the collection with id " + v.model.cid);
+    }
+});
+
+
+rdiag.appModel = new rdiag.App();
+rdiag.appView  = new rdiag.AppView({model: rdiag.appModel});
diff --git a/js/lib/backbone.js b/js/lib/backbone.js
new file mode 100644
index 0000000..7391faa
--- /dev/null
+++ b/js/lib/backbone.js
@@ -0,0 +1,1533 @@
+//     Backbone.js 0.9.9
+
+//     (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.
+//     Backbone may be freely distributed under the MIT license.
+//     For all details and documentation:
+//     http://backbonejs.org
+
+(function(){
+
+  // Initial Setup
+  // -------------
+
+  // Save a reference to the global object (`window` in the browser, `exports`
+  // on the server).
+  var root = this;
+
+  // Save the previous value of the `Backbone` variable, so that it can be
+  // restored later on, if `noConflict` is used.
+  var previousBackbone = root.Backbone;
+
+  // Create a local reference to array methods.
+  var array = [];
+  var push = array.push;
+  var slice = array.slice;
+  var splice = array.splice;
+
+  // The top-level namespace. All public Backbone classes and modules will
+  // be attached to this. Exported for both CommonJS and the browser.
+  var Backbone;
+  if (typeof exports !== 'undefined') {
+    Backbone = exports;
+  } else {
+    Backbone = root.Backbone = {};
+  }
+
+  // Current version of the library. Keep in sync with `package.json`.
+  Backbone.VERSION = '0.9.9';
+
+  // Require Underscore, if we're on the server, and it's not already present.
+  var _ = root._;
+  if (!_ && (typeof require !== 'undefined')) _ = require('underscore');
+
+  // For Backbone's purposes, jQuery, Zepto, or Ender owns the `$` variable.
+  Backbone.$ = root.jQuery || root.Zepto || root.ender;
+
+  // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
+  // to its previous owner. Returns a reference to this Backbone object.
+  Backbone.noConflict = function() {
+    root.Backbone = previousBackbone;
+    return this;
+  };
+
+  // Turn on `emulateHTTP` to support legacy HTTP servers. Setting this option
+  // will fake `"PUT"` and `"DELETE"` requests via the `_method` parameter and
+  // set a `X-Http-Method-Override` header.
+  Backbone.emulateHTTP = false;
+
+  // Turn on `emulateJSON` to support legacy servers that can't deal with direct
+  // `application/json` requests ... will encode the body as
+  // `application/x-www-form-urlencoded` instead and will send the model in a
+  // form param named `model`.
+  Backbone.emulateJSON = false;
+
+  // Backbone.Events
+  // ---------------
+
+  // Regular expression used to split event strings.
+  var eventSplitter = /\s+/;
+
+  // Implement fancy features of the Events API such as multiple event
+  // names `"change blur"` and jQuery-style event maps `{change: action}`
+  // in terms of the existing API.
+  var eventsApi = function(obj, action, name, rest) {
+    if (!name) return true;
+    if (typeof name === 'object') {
+      for (var key in name) {
+        obj[action].apply(obj, [key, name[key]].concat(rest));
+      }
+    } else if (eventSplitter.test(name)) {
+      var names = name.split(eventSplitter);
+      for (var i = 0, l = names.length; i < l; i++) {
+        obj[action].apply(obj, [names[i]].concat(rest));
+      }
+    } else {
+      return true;
+    }
+  };
+
+  // Optimized internal dispatch function for triggering events. Tries to
+  // keep the usual cases speedy (most Backbone events have 3 arguments).
+  var triggerEvents = function(obj, events, args) {
+    var ev, i = -1, l = events.length;
+    switch (args.length) {
+    case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx);
+    return;
+    case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, args[0]);
+    return;
+    case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, args[0], args[1]);
+    return;
+    case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, args[0], args[1], args[2]);
+    return;
+    default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
+    }
+  };
+
+  // A module that can be mixed in to *any object* in order to provide it with
+  // custom events. You may bind with `on` or remove with `off` callback
+  // functions to an event; `trigger`-ing an event fires all callbacks in
+  // succession.
+  //
+  //     var object = {};
+  //     _.extend(object, Backbone.Events);
+  //     object.on('expand', function(){ alert('expanded'); });
+  //     object.trigger('expand');
+  //
+  var Events = Backbone.Events = {
+
+    // Bind one or more space separated events, or an events map,
+    // to a `callback` function. Passing `"all"` will bind the callback to
+    // all events fired.
+    on: function(name, callback, context) {
+      if (!(eventsApi(this, 'on', name, [callback, context]) && callback)) return this;
+      this._events || (this._events = {});
+      var list = this._events[name] || (this._events[name] = []);
+      list.push({callback: callback, context: context, ctx: context || this});
+      return this;
+    },
+
+    // Bind events to only be triggered a single time. After the first time
+    // the callback is invoked, it will be removed.
+    once: function(name, callback, context) {
+      if (!(eventsApi(this, 'once', name, [callback, context]) && callback)) return this;
+      var self = this;
+      var once = _.once(function() {
+        self.off(name, once);
+        callback.apply(this, arguments);
+      });
+      once._callback = callback;
+      this.on(name, once, context);
+      return this;
+    },
+
+    // Remove one or many callbacks. If `context` is null, removes all
+    // callbacks with that function. If `callback` is null, removes all
+    // callbacks for the event. If `events` is null, removes all bound
+    // callbacks for all events.
+    off: function(name, callback, context) {
+      var list, ev, events, names, i, l, j, k;
+      if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;
+      if (!name && !callback && !context) {
+        this._events = {};
+        return this;
+      }
+
+      names = name ? [name] : _.keys(this._events);
+      for (i = 0, l = names.length; i < l; i++) {
+        name = names[i];
+        if (list = this._events[name]) {
+          events = [];
+          if (callback || context) {
+            for (j = 0, k = list.length; j < k; j++) {
+              ev = list[j];
+              if ((callback && callback !== (ev.callback._callback || ev.callback)) ||
+                  (context && context !== ev.context)) {
+                events.push(ev);
+              }
+            }
+          }
+          this._events[name] = events;
+        }
+      }
+
+      return this;
+    },
+
+    // Trigger one or many events, firing all bound callbacks. Callbacks are
+    // passed the same arguments as `trigger` is, apart from the event name
+    // (unless you're listening on `"all"`, which will cause your callback to
+    // receive the true name of the event as the first argument).
+    trigger: function(name) {
+      if (!this._events) return this;
+      var args = slice.call(arguments, 1);
+      if (!eventsApi(this, 'trigger', name, args)) return this;
+      var events = this._events[name];
+      var allEvents = this._events.all;
+      if (events) triggerEvents(this, events, args);
+      if (allEvents) triggerEvents(this, allEvents, arguments);
+      return this;
+    },
+
+    // An inversion-of-control version of `on`. Tell *this* object to listen to
+    // an event in another object ... keeping track of what it's listening to.
+    listenTo: function(object, events, callback) {
+      var listeners = this._listeners || (this._listeners = {});
+      var id = object._listenerId || (object._listenerId = _.uniqueId('l'));
+      listeners[id] = object;
+      object.on(events, callback || this, this);
+      return this;
+    },
+
+    // Tell this object to stop listening to either specific events ... or
+    // to every object it's currently listening to.
+    stopListening: function(object, events, callback) {
+      var listeners = this._listeners;
+      if (!listeners) return;
+      if (object) {
+        object.off(events, callback, this);
+        if (!events && !callback) delete listeners[object._listenerId];
+      } else {
+        for (var id in listeners) {
+          listeners[id].off(null, null, this);
+        }
+        this._listeners = {};
+      }
+      return this;
+    }
+  };
+
+  // Aliases for backwards compatibility.
+  Events.bind   = Events.on;
+  Events.unbind = Events.off;
+
+  // Allow the `Backbone` object to serve as a global event bus, for folks who
+  // want global "pubsub" in a convenient place.
+  _.extend(Backbone, Events);
+
+  // Backbone.Model
+  // --------------
+
+  // Create a new model, with defined attributes. A client id (`cid`)
+  // is automatically generated and assigned for you.
+  var Model = Backbone.Model = function(attributes, options) {
+    var defaults;
+    var attrs = attributes || {};
+    this.cid = _.uniqueId('c');
+    this.changed = {};
+    this.attributes = {};
+    this._changes = [];
+    if (options && options.collection) this.collection = options.collection;
+    if (options && options.parse) attrs = this.parse(attrs);
+    if (defaults = _.result(this, 'defaults')) _.defaults(attrs, defaults);
+    this.set(attrs, {silent: true});
+    this._currentAttributes = _.clone(this.attributes);
+    this._previousAttributes = _.clone(this.attributes);
+    this.initialize.apply(this, arguments);
+  };
+
+  // Attach all inheritable methods to the Model prototype.
+  _.extend(Model.prototype, Events, {
+
+    // A hash of attributes whose current and previous value differ.
+    changed: null,
+
+    // The default name for the JSON `id` attribute is `"id"`. MongoDB and
+    // CouchDB users may want to set this to `"_id"`.
+    idAttribute: 'id',
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // Return a copy of the model's `attributes` object.
+    toJSON: function(options) {
+      return _.clone(this.attributes);
+    },
+
+    // Proxy `Backbone.sync` by default.
+    sync: function() {
+      return Backbone.sync.apply(this, arguments);
+    },
+
+    // Get the value of an attribute.
+    get: function(attr) {
+      return this.attributes[attr];
+    },
+
+    // Get the HTML-escaped value of an attribute.
+    escape: function(attr) {
+      return _.escape(this.get(attr));
+    },
+
+    // Returns `true` if the attribute contains a value that is not null
+    // or undefined.
+    has: function(attr) {
+      return this.get(attr) != null;
+    },
+
+    // Set a hash of model attributes on the object, firing `"change"` unless
+    // you choose to silence it.
+    set: function(key, val, options) {
+      var attr, attrs;
+      if (key == null) return this;
+
+      // Handle both `"key", value` and `{key: value}` -style arguments.
+      if (_.isObject(key)) {
+        attrs = key;
+        options = val;
+      } else {
+        (attrs = {})[key] = val;
+      }
+
+      // Extract attributes and options.
+      var silent = options && options.silent;
+      var unset = options && options.unset;
+
+      // Run validation.
+      if (!this._validate(attrs, options)) return false;
+
+      // Check for changes of `id`.
+      if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
+
+      var now = this.attributes;
+
+      // For each `set` attribute...
+      for (attr in attrs) {
+        val = attrs[attr];
+
+        // Update or delete the current value, and track the change.
+        unset ? delete now[attr] : now[attr] = val;
+        this._changes.push(attr, val);
+      }
+
+      // Signal that the model's state has potentially changed, and we need
+      // to recompute the actual changes.
+      this._hasComputed = false;
+
+      // Fire the `"change"` events.
+      if (!silent) this.change(options);
+      return this;
+    },
+
+    // Remove an attribute from the model, firing `"change"` unless you choose
+    // to silence it. `unset` is a noop if the attribute doesn't exist.
+    unset: function(attr, options) {
+      return this.set(attr, void 0, _.extend({}, options, {unset: true}));
+    },
+
+    // Clear all attributes on the model, firing `"change"` unless you choose
+    // to silence it.
+    clear: function(options) {
+      var attrs = {};
+      for (var key in this.attributes) attrs[key] = void 0;
+      return this.set(attrs, _.extend({}, options, {unset: true}));
+    },
+
+    // Fetch the model from the server. If the server's representation of the
+    // model differs from its current attributes, they will be overriden,
+    // triggering a `"change"` event.
+    fetch: function(options) {
+      options = options ? _.clone(options) : {};
+      if (options.parse === void 0) options.parse = true;
+      var model = this;
+      var success = options.success;
+      options.success = function(resp, status, xhr) {
+        if (!model.set(model.parse(resp), options)) return false;
+        if (success) success(model, resp, options);
+      };
+      return this.sync('read', this, options);
+    },
+
+    // Set a hash of model attributes, and sync the model to the server.
+    // If the server returns an attributes hash that differs, the model's
+    // state will be `set` again.
+    save: function(key, val, options) {
+      var attrs, current, done;
+
+      // Handle both `"key", value` and `{key: value}` -style arguments.
+      if (key == null || _.isObject(key)) {
+        attrs = key;
+        options = val;
+      } else if (key != null) {
+        (attrs = {})[key] = val;
+      }
+      options = options ? _.clone(options) : {};
+
+      // If we're "wait"-ing to set changed attributes, validate early.
+      if (options.wait) {
+        if (attrs && !this._validate(attrs, options)) return false;
+        current = _.clone(this.attributes);
+      }
+
+      // Regular saves `set` attributes before persisting to the server.
+      var silentOptions = _.extend({}, options, {silent: true});
+      if (attrs && !this.set(attrs, options.wait ? silentOptions : options)) {
+        return false;
+      }
+
+      // Do not persist invalid models.
+      if (!attrs && !this._validate(null, options)) return false;
+
+      // After a successful server-side save, the client is (optionally)
+      // updated with the server-side state.
+      var model = this;
+      var success = options.success;
+      options.success = function(resp, status, xhr) {
+        done = true;
+        var serverAttrs = model.parse(resp);
+        if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
+        if (!model.set(serverAttrs, options)) return false;
+        if (success) success(model, resp, options);
+      };
+
+      // Finish configuring and sending the Ajax request.
+      var method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
+      if (method == 'patch') options.attrs = attrs;
+      var xhr = this.sync(method, this, options);
+
+      // When using `wait`, reset attributes to original values unless
+      // `success` has been called already.
+      if (!done && options.wait) {
+        this.clear(silentOptions);
+        this.set(current, silentOptions);
+      }
+
+      return xhr;
+    },
+
+    // Destroy this model on the server if it was already persisted.
+    // Optimistically removes the model from its collection, if it has one.
+    // If `wait: true` is passed, waits for the server to respond before removal.
+    destroy: function(options) {
+      options = options ? _.clone(options) : {};
+      var model = this;
+      var success = options.success;
+
+      var destroy = function() {
+        model.trigger('destroy', model, model.collection, options);
+      };
+
+      options.success = function(resp) {
+        if (options.wait || model.isNew()) destroy();
+        if (success) success(model, resp, options);
+      };
+
+      if (this.isNew()) {
+        options.success();
+        return false;
+      }
+
+      var xhr = this.sync('delete', this, options);
+      if (!options.wait) destroy();
+      return xhr;
+    },
+
+    // Default URL for the model's representation on the server -- if you're
+    // using Backbone's restful methods, override this to change the endpoint
+    // that will be called.
+    url: function() {
+      var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url') || urlError();
+      if (this.isNew()) return base;
+      return base + (base.charAt(base.length - 1) === '/' ? '' : '/') + encodeURIComponent(this.id);
+    },
+
+    // **parse** converts a response into the hash of attributes to be `set` on
+    // the model. The default implementation is just to pass the response along.
+    parse: function(resp) {
+      return resp;
+    },
+
+    // Create a new model with identical attributes to this one.
+    clone: function() {
+      return new this.constructor(this.attributes);
+    },
+
+    // A model is new if it has never been saved to the server, and lacks an id.
+    isNew: function() {
+      return this.id == null;
+    },
+
+    // Call this method to manually fire a `"change"` event for this model and
+    // a `"change:attribute"` event for each changed attribute.
+    // Calling this will cause all objects observing the model to update.
+    change: function(options) {
+      var changing = this._changing;
+      this._changing = true;
+
+      // Generate the changes to be triggered on the model.
+      var triggers = this._computeChanges(true);
+
+      this._pending = !!triggers.length;
+
+      for (var i = triggers.length - 2; i >= 0; i -= 2) {
+        this.trigger('change:' + triggers[i], this, triggers[i + 1], options);
+      }
+
+      if (changing) return this;
+
+      // Trigger a `change` while there have been changes.
+      while (this._pending) {
+        this._pending = false;
+        this.trigger('change', this, options);
+        this._previousAttributes = _.clone(this.attributes);
+      }
+
+      this._changing = false;
+      return this;
+    },
+
+    // Determine if the model has changed since the last `"change"` event.
+    // If you specify an attribute name, determine if that attribute has changed.
+    hasChanged: function(attr) {
+      if (!this._hasComputed) this._computeChanges();
+      if (attr == null) return !_.isEmpty(this.changed);
+      return _.has(this.changed, attr);
+    },
+
+    // Return an object containing all the attributes that have changed, or
+    // false if there are no changed attributes. Useful for determining what
+    // parts of a view need to be updated and/or what attributes need to be
+    // persisted to the server. Unset attributes will be set to undefined.
+    // You can also pass an attributes object to diff against the model,
+    // determining if there *would be* a change.
+    changedAttributes: function(diff) {
+      if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
+      var val, changed = false, old = this._previousAttributes;
+      for (var attr in diff) {
+        if (_.isEqual(old[attr], (val = diff[attr]))) continue;
+        (changed || (changed = {}))[attr] = val;
+      }
+      return changed;
+    },
+
+    // Looking at the built up list of `set` attribute changes, compute how
+    // many of the attributes have actually changed. If `loud`, return a
+    // boiled-down list of only the real changes.
+    _computeChanges: function(loud) {
+      this.changed = {};
+      var already = {};
+      var triggers = [];
+      var current = this._currentAttributes;
+      var changes = this._changes;
+
+      // Loop through the current queue of potential model changes.
+      for (var i = changes.length - 2; i >= 0; i -= 2) {
+        var key = changes[i], val = changes[i + 1];
+        if (already[key]) continue;
+        already[key] = true;
+
+        // Check if the attribute has been modified since the last change,
+        // and update `this.changed` accordingly. If we're inside of a `change`
+        // call, also add a trigger to the list.
+        if (current[key] !== val) {
+          this.changed[key] = val;
+          if (!loud) continue;
+          triggers.push(key, val);
+          current[key] = val;
+        }
+      }
+      if (loud) this._changes = [];
+
+      // Signals `this.changed` is current to prevent duplicate calls from `this.hasChanged`.
+      this._hasComputed = true;
+      return triggers;
+    },
+
+    // Get the previous value of an attribute, recorded at the time the last
+    // `"change"` event was fired.
+    previous: function(attr) {
+      if (attr == null || !this._previousAttributes) return null;
+      return this._previousAttributes[attr];
+    },
+
+    // Get all of the attributes of the model at the time of the previous
+    // `"change"` event.
+    previousAttributes: function() {
+      return _.clone(this._previousAttributes);
+    },
+
+    // Run validation against the next complete set of model attributes,
+    // returning `true` if all is well. If a specific `error` callback has
+    // been passed, call that instead of firing the general `"error"` event.
+    _validate: function(attrs, options) {
+      if (!this.validate) return true;
+      attrs = _.extend({}, this.attributes, attrs);
+      var error = this.validate(attrs, options);
+      if (!error) return true;
+      if (options && options.error) options.error(this, error, options);
+      this.trigger('error', this, error, options);
+      return false;
+    }
+
+  });
+
+  // Backbone.Collection
+  // -------------------
+
+  // Provides a standard collection class for our sets of models, ordered
+  // or unordered. If a `comparator` is specified, the Collection will maintain
+  // its models in sort order, as they're added and removed.
+  var Collection = Backbone.Collection = function(models, options) {
+    options || (options = {});
+    if (options.model) this.model = options.model;
+    if (options.comparator !== void 0) this.comparator = options.comparator;
+    this._reset();
+    this.initialize.apply(this, arguments);
+    if (models) this.reset(models, _.extend({silent: true}, options));
+  };
+
+  // Define the Collection's inheritable methods.
+  _.extend(Collection.prototype, Events, {
+
+    // The default model for a collection is just a **Backbone.Model**.
+    // This should be overridden in most cases.
+    model: Model,
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // The JSON representation of a Collection is an array of the
+    // models' attributes.
+    toJSON: function(options) {
+      return this.map(function(model){ return model.toJSON(options); });
+    },
+
+    // Proxy `Backbone.sync` by default.
+    sync: function() {
+      return Backbone.sync.apply(this, arguments);
+    },
+
+    // Add a model, or list of models to the set. Pass **silent** to avoid
+    // firing the `add` event for every new model.
+    add: function(models, options) {
+      var i, args, length, model, existing, needsSort;
+      var at = options && options.at;
+      var sort = ((options && options.sort) == null ? true : options.sort);
+      models = _.isArray(models) ? models.slice() : [models];
+
+      // Turn bare objects into model references, and prevent invalid models
+      // from being added.
+      for (i = models.length - 1; i >= 0; i--) {
+        if(!(model = this._prepareModel(models[i], options))) {
+          this.trigger("error", this, models[i], options);
+          models.splice(i, 1);
+          continue;
+        }
+        models[i] = model;
+
+        existing = model.id != null && this._byId[model.id];
+        // If a duplicate is found, prevent it from being added and
+        // optionally merge it into the existing model.
+        if (existing || this._byCid[model.cid]) {
+          if (options && options.merge && existing) {
+            existing.set(model.attributes, options);
+            needsSort = sort;
+          }
+          models.splice(i, 1);
+          continue;
+        }
+
+        // Listen to added models' events, and index models for lookup by
+        // `id` and by `cid`.
+        model.on('all', this._onModelEvent, this);
+        this._byCid[model.cid] = model;
+        if (model.id != null) this._byId[model.id] = model;
+      }
+
+      // See if sorting is needed, update `length` and splice in new models.
+      if (models.length) needsSort = sort;
+      this.length += models.length;
+      args = [at != null ? at : this.models.length, 0];
+      push.apply(args, models);
+      splice.apply(this.models, args);
+
+      // Sort the collection if appropriate.
+      if (needsSort && this.comparator && at == null) this.sort({silent: true});
+
+      if (options && options.silent) return this;
+
+      // Trigger `add` events.
+      while (model = models.shift()) {
+        model.trigger('add', model, this, options);
+      }
+
+      return this;
+    },
+
+    // Remove a model, or a list of models from the set. Pass silent to avoid
+    // firing the `remove` event for every model removed.
+    remove: function(models, options) {
+      var i, l, index, model;
+      options || (options = {});
+      models = _.isArray(models) ? models.slice() : [models];
+      for (i = 0, l = models.length; i < l; i++) {
+        model = this.get(models[i]);
+        if (!model) continue;
+        delete this._byId[model.id];
+        delete this._byCid[model.cid];
+        index = this.indexOf(model);
+        this.models.splice(index, 1);
+        this.length--;
+        if (!options.silent) {
+          options.index = index;
+          model.trigger('remove', model, this, options);
+        }
+        this._removeReference(model);
+      }
+      return this;
+    },
+
+    // Add a model to the end of the collection.
+    push: function(model, options) {
+      model = this._prepareModel(model, options);
+      this.add(model, _.extend({at: this.length}, options));
+      return model;
+    },
+
+    // Remove a model from the end of the collection.
+    pop: function(options) {
+      var model = this.at(this.length - 1);
+      this.remove(model, options);
+      return model;
+    },
+
+    // Add a model to the beginning of the collection.
+    unshift: function(model, options) {
+      model = this._prepareModel(model, options);
+      this.add(model, _.extend({at: 0}, options));
+      return model;
+    },
+
+    // Remove a model from the beginning of the collection.
+    shift: function(options) {
+      var model = this.at(0);
+      this.remove(model, options);
+      return model;
+    },
+
+    // Slice out a sub-array of models from the collection.
+    slice: function(begin, end) {
+      return this.models.slice(begin, end);
+    },
+
+    // Get a model from the set by id.
+    get: function(obj) {
+      if (obj == null) return void 0;
+      return this._byId[obj.id != null ? obj.id : obj] || this._byCid[obj.cid || obj];
+    },
+
+    // Get the model at the given index.
+    at: function(index) {
+      return this.models[index];
+    },
+
+    // Return models with matching attributes. Useful for simple cases of `filter`.
+    where: function(attrs) {
+      if (_.isEmpty(attrs)) return [];
+      return this.filter(function(model) {
+        for (var key in attrs) {
+          if (attrs[key] !== model.get(key)) return false;
+        }
+        return true;
+      });
+    },
+
+    // Force the collection to re-sort itself. You don't need to call this under
+    // normal circumstances, as the set will maintain sort order as each item
+    // is added.
+    sort: function(options) {
+      if (!this.comparator) {
+        throw new Error('Cannot sort a set without a comparator');
+      }
+
+      if (_.isString(this.comparator) || this.comparator.length === 1) {
+        this.models = this.sortBy(this.comparator, this);
+      } else {
+        this.models.sort(_.bind(this.comparator, this));
+      }
+
+      if (!options || !options.silent) this.trigger('sort', this, options);
+      return this;
+    },
+
+    // Pluck an attribute from each model in the collection.
+    pluck: function(attr) {
+      return _.invoke(this.models, 'get', attr);
+    },
+
+    // Smartly update a collection with a change set of models, adding,
+    // removing, and merging as necessary.
+    update: function(models, options) {
+      var model, i, l, existing;
+      var add = [], remove = [], modelMap = {};
+      var idAttr = this.model.prototype.idAttribute;
+      options = _.extend({add: true, merge: true, remove: true}, options);
+      if (options.parse) models = this.parse(models);
+
+      // Allow a single model (or no argument) to be passed.
+      if (!_.isArray(models)) models = models ? [models] : [];
+
+      // Proxy to `add` for this case, no need to iterate...
+      if (options.add && !options.remove) return this.add(models, options);
+
+      // Determine which models to add and merge, and which to remove.
+      for (i = 0, l = models.length; i < l; i++) {
+        model = models[i];
+        existing = this.get(model.id || model.cid || model[idAttr]);
+        if (options.remove && existing) modelMap[existing.cid] = true;
+        if ((options.add && !existing) || (options.merge && existing)) {
+          add.push(model);
+        }
+      }
+      if (options.remove) {
+        for (i = 0, l = this.models.length; i < l; i++) {
+          model = this.models[i];
+          if (!modelMap[model.cid]) remove.push(model);
+        }
+      }
+
+      // Remove models (if applicable) before we add and merge the rest.
+      if (remove.length) this.remove(remove, options);
+      if (add.length) this.add(add, options);
+      return this;
+    },
+
+    // When you have more items than you want to add or remove individually,
+    // you can reset the entire set with a new list of models, without firing
+    // any `add` or `remove` events. Fires `reset` when finished.
+    reset: function(models, options) {
+      options || (options = {});
+      if (options.parse) models = this.parse(models);
+      for (var i = 0, l = this.models.length; i < l; i++) {
+        this._removeReference(this.models[i]);
+      }
+      options.previousModels = this.models;
+      this._reset();
+      if (models) this.add(models, _.extend({silent: true}, options));
+      if (!options.silent) this.trigger('reset', this, options);
+      return this;
+    },
+
+    // Fetch the default set of models for this collection, resetting the
+    // collection when they arrive. If `add: true` is passed, appends the
+    // models to the collection instead of resetting.
+    fetch: function(options) {
+      options = options ? _.clone(options) : {};
+      if (options.parse === void 0) options.parse = true;
+      var collection = this;
+      var success = options.success;
+      options.success = function(resp, status, xhr) {
+        var method = options.update ? 'update' : 'reset';
+        collection[method](resp, options);
+        if (success) success(collection, resp, options);
+      };
+      return this.sync('read', this, options);
+    },
+
+    // Create a new instance of a model in this collection. Add the model to the
+    // collection immediately, unless `wait: true` is passed, in which case we
+    // wait for the server to agree.
+    create: function(model, options) {
+      var collection = this;
+      options = options ? _.clone(options) : {};
+      model = this._prepareModel(model, options);
+      if (!model) return false;
+      if (!options.wait) collection.add(model, options);
+      var success = options.success;
+      options.success = function(model, resp, options) {
+        if (options.wait) collection.add(model, options);
+        if (success) success(model, resp, options);
+      };
+      model.save(null, options);
+      return model;
+    },
+
+    // **parse** converts a response into a list of models to be added to the
+    // collection. The default implementation is just to pass it through.
+    parse: function(resp) {
+      return resp;
+    },
+
+    // Create a new collection with an identical list of models as this one.
+    clone: function() {
+      return new this.constructor(this.models);
+    },
+
+    // Proxy to _'s chain. Can't be proxied the same way the rest of the
+    // underscore methods are proxied because it relies on the underscore
+    // constructor.
+    chain: function() {
+      return _(this.models).chain();
+    },
+
+    // Reset all internal state. Called when the collection is reset.
+    _reset: function() {
+      this.length = 0;
+      this.models = [];
+      this._byId  = {};
+      this._byCid = {};
+    },
+
+    // Prepare a model or hash of attributes to be added to this collection.
+    _prepareModel: function(attrs, options) {
+      if (attrs instanceof Model) {
+        if (!attrs.collection) attrs.collection = this;
+        return attrs;
+      }
+      options || (options = {});
+      options.collection = this;
+      var model = new this.model(attrs, options);
+      if (!model._validate(attrs, options)) return false;
+      return model;
+    },
+
+    // Internal method to remove a model's ties to a collection.
+    _removeReference: function(model) {
+      if (this === model.collection) delete model.collection;
+      model.off('all', this._onModelEvent, this);
+    },
+
+    // Internal method called every time a model in the set fires an event.
+    // Sets need to update their indexes when models change ids. All other
+    // events simply proxy through. "add" and "remove" events that originate
+    // in other collections are ignored.
+    _onModelEvent: function(event, model, collection, options) {
+      if ((event === 'add' || event === 'remove') && collection !== this) return;
+      if (event === 'destroy') this.remove(model, options);
+      if (model && event === 'change:' + model.idAttribute) {
+        delete this._byId[model.previous(model.idAttribute)];
+        if (model.id != null) this._byId[model.id] = model;
+      }
+      this.trigger.apply(this, arguments);
+    }
+
+  });
+
+  // Underscore methods that we want to implement on the Collection.
+  var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl',
+    'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select',
+    'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke',
+    'max', 'min', 'sortedIndex', 'toArray', 'size', 'first', 'head', 'take',
+    'initial', 'rest', 'tail', 'last', 'without', 'indexOf', 'shuffle',
+    'lastIndexOf', 'isEmpty'];
+
+  // Mix in each Underscore method as a proxy to `Collection#models`.
+  _.each(methods, function(method) {
+    Collection.prototype[method] = function() {
+      var args = slice.call(arguments);
+      args.unshift(this.models);
+      return _[method].apply(_, args);
+    };
+  });
+
+  // Underscore methods that take a property name as an argument.
+  var attributeMethods = ['groupBy', 'countBy', 'sortBy'];
+
+  // Use attributes instead of properties.
+  _.each(attributeMethods, function(method) {
+    Collection.prototype[method] = function(value, context) {
+      var iterator = _.isFunction(value) ? value : function(model) {
+        return model.get(value);
+      };
+      return _[method](this.models, iterator, context);
+    };
+  });
+
+  // Backbone.Router
+  // ---------------
+
+  // Routers map faux-URLs to actions, and fire events when routes are
+  // matched. Creating a new one sets its `routes` hash, if not set statically.
+  var Router = Backbone.Router = function(options) {
+    options || (options = {});
+    if (options.routes) this.routes = options.routes;
+    this._bindRoutes();
+    this.initialize.apply(this, arguments);
+  };
+
+  // Cached regular expressions for matching named param parts and splatted
+  // parts of route strings.
+  var optionalParam = /\((.*?)\)/g;
+  var namedParam    = /:\w+/g;
+  var splatParam    = /\*\w+/g;
+  var escapeRegExp  = /[\-{}\[\]+?.,\\\^$|#\s]/g;
+
+  // Set up all inheritable **Backbone.Router** properties and methods.
+  _.extend(Router.prototype, Events, {
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // Manually bind a single named route to a callback. For example:
+    //
+    //     this.route('search/:query/p:num', 'search', function(query, num) {
+    //       ...
+    //     });
+    //
+    route: function(route, name, callback) {
+      if (!_.isRegExp(route)) route = this._routeToRegExp(route);
+      if (!callback) callback = this[name];
+      Backbone.history.route(route, _.bind(function(fragment) {
+        var args = this._extractParameters(route, fragment);
+        callback && callback.apply(this, args);
+        this.trigger.apply(this, ['route:' + name].concat(args));
+        Backbone.history.trigger('route', this, name, args);
+      }, this));
+      return this;
+    },
+
+    // Simple proxy to `Backbone.history` to save a fragment into the history.
+    navigate: function(fragment, options) {
+      Backbone.history.navigate(fragment, options);
+      return this;
+    },
+
+    // Bind all defined routes to `Backbone.history`. We have to reverse the
+    // order of the routes here to support behavior where the most general
+    // routes can be defined at the bottom of the route map.
+    _bindRoutes: function() {
+      if (!this.routes) return;
+      var route, routes = _.keys(this.routes);
+      while ((route = routes.pop()) != null) {
+        this.route(route, this.routes[route]);
+      }
+    },
+
+    // Convert a route string into a regular expression, suitable for matching
+    // against the current location hash.
+    _routeToRegExp: function(route) {
+      route = route.replace(escapeRegExp, '\\$&')
+                   .replace(optionalParam, '(?:$1)?')
+                   .replace(namedParam, '([^\/]+)')
+                   .replace(splatParam, '(.*?)');
+      return new RegExp('^' + route + '$');
+    },
+
+    // Given a route, and a URL fragment that it matches, return the array of
+    // extracted parameters.
+    _extractParameters: function(route, fragment) {
+      return route.exec(fragment).slice(1);
+    }
+
+  });
+
+  // Backbone.History
+  // ----------------
+
+  // Handles cross-browser history management, based on URL fragments. If the
+  // browser does not support `onhashchange`, falls back to polling.
+  var History = Backbone.History = function() {
+    this.handlers = [];
+    _.bindAll(this, 'checkUrl');
+
+    // #1653 - Ensure that `History` can be used outside of the browser.
+    if (typeof window !== 'undefined') {
+      this.location = window.location;
+      this.history = window.history;
+    }
+  };
+
+  // Cached regex for stripping a leading hash/slash and trailing space.
+  var routeStripper = /^[#\/]|\s+$/g;
+
+  // Cached regex for stripping leading and trailing slashes.
+  var rootStripper = /^\/+|\/+$/g;
+
+  // Cached regex for detecting MSIE.
+  var isExplorer = /msie [\w.]+/;
+
+  // Cached regex for removing a trailing slash.
+  var trailingSlash = /\/$/;
+
+  // Has the history handling already been started?
+  History.started = false;
+
+  // Set up all inheritable **Backbone.History** properties and methods.
+  _.extend(History.prototype, Events, {
+
+    // The default interval to poll for hash changes, if necessary, is
+    // twenty times a second.
+    interval: 50,
+
+    // Gets the true hash value. Cannot use location.hash directly due to bug
+    // in Firefox where location.hash will always be decoded.
+    getHash: function(window) {
+      var match = (window || this).location.href.match(/#(.*)$/);
+      return match ? match[1] : '';
+    },
+
+    // Get the cross-browser normalized URL fragment, either from the URL,
+    // the hash, or the override.
+    getFragment: function(fragment, forcePushState) {
+      if (fragment == null) {
+        if (this._hasPushState || !this._wantsHashChange || forcePushState) {
+          fragment = this.location.pathname;
+          var root = this.root.replace(trailingSlash, '');
+          if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
+        } else {
+          fragment = this.getHash();
+        }
+      }
+      return fragment.replace(routeStripper, '');
+    },
+
+    // Start the hash change handling, returning `true` if the current URL matches
+    // an existing route, and `false` otherwise.
+    start: function(options) {
+      if (History.started) throw new Error("Backbone.history has already been started");
+      History.started = true;
+
+      // Figure out the initial configuration. Do we need an iframe?
+      // Is pushState desired ... is it available?
+      this.options          = _.extend({}, {root: '/'}, this.options, options);
+      this.root             = this.options.root;
+      this._wantsHashChange = this.options.hashChange !== false;
+      this._wantsPushState  = !!this.options.pushState;
+      this._hasPushState    = !!(this.options.pushState && this.history && this.history.pushState);
+      var fragment          = this.getFragment();
+      var docMode           = document.documentMode;
+      var oldIE             = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));
+
+      // Normalize root to always include a leading and trailing slash.
+      this.root = ('/' + this.root + '/').replace(rootStripper, '/');
+
+      if (oldIE && this._wantsHashChange) {
+        this.iframe = Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
+        this.navigate(fragment);
+      }
+
+      // Depending on whether we're using pushState or hashes, and whether
+      // 'onhashchange' is supported, determine how we check the URL state.
+      if (this._hasPushState) {
+        Backbone.$(window).bind('popstate', this.checkUrl);
+      } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
+        Backbone.$(window).bind('hashchange', this.checkUrl);
+      } else if (this._wantsHashChange) {
+        this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
+      }
+
+      // Determine if we need to change the base url, for a pushState link
+      // opened by a non-pushState browser.
+      this.fragment = fragment;
+      var loc = this.location;
+      var atRoot = loc.pathname.replace(/[^\/]$/, '$&/') === this.root;
+
+      // If we've started off with a route from a `pushState`-enabled browser,
+      // but we're currently in a browser that doesn't support it...
+      if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) {
+        this.fragment = this.getFragment(null, true);
+        this.location.replace(this.root + this.location.search + '#' + this.fragment);
+        // Return immediately as browser will do redirect to new url
+        return true;
+
+      // Or if we've started out with a hash-based route, but we're currently
+      // in a browser where it could be `pushState`-based instead...
+      } else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) {
+        this.fragment = this.getHash().replace(routeStripper, '');
+        this.history.replaceState({}, document.title, this.root + this.fragment + loc.search);
+      }
+
+      if (!this.options.silent) return this.loadUrl();
+    },
+
+    // Disable Backbone.history, perhaps temporarily. Not useful in a real app,
+    // but possibly useful for unit testing Routers.
+    stop: function() {
+      Backbone.$(window).unbind('popstate', this.checkUrl).unbind('hashchange', this.checkUrl);
+      clearInterval(this._checkUrlInterval);
+      History.started = false;
+    },
+
+    // Add a route to be tested when the fragment changes. Routes added later
+    // may override previous routes.
+    route: function(route, callback) {
+      this.handlers.unshift({route: route, callback: callback});
+    },
+
+    // Checks the current URL to see if it has changed, and if it has,
+    // calls `loadUrl`, normalizing across the hidden iframe.
+    checkUrl: function(e) {
+      var current = this.getFragment();
+      if (current === this.fragment && this.iframe) {
+        current = this.getFragment(this.getHash(this.iframe));
+      }
+      if (current === this.fragment) return false;
+      if (this.iframe) this.navigate(current);
+      this.loadUrl() || this.loadUrl(this.getHash());
+    },
+
+    // Attempt to load the current URL fragment. If a route succeeds with a
+    // match, returns `true`. If no defined routes matches the fragment,
+    // returns `false`.
+    loadUrl: function(fragmentOverride) {
+      var fragment = this.fragment = this.getFragment(fragmentOverride);
+      var matched = _.any(this.handlers, function(handler) {
+        if (handler.route.test(fragment)) {
+          handler.callback(fragment);
+          return true;
+        }
+      });
+      return matched;
+    },
+
+    // Save a fragment into the hash history, or replace the URL state if the
+    // 'replace' option is passed. You are responsible for properly URL-encoding
+    // the fragment in advance.
+    //
+    // The options object can contain `trigger: true` if you wish to have the
+    // route callback be fired (not usually desirable), or `replace: true`, if
+    // you wish to modify the current URL without adding an entry to the history.
+    navigate: function(fragment, options) {
+      if (!History.started) return false;
+      if (!options || options === true) options = {trigger: options};
+      fragment = this.getFragment(fragment || '');
+      if (this.fragment === fragment) return;
+      this.fragment = fragment;
+      var url = this.root + fragment;
+
+      // If pushState is available, we use it to set the fragment as a real URL.
+      if (this._hasPushState) {
+        this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url);
+
+      // If hash changes haven't been explicitly disabled, update the hash
+      // fragment to store history.
+      } else if (this._wantsHashChange) {
+        this._updateHash(this.location, fragment, options.replace);
+        if (this.iframe && (fragment !== this.getFragment(this.getHash(this.iframe)))) {
+          // Opening and closing the iframe tricks IE7 and earlier to push a
+          // history entry on hash-tag change.  When replace is true, we don't
+          // want this.
+          if(!options.replace) this.iframe.document.open().close();
+          this._updateHash(this.iframe.location, fragment, options.replace);
+        }
+
+      // If you've told us that you explicitly don't want fallback hashchange-
+      // based history, then `navigate` becomes a page refresh.
+      } else {
+        return this.location.assign(url);
+      }
+      if (options.trigger) this.loadUrl(fragment);
+    },
+
+    // Update the hash location, either replacing the current entry, or adding
+    // a new one to the browser history.
+    _updateHash: function(location, fragment, replace) {
+      if (replace) {
+        var href = location.href.replace(/(javascript:|#).*$/, '');
+        location.replace(href + '#' + fragment);
+      } else {
+        // #1649 - Some browsers require that `hash` contains a leading #.
+        location.hash = '#' + fragment;
+      }
+    }
+
+  });
+
+  // Create the default Backbone.history.
+  Backbone.history = new History;
+
+  // Backbone.View
+  // -------------
+
+  // Creating a Backbone.View creates its initial element outside of the DOM,
+  // if an existing element is not provided...
+  var View = Backbone.View = function(options) {
+    this.cid = _.uniqueId('view');
+    this._configure(options || {});
+    this._ensureElement();
+    this.initialize.apply(this, arguments);
+    this.delegateEvents();
+  };
+
+  // Cached regex to split keys for `delegate`.
+  var delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+  // List of view options to be merged as properties.
+  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+
+  // Set up all inheritable **Backbone.View** properties and methods.
+  _.extend(View.prototype, Events, {
+
+    // The default `tagName` of a View's element is `"div"`.
+    tagName: 'div',
+
+    // jQuery delegate for element lookup, scoped to DOM elements within the
+    // current view. This should be prefered to global lookups where possible.
+    $: function(selector) {
+      return this.$el.find(selector);
+    },
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // **render** is the core function that your view should override, in order
+    // to populate its element (`this.el`), with the appropriate HTML. The
+    // convention is for **render** to always return `this`.
+    render: function() {
+      return this;
+    },
+
+    // Remove this view by taking the element out of the DOM, and removing any
+    // applicable Backbone.Events listeners.
+    remove: function() {
+      this.$el.remove();
+      this.stopListening();
+      return this;
+    },
+
+    // For small amounts of DOM Elements, where a full-blown template isn't
+    // needed, use **make** to manufacture elements, one at a time.
+    //
+    //     var el = this.make('li', {'class': 'row'}, this.model.escape('title'));
+    //
+    make: function(tagName, attributes, content) {
+      var el = document.createElement(tagName);
+      if (attributes) Backbone.$(el).attr(attributes);
+      if (content != null) Backbone.$(el).html(content);
+      return el;
+    },
+
+    // Change the view's element (`this.el` property), including event
+    // re-delegation.
+    setElement: function(element, delegate) {
+      if (this.$el) this.undelegateEvents();
+      this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
+      this.el = this.$el[0];
+      if (delegate !== false) this.delegateEvents();
+      return this;
+    },
+
+    // Set callbacks, where `this.events` is a hash of
+    //
+    // *{"event selector": "callback"}*
+    //
+    //     {
+    //       'mousedown .title':  'edit',
+    //       'click .button':     'save'
+    //       'click .open':       function(e) { ... }
+    //     }
+    //
+    // pairs. Callbacks will be bound to the view, with `this` set properly.
+    // Uses event delegation for efficiency.
+    // Omitting the selector binds the event to `this.el`.
+    // This only works for delegate-able events: not `focus`, `blur`, and
+    // not `change`, `submit`, and `reset` in Internet Explorer.
+    delegateEvents: function(events) {
+      if (!(events || (events = _.result(this, 'events')))) return;
+      this.undelegateEvents();
+      for (var key in events) {
+        var method = events[key];
+        if (!_.isFunction(method)) method = this[events[key]];
+        if (!method) throw new Error('Method "' + events[key] + '" does not exist');
+        var match = key.match(delegateEventSplitter);
+        var eventName = match[1], selector = match[2];
+        method = _.bind(method, this);
+        eventName += '.delegateEvents' + this.cid;
+        if (selector === '') {
+          this.$el.bind(eventName, method);
+        } else {
+          this.$el.delegate(selector, eventName, method);
+        }
+      }
+    },
+
+    // Clears all callbacks previously bound to the view with `delegateEvents`.
+    // You usually don't need to use this, but may wish to if you have multiple
+    // Backbone views attached to the same DOM element.
+    undelegateEvents: function() {
+      this.$el.unbind('.delegateEvents' + this.cid);
+    },
+
+    // Performs the initial configuration of a View with a set of options.
+    // Keys with special meaning *(model, collection, id, className)*, are
+    // attached directly to the view.
+    _configure: function(options) {
+      if (this.options) options = _.extend({}, _.result(this, 'options'), options);
+      _.extend(this, _.pick(options, viewOptions));
+      this.options = options;
+    },
+
+    // Ensure that the View has a DOM element to render into.
+    // If `this.el` is a string, pass it through `$()`, take the first
+    // matching element, and re-assign it to `el`. Otherwise, create
+    // an element from the `id`, `className` and `tagName` properties.
+    _ensureElement: function() {
+      if (!this.el) {
+        var attrs = _.extend({}, _.result(this, 'attributes'));
+        if (this.id) attrs.id = _.result(this, 'id');
+        if (this.className) attrs['class'] = _.result(this, 'className');
+        this.setElement(this.make(_.result(this, 'tagName'), attrs), false);
+      } else {
+        this.setElement(_.result(this, 'el'), false);
+      }
+    }
+
+  });
+
+  // Backbone.sync
+  // -------------
+
+  // Map from CRUD to HTTP for our default `Backbone.sync` implementation.
+  var methodMap = {
+    'create': 'POST',
+    'update': 'PUT',
+    'patch':  'PATCH',
+    'delete': 'DELETE',
+    'read':   'GET'
+  };
+
+  // Override this function to change the manner in which Backbone persists
+  // models to the server. You will be passed the type of request, and the
+  // model in question. By default, makes a RESTful Ajax request
+  // to the model's `url()`. Some possible customizations could be:
+  //
+  // * Use `setTimeout` to batch rapid-fire updates into a single request.
+  // * Send up the models as XML instead of JSON.
+  // * Persist models via WebSockets instead of Ajax.
+  //
+  // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
+  // as `POST`, with a `_method` parameter containing the true HTTP method,
+  // as well as all requests with the body as `application/x-www-form-urlencoded`
+  // instead of `application/json` with the model in a param named `model`.
+  // Useful when interfacing with server-side languages like **PHP** that make
+  // it difficult to read the body of `PUT` requests.
+  Backbone.sync = function(method, model, options) {
+    var type = methodMap[method];
+
+    // Default options, unless specified.
+    _.defaults(options || (options = {}), {
+      emulateHTTP: Backbone.emulateHTTP,
+      emulateJSON: Backbone.emulateJSON
+    });
+
+    // Default JSON-request options.
+    var params = {type: type, dataType: 'json'};
+
+    // Ensure that we have a URL.
+    if (!options.url) {
+      params.url = _.result(model, 'url') || urlError();
+    }
+
+    // Ensure that we have the appropriate request data.
+    if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) {
+      params.contentType = 'application/json';
+      params.data = JSON.stringify(options.attrs || model.toJSON(options));
+    }
+
+    // For older servers, emulate JSON by encoding the request into an HTML-form.
+    if (options.emulateJSON) {
+      params.contentType = 'application/x-www-form-urlencoded';
+      params.data = params.data ? {model: params.data} : {};
+    }
+
+    // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
+    // And an `X-HTTP-Method-Override` header.
+    if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) {
+      params.type = 'POST';
+      if (options.emulateJSON) params.data._method = type;
+      var beforeSend = options.beforeSend;
+      options.beforeSend = function(xhr) {
+        xhr.setRequestHeader('X-HTTP-Method-Override', type);
+        if (beforeSend) return beforeSend.apply(this, arguments);
+      };
+    }
+
+    // Don't process data on a non-GET request.
+    if (params.type !== 'GET' && !options.emulateJSON) {
+      params.processData = false;
+    }
+
+    var success = options.success;
+    options.success = function(resp, status, xhr) {
+      if (success) success(resp, status, xhr);
+      model.trigger('sync', model, resp, options);
+    };
+
+    var error = options.error;
+    options.error = function(xhr, status, thrown) {
+      if (error) error(model, xhr, options);
+      model.trigger('error', model, xhr, options);
+    };
+
+    // Make the request, allowing the user to override any Ajax options.
+    var xhr = Backbone.ajax(_.extend(params, options));
+    model.trigger('request', model, xhr, options);
+    return xhr;
+  };
+
+  // Set the default implementation of `Backbone.ajax` to proxy through to `$`.
+  Backbone.ajax = function() {
+    return Backbone.$.ajax.apply(Backbone.$, arguments);
+  };
+
+  // Helpers
+  // -------
+
+  // Helper function to correctly set up the prototype chain, for subclasses.
+  // Similar to `goog.inherits`, but uses a hash of prototype properties and
+  // class properties to be extended.
+  var extend = function(protoProps, staticProps) {
+    var parent = this;
+    var child;
+
+    // The constructor function for the new subclass is either defined by you
+    // (the "constructor" property in your `extend` definition), or defaulted
+    // by us to simply call the parent's constructor.
+    if (protoProps && _.has(protoProps, 'constructor')) {
+      child = protoProps.constructor;
+    } else {
+      child = function(){ parent.apply(this, arguments); };
+    }
+
+    // Add static properties to the constructor function, if supplied.
+    _.extend(child, parent, staticProps);
+
+    // Set the prototype chain to inherit from `parent`, without calling
+    // `parent`'s constructor function.
+    var Surrogate = function(){ this.constructor = child; };
+    Surrogate.prototype = parent.prototype;
+    child.prototype = new Surrogate;
+
+    // Add prototype properties (instance properties) to the subclass,
+    // if supplied.
+    if (protoProps) _.extend(child.prototype, protoProps);
+
+    // Set a convenience property in case the parent's prototype is needed
+    // later.
+    child.__super__ = parent.prototype;
+
+    return child;
+  };
+
+  // Set up inheritance for the model, collection, router, view and history.
+  Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
+
+  // Throw an error when a URL is needed, and none is supplied.
+  var urlError = function() {
+    throw new Error('A "url" property or function must be specified');
+  };
+
+}).call(this);
diff --git a/js/lib/erd.js b/js/lib/erd.js
new file mode 100644
index 0000000..4e2c5b6
--- /dev/null
+++ b/js/lib/erd.js
@@ -0,0 +1,50 @@
+////title('Entity-relationship diagram.');
+////description('Make your database structure visible.');
+////dimension(800, 250);
+//
+//var erd = Joint.dia.erd;
+////Joint.paper("world", 800, 250);
+//
+//var e1 = erd.Entity.create({
+//  rect: { x: 220, y: 70, width: 100, height: 60 },
+//  label: "Entity"
+//});
+//var e2 = erd.Entity.create({
+//  rect: { x: 520, y: 70, width: 100, height: 60 },
+//  label: "Weak Entity",
+//  weak: true
+//});
+//
+//var r1 = erd.Relationship.create({
+//  rect: { x: 400, y: 72, width: 55, height: 55 },
+//  label: "Relationship"
+//});
+//
+//var a1 = erd.Attribute.create({
+//  ellipse: { x: 90, y: 30, rx: 50, ry: 20 },
+//  label: "primary",
+//  primaryKey: true
+//});
+//var a2 = erd.Attribute.create({
+//  ellipse: { x: 90, y: 80, rx: 50, ry: 20 },
+//  label: "multivalued",
+//  multivalued: true
+//});
+//var a3 = erd.Attribute.create({
+//  ellipse: { x: 90, y: 130, rx: 50, ry: 20 },
+//  label: "derived",
+//  derived: true
+//});
+//var a4 = erd.Attribute.create({
+//  ellipse: { x: 90, y: 180, rx: 50, ry: 20 },
+//  label: "normal"
+//});
+//
+//a1.joint(e1, erd.arrow);
+//a2.joint(e1, erd.arrow);
+//a3.joint(e1, erd.arrow);
+//a4.joint(e1, erd.arrow);
+//
+//e1.joint(r1, erd.toMany);
+//r1.joint(e2, erd.oneTo);
+//
diff --git a/js/lib/joint.arrows.js b/js/lib/joint.arrows.js
new file mode 100644
index 0000000..ad19e13
--- /dev/null
+++ b/js/lib/joint.arrows.js
@@ -0,0 +1,116 @@
+(function(global){
+
+
+/**
+ * @name Joint.arrows
+ * @namespace Additional ready-to-use arrows.
+<h3>Creating your own arrows</h3>
+  <p>New arrows can be easily added. Each arrow is a function of one parameter (size) returning an object 
+     which describes the arrow. The object has four properties:</p>
+  <ul>
+    <li><i>path</i>: SVG path of arrow shape</li>
+    <li><i>dx</i>: x-axis offset</li>
+    <li><i>dy</i>: y-axis offset</li>
+    <li><i>attrs</i>: SVG path attributes</li>
+  </ul>
+ <p>Let's say you want to create an arrow of a square shape. First of all, you need a SVG path describing 
+    the square. Note that the symmetry of the square is along the origin (0, 0). After you have created the path, 
+    you need to specify the dx, dy offsets. The offsets tell the Joint library where to start drawing the connection. 
+    For our square arrow, they equal to its size. As the last thing, you can set some default path attributes 
+    suitable for you arrows. A good practice is to set the fill attribute. Doing so allows you to grab your arrow 
+    by mouse wherever inside your arrow shape.</p>
+ <pre>
+Joint.arrows.square = function(size){
+    var minusSize = (-size).toString(); 
+    size = size.toString();
+    return {
+        path: ["M", size, size,
+               "L", minusSize, size,
+               "L", minusSize, minusSize,
+               "L", size, minusSize, "z"],
+        dx: size,
+        dy: size,
+        attrs: {
+            stroke: "black",
+            fill: "white"
+        }
+    };
+};
+Joint({x: 20, y: 20}, {x: 300, y: 30}, {
+  startArrow: {
+    type: "square",
+    size: 10
+  }
+});
+ </pre>
+ */
+var arrows = global.Joint.arrows;
+
+/**
+ * Hand arrow.
+ * @name Joint.arrows.hand
+ * @memberOf Joint.arrows
+ * @example 
+Joint({x: 40, y: 40}, {x: 300, y: 70}, {
+  startArrow: {
+      type: "flower"
+  },
+  endArrow: {
+      type: "hand"
+  }
+});
+ */
+arrows.hand = function(size){
+    // size is scale here!
+    size = size ? 1 + (0.1 * size) : 1;
+    return {
+	path: ["M","-15.681352","-5.1927657","C","-15.208304","-5.2925912","-14.311293","-5.5561164","-13.687993","-5.7783788","C","-13.06469","-6.0006406","-12.343434","-6.2537623","-12.085196","-6.3408738","C","-10.972026","-6.7163768","-7.6682017","-8.1305627","-5.9385615","-8.9719142","C","-4.9071402","-9.4736293","-3.9010109","-9.8815423","-3.7027167","-9.8783923","C","-3.5044204","-9.8752373","-2.6780248","-9.5023173","-1.8662751","-9.0496708","C","-0.49317056","-8.2840047","-0.31169266","-8.2208528","0.73932854","-8.142924","L","1.8690327","-8.0591623","L","2.039166","-7.4474021","C","2.1327395","-7.1109323","2.1514594","-6.8205328","2.0807586","-6.8020721","C","2.010064","-6.783614","1.3825264","-6.7940997","0.68622374","-6.8253794","C","-0.66190616","-6.8859445","-1.1814444","-6.8071497","-1.0407498","-6.5634547","C","-0.99301966","-6.4807831","-0.58251196","-6.4431792","-0.12850911","-6.4798929","C","1.2241412","-6.5892761","4.7877672","-6.1187783","8.420785","-5.3511477","C","14.547755","-4.056566","16.233479","-2.9820024","15.666933","-0.73209438","C","15.450654","0.12678873","14.920327","0.61899573","14.057658","0.76150753","C","13.507869","0.85232533","12.818867","0.71394493","9.8149232","-0.090643373","C","7.4172698","-0.73284018","6.1067424","-1.0191399","5.8609814","-0.95442248","C","5.6587992","-0.90118658","4.8309652","-0.89582008","4.0213424","-0.94250688","C","3.0856752","-0.99645868","2.5291546","-0.95219288","2.4940055","-0.82101488","C","2.4635907","-0.70750508","2.4568664","-0.61069078","2.4790596","-0.60585818","C","2.5012534","-0.60103228","2.9422761","-0.59725718","3.4591019","-0.59747878","C","3.9759261","-0.59770008","4.4500472","-0.58505968","4.512693","-0.56939128","C","4.7453841","-0.51117988","4.6195024","0.92436343","4.318067","1.650062","C","3.8772746","2.7112738","2.9836566","3.9064107","2.2797382","4.3761637","C","1.5987482","4.8306065","1.52359","4.9484512","1.8576616","5.0379653","C","1.9860795","5.0723748","2.2155555","4.9678227","2.3676284","4.8056312","C","2.6253563","4.5307504","2.6497332","4.5328675","2.7268401","4.8368824","C","2.8605098","5.3638848","2.3264901","6.4808604","1.6782299","7.0301956","C","1.3498639","7.30845","0.75844624","8.0404548","0.36396655","8.6568609","C","-0.58027706","10.132325","-0.69217806","10.238528","-1.4487256","10.377186","C","-2.2048498","10.515767","-4.6836995","9.9021604","-6.41268","9.1484214","C","-9.9464649","7.6078865","-10.697587","7.3186028","-12.142194","6.9417312","C","-13.020384","6.712621","-14.184145","6.4654454","-14.72833","6.3924328","C","-15.272516","6.3194263","-15.731691","6.241583","-15.748724","6.2194535","C","-15.813855","6.1348086","-16.609132","-4.7586323","-16.562804","-4.9315285","C","-16.551052","-4.9753876","-16.154402","-5.0929474","-15.681351","-5.192769","L","-15.681352","-5.1927657","z","M","11.288619","-1.446424","L","10.957631","-0.2111606","L","11.627189","-0.031753373","C","13.374637","0.43647423","14.580622","0.18262123","15.042031","-0.75056578","C","15.503958","-1.6847955","14.648263","-2.6070187","12.514834","-3.4742549","L","11.634779","-3.8320046","L","11.627191","-3.2568392","C","11.623019","-2.9405087","11.470661","-2.1258178","11.288619","-1.446424","z"],
+	dx: size * 17, 
+	dy: size * 17,
+	attrs: {
+            scale: size,
+	    fill: "white"
+	}
+    };
+};
+/**
+ * Flower arrow.
+ * @name Joint.arrows.flower
+ * @memberOf Joint.arrows
+ */
+arrows.flower = function(size){
+    // size is scale here!
+    size = size ? 1 + (0.1 * size) : 1;
+    return {
+	path: ["M","14.407634","0.14101164","C","13.49394","-0.67828198","12.640683","-1.3981484","11.695412","-1.9684748","C","9.0580339","-3.5615387","6.1975385","-4.0965167","3.8809003","-3.2050972","C","-1.0202735","-1.4355585","-2.2650956","-0.75266958","-6.1678175","-0.75266958","L","-6.1678175","-2.0100414","C","-1.8745566","-2.0888183","1.0024122","-3.7090503","1.8649218","-6.1147565","C","2.2734082","-7.1733737","2.0690534","-8.5444386","0.7737959","-9.8037723","C","-0.82956951","-11.36162","-5.2455289","-11.821547","-6.0950803","-7.2474282","C","-5.3751604","-7.7316963","-3.8041596","-7.6860056","-3.2477662","-6.7174716","C","-2.8775009","-5.9772878","-3.0228781","-5.1443269","-3.3412911","-4.7534348","C","-3.7218578","-4.1236184","-4.935379","-3.5168459","-6.1678175","-3.5168459","L","-6.1678175","-5.6886834","L","-8.5890734","-5.6886834","L","-8.5890734","-1.1787104","C","-9.8368017","-1.2379009","-10.838424","-1.918296","-11.394817","-3.1843135","C","-11.92063","-3.0214395","-12.984452","-2.2582108","-12.911997","-1.2099015","C","-14.045721","-1.0028338","-14.687381","-0.80225028","-15.717737","0.14101164","C","-14.687714","1.0836088","-14.046053","1.2744822","-12.911997","1.4815506","C","-12.984786","2.5298263","-11.92063","3.2930879","-11.394817","3.4559626","C","-10.838424","2.1902771","-9.8368017","1.5095164","-8.5890734","1.4503588","L","-8.5890734","5.9603315","L","-6.1678175","5.9603315","L","-6.1678175","3.788495","C","-4.935379","3.788495","-3.7218578","4.3958989","-3.3412911","5.0250837","C","-3.0228781","5.4159757","-2.8775009","6.2482381","-3.2477662","6.9891209","C","-3.8041596","7.9569902","-5.3751604","8.003345","-6.0950803","7.5190778","C","-5.2455353","12.093197","-0.82956631","11.643978","0.7737959","10.08583","C","2.0693864","8.827128","2.2734082","7.4453226","1.8649218","6.3864056","C","1.00208","3.980998","-1.8745566","2.3705098","-6.1678175","2.2920986","L","-6.1678175","1.0243179","C","-2.2650956","1.0243179","-1.0206064","1.7065088","3.8809003","3.4767455","C","6.1975385","4.367168","9.0580339","3.8331873","11.695412","2.2401238","C","12.640683","1.669431","13.493608","0.95964074","14.407634","0.14101164","z"],
+	dx: size * 15, 
+	dy: size * 15,
+	attrs: {
+            scale: size,
+	    fill: "white"
+	}
+    };
+};
+/**
+ * Rectangle arrow.
+ * @name Joint.arrows.rect
+ * @memberOf Joint.arrows
+ */
+arrows.rect = function(size){
+    if (!size) { size = 5; }
+    return {
+	path: ["M",(3*size).toString(),size.toString(),
+               "L",(-3*size).toString(),size.toString(),
+               "L",(-3*size).toString(),(-size).toString(),
+               "L", (3*size).toString(), (-size).toString(), "z"],
+	dx: 3*size, 
+	dy: 3*size,
+	attrs: { 
+	    stroke: "black",
+	    fill: "white",             
+	    "stroke-width": 1.0
+	}
+    };
+};
+
+})(this);
diff --git a/js/lib/joint.dia.cdm.js b/js/lib/joint.dia.cdm.js
new file mode 100644
index 0000000..00a7eff
--- /dev/null
+++ b/js/lib/joint.dia.cdm.js
@@ -0,0 +1,307 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint,
+     Element = Joint.dia.Element,
+     point = Joint.point;
+
+/**
+ * @name Joint.dia.cdm
+ * @namespace Holds functionality related to Conceptual Data Model (CDM) and Logical Data Model (LDM) diagrams.
+ * CDMs and LDMs serve different purposes, but entity attributes are likely only to be displayed in a Logical Data Model.
+ * Relationship lines in a CDM often display labels for the member roles; this feature is not implemented.
+ */
+var cdm = Joint.dia.cdm = {};
+
+Joint.arrows.crowfoot = function(size) {
+    size = size || 2;
+    return {
+	path: ["M",(4*size).toString(),4*size.toString(),
+               "L",(-4*size).toString(),'0',
+               "L",(4*size).toString(),'0',
+               "M",(-4*size).toString(),'0',
+               "L",(4*size).toString(),(-size*4).toString()],
+        dx: 4*size,
+        dy: 4*size,
+        attrs: {
+            stroke: '#800040',
+            fill: 'none',
+            'stroke-width': 1.0
+        }
+    };
+};
+
+Joint.arrows.crowfootdashed = function(size) {
+    size = size || 2;
+    return {
+	path: ["M",(4*size).toString(),4*size.toString(),
+               "L",(-4*size).toString(),'0',
+               "L",(size/4).toString(),'0',"M",(2*size).toString(),'0',"L",(4*size).toString(),'0',
+               "M",(-4*size).toString(),'0',
+               "L",(4*size).toString(),(-size*4).toString()],
+        dx: 4*size,
+        dy: 4*size,
+        attrs: {
+            stroke: '#800040',
+            fill: 'white',
+            'stroke-width': 1.0
+        }
+    };
+};
+
+
+
+/**
+ * The following relationship lines are solid for their entire length, indicating each member is mandatory.
+  * Below this set are similar lines when both members are optional.
+  * Below that relationships with both optional and mandatory members will eventually be added.
+  */
+
+
+
+/**
+ * Predefined crow's foot line ending for a one-to-many relationship connecting two entities. 
+ * Both are mandatory.
+ * @name oneToMany
+ * @memberOf Joint.dia.cdm
+ * @example c1.joint(c2, Joint.dia.cdm.oneToMany);
+ */
+
+cdm.oneToMany = {
+  endArrow: { type: "crowfoot" },
+  startArrow: {type: "none"},
+  attrs: { "stroke-dasharray": "none", stroke:"#800040" }
+};
+
+
+/**
+ * Predefined crow's foot line ending for a many-to-one relationship connecting two entities.
+ * Both are mandatory.
+ * @name manyToOne
+ * @memberOf Joint.dia.cdm
+ * @example c1.joint(c2, Joint.dia.cdm.manyToOne);
+ */
+
+cdm.manyToOne = {
+    startArrow: {type: "crowfoot"},
+    endArrow: {type: "none"},
+    attrs: {"stroke-dasharray": "none", stroke:"#800040"}
+};
+
+/**
+ * Predefined crow's foot line endings on both ends, indicating a many-to-many relationship connecting two entities.
+ * Both are mandatory.
+ * @name manyToMany
+ * @memberOf Joint.dia.cdm
+ * @example c1.joint(c2, Joint.dia.cdm.manyToMany);
+ */
+
+cdm.manyToMany = {
+    startArrow: {type: "crowfoot"},
+    endArrow: {type: "crowfoot"},
+    attrs: {"stroke-dasharray": "none", stroke:"#800040"}
+};
+
+/**
+ * Predefined one-to-one relationship line.
+ * Both are mandatory.
+ * @name plain
+ * @memberOf Joint.dia.cdm
+ * @example s1.joint(s2, Joint.dia.cdm.plain);
+ */
+
+cdm.plain = {
+    startArrow: {type: "none"},
+    endArrow: {type: "none"},
+    attrs: {"stroke-dasharray": "none", stroke:"#800040"}
+};
+
+
+/**
+ * Predefined arrow similar to that in UML, in case that script isn't loaded. This produces a solid line for the length of the arrow.
+ * @name Joint.dia.cdm.arrow
+ * @memberOf Joint.dia.cdm
+ * @example s1.joint(s2, Joint.dia.cdm.arrow);
+ */
+cdm.arrow = {
+    startArrow: {type: "none"},
+    endArrow: {type: "basic", size: 5, attrs:{fill:"#800040", stroke:"#800040"}},
+    attrs: {"stroke-dasharray": "none", stroke:"#800040"}
+};
+
+
+
+/**
+ * The following relationship lines use dashes, indicating each member is optional.
+  * Above this set are similar definitions for mandatory members.
+  * Below this set similar definitions for relationships with both mandatory and optional members will eventually be added.
+  */
+
+
+/**
+ * Predefined crow's foot line ending for a one-to-many relationship connecting two entities.
+ * Both are optional.
+ * @name oneToManyDashes
+ * @memberOf Joint.dia.cdm
+ * @example c1.joint(c2, Joint.dia.cdm.oneToManySashes);
+ */
+
+cdm.oneToManyDashes = {
+  endArrow: { type: "crowfootdashed" },
+  startArrow: {type: "none"},
+  attrs: { "stroke-dasharray": "--", stroke:"#800040" }
+};
+
+
+/**
+ * Predefined crow's foot line ending for a many-to-one relationship connecting two entities.
+ * Both are optional.
+ * @name manyToOneDashes
+ * @memberOf Joint.dia.cdm
+ * @example c1.joint(c2, Joint.dia.cdm.manyToOneDashes);
+ */
+
+cdm.manyToOneDashes = {
+    startArrow: {type: "crowfootdashed"},
+    endArrow: {type: "none"},
+    attrs: {"stroke-dasharray": "--", stroke:"#800040"}
+};
+
+/**
+ * Predefined crow's foot line endings on both ends, indicating a many-to-many relationship connecting two entities.
+ * Both are optional.
+ * @name manyToManyDashes
+ * @memberOf Joint.dia.cdm
+ * @example c1.joint(c2, Joint.dia.cdm.manyToManyDashes);
+ */
+cdm.manyToManyDashes = {
+    startArrow: {type: "crowfoot"},
+    endArrow: {type: "crowfoot"},
+    attrs: {"stroke-dasharray": "-- ", stroke:"#800040"}
+};
+
+/**
+ * This is an example showing styling subpaths of connections.
+ */
+cdm.exampleArrow = {
+    startArrow: {type: "crowfoot"},
+    endArrow: {type: "crowfootdashed"},
+    attrs: {"stroke-dasharray": "--", stroke:"#800040"},
+    subConnectionAttrs: [ 
+        {from: 1.1, to: 1/2, 'stroke-dasharray': 'none', stroke: '#800040'}
+    ],
+    label: ['many', 'many'],
+    labelAttrs: [
+        {position: 20, offset: -10},
+        {position: -20, offset: -10}
+    ]
+};
+
+/**
+ * Predefined one-to-one relationship line.
+ * Both are optional.
+ * @name dashes
+ * @memberOf Joint.dia.cdm
+ * @example s1.joint(s2, Joint.dia.cdm.plain);
+ */
+
+cdm.dashes = {
+    startArrow: {type: "none"},
+    endArrow: {type: "none"},
+    attrs: {"stroke-dasharray": "--", stroke:"#800040"}
+};
+
+/**
+ * CDM EntityChart.
+ * @name Entity.create
+ * @methodOf Joint.dia.cdm
+ * @param {Object} properties
+ * @param {Object} properties.rect Bounding box of the Entity (e.g. {x: 50, y: 100, width: 100, height: 80}).
+ * @param {Number} [properties.radius] Radius of the corners of the entity rectangle.
+ * @param {String} [properties.label] The name of the entity.
+ * @param {Number} [properties.labelOffsetX] Offset in x-axis of the label from the entity rectangle origin.
+ * @param {Number} [properties.labelOffsetY] Offset in y-axis of the label from the entity rectangle origin.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the entity. 
+ * @param {String} [properties.entityAttributes] Attributes of the entity.
+ * @param {Number} [properties.attributesOffsetX] Offset in x-axis of the attributes.
+ * @param {Number} [properties.attributesOffsetY] Offset in y-axis of the attributes.
+ * @example
+var s1 = Joint.dia.cdm.Entity.create({
+  rect: {x: 120, y: 70, width: 100, height: 60},
+  label: "state 1",
+  attrs: {
+    fill: "315-#fff-#808000"
+  },
+  entityAttributes: {
+    entry: "init()",
+    exit: "destroy()",
+    inner: ["Evt1", "foo()", "Evt2", "bar()"]
+  }
+});
+ */
+cdm.Entity = Element.extend({
+    object: "Entity",
+    module: "cdm",
+    init: function(properties){
+	// options
+	var p = Joint.DeepSupplement(this.properties, properties, {
+            radius: 10,
+            attrs: { fill: 'white' },
+            label: '',
+            labelOffsetX: 20,
+            labelOffsetY: 5,
+            actions: {
+                entry: null,
+                exit: null,
+                inner: []
+            },
+            attributesOffsetX: 5,
+            attributesOffsetY: 5
+        });
+	// wrapper
+	this.setWrapper(this.paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height, p.radius).attr(p.attrs));
+	// inner
+	this.addInner(this.getLabelElement());
+	this.addInner(this.getAttributesElement());
+
+    },
+    getLabelElement: function(){
+	var p = this.properties,
+	    bb = this.wrapper.getBBox(),
+	    t = this.paper.text(bb.x, bb.y, p.label).attr(p.labelAttrs || {}),
+	    tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX, bb.y - tbb.y + p.labelOffsetY);
+	return t;
+    },
+    getAttributesElement: function(){
+	// collect all actions
+	var p = this.properties;
+	var str = (p.actions.entry) ? "entry/ " + p.actions.entry + "\n" : "";
+	str += (p.actions.exit) ? "exit/ " + p.actions.exit + "\n" : "";
+	var l = p.actions.inner.length;
+	for (var i = 0; i < l; i += 2){
+	    str += p.actions.inner[i] + "/ " + p.actions.inner[i+1] + "\n";
+	}
+	// trim
+	str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+
+	// draw text with actions
+	var bb = this.wrapper.getBBox(),
+	    t = this.paper.text(bb.x + p.attributesOffsetX, bb.y + p.labelOffsetY + p.attributesOffsetY, str),
+	    tbb = t.getBBox();
+	t.attr("text-anchor", "start");
+	t.translate(0, tbb.height/2);	// tune the y position
+	return t;
+    },
+    zoom: function(){
+	this.wrapper.attr("r", this.properties.radius); 	// set wrapper's radius back to its initial value (it deformates after scaling)
+	this.shadow && this.shadow.attr("r", this.properties.radius); 	// update shadow as well if there is one 
+	this.inner[0].remove();	// label
+	this.inner[1].remove();	// entityAttributes
+	this.inner[0] = this.getLabelElement();
+	this.inner[1] = this.getAttributesElement();
+    }
+});
+
+
+
+})(this);	// END CLOSURE
\ No newline at end of file
diff --git a/js/lib/joint.dia.devs.js b/js/lib/joint.dia.devs.js
new file mode 100644
index 0000000..908f2f4
--- /dev/null
+++ b/js/lib/joint.dia.devs.js
@@ -0,0 +1,164 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint,
+     Element = Joint.dia.Element;
+
+/**
+ * @name Joint.dia.devs
+ * @namespace Holds functionality related to Discrete EVent System (DEVS) diagrams.
+ */
+var devs = Joint.dia.devs = {};
+
+/**
+ * Predefined arrow.
+ * @name Joint.dia.devs.arrow
+ * @memberOf Joint.dia.devs
+ * @example a1.port("o", "out1").joint(c1.port("i", "in"), Joint.dia.devs.arrow);
+ */
+devs.arrow = {
+  endArrow: { type: "none" },
+  startArrow: {type: "none"},
+  attrs: { "stroke-dasharray": "none" }
+};
+
+/**
+ * DEVS atomic/coupled model.
+ * @name Model.create
+ * @methodOf Joint.dia.devs
+ * @param {Object} properties
+ * @param {Object} properties.rect Bounding box of the model (e.g. {x: 50, y: 100, width: 150, height: 100}).
+ * @param {String} [properties.label] The name of the model.
+ * @param {Number} [properties.labelOffsetX] Offset in x-axis of the label from the model rectangle origin.
+ * @param {Number} [properties.labelOffsetY] Offset in y-axis of the label from the model rectangle origin.
+ * @param {Number} [properties.portsOffsetX] Offset in x-axis of the ports from the model rectangle origin.
+ * @param {Number} [properties.portsOffsetY] Offset in y-axis of the ports from the model rectangle origin.
+ * @param {Number} [properties.iPortRadius] Radius of the input ports circle.
+ * @param {Number} [properties.oPortRadius] Radius of the output ports circle.
+ * @param {Object} [properties.iPortAttrs] SVG attributes of the appearance of the input ports.
+ * @param {Object} [properties.oPortAttrs] SVG attributes of the appearance of the output ports.
+ * @param {Number} [properties.iPortLabelOffsetX] Offset in x-axis of the input ports label.
+ * @param {Number} [properties.oPortLabelOffsetX] Offset in x-axis of the output ports label.
+ * @param {array} [properties.iPorts] The input port names.
+ * @param {array} [properties.oPorts] The output port names.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the model.
+ * @example
+var a1 = Joint.dia.devs.Model.create({
+  rect: {x: 30, y: 90, width: 100, height: 60},
+  label: "Atomic 1",
+  attrs: {
+    fill: "90-#000-#f00:1-#fff"
+  },
+  iPorts: ["in1"],
+  oPorts: ["out1", "out2"]
+});
+ */
+devs.Model = Element.extend({
+     object: "Model",
+     module: "devs",
+     init: function(properties){
+	 // options
+	 var p = Joint.DeepSupplement(this.properties, properties, {
+             labelOffsetX: 20,
+             labelOffsetY: 5,
+             portsOffsetX: 5,
+             portsOffsetY: 20,
+             iPortRadius: 5,
+             oPortRadius: 5,
+             iPortAttrs: { fill: 'green', stroke: 'black' },
+             oPortAttrs: { fill: 'red', stroke: 'black' },
+             iPortLabelOffsetX: -10,
+             iPortLabelOffsetY: -10,
+             oPortLabelOffsetX: 10,
+             oPortLabelOffsetY: -10,
+             iPorts: [],
+             oPorts: []
+         });
+	 // wrapper
+	 var paper = this.paper, i;
+	 this.setWrapper(paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height).attr(p.attrs));
+	 // inner
+	 this.addInner(this.getLabelElement());	// label
+	 // draw ports
+	 for (i = 0, l = p.iPorts.length; i < l; i++){
+	     this.addInner(this.getPortElement("i", i + 1, p.iPorts[i]));
+	 }
+	 for (i = 0, l = p.oPorts.length; i < l; i++){
+	     this.addInner(this.getPortElement("o", i + 1, p.oPorts[i]));
+	 }
+	 // delete all ports related properties, they are saved in port objects
+	 p.iPorts = p.oPorts = p.portsOffsetX = p.portsOffsetY = p.iPortRadius = p.oPortRadius = p.iPortAttrs = p.oPortAttrs = p.iPortLabelOffsetX = p.iPortLabelOffsetY = p.oPortLabelOffsetX = p.oPortLabelOffsetY = undefined;
+     },
+     getLabelElement: function(){
+	 var p = this.properties,
+	     bb = this.wrapper.getBBox(),
+	     t = this.paper.text(bb.x, bb.y, p.label).attr(p.labelAttrs || {}),
+	     tbb = t.getBBox();
+	 t.translate(bb.x - tbb.x + p.labelOffsetX, bb.y - tbb.y + p.labelOffsetY);
+	 return t;
+     },
+     getPortElement: function(type, index, label){
+	 var bb = this.wrapper.getBBox(), p = this.properties,
+	     port = devs.Port.create({
+	         label: label,
+    	         type: type,
+	         position: {x: bb.x + ((type === "o") ? bb.width : 0), y: bb.y + p.portsOffsetY * index},
+	         radius: p[type + "PortRadius"],
+	         attrs: p[type + "PortAttrs"],
+	         offsetX: p[type + "PortLabelOffsetX"],
+	         offsetY: p[type + "PortLabelOffsetY"]
+             });
+	 return port;
+     },
+     /**
+      * Get a port object. It can be used further for connecting other port objects.
+      * @param {String} type "i"|"o"
+      * @param {String} label Name of the port.
+      * @return {Port}
+      */
+     port: function(type, label){
+	 var el;
+	 for (var i = 0, l = this.inner.length; i < l; i++){
+	     el = this.inner[i];
+	     if (el.properties && label == el.properties.label && type == el.properties.type){
+		 return el;
+	     }
+	 }
+	 return undefined;
+     },
+     joint: function(oPort, to, iPort, opt){
+	 // shorthand
+	 if (!to.port) return undefined;	// non-DEVS object
+	 return this.port("o", oPort).joint(to.port("i", iPort), opt);
+     },
+     zoom: function(){
+	 // @todo
+     }				
+});
+
+devs.Port = Element.extend({
+     object: "Port",
+     module: "devs",
+     // doesn't have object and module properties => it's invisible for serializer
+     init: function(properties){
+	 var p = Joint.DeepSupplement(this.properties, properties, {
+             label: '',
+             offsetX: 0,
+             offsetY: 0,
+             type: 'i'
+         });
+	 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs));
+	 this.addInner(this.getLabelElement());
+     },
+     getLabelElement: function(){
+	 var bb = this.wrapper.getBBox(), p = this.properties,
+	     t = this.paper.text(bb.x, bb.y, p.label),
+	     tbb = t.getBBox();
+	 t.translate(bb.x - tbb.x + p.offsetX, bb.y - tbb.y + p.offsetY);
+	 return t;
+     },
+     zoom: function(){
+	 // @todo
+     }
+});
+
+})(this);	// END CLOSURE
diff --git a/js/lib/joint.dia.erd.js b/js/lib/joint.dia.erd.js
new file mode 100644
index 0000000..5eb9e5d
--- /dev/null
+++ b/js/lib/joint.dia.erd.js
@@ -0,0 +1,172 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint,
+     Element = Joint.dia.Element,
+     point = Joint.point;
+
+/**
+ * @name Joint.dia.erd
+ * @namespace Holds functionality related to Entity-relationship diagrams.
+ */
+var erd = Joint.dia.erd = {};
+
+/**
+ * Predefined arrow. You are free to use this arrow as the option parameter to joint method.
+ * Implements Chen-style cardinality notation.
+ * @name Joint.dia.erd.arrow
+ * @memberOf Joint.dia.erd
+ * @example
+ * var arrow = Joint.dia.erd.arrow;
+ */
+erd.arrow = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none"}
+};
+
+erd.toMany = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none"},
+    label: 'n',
+    labelAttrs: { position: -10, offset: -10 }
+};
+
+erd.manyTo = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none"},
+    label: 'n',
+    labelAttrs: { position: 10, offset: -10 }
+};
+
+erd.toOne = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none"},
+    label: '1',
+    labelAttrs: { position: -10, offset: -10 }
+};
+
+erd.oneTo = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none"},
+    label: '1',
+    labelAttrs: { position: 10, offset: -10 }
+};
+
+erd.oneToMany = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none"},
+    label: ['1', 'n'],
+    labelAttrs: [ { position: 10, offset: -10 }, { position: -10, offset: -10 } ]
+};
+
+erd.manyToOne = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none"},
+    label: ['n', '1'],
+    labelAttrs: [ { position: 10, offset: -10 }, { position: -10, offset: -10 } ]
+};
+
+
+/**
+ * ERD Entity and Weak Entity.
+ * @methodOf Joint.dia.erd
+ */
+erd.Entity = Element.extend({
+    object: 'Entity',
+    module: 'erd',
+    init: function(properties) {
+        var p = Joint.DeepSupplement(this.properties, properties, {
+            attrs: { fill: 'lightgreen', stroke: '#008e09', 'stroke-width': 2 },
+            label: '',
+            labelAttrs: { 'font-weight': 'bold' },
+            shadow: true,
+            weak: false,        // Weak Entity?
+            padding: 5
+        });
+        this.setWrapper(this.paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height).attr(p.attrs));
+
+        if (p.weak) {
+            this.addInner(this.paper.rect(p.rect.x + p.padding, p.rect.y + p.padding, p.rect.width - 2*p.padding, p.rect.height - 2*p.padding).attr(p.attrs));
+        }
+        this.addInner(this.getLabelElement());
+    },
+    getLabelElement: function() {
+	var p = this.properties,
+	    bb = this.wrapper.getBBox(),
+	    t = this.paper.text(bb.x + bb.width/2, bb.y + bb.height/2, p.label).attr(p.labelAttrs || {}),
+	    tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX,
+		    bb.y - tbb.y + p.labelOffsetY);
+	return t;
+    }
+});
+
+/**
+ * ERD Relationship.
+ * @methodOf Joint.dia.erd
+ */
+erd.Relationship = Element.extend({
+    object: 'Relationship',
+    module: 'erd',
+    init: function(properties) {
+        var p = Joint.DeepSupplement(this.properties, properties, {
+            attrs: { rotation: 45, fill: 'lightblue', stroke: '#000d5b', 'stroke-width': 2 },
+            label: '',
+            labelAttrs: { 'font-weight': 'bold' }
+        });
+        this.setWrapper(this.paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height).attr(p.attrs));
+        this.addInner(this.getLabelElement());
+    },
+    getLabelElement: function() {
+	var p = this.properties,
+	    bb = this.wrapper.getBBox(),
+	    t = this.paper.text(bb.x + bb.width/2, bb.y + bb.height/2, p.label).attr(p.labelAttrs || {}),
+	    tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX,
+		    bb.y - tbb.y + p.labelOffsetY);
+	return t;
+    }
+});
+
+/**
+ * ERD Attribute, Key Attribute, Multivalued Attribute and Derived Attribute.
+ * @methodOf Joint.dia.erd
+ */
+erd.Attribute = Element.extend({
+    object: 'Attribute',
+    module: 'erd',
+    init: function(properties) {
+        var p = Joint.DeepSupplement(this.properties, properties, {
+            attrs: { fill: 'red', opacity: (properties.primaryKey ? 0.8 : 0.5), 
+                     stroke: '#5b0001', 'stroke-width': 2, 
+                     'stroke-dasharray': (properties.derived ? '.' : 'none') },
+            label: '',
+            labelAttrs: { 'font-weight': 'bold' },
+            multivalued: false,
+            derived: false,
+            padding: 5
+        });
+        this.setWrapper(this.paper.ellipse(p.ellipse.x, p.ellipse.y, p.ellipse.rx, p.ellipse.ry).attr(p.attrs));
+        if (p.multivalued) {
+            this.addInner(this.paper.ellipse(p.ellipse.x, p.ellipse.y, p.ellipse.rx - p.padding, p.ellipse.ry - p.padding).attr(p.attrs));
+        }
+        this.addInner(this.getLabelElement());
+    },
+    getLabelElement: function() {
+	var p = this.properties,
+	    bb = this.wrapper.getBBox(),
+	    t = this.paper.text(bb.x + bb.width/2, bb.y + bb.height/2, p.label).attr(p.labelAttrs || {}),
+	    tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX,
+		    bb.y - tbb.y + p.labelOffsetY);
+	return t;
+    }
+});
+
+})(this);	// END CLOSURE
diff --git a/js/lib/joint.dia.fsa.js b/js/lib/joint.dia.fsa.js
new file mode 100644
index 0000000..0ed61e0
--- /dev/null
+++ b/js/lib/joint.dia.fsa.js
@@ -0,0 +1,158 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint,
+     Element = Joint.dia.Element,
+     point = Joint.point;
+
+/**
+ * @name Joint.dia.fsa
+ * @namespace Holds functionality related to FSA diagrams.
+ */
+var fsa = Joint.dia.fsa = {};
+
+/**
+ * Predefined arrow. You are free to use this arrow as the option parameter to joint method.
+ * @name arrow
+ * @memberOf Joint.dia.fsa
+ * @example
+ * var arrow = Joint.dia.fsa.arrow;
+ * s1.joint(s2, (arrow.label = "anEvent", arrow));
+ */
+fsa.arrow = {
+    startArrow: {type: "none"},
+    endArrow: {type: "basic", size: 5},
+    attrs: {"stroke-dasharray": "none"}
+};
+
+/**
+ * Finite state machine state.
+ * @name State.create
+ * @methodOf Joint.dia.fsa
+ * @param {Object} properties
+ * @param {Object} properties.position Position of the State (e.g. {x: 50, y: 100}).
+ * @param {Number} [properties.radius] Radius of the circle of the state.
+ * @param {String} [properties.label] The name of the state.
+ * @param {Number} [properties.labelOffsetX] Offset in x-axis of the label from the state circle origin.
+ * @param {Number} [properties.labelOffsetY] Offset in y-axis of the label from the state circle origin.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the state.
+ * @example
+var s1 = Joint.dia.fsa.State.create({
+  position: {x: 120, y: 70},
+  label: "state 1",
+  radius: 40,
+  attrs: {
+    stroke: "blue",
+    fill: "yellow"
+  }
+});
+ */
+fsa.State = Element.extend({
+    object: "State",
+    module: "fsa",
+    init: function(properties){
+	// options
+	var p = Joint.DeepSupplement(this.properties, properties, {
+            position: point(0,0),
+            radius: 30,
+            label: 'State',
+            labelOffsetX: 30/2,
+            labelOffsetY: 30/2 + 8,
+            attrs: { fill: 'white' }
+        });
+	// wrapper
+	this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs));
+	// inner
+	this.addInner(this.getLabelElement());
+    },
+    getLabelElement: function(){
+	var
+	p = this.properties,
+	bb = this.wrapper.getBBox(),
+	t = this.paper.text(bb.x, bb.y, p.label),
+	tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX,
+		    bb.y - tbb.y + p.labelOffsetY);
+	return t;
+    }
+});
+
+/**
+ * Finite state machine start state.
+ * @name StartState.create
+ * @methodOf Joint.dia.fsa
+ * @param {Object} properties
+ * @param {Object} properties.position Position of the start state (e.g. {x: 50, y: 100}).
+ * @param {Number} [properties.radius] Radius of the circle of the start state.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the start state.
+ * @example
+var s0 = Joint.dia.fsa.StartState.create({
+  position: {x: 120, y: 70},
+  radius: 15,
+  attrs: {
+    stroke: "blue",
+    fill: "yellow"
+  }
+});
+ */
+fsa.StartState = Element.extend({
+     object: "StartState",
+     module: "fsa",
+     init: function(properties){
+	 // options
+         var p = Joint.DeepSupplement(this.properties, properties, {
+             position: point(0,0),
+             radius: 10,
+             attrs: { fill: 'black' }
+         });
+	 // wrapper
+	 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs));
+     }
+});
+
+/**
+ * Finite state machine end state.
+ * @name EndState.create
+ * @methodOf Joint.dia.fsa
+ * @param {Object} properties
+ * @param {Object} properties.position Position of the end state (e.g. {x: 50, y: 100}).
+ * @param {Number} [properties.radius] Radius of the circle of the end state.
+ * @param {Number} [properties.innerRadius] Radius of the inner circle of the end state.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the end state.
+ * @param {Object} [properties.innerAttrs] SVG attributes of the appearance of the inner circle of the end state.
+ * @example
+var s0 = Joint.dia.fsa.EndState.create({
+  position: {x: 120, y: 70},
+  radius: 15,
+  innerRadius: 8,
+  attrs: {
+    stroke: "blue",
+    fill: "yellow"
+  },
+  innerAttrs: {
+    fill: "red"
+  }
+});
+ */
+fsa.EndState = Element.extend({
+     object: "EndState",
+     module: "fsa",
+     init: function(properties){
+	 // options
+	 var p = Joint.DeepSupplement(this.properties, properties, {
+             position: point(0,0),
+             radius: 10,
+             innerRadius: (properties.radius && (properties.radius / 2)) || 5,
+             attrs: { fill: 'white' },
+             innerAttrs: { fill: 'black' }
+         });
+	 // wrapper
+	 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs));
+	 // inner
+	 this.addInner(this.paper.circle(p.position.x, p.position.y, p.innerRadius).attr(p.innerAttrs));
+     },
+     zoom: function(){
+	 this.inner[0].scale.apply(this.inner[0], arguments);
+     }
+});
+
+})(this);	// END CLOSURE
diff --git a/js/lib/joint.dia.js b/js/lib/joint.dia.js
new file mode 100644
index 0000000..5d74db0
--- /dev/null
+++ b/js/lib/joint.dia.js
@@ -0,0 +1,910 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint;
+
+var point = Joint.point;
+var rect = Joint.rect;
+
+/**
+ * @name Joint.dia
+ * @namespace Holds functionality related to all diagrams and their elements.
+ */
+var dia = Joint.dia = {
+    /**
+     * Current dragged object.
+     * @private
+     */
+    _currentDrag: false,
+    /**
+     * Current zoomed object.
+     * @private
+     */
+    _currentZoom: false,
+    /**
+     * Table with all registered objects.
+     *  - registered objects can embed and can be embedded
+     *  - the table is of the form: {RaphaelPaper1: [shape1, shape2, ...]}
+     * @private
+     */
+    _registeredObjects: {},
+    /**
+     * Table whith all registered joints.
+     *  - the table is of the form: {RaphaelPaper1: [joint1, joint2, ...]}
+     * @private
+     */
+    _registeredJoints: {},
+    /**
+     * Create new joint and register it. All joints appearing in a diagram should
+     * be created using this function. Otherwise they won't be registered and
+     * therefore not serialized when needed.
+     * @param {Object} args Joint parameters.
+     * @see Joint
+     * @return {Joint}
+     */
+    Joint: function(args){
+	var j = Joint.apply(null, arguments);
+	this.registerJoint(j);
+	return j;
+    },
+    /**
+     * Returns registered elements of the current paper.
+     * @return {array} Array of registered elements.
+     */
+    registeredElements: function(){
+	return (this._registeredObjects[Joint.paper().euid()] || (this._registeredObjects[Joint.paper().euid()] = []));
+    },
+    /**
+     * Returns registered joints of the current paper.
+     * @return {array} Array of registered joints.
+     */
+    registeredJoints: function(){
+	return (this._registeredJoints[Joint.paper().euid()] || (this._registeredJoints[Joint.paper().euid()] = []));
+    },
+    /**
+     * Register object to the current paper.
+     * You don't have to use this method unless you really know what you're doing.
+     * @param {Element|Joint} obj Object to be registered.
+     * @return {Element|Joint} Registered object.
+     */
+    register: function(obj){
+	(this._registeredObjects[Joint.paper().euid()] || (this._registeredObjects[Joint.paper().euid()] = [])).push(obj);
+    },
+    /**
+     * Cancel registration of an element in the current paper.
+     * @param {Element} obj Object to be unregistered.
+     */
+    unregister: function(obj){
+	var register = (this._registeredObjects[Joint.paper().euid()] || (this._registeredObjects[Joint.paper().euid()] = [])),
+	    idx = register.length;
+	while (idx--)
+	    if (register[idx] === obj)
+		register.splice(idx, 1);
+    },
+    /**
+     * Register joint to the current paper. Avoid registering the the same joint twice.
+     * You don't have to use this method unless you really know what you're doing.
+     * @param {Joint} j Joint object to be registered.
+     */
+    registerJoint: function(j){
+	(this._registeredJoints[Joint.paper().euid()] || (this._registeredJoints[Joint.paper().euid()] = [])).push(j);
+    },
+    /**
+     * Cancel registration of a joint in the current paper.
+     * @param {Joint} j Joint to be unregistered.
+     */
+    unregisterJoint: function(j){
+	var register = (this._registeredJoints[Joint.paper().euid()] || (this._registeredJoints[Joint.paper().euid()] = [])),
+	    idx = register.length;
+	while (idx--)
+	    if (register[idx] === j)
+		register.splice(idx, 1);
+    }
+};
+
+/**
+ * Abstract object of all diagram elements.
+ * This object is never used directly, instead, specific diagram elements inherits from it.
+ * Allows easy creation of new specific diagram elements preserving all features that Joint library and Joint.dia plugin offer.
+ * <h3>Wrapper</h3>
+ *  All custom elements must have a wrapper set. Wrapper is the key object that Joint library counts with.
+ *  There cannot be any element without a wrapper. Usually it is an object which wraps all the subelements
+ *  that a specific diagram element contains. The wrapper must be set in init method.
+ *  To set a wrapper, use setWrapper(aWrapper) method. The single parameter to the method is a Raphaël vector object.
+ *  Later on, you can access this object using wrapper property.
+ * <h3>Inner</h3>
+ *  Inner objects are subelements of an element. Although they are optional, they are commonly used. To add a subelement
+ *  to the element, use addInner(anInner) method. It takes a Raphaël vector object as an argument. All inner objects are
+ *  placed to an array that you can access using inner property.
+ * <h3><i>init</i> method</h3>
+ *  The <i>init</i> method has to be part of every element you create. It takes all element options as an argument,
+ *  sets wrapper and adds inners.
+ * <h3><i>joint</i> method</h3>
+ *  If you have specific elements, in which connections are not controlled by wrapper, you can implement your own joint method.
+ * <h3><i>zoom</i> method</h3>
+ *  As Joint.dia library does not know how your specific element should behave after scaling, you can use zoom method to implement
+ *  the desired behaviour.
+ * @name Element
+ * @memberOf Joint.dia
+ * @constructor
+ * @example
+var mydia = Joint.dia.mydia = {};
+var Element = Joint.dia.Element;
+
+mydia.MyElement = Element.extend({
+  // init method must be always presented
+  init: function(properties){
+    var p = this.properties;
+    // parameters processing
+    p.position = properties.position;
+    p.radius = properties.radius || 30;
+    // every element must have a wrapper
+    this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius));
+    // optional inner elements
+    this.addInner(this.paper.text(p.position.x, p.position.y, "my element"));
+  }
+});
+
+// ...
+
+var e = mydia.MyElement.create({
+  position: {x: 50, y: 50},
+  radius: 20
+});
+ */
+var Element = dia.Element = function(){};
+
+/**
+ * Use this to instantiate particular elements.
+ * @private
+ */
+Element.create = function(properties){
+    var instance = new this(properties);
+    if (instance.init) instance.init(properties);
+    instance.defaults(instance.properties);
+    instance.paper.safari();        // fix webkit bug
+    return instance;
+};
+
+/**
+ * @private
+ */
+Element.extend = function(prototype){
+    var C = prototype.constructor = function(properties){
+	this.construct(properties);
+    };
+    C.base = this;
+    var proto = C.prototype = new this();
+    Joint.Mixin(proto, prototype);
+    Joint.Supplement(C, this);
+    return C;
+};
+
+Element.prototype = {
+    parentElement: null,
+    toolbox: null,
+    _isElement: true,
+    // auxiliaries for scaling and translating
+    lastScaleX: 1.0,
+    lastScaleY: 1.0,
+    dx: undefined,
+    dy: undefined,
+    // original bounding box (before scaling a translating)
+    // set in setWrapper()
+    origBBox: undefined,
+
+    construct: function(properties){
+	this.properties = {
+	    dx: 0, dy: 0,		// translation
+	    rot: 0,			// rotation
+	    sx: 1.0, sy: 1.0,		// scale
+	    module: this.module,
+	    object: this.object,
+	    parent: properties.parent
+	};
+	this.wrapper = null;
+        this.shadow = null;
+        this.shadowAttrs = {
+            stroke: 'none', 
+            fill: '#999', 
+            translation: '7,7',
+            opacity: 0.5
+        };
+	this.inner = [];
+	// ghost attributes
+	this.ghostAttrs = {
+	    opacity: 0.5,
+	    "stroke-dasharray": "-",
+	    stroke: "black"
+	};
+	this._opt = {
+	    draggable: true,	// enable dragging?
+	    ghosting: false,		// enable ghosting?
+	    toolbox: false		// enable toolbox?
+	};
+
+	this.paper = Joint.paper();
+	dia.register(this); // register me in the global table
+    },
+    defaults: function(properties) {
+        if (properties.shadow) {
+            Joint.Mixin(this.shadowAttrs, properties.shadow);
+            this.createShadow();
+        }
+    },
+    /**
+     * @methodOf Joint.dia.Element#
+     * @return Element unique id.
+     */
+    euid: function(){
+	return Joint.generateEuid.call(this);
+    },
+    // this is needed in joint library when
+    // manipulating with a raphael object joints array
+    // - just delegate joints array methods to the wrapper
+    joints: function(){
+	return this.wrapper.joints();
+    },
+
+    /**
+     * Used in joint.js for unified access to the wrapper.
+     * For all RaphaelObjects returns just this.
+     * @private
+     * @return {RaphaelObject} Return wrapper.
+     */
+    yourself: function(){
+	return this.wrapper;
+    },
+
+    updateJoints: function(){
+	var joints = this.wrapper.joints();
+	if (joints){
+	    for (var i = 0, l = joints.length; i < l; i++){
+		joints[i].update();
+	    }
+	}
+    },
+
+    /**
+     * Toggle ghosting of the element.
+     * Dragging a diagram object causes moving of the wrapper and all inners, and update
+     * of all correspondent connections. It can be sometimes expensive. If your elements
+     * are complex and you want to prevent all this rendering and computations,
+     * you can enable ghosting. It means that only a ghost of your wrapper will be dragged.
+     * @methodOf Joint.dia.Element#
+     * @return {Element}
+     */
+    toggleGhosting: function(){
+	this._opt.ghosting = !this._opt.ghosting;
+	return this;
+    },
+
+    /**
+     * Create a ghost shape which is used when dragging.
+     * (in the case _opt.ghosting is enabled)
+     * @private
+     */
+    createGhost: function(){
+        this.ghost = this.cloneWrapper(this.ghostAttrs);
+    },
+
+    /**
+     * Create a shadow.
+     * @private
+     */
+    createShadow: function(){
+        this.shadowAttrs.rotation = this.wrapper.attrs.rotation;
+        this.shadow = this.cloneWrapper(this.shadowAttrs);
+        this.shadow.toBack();
+    },
+
+    /**
+     * Creates the same object as the wrapper is.
+     * Used for ghosting and shadows.
+     * @private
+     * @return {RaphaelObject} created clone
+     */
+    cloneWrapper: function(attrs) {
+	var wa = this.wrapper.attrs,
+	    paper = this.wrapper.paper,
+            clone;
+
+	switch (this.wrapper.type) {
+	case "rect":
+	    clone = paper.rect(wa.x, wa.y, wa.width, wa.height, wa.r);
+	    break;
+	case "circle":
+	    clone = paper.circle(wa.cx, wa.cy, wa.r);
+	    break;
+	case "ellipse":
+	    clone = paper.ellipse(wa.cx, wa.cy, wa.rx, wa.ry);
+	    break;
+	default:
+	    break;
+	}
+	clone.attr(attrs);
+        return clone;
+    },
+
+    /**
+     * Get object position.
+     * @private
+     * @return point
+     */
+    objPos: function(objname){
+	switch (this[objname].type){
+	case "rect":
+	    return point(this[objname].attr("x"), this[objname].attr("y"));
+	case "circle":
+	case "ellipse":
+	    return point(this[objname].attr("cx"), this[objname].attr("cy"));
+	default:
+	    break;
+	}
+    },
+
+    wrapperPos: function(){
+	return this.objPos("wrapper");
+    },
+    ghostPos: function(){
+	return this.objPos("ghost");
+    },
+
+    /**
+     * Sends the wrapper and all inners to the front.
+     * @methodOf Joint.dia.Element#
+     * @return {Element}
+     */
+    toFront: function(){
+        this.shadow && this.shadow.toFront();
+	this.wrapper && this.wrapper.toFront();
+	for (var i = 0, len = this.inner.length; i < len; i++)
+	    this.inner[i].toFront();
+	return this;
+    },
+
+    /**
+     * Sends the wrapper and all inners to the back.
+     * @methodOf Joint.dia.Element#
+     * @return {Element}
+     */
+    toBack: function(){
+	for (var i = this.inner.length - 1; i >= 0; --i)
+	    this.inner[i].toBack();
+	this.wrapper && this.wrapper.toBack();
+        this.shadow && this.shadow.toBack();
+	return this;
+    },
+
+    /**
+     * dia.Element mousedown event.
+     * @private
+     */
+    dragger: function(e){
+	if (!this.wholeShape._opt.draggable) return;
+	dia._currentDrag = this.wholeShape;
+	if (dia._currentDrag._opt.ghosting){
+	    dia._currentDrag.createGhost();
+	    dia._currentDrag.ghost.toFront();
+	} else
+	    dia._currentDrag.toFront();
+
+	dia._currentDrag.removeToolbox();
+	// small hack to get the connections to front
+	dia._currentDrag.translate(0.0001,0.0001);
+
+	dia._currentDrag.dx = e.clientX;
+	dia._currentDrag.dy = e.clientY;
+	e.preventDefault && e.preventDefault();
+    },
+
+    /**
+     * dia.Element zoom tool mousedown event.
+     * @private
+     */
+    zoomer: function(e){
+	dia._currentZoom = this;
+	dia._currentZoom.toFront();
+	dia._currentZoom.removeToolbox();
+
+	var bb = rect(dia._currentZoom.origBBox);
+	dia._currentZoom.dx = e.clientX;
+	dia._currentZoom.dy = e.clientY;
+	dia._currentZoom.dWidth = bb.width * dia._currentZoom.lastScaleX;
+	dia._currentZoom.dHeight = bb.height * dia._currentZoom.lastScaleY;
+
+	e.preventDefault && e.preventDefault();
+    },
+    /**
+     * Move the element by offsets.
+     * @methodOf Joint.dia.Element#
+     * @param {Number} dx Offset in x-axis.
+     * @param {Number} dy Offset in y-axis.
+     */
+    translate: function(dx, dy){
+	// save translation
+	this.properties.dx += dx;
+	this.properties.dy += dy;
+	// translate wrapper, all inner and toolbox
+	this.wrapper.translate(dx, dy);
+	this.shadow && this.shadow.translate(dx, dy);
+	for (var i = this.inner.length - 1; i >= 0; --i){
+	    this.inner[i].translate(dx, dy);
+	}
+	this.translateToolbox(dx, dy);
+        this.paper.safari();
+    },
+
+    /**
+     * Add wrapper.
+     * @methodOf Joint.dia.Element#
+     * @param {RaphaelObject} s Vector object specifying a wrapper.
+     */
+    setWrapper: function(s){
+	this.wrapper = s;			// set wrapper
+	this.wrapper.wholeShape = this;		// set wrapper's reference to me
+	this.type = this.wrapper.type;		// set my type
+	this.origBBox = this.wrapper.getBBox();	// save original bounding box
+	// if dragging enabled, register mouse down event handler
+	if (this._opt && this._opt.draggable){
+	    this.wrapper.mousedown(this.dragger);
+	    this.wrapper.node.style.cursor = "move";
+	}
+	// make sure wrapper has the joints method
+	if (!this.wrapper.joints){
+	    this.wrapper._joints = [];
+	    this.wrapper.joints = function(){ return this._joints; };
+	}
+	// add toolbox if enabled
+	this.addToolbox();
+	return this;
+    },
+
+    /**
+     * Add a subelement.
+     * @methodOf Joint.dia.Element#
+     * @param {Element} s The subelement to be added.
+     * @return {Element} this
+     */
+    addInner: function(s){
+	this.inner.push(s);
+	// @remove one of them?
+	s.wholeShape = this;
+	s.parentElement = this;
+	if (s._isElement) s.properties.parent = this.euid();
+	// if dragging enabled, register mouse down event handler
+	if (!s._isElement && this._opt && this._opt.draggable){
+	    s.mousedown(this.dragger);
+	    s.node.style.cursor = "move";
+	}
+	s.toFront();	// always push new inner to the front
+	return this;
+    },
+
+    /**
+     * Remove a subelement.
+     * @methodOf Joint.dia.Element#
+     * @param {Element} s The subelement to be removed.
+     * @return {Element} this
+     */
+    delInner: function(s){
+	var
+	i = 0,
+	len = this.inner.length;
+	for (; i < len; i++)
+	    if (this.inner[i] == s)
+		break;
+	if (i < len){
+	    this.inner.splice(i, 1);
+	    s.parentElement = null;
+	    if (s._isElement) s.properties.parent = undefined;
+	}
+	return this;
+    },
+
+    /**
+     * Show toolbox.
+     * @private
+     */
+    addToolbox: function(){
+	// do not show toolbox if it is not enabled
+	if (!this._opt.toolbox){
+	    return this;
+	}
+
+	var
+	self = this,
+	bb = this.wrapper.getBBox(),	// wrapper bounding box
+	tx = bb.x - 10,	// toolbox x position
+	ty = bb.y - 22;	// toolbox y position
+
+	this.toolbox = [];
+	this.toolbox.push(this.paper.rect(tx, ty, 33, 22, 5).attr({fill: "white"}));
+	// zoom in/out (mint icon: search.png)
+	this.toolbox.push(this.paper.image("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAE5SURBVHjaYvz//z8DsQAggFhARGRkpBETE1M/kGkOxIz//v078+HDh4odO3acBPJ//4eaCBBADCA6Kirq4JlzJ978/vPrNwifOHX4fUhIyFmgvDQQs4HUgDBAALFAbTDX1zNiZmFmBfONDM14WFlZdYFMCSD+AsS/QOIAAcQEVcyIw5m8IJNhHIAAAisGufHMuZNfgE74A8Knzx7/LiLO91tfXx9kOgsjEIDUAQQQ2FqQZ3q7Jk6AWs2gqCbOkZDn8l9AiLuNi4vrxfHjx7cC1X8HCCCwYqiv/aBu5NXQ0FD9+/dfr4uf/te7N1/Mu337ttmbN2/uAwQQzIO/gfg11DNsN4BA/LD4n8f33swF8v8DFQoAaS6AAGLEFilQN3JCbQLhH0B8HyCAGHHFIFQDB1QTSNEXgAADAEQ2gYZ9CcycAAAAAElFTkSuQmCC", tx, ty, 11, 11));
+	this.toolbox[this.toolbox.length-1].toFront();
+	Joint.addEvent(this.toolbox[this.toolbox.length-1].node, "mousedown", function(e){
+			   dia.Element.prototype.zoomer.apply(self, [e]);
+		       });
+	// embed (mint icon: page_spearmint_up.png)
+	this.toolbox.push(this.paper.image("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEJSURBVHjaYvj//z8DFGOAnz9/rjl27Jg0AwMDExAzAAQQI0ghFPz/8usZjM3ACJTnYBEC0iyfmZmZZYBCXwECiAkm+evXL4bff34w/P33C4z//PvB8O33awYmJiZeoDQ/ELMBBBALSKGJiQkPOzs7AxsbC8OaTXMZWFhZoEb8g5nFDsTMAAHEBFIIZLwCuo/hy5dvDCF+yQx/fv+BuAvhRDAACCCQM0AO5YRJfv78lSE+Ko/h79+/DP8RJoMBQACheHDv4wYGdOAs28DAyMioCmS+AAggJgYSAEAAoZiMUxHUZIAAYkES4AJSQjD3o4HvQPwXIIDgJgMVM4PCEhREWBT/BUUFQIABAMuFbgea+o0EAAAAAElFTkSuQmCC", tx + 22, ty, 11, 11));
+	this.toolbox[this.toolbox.length-1].toFront();
+	this.toolbox[this.toolbox.length-1].node.onclick = function(){ self.embed(); };
+	// unembed (mint icon: page_spearmint_down.png)
+	this.toolbox.push(this.paper.image("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEJSURBVHjaYvj//z8DFGOAnz9/rjl27Jg0AwMDExAzAAQQI0ghFPz/8usZjM3ACJTnYBEC0iyfmZmZZYBCXwECiIkBCfz99wuO//z7wfDt92sGJiYmXqAUPxCzAQQQi4mJyX0gQwFZExcXJ8OaTXMYODmZYULsQMwMEEAgk9WB+D0jIyNElJ2NYdXG2QzsHOwMSE4EA4AAYjpz5swvIC3By8sLVrh2yzygiRwQTzD8Q1EMEEBwD/779+//7gcNDCysKN5gcJZtYADaqgpkvgAIILgM0CMYCtEBQAChBB1ORVCTAQKIBUmAC0gJATEnFvXfQSELEEBwk4GKQeHEBgoiLIr/AvEvgAADAH4mYO9cg5S2AAAAAElFTkSuQmCC", tx + 11, ty, 11, 11));
+	this.toolbox[this.toolbox.length-1].toFront();
+	this.toolbox[this.toolbox.length-1].node.onclick = function(){ self.unembed(); };
+	// delete (icon: stop.png)
+//	this.toolbox.push(this.paper.image("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEBQbDFwnwRsAAAE8SURBVBjTVZG9agJREEbP1TWL266wja2tWggipEhpIxh9gIUgiIW1vZWvkHJJHVLYig+ghWARbGzEYgMKrojr/t4UNwoZmGY4882BEfyVHA5HmOaEXA6khCSB83nK4fAmHOcAoAFI2+7RaIwxTQhDiGO1cLu1WK3egS6AkIPBiFptjGU9kc3Cfg++D4WCSg8CyWLxRRD0MxjGBMNQYLMJlQoUi9BuQ6kEx6PAMDrAs4aUcL3C5QLLJVSrUC6D68J8Duez0gIySKk8fV8ppCnoOux24HkQRUoH0EhTNTBNpeG6CqzX4XSC2eyRrBEEUzyvha7Deq1Oe54CXVcFxfE3sBXStgsYxjuW9UqaCsJQAfcOwx/i+EU4zkY8ntLrfZLPdwB1NklUYpJ0heNsHk8BIIr6RNEH/2t7BwF+AeKFndSgPkjIAAAAAElFTkSuQmCC", tx + 11, ty + 11, 11, 11));
+        this.toolbox.push(this.paper.path("M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248").attr({fill: "#000", stroke: "none"}).translate(tx, ty).scale(0.5));
+	this.toolbox[this.toolbox.length-1].toFront();
+	this.toolbox[this.toolbox.length-1].node.onclick = function(){ self.remove(); };
+	// clone (mint icon: sound_grey.png)
+	this.toolbox.push(this.paper.image("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEjSURBVHjaYvz//z8DsQAggJjwSaanpwsBMReMDxBATAQMO/zv379eRkZGdiBmAgggJiymqaWlpS0GSrIAFZ4A0h5AYR4gZgEIICaoAg6ggolACea/f/9aAulAoDD3169fNwPZ0kA2B0gxQADBTBYECuYCaa7bt2/vACkEYs4zZ84cA9KsQAwKBUaAAGIBqfzz5w8jExPTRiCTXUFBwQ9IfwP5x8TExAJI/4IpBgggsOJ58+Y9B1JRQMwGdOdjoFP2ghRwcnL6A4P2KUghiA8QQGDFQIH/QGf8BDJ/L1myZC8fHx/IeiZmZmbr379/H4ApBgggFlgoANX/A1L/gJoYP336BHIG47Nnz1zu3r0LUvgD5FqAAGLEF4Og0EHy4G+AAAMAho1gqqugDLgAAAAASUVORK5CYII=", tx, ty + 11, 11, 11));
+	this.toolbox[this.toolbox.length-1].toFront();
+	this.toolbox[this.toolbox.length-1].node.onmousedown = function(){ dia._currentDrag = self.clone()[0]; console.log(dia._currentDrag[0])};
+	// toolbox wrapper
+	return this;
+    },
+
+    /**
+     * Hide (remove) toolbox.
+     * @todo Will be public after it is properly tested.
+     * @private
+     */
+    removeToolbox: function(){
+	if (this.toolbox)
+	    for (var i = this.toolbox.length - 1; i >= 0; --i)
+		this.toolbox[i].remove();
+	this.toolbox = null;
+	return this;
+    },
+
+    /**
+     * Show/hide toolbox.
+     * @todo Will be public after it is properly tested.
+     * @private
+     */
+    toggleToolbox: function(){
+	this._opt.toolbox = !this._opt.toolbox;
+	if (this._opt.toolbox){
+	    this.addToolbox();
+	} else {
+	    this.removeToolbox();
+	}
+	return this;
+    },
+
+    /**
+     * Move toolbox by offset (dx, dy).
+     * @private
+     */
+    translateToolbox: function(dx, dy){
+	if (this.toolbox)
+	    for (var i = this.toolbox.length - 1; i >= 0; --i)
+		this.toolbox[i].translate(dx, dy);
+    },
+
+    /**
+     * Disconnects element from all joints. Empties the element joints array.
+     * Note that it preserves registration of the element in its joints.
+     * @methodOf Joint.dia.Element#
+     */
+    disconnect: function(){
+	var joints = this.joints(), idx = joints.length, j;
+	while (idx--){
+	    j = joints[idx];
+
+	    if (j.endObject().wholeShape === this){
+		j.freeJoint(j.endObject());
+		j.draw(["dummyEnd"]);
+		j.update();
+	    }
+	    if (j.startObject().wholeShape === this){
+		j.freeJoint(j.startObject());
+		j.draw(["dummyStart"]);
+		j.update();
+	    }
+	}
+    },
+
+    /**
+     * Unregister the element from its joints registeredObjects.
+     * After the call, the element is not registered in any of its joints.
+     * @private
+     */
+    unregisterFromJoints: function(){
+	var joints = this.joints(), idx = joints.length;
+	while (idx--) joints[idx].unregister(this);
+	return this;
+    },
+
+    /**
+     * Remove element.
+     * @methodOf Joint.dia.Element#
+     * @return {null}
+     */
+    remove: function(){
+	var inners = this.inner, idx = inners.length;
+	this.unregisterFromJoints();
+	this.disconnect();
+	this.removeToolbox();
+	this.unembed();
+	while (idx--) inners[idx].remove();
+	this.wrapper.remove();
+	dia.unregister(this);
+        this.removed = true;
+        return null;
+    },
+
+    /**
+     * Remove element and all joints pointing from and to this element.
+     * @methodOf Joint.dia.Element#
+     * @return {null}
+     */
+    liquidate: function(){
+	var joints = this.joints(), idx = joints.length, j, inners = this.inner;
+	// remove joints
+	while (idx--){
+	    j = joints[idx];
+	    j.freeJoint(j.startObject());
+	    j.freeJoint(j.endObject());
+	    j.clean(["connection", "startCap", "endCap", "handleStart", "handleEnd", "label"]);
+	    dia.unregisterJoint(j);
+	    j.unregister(this);
+	}
+	this.removeToolbox();
+	this.unembed();
+	// liquidate subelements
+	idx = inners.length;
+	while (idx--){
+	    if (inners[idx].liquidate) inners[idx].liquidate();
+	    else inners[idx].remove();
+	}
+	this.wrapper.remove();
+	dia.unregister(this);
+        this.removed = true;
+        return null;
+    },
+
+    /**
+     * Enable/disable dragging of the element.
+     * @methodOf Joint.dia.Element#
+     * @param {boolean} enable True/false.
+     * @return {Element} Return this.
+     */
+    draggable: function(enable){
+	this._opt.draggable = enable;
+        this.wrapper.node.style.cursor = enable ? "move" : null;
+        var idx = this.inner.length;
+        while (idx--) this.inner[idx].node.style.cursor = enable ? "move" : null;
+	return this;
+    },
+
+    /**
+     * Highlights the element.
+     * Override in inherited objects or @todo set in options.
+     * @methodOf Joint.dia.Element#
+     * @return {Element} Return this.
+     */
+    highlight: function(){
+	this.wrapper.attr("stroke", "red");
+	return this;
+    },
+
+    /**
+     * Unhighlights the element.
+     * @methodOf Joint.dia.Element#
+     * @return {Element} Return this.
+     */
+    unhighlight: function(){
+	this.wrapper.attr("stroke", this.properties.attrs.stroke || "#000");
+	return this;
+    },
+
+    /**
+     * Embed me into the first registered dia.Element whos bounding box
+     * contains my bounding box origin. Both elements will behave as a whole.
+     * @todo It is probably out of date. Retest!!!
+     * @methodOf Joint.dia.Element#
+     * @return {Element}
+     */
+    embed: function(){
+	var
+	ros = dia._registeredObjects[this.paper.euid()],
+	myBB = rect(this.wrapper.getBBox()),
+	embedTo = null;
+
+	// for all registered objects (sharing the same raphael paper)
+	for (var i = 0, len = ros.length; i < len; i++){
+	    var
+	    shape = ros[i],
+	    shapeBB = rect(shape.getBBox());
+
+	    // does shape contain my origin point?
+	    if (shapeBB.containsPoint(myBB.origin()))
+		embedTo = shape;	// if yes, save the shape
+
+	    if (shape == this.parentElement){
+		shape.delInner(this);
+
+		// just for optimization, a shape can be a subshape of
+		// only one shape, so if I have been deleted from my parent,
+		// I am free, and further, if I know where to embed -> do not search deeper
+		if (embedTo) break;
+	    }
+	}
+
+	// embed if possible
+	embedTo && embedTo.addInner(this);
+	return this;
+    },
+
+    /**
+     * Decouple embedded element from its parent.
+     * @methodOf Joint.dia.Element#
+     * @return {Element}
+     */
+    unembed: function(){
+	if (this.parentElement){
+	    this.parentElement.delInner(this);
+	    this.parentElement = null;
+	    this.properties.parent = undefined;
+	}
+	return this;
+    },
+
+    /**
+     * Scale element.
+     * @methodOf Joint.dia.Element#
+     * @param {Number} sx Scale in x-axis.
+     * @param {Number} &optional sy Scale in y-axis.
+     * @example e.scale(1.5);
+     */
+    scale: function(sx, sy){
+	// save translation
+	this.properties.sx = sx;
+	this.properties.sy = sy;
+
+	this.shadow && this.shadow.scale.apply(this.shadow, arguments);
+	this.wrapper.scale.apply(this.wrapper, arguments);
+	this.zoom.apply(this, arguments);
+	// apply scale to all subshapes that are Elements (were embeded)
+	for (var i = 0, len = this.inner.length; i < len; i++){
+	    var inner = this.inner[i];
+	    if (inner._isElement){
+		inner.scale.apply(inner, arguments);
+	    }
+	}
+	if (this._doNotRedrawToolbox) return;
+	this.removeToolbox();
+	this.addToolbox();
+    },
+    /**
+     * This method should be overriden by inherited elements to implement
+     * the desired scaling behaviour.
+     * @methodOf Joint.dia.Element#
+     * @param {Number} sx Scale in x-axis.
+     * @param {Number} &optional sy Scale in y-axis.
+     */
+    zoom: function(sx, sy){
+	// does nothing, overriden by specific elements
+    },
+
+    /**
+     * @methodOf Joint.dia.Element#
+     * @return {Object} Bounding box of the element.
+     */
+    getBBox: function(){
+	return this.wrapper.getBBox();
+    },
+
+    /**
+     * @see Joint
+     * @methodOf Joint.dia.Element#
+     */
+    joint: function(to, opt){
+	var toobj = (to._isElement) ? to.wrapper : to,
+	    j = this.wrapper.joint.apply(this.wrapper, [toobj, opt]);
+	Joint.dia.registerJoint(j);
+	return j;
+    },
+
+    /**
+     * Delegate attr message to my wrapper.
+     * @private
+     */
+    attr: function(){
+	return Raphael.el.attr.apply(this.wrapper, arguments);
+    }
+};
+
+
+/**
+ * Document mousemove event.
+ * @private
+ */
+Element.mouseMove = function(e){
+    e = e || window.event;
+    // object dragging
+    if (dia._currentDrag){
+	if (dia._currentDrag._opt.ghosting)	// if ghosting, move ghost
+	    dia._currentDrag.ghost.translate(e.clientX - dia._currentDrag.dx, e.clientY - dia._currentDrag.dy);
+	else	// otherwise, move the whole shape
+	    dia._currentDrag.translate(e.clientX - dia._currentDrag.dx, e.clientY - dia._currentDrag.dy);
+
+	dia._currentDrag.dx = e.clientX;
+	dia._currentDrag.dy = e.clientY;
+    }
+
+    // object zooming
+    if (dia._currentZoom){
+	var
+	dx = e.clientX - dia._currentZoom.dx,
+	dy = e.clientY - dia._currentZoom.dy;
+
+	dia._currentZoom.dWidth -= dx;
+	dia._currentZoom.dHeight -= dy;
+	// correction
+	if (dia._currentZoom.dWidth < 1) dia._currentZoom.dWidth = 1;
+	if (dia._currentZoom.dHeight < 1) dia._currentZoom.dHeight = 1;
+
+	// scaling parameters
+	var
+	sx = dia._currentZoom.dWidth / dia._currentZoom.origBBox.width,
+	sy = dia._currentZoom.dHeight / dia._currentZoom.origBBox.height;
+
+	// do not redraw toolbox because it is not there
+	dia._currentZoom._doNotRedrawToolbox = true;
+	dia._currentZoom.scale(sx, sy);	// scale
+	r.safari();
+
+	// save for later usage
+	dia._currentZoom.dx = e.clientX;
+	dia._currentZoom.dy = e.clientY;
+	dia._currentZoom.lastScaleX = sx;
+	dia._currentZoom.lastScaleY = sy;
+    }
+};
+
+/**
+ * Document mouseup event.
+ * @private
+ */
+Element.mouseUp = function(e){
+    // if ghosting is enabled, translate whole shape to the position of
+    // the ghost, then remove ghost and update joints
+    if (dia._currentDrag && dia._currentDrag._opt.ghosting){
+	var
+	gPos = dia._currentDrag.ghostPos(),
+	wPos = dia._currentDrag.wrapperPos();
+
+	dia._currentDrag.translate(gPos.x - wPos.x, gPos.y - wPos.y);
+	dia._currentDrag.ghost.remove();
+	dia._currentDrag.updateJoints();
+    }
+    // add toolbar again when dragging is stopped
+    if (dia._currentDrag){
+	dia._currentDrag.addToolbox();
+	dia._currentDrag.toFront();
+	// small hack: change slightely the position to get the connections to front
+	dia._currentDrag.translate(0.0001,0.0001);
+    }
+
+    // add toolbar again when zooming is stopped
+    if (dia._currentZoom){
+	// remove toolbox, because scale above may create one,
+	// so there would be two toolboxes after addToolbox() below
+	dia._currentZoom.removeToolbox();
+	dia._currentZoom.addToolbox();
+	dia._currentZoom.toFront();
+    }
+
+    dia._currentDrag = false;
+    dia._currentZoom = false;
+};
+
+Joint.addEvent(document, "mousemove", Element.mouseMove);
+Joint.addEvent(document, "mouseup", Element.mouseUp);
+
+
+})(this);	// END CLOSURE
\ No newline at end of file
diff --git a/js/lib/joint.dia.org.js b/js/lib/joint.dia.org.js
new file mode 100644
index 0000000..d5b7bf6
--- /dev/null
+++ b/js/lib/joint.dia.org.js
@@ -0,0 +1,81 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint,
+     Element = Joint.dia.Element,
+     point = Joint.point;
+
+/**
+ * @name Joint.dia.org
+ * @namespace Holds functionality related to Org-charts.
+ */
+var org = Joint.dia.org = {};
+
+/**
+ * Predefined arrow. You are free to use this arrow as the option parameter to joint method.
+ * @name arrow
+ * @memberOf Joint.dia.org
+ * @example
+ * var arrow = Joint.dia.org.arrow;
+ */
+org.arrow = {
+    startArrow: {type: 'none'},
+    endArrow: {type: 'none'},
+    attrs: {"stroke-dasharray": "none", 'stroke-width': 2, stroke: 'gray' }
+};
+
+
+/**
+ * Organizational chart member.
+ * @methodOf Joint.dia.org
+ */
+org.Member = Element.extend({
+    object: 'Member',
+    module: 'org',
+    init: function(properties) {
+        var p = Joint.DeepSupplement(this.properties, properties, {
+            attrs: { fill: 'lightgreen', stroke: '#008e09', 'stroke-width': 2 },
+            name: '',
+            position: '',
+            nameAttrs: { 'font-weight': 'bold' },
+            positionAttrs: {},
+            swimlaneAttrs: { 'stroke-width': 1, stroke: 'black' },
+            labelOffsetY: 10,
+            radius: 10,
+            shadow: true,
+            avatar: '',
+            padding: 5
+        });
+        this.setWrapper(this.paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height, p.radius).attr(p.attrs));
+        if (p.avatar) {
+            this.addInner(this.paper.image(p.avatar, p.rect.x + p.padding, p.rect.y + p.padding, p.rect.height - 2*p.padding, p.rect.height - 2*p.padding));
+            p.labelOffsetX = p.rect.height;
+        }
+        if (p.position) {
+            var positionElement = this.getPositionElement();
+            this.addInner(positionElement[0]);
+            this.addInner(positionElement[1]);      // swimlane
+        }
+        this.addInner(this.getNameElement());
+    },
+    getPositionElement: function() {
+	var p = this.properties,
+	    bb = this.wrapper.getBBox(),
+	    t = this.paper.text(bb.x + bb.width/2, bb.y + bb.height/2, p.position).attr(p.positionAttrs || {}),
+	    tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX, bb.y - tbb.y + tbb.height);
+        tbb = t.getBBox();
+        var l = this.paper.path(['M', tbb.x, tbb.y + tbb.height + p.padding, 
+                                 'L', tbb.x + tbb.width, tbb.y + tbb.height + p.padding].join(' '));
+	return [t, l];
+    },
+    getNameElement: function() {
+	var p = this.properties,
+	    bb = this.wrapper.getBBox(),
+	    t = this.paper.text(bb.x + bb.width/2, bb.y + bb.height/2, p.name).attr(p.nameAttrs || {}),
+	    tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX, bb.y - tbb.y + tbb.height*2 + p.labelOffsetY);
+	return t;
+    }
+});
+
+})(this);	// END CLOSURE
diff --git a/js/lib/joint.dia.pn.js b/js/lib/joint.dia.pn.js
new file mode 100644
index 0000000..c375c75
--- /dev/null
+++ b/js/lib/joint.dia.pn.js
@@ -0,0 +1,151 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint,
+     Element = Joint.dia.Element;
+
+/**
+ * @name Joint.dia.pn
+ * @namespace Holds functionality related to Petri net diagrams.
+ */
+var pn = Joint.dia.pn = {};
+
+/**
+ * Predefined arrow.
+ * @name Joint.dia.pn.arrow
+ * @memberOf Joint.dia.pn
+ * @example p1.joint(e2, Joint.dia.pn.arrow);
+ */
+pn.arrow = {
+    startArrow: {type: "none"},
+    endArrow: {type: "basic", size: 5}, 
+    attrs: {"stroke-dasharray": "none"}
+};
+
+/**
+ * Petri net place.
+ * @name Place.create
+ * @methodOf Joint.dia.pn
+ * @param {Object} properties
+ * @param {Object} properties.position Position of the place (e.g. {x: 50, y: 100}).
+ * @param {Number} [properties.radius] Radius of the circle of the place.
+ * @param {Number} [properties.tokenRadius] Radius of the tokens of the place.
+ * @param {Number} [properties.tokens] Number of tokens.
+ * @param {String} [properties.label] The name of the place.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the place.
+ * @param {Object} [properties.tokenAttrs] SVG attributes of the appearance of the token circles.
+ * @example
+var p1 = Joint.dia.pn.Place.create({
+  position: {x: 120, y: 70},
+  radius: 25,
+  tokenRadius: 4,
+  tokens: 3,
+  label: "p1",
+  attrs: {
+    stroke: "blue"
+  },
+  tokenAttrs: {
+    fill: "red"
+  }
+});
+ */
+pn.Place = Element.extend({
+     object: "Place",
+     module: "pn",
+     init: function(properties){
+	 // options
+	 var p = Joint.DeepSupplement(this.properties, properties, {
+             radius: 20,
+             tokenRadius: 3,
+             tokens: 0,
+             attrs: { fill: 'white' },
+             tokenAttrs: { fill: 'black' }
+         });
+	 // wrapper
+	 var paper = this.paper;
+	 this.setWrapper(paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs));
+	 // inner
+	 var strut = 2; // px
+	 switch (p.tokens){
+	 case 0:
+	     break;
+	 case 1:
+	     this.addInner(paper.circle(p.position.x, p.position.y, p.tokenRadius).attr(p.tokenAttrs));
+	     break;
+	 case 2:
+	     this.addInner(paper.circle(p.position.x - (p.tokenRadius * 2), p.position.y, p.tokenRadius).attr(p.tokenAttrs));
+	     this.addInner(paper.circle(p.position.x + (p.tokenRadius * 2), p.position.y, p.tokenRadius).attr(p.tokenAttrs));
+	     break;
+	 case 3:
+	     this.addInner(paper.circle(p.position.x - (p.tokenRadius * 2) - strut, p.position.y, p.tokenRadius).attr(p.tokenAttrs));
+	     this.addInner(paper.circle(p.position.x + (p.tokenRadius * 2) + strut, p.position.y, p.tokenRadius).attr(p.tokenAttrs));
+	     this.addInner(paper.circle(p.position.x, p.position.y, p.tokenRadius).attr(p.tokenAttrs));
+	     break;
+	 default:
+	     this.addInner(paper.text(p.position.x, p.position.y, p.tokens.toString()));
+	     break;
+	 }
+	 // label
+	 if (p.label){
+	     this.addInner(paper.text(p.position.x, p.position.y - p.radius, p.label));
+	     this.inner[this.inner.length - 1].translate(0, -this.inner[this.inner.length - 1].getBBox().height);
+	 }
+     },
+     zoom: function(){
+	 // @todo tokens must move accordingly
+	 for (var i = 0, len = this.inner.length; i < len; i++){
+	     this.inner[i].scale.apply(this.inner[i], arguments);
+	 }
+	 if (this.label){
+	     this.inner[this.inner.length - 1].remove();
+	     var bb = this.wrapper.getBBox();
+	     this.inner[this.inner.length - 1] = this.paper.text(bb.x, bb.y, this.properties.label);
+	     this.inner[this.inner.length - 1].translate(0, -this.inner[this.inner.length - 1].getBBox().height);
+	 }
+     }
+});
+
+/**
+ * Petri net event.
+ * @name Event.create
+ * @methodOf Joint.dia.pn
+ * @param {Object} properties
+ * @param {Object} properties.rect Bounding box of the event (e.g. {x: 50, y: 100, width: 30, height: 100}).
+ * @param {String} [properties.label] The name of the event.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the event.
+ * @example
+var p1 = Joint.dia.pn.Event.create({
+  rect: {x: 120, y: 70, width: 50, height: 7},
+  label: "e1",
+  attrs: {
+    stroke: "blue",
+    fill: "yellow"
+  }
+});
+ */
+pn.Event = Element.extend({
+     object: "Event",
+     module: "pn",
+     init: function(properties){
+	 // options
+	 var p = Joint.DeepSupplement(this.properties, properties, {
+             attrs: { fill: 'black', stroke: 'black' }
+         });
+	 // wrapper
+	 var paper = this.paper;
+	 this.setWrapper(paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height).attr(p.attrs));
+	 if (p.label){
+	     this.addInner(paper.text(p.rect.x, p.rect.y, p.label));
+	     this.inner[0].translate(0, -this.inner[0].getBBox().height);
+	 }
+     },
+     zoom: function(){
+	 if (this.properties.label){
+	     this.inner[0].remove();
+	     var bb = this.wrapper.getBBox();
+	     this.inner[0] = this.paper.text(bb.x, bb.y, this.properties.label);
+	     this.inner[0].translate(0, -this.inner[0].getBBox().height);
+	 }
+     }
+});
+
+})(this);	// END CLOSURE
diff --git a/js/lib/joint.dia.serializer.js b/js/lib/joint.dia.serializer.js
new file mode 100644
index 0000000..e3b8580
--- /dev/null
+++ b/js/lib/joint.dia.serializer.js
@@ -0,0 +1,211 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint;
+
+Joint.Mixin(Joint.prototype, /** @lends Joint.prototype */ {
+    /**
+     * Returns compact object representation of joint. Used for serialization.
+     * @return {Object} Compact representation of the joint.
+     */
+    compact: function(){
+	var start = this.startObject(), end = this.endObject(),
+	    regs = this._registeredObjects, iRegs = regs.length, reg,
+	    j = {
+		object: "joint",
+		euid: this.euid(),
+		opt: this._opt,
+		from: undefined,
+		to: undefined,
+		registered: {
+		    start: [],
+		    end: [],
+		    both: []
+		}
+	    };
+	// @todo Ugly!!! Joint shouldn't know anything about Joint.dia! Remove!
+
+	// from/to
+	if (start.wholeShape)
+	    j.from = start.wholeShape.euid();
+	if (end.wholeShape)
+	    j.to = end.wholeShape.euid();
+
+	if (this.isStartDummy())
+	    j.from = start.attrs.cx + "@" + start.attrs.cy;
+	if (this.isEndDummy())
+	    j.to = end.attrs.cx + "@" + end.attrs.cy;
+
+	// registered objects processing
+	while(iRegs--){
+	    reg = regs[iRegs];
+	    j.registered[reg._capToStick || "both"].push(reg.euid());
+	}
+	return j;
+    },
+    /**
+     * @return {String} JSON representation of joint.
+     */
+    stringify: function(){
+	return JSON.stringify(this.compact());
+    }
+});
+
+Joint.Mixin(Joint.dia, /** @lends Joint.dia */ {
+     /**
+      * Clones diagram in the current paper.
+      * @return {Array} Array of the constructed elements.
+      */
+    clone: function(){
+	return this.parse(this.stringify(Joint.paper()));
+    },
+    /**
+     * Construct a diagram from the JSON representation.
+     * @param {String} JSON
+     * @return {Array} Array of the constructed elements.
+     */
+    parse: function(json){
+	var arr = JSON.parse(json), o, m, e,
+	    element, joints = [], i, len, elements = {},
+	    objects = [];
+
+	if (!(arr instanceof Array)) arr = [arr];
+
+	// for all elements
+	for (i = 0, len = arr.length; i < len; i++){
+	    o = arr[i];
+
+	    m = o.module;
+	    e = o.object;
+
+	    // create joints separatly, after all elements are created
+	    // so that they can connect them
+	    if (e === "joint"){
+		joints.push(o);
+		objects.push(o);
+		continue;
+	    }
+	    // construct the element
+	    if (this[m]){
+		if (this[m][e]){
+		    element = this[m][e].create(o);
+		} else {
+		    console.error("Object " + e + " of module " + m + " is missing.");
+		    return;
+		}
+	    } else {
+		console.error("Module " + m + " is missing.");
+		return;
+	    }
+	    if (o.euid) elements[o.euid] = element;
+
+	    // translate, @todo rotate, scale
+	    element.translate(o.dx, o.dy);
+	    // element.rotate(o.rot);
+	    element.scale(o.sx, o.sy);
+	    objects.push(element);
+	}
+	this.hierarchize(elements);
+	this.createJoints(joints, elements);
+	return objects;
+    },
+    /**
+     * @private
+     */
+    hierarchize: function(elements){
+	var euid, element;
+	for (euid in elements){
+	    if (!elements.hasOwnProperty(euid)) continue;
+	    element = elements[euid];
+	    if (element.properties.parent && elements[element.properties.parent])
+		elements[element.properties.parent].addInner(element);
+	}
+    },
+    /**
+     * Create joints.
+     * @private
+     * @param {Array} joints Matrix of joints for each element.
+     * @param {Object} elements Hash table of elements (key: euid, value: element).
+     */
+    createJoints: function(joints, elements){
+	var iJoints = joints.length,
+            joint, from, to, realFrom, realTo,
+            newJoint, toRegister, toRegisterElement, iRegister, cap,
+	    sides = ["start", "end", "both"], iSides = sides.length;
+	// for all joints of all elements
+	while (iJoints--){
+	    joint = joints[iJoints];
+	    from = elements[joint.from];
+	    to = elements[joint.to];
+
+	    // point or element wrapper
+	    realFrom = (from) ? from.wrapper : {x: joint.from.split("@")[0], y: joint.from.split("@")[1]};
+	    realTo = (to) ? to.wrapper : {x: joint.to.split("@")[0], y: joint.to.split("@")[1]};
+
+	    // create joint
+	    newJoint = this.Joint(realFrom, realTo, joint.opt);
+	    // register caps - elements
+	    toRegister = [];
+	    iSides = sides.length;
+	    while (iSides--){
+		cap = sides[iSides];
+		iRegister = joint.registered[cap].length;
+		while (iRegister--){
+		    if (elements[joint.registered[cap][iRegister]]){
+			toRegisterElement = elements[joint.registered[cap][iRegister]];
+			toRegisterElement._capToStick = cap;
+			toRegister.push(toRegisterElement);
+		    }
+		}
+	    }
+	    newJoint.registerForever(toRegister);
+	}//endwhile (iJoints--)
+    },
+    /**
+     * Stringify the whole diagram (occupying a paper).
+     * @param {RaphaelPaper} paper Raphael paper the diagram belongs to.
+     * @return {String} JSON representation of the diagram.
+     */
+    stringify: function(paper){
+	var objs, iObjs, o, str = [],
+            registeredObjects = this._registeredObjects, registeredJoints = this._registeredJoints,
+            paperEuid = paper.euid();
+	// elements
+	if (registeredObjects[paperEuid]){
+	    objs = registeredObjects[paperEuid];
+	    iObjs = objs.length;
+	    while (iObjs--){
+		o = objs[iObjs];
+		if (o.object)
+		    str.push(o.stringify());
+	    }
+	}
+	// joints
+	if (registeredJoints[paperEuid]){
+	    objs = registeredJoints[paperEuid];
+	    iObjs = objs.length;
+	    while (iObjs--){
+		o = objs[iObjs];
+		str.push(o.stringify());
+	    }
+	}
+	return "[" + str.join(",") + "]";
+    }
+});
+
+Joint.Mixin(Joint.dia.Element.prototype, /** @lends Joint.dia.Element.prototype */ {
+    /**
+     * @return JSON representation of the element.
+     */
+    stringify: function(){
+	return JSON.stringify(Joint.Mixin(this.properties, { euid: this.euid() }));
+    },
+    /**
+     * Clone element.
+     * @return {Element} Cloned element.
+     */
+    clone: function(){
+	return Joint.dia.parse(this.stringify())[0];
+    }
+});
+
+})(this);	// END CLOSURE
diff --git a/js/lib/joint.dia.uml.js b/js/lib/joint.dia.uml.js
new file mode 100644
index 0000000..10987cb
--- /dev/null
+++ b/js/lib/joint.dia.uml.js
@@ -0,0 +1,381 @@
+(function(global){	// BEGIN CLOSURE
+
+var Joint = global.Joint,
+     Element = Joint.dia.Element,
+     point = Joint.point;
+
+/**
+ * @name Joint.dia.uml
+ * @namespace Holds functionality related to UML diagrams.
+ */
+var uml = Joint.dia.uml = {};
+
+Joint.arrows.aggregation = function(size){
+    return {
+	path: ["M","7","0","L","0","5","L","-7","0", "L", "0", "-5", "z"],
+	dx: 9,
+	dy: 9,
+	attrs: {
+	    stroke: "black",
+	    "stroke-width": 2.0,
+	    fill: "black"
+	}
+    };
+};
+
+/**
+ * Predefined aggregation arrow for Class diagram.
+ * @name aggregationArrow
+ * @memberOf Joint.dia.uml
+ * @example c1.joint(c2, Joint.dia.uml.aggregationArrow);
+ */
+uml.aggregationArrow = {
+  endArrow: { type: "aggregation" },
+  startArrow: {type: "none"},
+  attrs: { "stroke-dasharray": "none" }
+};
+/**
+ * Predefined dependency arrow for Class diagram.
+ * @name dependencyArrow
+ * @memberOf Joint.dia.uml
+ * @example c1.joint(c2, Joint.dia.uml.dependencyArrow);
+ */
+uml.dependencyArrow = {
+  endArrow: { type: "basic", size: 5 },
+  startArrow: {type: "none"},
+  attrs: { "stroke-dasharray": "none" }
+};
+/**
+ * Predefined generalization arrow for Class diagram.
+ * @name generalizationArrow
+ * @memberOf Joint.dia.uml
+ * @example c1.joint(c2, Joint.dia.uml.generalizationArrow);
+ */
+uml.generalizationArrow = {
+  endArrow: { type: "basic", size: 10, attrs: {fill: "white"} },
+  startArrow: {type: "none"},
+  attrs: { "stroke-dasharray": "none" }
+};
+/**
+ * Predefined arrow for StateChart.
+ * @name Joint.dia.uml.arrow
+ * @memberOf Joint.dia.uml
+ * @example s1.joint(s2, Joint.dia.uml.arrow);
+ */
+uml.arrow = {
+    startArrow: {type: "none"},
+    endArrow: {type: "basic", size: 5},
+    attrs: {"stroke-dasharray": "none"}
+};
+
+/**
+ * UML StateChart state.
+ * @name State.create
+ * @methodOf Joint.dia.uml
+ * @param {Object} properties
+ * @param {Object} properties.rect Bounding box of the State (e.g. {x: 50, y: 100, width: 100, height: 80}).
+ * @param {Number} [properties.radius] Radius of the corners of the state rectangle.
+ * @param {String} [properties.label] The name of the state.
+ * @param {Number} [properties.labelOffsetX] Offset in x-axis of the label from the state rectangle origin.
+ * @param {Number} [properties.labelOffsetY] Offset in y-axis of the label from the state rectangle origin.
+ * @param {Number} [properties.swimlaneOffsetY] Offset in y-axis of the swimlane shown after the state label.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the state.
+ * @param {Object} [properties.actions] Actions of the state.
+ * @param {String} [properties.actions.entry] Entry action of the state.
+ * @param {String} [properties.actions.exit] Exit action of the state.
+ * @param {array} [properties.actions.inner] Actions of the state (e.g. ["Evt1", "Action1()", "Evt2", "Action2()"])
+ * @param {Number} [properties.actionsOffsetX] Offset in x-axis of the actions.
+ * @param {Number} [properties.actionsOffsetY] Offset in y-axis of the actions.
+ * @example
+var s1 = Joint.dia.uml.State.create({
+  rect: {x: 120, y: 70, width: 100, height: 60},
+  label: "state 1",
+  attrs: {
+    fill: "90-#000-green:1-#fff"
+  },
+  actions: {
+    entry: "init()",
+    exit: "destroy()",
+    inner: ["Evt1", "foo()", "Evt2", "bar()"]
+  }
+});
+ */
+uml.State = Element.extend({
+    object: "State",
+    module: "uml",
+    init: function(properties){
+	// options
+        var p = Joint.DeepSupplement(this.properties, properties, {
+            radius: 15,
+            attrs: { fill: 'white' },
+            label: '',
+            labelOffsetX: 20,
+            labelOffsetY: 5,
+            swimlaneOffsetY: 18,
+            actions: {
+                entry: null,
+                exit: null,
+                inner: []
+            },
+            actionsOffsetX: 5,
+            actionsOffsetY: 5
+        });
+	// wrapper
+	this.setWrapper(this.paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height, p.radius).attr(p.attrs));
+	// inner
+	this.addInner(this.getLabelElement());
+	this.addInner(this.getSwimlaneElement());
+	this.addInner(this.getActionsElement());
+    },
+    getLabelElement: function(){
+	var
+	p = this.properties,
+	bb = this.wrapper.getBBox(),
+	t = this.paper.text(bb.x, bb.y, p.label).attr(p.labelAttrs || {}),
+	tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX,
+		    bb.y - tbb.y + p.labelOffsetY);
+	return t;
+    },
+    getSwimlaneElement: function(){
+	var bb = this.wrapper.getBBox(), p = this.properties;
+	return this.paper.path(["M", bb.x, bb.y + p.labelOffsetY + p.swimlaneOffsetY, "L", bb.x + bb.width, bb.y + p.labelOffsetY + p.swimlaneOffsetY].join(" "));
+    },
+    getActionsElement: function(){
+	// collect all actions
+	var p = this.properties;
+	var str = (p.actions.entry) ? "entry/ " + p.actions.entry + "\n" : "";
+	str += (p.actions.exit) ? "exit/ " + p.actions.exit + "\n" : "";
+	var l = p.actions.inner.length;
+	for (var i = 0; i < l; i += 2){
+	    str += p.actions.inner[i] + "='" + p.actions.inner[i+1] + "'\n";
+	}
+	// trim
+	str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+
+	// draw text with actions
+	var
+	bb = this.wrapper.getBBox(),
+	t = this.paper.text(bb.x + p.actionsOffsetX, bb.y + p.labelOffsetY + p.swimlaneOffsetY + p.actionsOffsetY, str),
+	tbb = t.getBBox();
+	t.attr("text-anchor", "start");
+	t.translate(0, tbb.height/2);	// tune the y position
+	return t;
+    },
+    zoom: function(){
+	this.wrapper.attr("r", this.properties.radius); 	// set wrapper's radius back to its initial value (it deformates after scaling)
+	this.shadow && this.shadow.attr("r", this.properties.radius); 	// update shadow as well if there is one 
+	this.inner[0].remove();	// label
+	this.inner[1].remove();	// swimlane
+	this.inner[2].remove();	// actions
+	this.inner[0] = this.getLabelElement();
+	this.inner[1] = this.getSwimlaneElement();
+	this.inner[2] = this.getActionsElement();
+    }
+});
+
+
+/**
+ * UML StateChart start state.
+ * @name StartState.create
+ * @methodOf Joint.dia.uml
+ * @param {Object} properties
+ * @param {Object} properties.position Position of the start state (e.g. {x: 50, y: 100}).
+ * @param {Number} [properties.radius] Radius of the circle of the start state.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the start state.
+ * @example
+var s0 = Joint.dia.uml.StartState.create({
+  position: {x: 120, y: 70},
+  radius: 15,
+  attrs: {
+    stroke: "blue",
+    fill: "yellow"
+  }
+});
+ */
+uml.StartState = Element.extend({
+     object: "StartState",
+     module: "uml",
+     init: function(properties){
+	 // options
+	 var p = Joint.DeepSupplement(this.properties, properties, {
+             position: point(0,0),
+             radius: 10,
+             attrs: { fill: 'black' }
+         });
+	 // wrapper
+	 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs));
+     }
+});
+
+
+/**
+ * UML StateChart end state.
+ * @name EndState.create
+ * @methodOf Joint.dia.uml
+ * @param {Object} properties
+ * @param {Object} properties.position Position of the end state (e.g. {x: 50, y: 100}).
+ * @param {Number} [properties.radius] Radius of the circle of the end state.
+ * @param {Number} [properties.innerRadius] Radius of the inner circle of the end state.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the end state.
+ * @param {Object} [properties.innerAttrs] SVG attributes of the appearance of the inner circle of the end state.
+ * @example
+var s0 = Joint.dia.uml.EndState.create({
+  position: {x: 120, y: 70},
+  radius: 15,
+  innerRadius: 8,
+  attrs: {
+    stroke: "blue",
+    fill: "yellow"
+  },
+  innerAttrs: {
+    fill: "red"
+  }
+});
+ */
+uml.EndState = Element.extend({
+     object: "EndState",
+     module: "uml",
+     init: function(properties){
+	 // options
+	 var p = Joint.DeepSupplement(this.properties, properties, {
+             position: point(0,0),
+             radius: 10,
+             innerRadius: (properties.radius && properties.radius / 2) || 5,
+             attrs: { fill: 'white' },
+             innerAttrs: { fill: 'black' }
+         });
+	 // wrapper
+	 this.setWrapper(this.paper.circle(p.position.x, p.position.y, p.radius).attr(p.attrs));
+	 // inner
+	 this.addInner(this.paper.circle(p.position.x, p.position.y, p.innerRadius).attr(p.innerAttrs));
+     },
+     zoom: function(){
+	 this.inner[0].scale.apply(this.inner[0], arguments);
+     }
+});
+
+
+/**
+ * UML StateChart class.
+ * @name Class.create
+ * @methodOf Joint.dia.uml
+ * @param {Object} properties
+ * @param {Object} properties.rect Bounding box of the Class (e.g. {x: 50, y: 100, width: 100, height: 80}).
+ * @param {String} [properties.label] The name of the class.
+ * @param {Number} [properties.labelOffsetX] Offset in x-axis of the label from the class rectangle origin.
+ * @param {Number} [properties.labelOffsetY] Offset in y-axis of the label from the class rectangle origin.
+ * @param {Number} [properties.swimlane1OffsetY] Offset in y-axis of the swimlane shown after the class label.
+ * @param {Number} [properties.swimlane2OffsetY] Offset in y-axis of the swimlane shown after the class attributes.
+ * @param {Object} [properties.attrs] SVG attributes of the appearance of the state.
+ * @param {array} [properties.attributes] Attributes of the class.
+ * @param {array} [properties.methods] Methods of the class.
+ * @param {Number} [properties.attributesOffsetX] Offset in x-axis of the attributes.
+ * @param {Number} [properties.attributesOffsetY] Offset in y-axis of the attributes.
+ * @param {Number} [properties.methodsOffsetX] Offset in x-axis of the methods.
+ * @param {Number} [properties.methodsOffsetY] Offset in y-axis of the methods.
+ * @example
+var c1 = Joint.dia.uml.Class.create({
+  rect: {x: 120, y: 70, width: 120, height: 80},
+  label: "MyClass",
+  attrs: {
+    fill: "90-#000-yellow:1-#fff"
+  },
+  attributes: ["-position"],
+  methods: ["+createIterator()"]
+});
+ */
+uml.Class = Element.extend({
+    object: "Class",
+    module: "uml",
+    init: function(properties){
+	var p = Joint.DeepSupplement(this.properties, properties, {
+            attrs: { fill: 'white' },
+            label: '',
+            labelOffsetX: 20,
+            labelOffsetY: 5,
+            swimlane1OffsetY: 18,
+            swimlane2OffsetY: 18,
+            attributes: [],
+            attributesOffsetX: 5,
+            attributesOffsetY: 5,
+            methods: [],
+            methodsOffsetX: 5,
+            methodsOffsetY: 5
+        });
+	// wrapper
+	this.setWrapper(this.paper.rect(p.rect.x, p.rect.y, p.rect.width, p.rect.height).attr(p.attrs));
+	// inner
+	this.addInner(this.getLabelElement());
+	this.addInner(this.getSwimlane1Element());
+	this.addInner(this.getAttributesElement());
+	this.addInner(this.getSwimlane2Element());
+	this.addInner(this.getMethodsElement());
+    },
+    getLabelElement: function(){
+	var
+	p = this.properties,
+	bb = this.wrapper.getBBox(),
+	t = this.paper.text(bb.x, bb.y, p.label).attr(p.labelAttrs || {}),
+	tbb = t.getBBox();
+	t.translate(bb.x - tbb.x + p.labelOffsetX, bb.y - tbb.y + p.labelOffsetY);
+	return t;
+    },
+    getSwimlane1Element: function(){
+	var bb = this.wrapper.getBBox(), p = this.properties;
+	return this.paper.path(["M", bb.x, bb.y + p.labelOffsetY + p.swimlane1OffsetY, "L", bb.x + bb.width, bb.y + p.labelOffsetY + p.swimlane1OffsetY].join(" "));
+    },
+    getSwimlane2Element: function(){
+	var
+	p = this.properties,
+	bb = this.wrapper.getBBox(),
+	bbAtrrs = this.inner[2].getBBox();  // attributes
+	return this.paper.path(["M", bb.x, bb.y + p.labelOffsetY + p.swimlane1OffsetY + bbAtrrs.height + p.swimlane2OffsetY, "L", bb.x + bb.width, bb.y + p.labelOffsetY + p.swimlane1OffsetY + bbAtrrs.height + p.swimlane2OffsetY].join(" "));
+    },
+    getAttributesElement: function(){
+	var str = " ", p = this.properties;
+	for (var i = 0, len = p.attributes.length; i < len; i++){
+	    str += p.attributes[i] + "\n";
+	}
+	// trim
+	str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+
+	var
+	bb = this.wrapper.getBBox(),
+	t = this.paper.text(bb.x + p.attributesOffsetX, bb.y + p.labelOffsetY + p.swimlane1OffsetY + p.attributesOffsetY, str),
+	tbb = t.getBBox();
+	t.attr("text-anchor", "start");
+	t.translate(0, tbb.height/2);	// tune the y-position
+	return t;
+    },
+    getMethodsElement: function(){
+	var str = " ", p = this.properties;
+	for (var i = 0, len = p.methods.length; i < len; i++){
+	    str += p.methods[i] + "\n";
+	}
+	// trim
+	str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+    	var
+	bb = this.wrapper.getBBox(),
+	bbAtrrs = this.inner[2].getBBox(),  // attributes
+	t = this.paper.text(bb.x + p.methodsOffsetX, bb.y + p.labelOffsetY + p.swimlane1OffsetY + p.attributesOffsetY + bbAtrrs.height + p.swimlane2OffsetY + p.methodsOffsetY, str),
+	tbb = t.getBBox();
+	t.attr("text-anchor", "start");
+	t.translate(0, tbb.height/2);	// tune the y-position
+	return t;
+    },
+    zoom: function(){
+	this.inner[0].remove();	// label
+	this.inner[1].remove();	// swimlane1
+	this.inner[2].remove();	// attributes
+	this.inner[3].remove();	// swimlane2
+	this.inner[4].remove();	// methods
+	this.inner[0] = this.getLabelElement();
+	this.inner[1] = this.getSwimlane1Element();
+	this.inner[2] = this.getAttributesElement();
+	this.inner[3] = this.getSwimlane2Element();
+	this.inner[4] = this.getMethodsElement();
+    }
+});
+
+})(this);	// END CLOSURE
\ No newline at end of file
diff --git a/js/lib/joint.js b/js/lib/joint.js
new file mode 100644
index 0000000..79cf5a1
--- /dev/null
+++ b/js/lib/joint.js
@@ -0,0 +1,2320 @@
+(function(global){	// BEGIN CLOSURE
+
+var
+math = global.Math,
+cos = math.cos,
+sin = math.sin,
+sqrt = math.sqrt,
+mmin = math.min,
+mmax = math.max,
+atan2 = math.atan2,
+acos = math.acos,
+PI = math.PI;
+
+var enqueue = function(fnc){
+    setTimeout(fnc, 0);
+};
+
+var isArray = Array.isArray || function (obj) {
+    return Object.prototype.toString.call(obj) === '[object Array]';
+};
+
+var isObject = function (obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]';
+};
+
+if (!global.console){
+    global.console = {
+	log: function(){},
+	warn: function(){},
+	error: function(){},
+	debug: function(){}
+    };
+}
+
+if (!Array.indexOf){
+    /**
+     * Array.indexOf is missing in IE 8.
+     * @private
+     */
+    Array.prototype.indexOf = function (obj, start){
+	for (var i = (start || 0), len = this.length; i < len; i++){
+	    if (this[i] == obj){
+		return i;
+	    }
+	}
+	return -1;
+    };
+}
+
+/**
+ * Copies all the properties to the first argument from the following arguments.
+ * All the properties will be overwritten by the properties from the following
+ * arguments. Inherited properties are ignored.
+ * @private
+ */
+var Mixin = function() {
+    var target = arguments[0];
+    for (var i = 1, l = arguments.length; i < l; i++){
+        var extension = arguments[i];
+        for (var key in extension){
+            if (!extension.hasOwnProperty(key)){
+		continue;
+	    }
+            var copy = extension[key];
+            if (copy === target[key]){
+		continue;
+	    }
+            // copying super with the name base if it does'nt has one already
+            if (typeof copy == "function" && typeof target[key] == "function" && !copy.base){
+		copy.base = target[key];
+	    }
+            target[key] = copy;
+        }
+    }
+    return target;
+};
+
+/**
+ * Copies all properties to the first argument from the following
+ * arguments only in case if they don't exists in the first argument.
+ * All the function propererties in the first argument will get
+ * additional property base pointing to the extenders same named
+ * property function's call method.
+ * @example
+ * // usage of base
+ * Bar.extend({
+ * // function should have name
+ * foo: function foo(digit) {
+ * return foo.base(this, parseInt(digit))
+ * }
+ * });
+ * @private
+ */
+var Supplement = function() {
+    var target = arguments[0];
+    for (var i = 1, l = arguments.length; i < l; i++){
+        var extension = arguments[i];
+        for (var key in extension) {
+            var copy = extension[key];
+            if (copy === target[key]){
+		continue;
+	    }
+            // copying super with the name base if it does'nt has one already
+            if (typeof copy == "function" && typeof target[key] == "function" && !target[key].base){
+		target[key].base = copy;
+	    }
+            // target doesn't has propery that is owned by extension copying it
+            if (!target.hasOwnProperty(key) && extension.hasOwnProperty(key)){
+		target[key] = copy;
+	    }
+        }
+    }
+    return target;
+};
+
+/**
+ * Copies all the properties to the first argument from the following arguments.
+ * All the properties will be overwritten by the properties from the following
+ * arguments. Inherited properties are ignored.
+ * Deep version.
+ * @private
+ */
+var DeepMixin = function() {
+    var target = arguments[0];
+    for (var i = 1, l = arguments.length; i < l; i++) {
+        var extension = arguments[i];
+        for (var key in extension) {
+            var copy = extension[key];
+            if (copy === target[key]) continue;
+            if (isObject(copy)) DeepMixin((target[key] || (target[key] = {})), copy);
+            // copying super with the name base if it does'nt has one already
+            if (typeof copy == 'function' && typeof target[key] == 'function' && !target[key].base) {
+                target[key].base = copy;
+            }
+	    target[key] = copy;
+        }
+    }
+    return target;
+};
+
+/**
+ * Copies all properties to the first argument from the following
+ * arguments only in case if they don't exists in the first argument.
+ * All the function propererties in the first argument will get
+ * additional property base pointing to the extenders same named
+ * property function's call method.
+ * @example
+ * // usage of base
+ * Bar.extend({
+ * // function should have name
+ * foo: function foo(digit) {
+ * return foo.base(this, parseInt(digit))
+ * }
+ * });
+ * Deep version.
+ * @private
+ */
+var DeepSupplement = function() {
+    var target = arguments[0];
+    for (var i = 1, l = arguments.length; i < l; i++) {
+        var extension = arguments[i];
+        for (var key in extension) {
+            var copy = extension[key];
+            if (copy === target[key]) continue;
+            if (isObject(copy)) DeepSupplement((target[key] || (target[key] = {})), copy);
+            // copying super with the name base if it does'nt has one already
+            if (typeof copy == 'function' && typeof target[key] == 'function' && !target[key].base) {
+                target[key].base = copy;
+            }
+            // target doesn't has propery that is owned by extension copying it
+            if (!target.hasOwnProperty(key) && extension.hasOwnProperty(key)){
+		target[key] = copy;
+	    }
+        }
+    }
+    return target;
+};
+
+
+/**
+ * @name Joint
+ * @constructor
+ * @param {RaphaelObject|Shape|object} from Object/position where the connection starts.
+ * @param {RaphaelObject|Shape|object} to Object/position where the connection ends.
+ * @param {object} [opts] opt Options
+ * @param {object} [opts.interactive] Is the joint interactive? [default = true]
+ * @param {object} [opts.attrs] Connection options (see  Raphael possible parameters)
+ * @param {string} [opts.cursor] Connection CSS cursor property
+ * @param {boolean} [opts.beSmooth] Connection enable/disable smoothing
+ * @param {string|array} [opts.label] Connection label(s)
+ * @param {object|array} [opts.labelAttrs] Label(s) options (see  Raphael possible parameters)  + position attribute (<0, [0, 1], >1)
+ * @param {object|array} [opts.labelBoxAttrs] SVG Attributes of the label(s) bounding rectangle + padding attribute
+ * @param {object} [opts.startArrow] Start arrow options
+ * @param {string} [opts.startArrow.type] "none"|"basic"
+ * @param {number} [opts.startArrow.size] Start arrow size
+ * @param {object} [opts.startArrow.attrs] Start Arrow options (see  Raphael possible parameters)
+ * @param {object} [opts.endArrow] End arrow options
+ * @param {string} [opts.endArrow.type] "none"|"basic"
+ * @param {number} [opts.endArrow.size] End arrow size
+ * @param {object} [opts.endArrow.attrs] End Arrow options (see  Raphael possible parameters)
+ * @param {object} [opts.dummy] Dummy node options (shows when dragging arrows)
+ * @param {object} [opts.dummy.start] Start dummy node options
+ * @param {number} [opts.dummy.start.radius] Start dummy radius
+ * @param {object} [opts.dummy.start.attrs] Start dummy options (see  Raphael possible parameters)
+ * @param {object} [opts.dummy.end] End dummy node options
+ * @param {number} [opts.dummy.end.radius] End dummy radius
+ * @param {object} [opts.dummy.end.attrs] End dummy options (see  Raphael possible parameters)
+ * @param {object} [opts.handle] Handle options
+ * @param {number} [opts.handle.timeout] Number of milliseconds handle stays shown
+ * @param {object} [opts.handle.start] Start handle options
+ * @param {boolean} [opts.handle.start.enabled] Start handle enabled/disabled
+ * @param {number} [opts.handle.start.radius] Start handle radius
+ * @param {object} [opts.handle.start.attrs] Start handle attributes (see  Raphael possible parameters)
+ * @param {object} [opts.handle.end] End handle options
+ * @param {boolean} [opts.handle.end.enabled] End handle enabled/disabled
+ * @param {number} [opts.handle.end.radius] End handle radius
+ * @param {object} [opts.handle.end.attrs] End handle attributes (see  Raphael possible parameters)
+ * @param {object} [opts.bboxCorrection] Correction of a bounding box (useful when, e.g., the connection should start in the center of an object)
+ * @param {object} [opts.bboxCorrection.start] BBox correction of the start object.
+ * @param {string} [opts.bboxCorrection.start.type] "ellipse"|"rect"
+ * @param {number} [opts.bboxCorrection.start.x] Translation in the x-axis
+ * @param {number} [opts.bboxCorrection.start.y] Translation in the y-axis
+ * @param {number} [opts.bboxCorrection.start.width] BBox width
+ * @param {number} [opts.bboxCorrection.start.height] BBox height
+ * @param {object} [opts.bboxCorrection.end] BBox correction of the end object.
+ * @param {string} [opts.bboxCorrection.end.type] "ellipse"|"rect"
+ * @param {number} [opts.bboxCorrection.end.x] Translation in the x-axis
+ * @param {number} [opts.bboxCorrection.end.y] Translation in the y-axis
+ * @param {number} [opts.bboxCorrection.end.width] BBox width
+ * @param {number} [opts.bboxCorrection.end.height] BBox height
+ * @example
+ * Joint({x: 10, y: 10}, {x: 300, y: 100}, {
+ *  label: "my label",
+ *  beSmooth: true,
+ *  startArrow: {
+ *    type: "basic",
+ *    size: 7,
+ *    attrs: {
+ *      fill: "red",
+ *      stroke: "blue"
+ *    }
+ *  },
+ *  handle: {
+ *    timeout: 4000,
+ *    start: {
+ *      radius: 6,
+ *      attrs: {
+ *        fill: "green",
+ *        stroke: "black"
+ *      }
+ *    },
+ *    end: {
+ *      radius: 4,
+ *      attrs: {
+ *        fill: "red",
+ *        stroke: "black"
+ *      }
+ *    }
+ *  }
+ * });
+ */
+function Joint(from, to, opt){
+    if (!(this instanceof Joint)){
+	return new Joint(from, to, opt);
+    }
+    /**
+     * @private
+     * @type RaphaelPaper
+     */
+    var paper = this.paper = Joint.paper();
+
+    // these objects are the ones I can connect to
+    this._registeredObjects = [];
+
+    this._conVerticesCurrentIndex = 0;
+    this._nearbyVertexSqrDist = 500;	// sqrt(this._nearbyVertexSqrDist) is tolerable distance of vertex moving
+
+    this.dom = {};	// holds all dom elements
+
+    // connection from start to end
+    this._start = { // start object
+	shape: null,		// Raphael object
+	dummy: false		// is it a dummy object?
+    };
+    this._end = { // end object
+	shape: null,		// Raphael object
+	dummy: false		// is it a dummy object?
+    };
+
+    // connection options
+    this._opt = {
+	vertices: [],	// joint path vertices
+	attrs: {
+	    "stroke": "#000",
+	    //	    "fill": "#fff",	// can not be used if connection wiring is enabled
+	    "fill-opacity": 0.0,
+	    "stroke-width": 1,
+	    "stroke-dasharray": "-",
+	    "stroke-linecap": "round", // butt/square/round/mitter
+	    "stroke-linejoin": "round", // butt/square/round/mitter
+	    "stroke-miterlimit": 1,
+	    "stroke-opacity": 1.0
+	},
+	cursor: "move",	// CSS cursor property
+	beSmooth: false,// be a smooth line? (bezier curve aproximation)
+	interactive: true, // is the connection interactive?
+	label: undefined,
+	labelAttrsDefault: {
+            position: 1/2,
+            offset: 0,  // y-offset
+	    "font-size": 12,
+	    "fill": "#000"
+	},
+        labelAttrs: [],
+	labelBoxAttrsDefault: { stroke: "white", fill: "white" },
+        labelBoxAttrs: [],
+	// bounding box correction
+	// (useful when the connection should start in the center of an object, etc...)
+	bboxCorrection: {
+	    start: { type: null, x: 0, y: 0, width: 0, height: 0 },
+	    end: { type: null, x: 0, y: 0, width: 0, height: 0 }
+	},
+	// dummy nodes radius and SVG attributes
+	dummy: {
+	    start: {
+		radius: 1,
+		attrs: {"opacity": 0.0, "fill": "red"}
+	    },
+	    end: {
+		radius: 1,
+		attrs: {"opacity": 0.0, "fill": "yellow"}
+	    }
+	},
+	// handles (usefull when picking "none" type of arrow)
+	handle: {
+	    timeout: 2000,
+	    start: {
+		enabled: false,
+		radius: 4,
+		attrs: { opacity: 1.0, fill: "red", stroke: "black" }
+	    },
+	    end: {
+		enabled: false,
+		radius: 4,
+		attrs: { opacity: 1.0, fill: "red", stroke: "black" }
+	    }
+	}
+    };
+    // used arrows (default values)
+    this._opt.arrow = {
+	start: Joint.getArrow("none", 2, this._opt.attrs),
+	end: Joint.getArrow("basic", 5)
+    };
+    // options
+    if (opt) this.processOptions(opt);
+
+    JointDOMBuilder.init(this.paper, this._opt, this._start, this._end);
+
+    var startObject = this._start,
+        endObject = this._end;
+
+    if (from.x && from.y)	// from is point?
+	JointDOMBuilder.dummy(startObject, from, this._opt.dummy.start);
+    else
+	startObject.shape = from.yourself();
+
+    if (to.x && to.y)		// to is point?
+	JointDOMBuilder.dummy(endObject, to, this._opt.dummy.end);
+    else
+	endObject.shape = to.yourself();
+
+    // to be able to dispatch events in Raphael element attr method
+    // TODO: possible source of memory leaks!!!
+    this.addJoint(startObject.shape);
+    this.addJoint(endObject.shape);
+    // draw
+    this.update();
+}
+global.Joint = Joint;	// the only global variable
+
+Joint.euid = 1;	// elements/joints unique id
+/**
+ * Assign unique id to this.
+ * @private
+ * @example Joint.generateEuid.call(obj);
+ */
+Joint.generateEuid = function(){
+    if (this._euid === undefined) this._euid = Joint.euid++;
+    return this._euid;
+};
+
+/**
+ * @private
+ */
+Joint.prototype = {
+    // temporaries for moving objects
+    _dx: undefined,
+    _dy: undefined,
+    /*
+     * States.
+     */
+    IDLE: 0,
+    STARTCAPDRAGGING: 1,
+    ENDCAPDRAGGING: 2,
+    CONNECTIONWIRING: 3,
+    state: 0,	// IDLE
+    /*
+     * Callbacks.
+     * @name Callbacks
+     */
+    _callbacks: {
+	// called when a joint has just connected to an object
+	// the object is accessed using this,
+	// the only argument is what side has been connected ("start" | "end")
+	justConnected: function(side){},
+	disconnected: function(side){},
+	justBroken: function(mousePos){},
+	wiring: function(mousePos){},
+	objectMoving: function(obj){}
+    },
+    /**
+     * @return {String} Joint unique identifier.
+     */
+    euid: function(){
+	return Joint.generateEuid.call(this);
+    },
+    /*
+     * Getters.
+     */
+    connection: function(){ return this.dom.connection[0]; },
+    endObject: function(){ return this._end.shape; },
+    startObject: function(){ return this._start.shape; },
+    endCap: function(){ return this.dom.endCap; },
+    endCapConnected: function(){ return !this._end.dummy; },
+    startCap: function(){ return this.dom.startCap; },
+    startCapConnected: function(){ return !this._start.dummy; },
+    isStartDummy: function(){ return this._start.dummy; },
+    isEndDummy: function(){ return this._end.dummy; },
+    /**
+     * Replaces dummy object with a new object.
+     * @private
+     * @param {object} startOrEnd start or end object (old dummy)
+     * @param {RaphaelObject} o
+     */
+    replaceDummy: function(startOrEnd, o){
+	// assert(startOrEnd.dummy == true)
+	startOrEnd.shape.remove();
+	startOrEnd.dummy = false;
+	startOrEnd.shape = o;
+    },
+    /**
+     * Calls a callback.
+     * @private
+     * @param fnc Callback 
+     * @param {object} scope Scope of the callback
+     * @param {array} args Array of arguments
+     */
+    callback: function(fnc, scope, args){
+	this._callbacks[fnc].apply(scope, args);
+        return this;
+    },
+    /**
+     * Search the registered objects and get the one (if any)
+     * who's bounding box contains the point p.
+     * @todo check document.elementFromPoint(x, y)
+     * @private
+     * @param {Point} p
+     */
+    objectContainingPoint: function(p){
+	var register = this._registeredObjects,
+	    idx = (register ? register.length : 0), o;
+	while (idx--){
+	    o = register[idx].yourself();
+	    if (rect(o.getBBox()).containsPoint(p))
+		return o;
+	}
+	return null;
+    },
+    /**
+     * Remove reference to Joint from obj.
+     * @private
+     * @param {StartObject|EndObject} obj
+     */
+    freeJoint: function(obj){
+	var jar = obj.yourself().joints(),
+	    i = jar.indexOf(this);
+	jar.splice(i, 1);
+	return this;
+    },
+    /**
+     * Add reference to Joint to obj.
+     * @private
+     * @param {RaphaelObject} obj
+     */
+    addJoint: function(obj){
+	var joints = obj.joints();;
+	// push the Joint object into obj.joints array
+	// but only if obj.joints already doesn't have that Joint object
+	if (joints.indexOf(this) === -1) joints.push(this);
+    },
+    /**
+     * MouseDown event callback when on cap.
+     * @private
+     * @param {Event} e
+     * @param {RaphaelObject} cap
+     */
+    capMouseDown: function(e, cap){
+	Joint.currentJoint = this;	// keep global reference to me
+	this._dx = e.clientX;
+	this._dy = e.clientY;
+
+	if (cap === this.dom.startCap){
+            this.disconnect("start");
+	    this.state = this.STARTCAPDRAGGING;
+	} else if (cap === this.dom.endCap){
+            this.disconnect("end");
+	    this.state = this.ENDCAPDRAGGING;
+	}
+    },
+    /**
+     * MouseDown event callback when on connection.
+     * @private
+     * @param {Event} e
+     */
+    connectionMouseDown: function(e){
+	Joint.currentJoint = this;	// keep global reference to me
+	var mousePos = Joint.getMousePosition(e, this.paper.canvas);
+
+	// if the mouse position is nearby a connection vertex
+	// do not create a new one but move the selected one instead
+	for (var i = 0, len = this._opt.vertices.length; i < len; i++){
+	    var v = this._opt.vertices[i];
+	    if (line(v, mousePos).squaredLength() < this._nearbyVertexSqrDist){
+		this._conVerticesCurrentIndex = i;
+		this.state = this.CONNECTIONWIRING;
+		return;
+	    }
+	}
+
+	// new vertices can be added CORRECTLY only at the end
+	// or at the start of the connection
+	// -> @todo
+	var sbbCenter = rect(this.startObject().getBBox()).center(),
+	    ebbCenter = rect(this.endObject().getBBox()).center(),
+	    // squared lengths of the lines from the center of
+	    // start/end object bbox to the mouse position
+	    smLineSqrLen = line(sbbCenter, mousePos).squaredLength(),
+	    emLineSqrLen = line(ebbCenter, mousePos).squaredLength();
+	if (smLineSqrLen < emLineSqrLen){
+	    // new vertex is added to the beginning of the vertex array
+	    this._conVerticesCurrentIndex = 0;
+	    this._opt.vertices.unshift(mousePos);
+	} else {
+	    // new vertex is added to the end of the vertex array
+	    this._conVerticesCurrentIndex = this._opt.vertices.push(mousePos) - 1;
+	}
+	this.state = this.CONNECTIONWIRING;
+	this.callback("justBroken", this, [mousePos]);
+    },
+    capDragging: function(e){
+	// move dummy object
+	if (this.state === this.STARTCAPDRAGGING){
+	    this.startObject().translate(e.clientX - this._dx, e.clientY - this._dy);
+	} else if (this.state === this.ENDCAPDRAGGING) {
+	    this.endObject().translate(e.clientX - this._dx, e.clientY - this._dy);
+	} else {
+	    return;	// should not happen
+	}
+	this._dx = e.clientX;
+	this._dy = e.clientY;
+
+	this.update();
+    },
+    capEndDragging: function(){
+	var dummyBB, 
+	    STARTCAPDRAGGING = (this.state === this.STARTCAPDRAGGING),
+	    ENDCAPDRAGGING = (this.state === this.ENDCAPDRAGGING),
+	    capType = (STARTCAPDRAGGING) ? "start" : "end";
+
+        
+	if (STARTCAPDRAGGING){
+            dummyBB = this.startObject().getBBox();	    
+	} else if (ENDCAPDRAGGING){
+	    dummyBB = this.endObject().getBBox();
+	}
+        
+	var o = this.objectContainingPoint(point(dummyBB.x, dummyBB.y));
+	if (o){
+	    this.callback("justConnected", o, [capType]);
+	    this.replaceDummy(this["_" + capType], o);
+	    this.addJoint(o);
+	}
+
+	this.update();
+    },
+    connectionWiring: function(e){
+	var mousePos = Joint.getMousePosition(e, this.paper.canvas);
+	this._opt.vertices[this._conVerticesCurrentIndex] = mousePos;
+	this.update();
+	this.callback("wiring", this, [mousePos]);
+    },
+    update: function(){
+	this.redraw().listenAll();
+	// setTimeout makes drawing much faster!
+//	var self = this;
+//	enqueue(function(){self.redraw().listenAll();});
+    },
+    redraw: function(){
+	this.clean(["connection", "startCap", "endCap", "handleStart", "handleEnd", "label"]);
+	this.draw(["connection", "startCap", "endCap", "handleStart", "handleEnd", "label"]);
+	return this;
+    },
+    listenAll: function(){
+	if (!this._opt.interactive){
+	    return this;
+	}
+	var self = this;
+	this.dom.startCap.mousedown(function(e){
+		           Joint.fixEvent(e);
+			   self.capMouseDown(e, self.dom.startCap);
+			   e.stopPropagation();
+			   e.preventDefault();
+        });
+	this.dom.endCap.mousedown(function(e){
+		           Joint.fixEvent(e);
+			   self.capMouseDown(e, self.dom.endCap);
+			   e.stopPropagation();
+			   e.preventDefault();
+	});
+        var i;
+        i = this.dom.connection.length;
+        while (i--) {
+	    this.dom.connection[i].mousedown(function(e){
+                Joint.fixEvent(e);
+		self.connectionMouseDown(e);
+		e.stopPropagation();
+		e.preventDefault();
+            });
+        }
+	if (this._opt.handle.start.enabled){
+	    this.dom.handleStart.mousedown(function(e){
+			       Joint.fixEvent(e);
+			       self.capMouseDown(e, self.dom.startCap);
+			       e.stopPropagation();
+			       e.preventDefault();
+	    });
+	}
+	if (this._opt.handle.end.enabled){
+	    this.dom.handleEnd.mousedown(function(e){
+			       Joint.fixEvent(e);
+			       self.capMouseDown(e, self.dom.endCap);
+			       e.stopPropagation();
+			       e.preventDefault();
+	    });
+	}
+	if (this._opt.handle.timeout !== Infinity){
+            i = this.dom.connection.length;
+            while (i--) {
+	       this.dom.connection[i].mouseover(function(e){
+	           Joint.fixEvent(e);
+		   self.showHandle();
+	           setTimeout(function(){
+		       self.hideHandle();
+		   }, self._opt.handle.timeout);
+		   e.stopPropagation();
+		   e.preventDefault();
+	        });
+            }
+	}
+	return this;
+    },
+    /**
+     * @private
+     */
+    boundPoint: function(bbox, type, rotation, p){
+	if (type === "circle" || type === "ellipse")
+	    return ellipse(bbox.center(), bbox.width/2, bbox.height/2).intersectionWithLineFromCenterToPoint(p);
+        else if (type === 'rect' && bbox.width == bbox.height && rotation != 0) {
+            // compute new bounding box of a rotated square
+            // @todo Compute intersection properly
+            var w = bbox.width,
+                dia = Math.sqrt(w*w + w*w),
+                origin = bbox.center().offset(-dia/2, -dia/2);
+            bbox = rect(origin.x, origin.y, dia, dia);
+            return bbox.boundPoint(p) || bbox.center();
+        }
+	return bbox.boundPoint(p) || bbox.center();
+    },
+    /**
+     * @private
+     * @param {object} start
+     * @param {rect} start.bbox Start object bounding box.
+     * @param {string} start.type Start object geometrical type.
+     * @param {point} start.shift Start arrow offsets.
+     * @param {object} end
+     * @param {rect} end.bbox End object bounding box.
+     * @param {string} end.type End object geometrical type.
+     * @param {point} end.shift End arrow offsets.
+     * @param {array} vertices Connection vertices.
+     * @return {object} Object containing location of start/end of the joint.
+     */
+    jointLocation: function(start, end, vertices){
+	var verticesLength = vertices.length, theta,
+        firstVertex = (vertices.length ? vertices[0] : undefined),
+        lastVertex = (vertices.length ? vertices[verticesLength - 1] : undefined),
+        p1, p1bp, c1t, c1r, p2, p2bp, c2t, c2r;
+
+	// start object boundary point
+	p1bp = this.boundPoint(start.bbox, start.type, start.rotation, firstVertex || end.bbox.center());
+	// shift
+	theta = start.bbox.center().theta(firstVertex || end.bbox.center());
+	// first point of the connection
+	p1 = point(p1bp.x + (2 * start.shift.dx * cos(theta.radians)),
+		   p1bp.y + (-2 * start.shift.dy * sin(theta.radians)));
+	// start arrow translation
+	c1t = point(p1bp.x + start.shift.dx * cos(theta.radians),
+		    p1bp.y - start.shift.dy * sin(theta.radians));
+	// start arrow rotation
+	c1r = 360 - theta.degrees + 180;
+
+	// end object boundary point
+	p2bp = this.boundPoint(end.bbox, end.type, end.rotation, lastVertex || start.bbox.center());
+	// shift
+	theta = (lastVertex || start.bbox.center()).theta(end.bbox.center());
+	// last point of the connection
+	p2 = point(p2bp.x + (-2 * end.shift.dx * cos(theta.radians)),
+		   p2bp.y + (2 * end.shift.dy * sin(theta.radians)));
+	// end arrow translation
+	c2t = point(p2bp.x - end.shift.dx * cos(theta.radians),
+	            p2bp.y + end.shift.dy * sin(theta.radians));
+	// end arrow rotation
+	c2r = 360 - theta.degrees;
+
+	return {
+	    start: {
+		bound: p1bp,
+		connection: p1,
+		translate: c1t,
+		rotate: c1r
+	    },
+	    end: {
+		bound: p2bp,
+		connection: p2,
+		translate: c2t,
+		rotate: c2r
+	    }
+	};
+    },
+    /**
+     * @private
+     * @param {point} start Joint start location.
+     * @param {point} end Joint end location.
+     * @param {array} vertices Connection vertices.
+     * @param {boolean} smooth Connection smooth flag.
+     * @return {array} SVG path commands.
+     */
+    connectionPathCommands: function(start, end, vertices, smooth){
+	if (smooth)
+	    return Bezier.curveThroughPoints([start].concat(vertices, [end]));
+	var commands = ["M", start.x, start.y], i = 0, l = vertices.length;
+	for (; i < l; i++)
+	    commands.push("L", vertices[i].x, vertices[i].y);
+	commands.push("L", end.x, end.y);
+	return commands;
+    },
+
+    /**
+     * @private
+     * @param {point} start Joint start location.
+     * @param {point} end Joint end location.
+     * @param {array} vertices Connection vertices.
+     * @return {array} Locations of the label (array of points).
+     */
+    labelLocation: function(connectionPathCommands){
+        var path = this.paper.path(connectionPathCommands.join(' ')),
+            length = path.getTotalLength(),
+            locations = [], attrs = this._opt.labelAttrs, len = attrs.length, i = 0,
+            position;
+        for (; i < len; i++) {
+            position = attrs[i].position;
+            position = (position > length) ? length : position; // sanity check
+            position = (position < 0) ? length + position : position;
+            position = position > 1 ? position : length * position;
+            locations.push(path.getPointAtLength(position));
+        }
+        path.remove();
+        return locations;
+    },
+
+    /**
+     * @private
+     */
+    draw: function(components){
+	var self = this,
+	    paper = this.paper,
+	    jointLocation = this.jointLocation(
+	        {
+	            bbox: rect(this.startObject().getBBox()).moveAndExpand(this._opt.bboxCorrection.start),
+		    type: this.startObject().type,
+                    rotation: this.startObject().attrs.rotation,
+		    shift: this._opt.arrow.start
+	        },
+	        {
+	            bbox: rect(this.endObject().getBBox()).moveAndExpand(this._opt.bboxCorrection.end),
+		    type: this.endObject().type,
+                    rotation: this.endObject().attrs.rotation,
+		    shift: this._opt.arrow.end
+	        },
+	        this._opt.vertices
+	    ),
+            connectionPathCommands = this.connectionPathCommands(
+		jointLocation.start.connection,
+		jointLocation.end.connection,
+		this._opt.vertices,
+		this._opt.beSmooth
+	    ),
+	    labelLocation = this.labelLocation(connectionPathCommands),
+	    dom = JointDOMBuilder.init(this.paper, this._opt, this._start, this._end, jointLocation, connectionPathCommands, labelLocation),
+	    l = components.length,
+	    component;
+
+	for (var i = 0; i < l; i++){
+	    component = components[i];
+	    this.dom[component] = dom[component]();
+	}
+    },
+    /**
+     * Clean operations.
+     * Remove the DOM elements of connection/startCap/endCap/label if they exist.
+     * Clean operations support chaining.
+     * @private
+     */
+    clean: function(components){
+	var component, name, subComponents, idx = components.length;
+	while (idx--){
+	    name = components[idx];
+	    component = this.dom[name];
+	    if (component){
+		if (component.node){
+		    component.remove();
+		    this.dom[name] = null;
+		} else {  // component is a composite object
+		    subComponents = component;
+		    for (var key in subComponents){
+			if (subComponents.hasOwnProperty(key))
+			    subComponents[key].remove();
+		    }
+		}
+		this.dom[name] = null;
+	    }
+	}
+    },
+
+    /**
+     * Process options.
+     * @todo Please fix me! I look like spagethi.
+     * @private
+     * @param {object} opt
+     */
+    processOptions: function(opt){
+	var key, myopt = this._opt,
+            topOptions = ['interactive', 'cursor', 'beSmooth'], i = topOptions.length;
+        
+        // top options
+        while (i--) {
+            if (opt[topOptions[i]] !== undefined)
+                myopt[topOptions[i]] = opt[topOptions[i]];
+        }
+
+        myopt.subConnectionAttrs = opt.subConnectionAttrs || undefined;
+
+	Mixin(myopt.attrs, opt.attrs);
+        Mixin(myopt.bboxCorrection.start, opt.bboxCorrection && opt.bboxCorrection.start);
+        Mixin(myopt.bboxCorrection.end, opt.bboxCorrection && opt.bboxCorrection.end);
+        if (opt.vertices) this._setVertices(opt.vertices);
+
+        // label(s) related options
+	if (opt.label) {
+            myopt.label = isArray(opt.label) ? opt.label : [opt.label];
+            if (!isArray(opt.labelAttrs)) opt.labelAttrs = [opt.labelAttrs];
+            for (i = 0; i < myopt.label.length; i++) {
+                Supplement(opt.labelAttrs[i] || (opt.labelAttrs[i] = {}), myopt.labelAttrsDefault);
+            }
+	    myopt.labelAttrs = opt.labelAttrs;      // make a copy? (parse(stringify(opt)))
+
+            var spread = undefined;
+            if (!isArray(opt.labelBoxAttrs)) {
+                if (typeof opt.labelBoxAttrs === 'object')
+                    spread = opt.labelBoxAttrs;
+                opt.labelBoxAttrs = [opt.labelBoxAttrs];
+            }
+            for (i = 0; i < myopt.label.length; i++) {
+                if (spread) opt.labelBoxAttrs[i] = spread;
+                Supplement(opt.labelBoxAttrs[i] || (opt.labelBoxAttrs[i] = {}), this._opt.labelBoxAttrsDefault);
+            }
+	    myopt.labelBoxAttrs = opt.labelBoxAttrs;      // make a copy? (parse(stringify(opt)))
+	}
+
+        // arrowheads
+	var sa = opt.startArrow, ea = opt.endArrow;
+	if (sa && sa.type) myopt.arrow.start = Joint.getArrow(sa.type, sa.size, sa.attrs);
+	if (ea && ea.type) myopt.arrow.end = Joint.getArrow(ea.type, ea.size, ea.attrs);
+	// direct arrow specification rewrites types
+	if (opt.arrow) {
+            myopt.arrow.start = opt.arrow.start || myopt.arrow.start;
+            myopt.arrow.end = opt.arrow.end || myopt.arrow.end;
+	}
+
+        // dummies
+	if (opt.dummy && opt.dummy.start) {
+	    if (opt.dummy.start.radius) myopt.dummy.start.radius = opt.dummy.start.radius;
+            Mixin(myopt.dummy.start.attrs, opt.dummy.start.attrs);
+        }
+	if (opt.dummy && opt.dummy.end) {
+	    if (opt.dummy.end.radius) myopt.dummy.end.radius = opt.dummy.end.radius;
+            Mixin(myopt.dummy.end.attrs, opt.dummy.end.attrs);
+	}
+        // handles
+	if (opt.handle){
+	    if (opt.handle.timeout) myopt.handle.timeout = opt.handle.timeout;
+	    if (opt.handle.start){
+		if (opt.handle.start.enabled) myopt.handle.start.enabled = opt.handle.start.enabled;
+		if (opt.handle.start.radius) myopt.handle.start.radius = opt.handle.start.radius;
+                Mixin(myopt.handle.start.attrs, opt.handle.start.attrs);
+	    }
+	    if (opt.handle.end){
+		if (opt.handle.end.enabled) myopt.handle.end.enabled = opt.handle.end.enabled;
+		if (opt.handle.end.radius) myopt.handle.end.radius = opt.handle.end.radius;
+                Mixin(myopt.handle.end.attrs, opt.handle.end.attrs);
+	    }
+	}
+    },
+    // Public API
+
+    /**
+     * Disconnects joint from objects.
+     * @param {string} cap "start|end|both" which side to disconnect
+     * @return {Joint} return this to allow chaining
+     */
+    disconnect: function(cap){
+        var disconnectedFrom, camelCap = (cap === "start")
+                                          ? "Start"
+                                          : (cap === "end"
+                                             ? "End"
+                                             : "Both");
+
+        if (cap === "both" || cap === undefined){
+            this.freeJoint(this.startObject())
+                .freeJoint(this.endObject());
+            
+            if (!this.isStartDummy()){
+                disconnectedFrom = this.startObject();
+                this.draw(["dummyStart"]);
+	        this.callback("disconnected", disconnectedFrom, [cap]);
+            }
+            if (!this.isEndDummy()){
+                disconnectedFrom = this.endObject();
+                this.draw(["dummyEnd"]);
+	        this.callback("disconnected", disconnectedFrom, [cap]);
+            }
+            
+        } else if (!this["is" + camelCap + "Dummy" ]()){
+            // do not do anything with already disconnected side
+            disconnectedFrom = this[cap + "Object"]();
+            if (this.startObject() !== this.endObject()){
+                this.freeJoint(disconnectedFrom);                
+            }
+            this.draw(["dummy" + camelCap]);
+	    this.callback("disconnected", disconnectedFrom, [cap]);
+        }
+
+        return this;
+    },
+
+    /**
+     * Register object(s) so that it can be pointed by my cap.
+     * @param {RaphaelObject|Shape|array} obj
+     * @param {string} cap "start|end|both" cap to register default: "both"
+     * @return {Joint}
+     * @example j.register(circle, "end")
+     */
+    register: function(obj, cap){
+	if (!cap){
+	    cap = "both";
+	}
+	// prepare array of objects that are to be registered
+	var toRegister = (obj.constructor == Array) ? obj : [obj];
+	// register all objects in toRegister array
+	for (var i = 0, len = toRegister.length; i < len; i++){
+	    toRegister[i].yourself()._capToStick = cap;
+	    this._registeredObjects.push(toRegister[i]);
+	}
+	return this;
+    },
+    /**
+     * The difference between register and registerForever is that registerForever
+     * saves reference to an array passed as argument. It means that all objects pushed
+     * into the array before and/or after the call of this method will be registered (for both caps).
+     * This method is useful for applications that do not know to which objects the connection
+     * can be sticked when the joint is created.
+     * @param {array} arr An array holding objects which the joint is going to be registered to.
+     * @return {Joint}
+     * @example
+     * var all = [];
+     * j.registerForever(all);
+     * // ... create objects and push them into all array
+     */
+    registerForever: function(arr){
+        if (Object.prototype.toString.call(arr) !== "[object Array]")
+            arr = Array.prototype.slice.call(arguments);
+	this._registeredObjects = arr;
+	return this;
+    },
+    /**
+     * Cancel registration of an object.
+     * @param {RaphaelObject|Shape} obj
+     * @param {string} cap "start|end|both" cap to unregister default: "both"
+     * @return {Joint}
+     * @example j.unregister(circle, "end");
+     */
+    unregister: function(obj, cap){
+	cap = cap || "both";
+
+	var index = -1;
+	for (var i = 0, len = this._registeredObjects.length; i < len; i++){
+            var capToStick = this._registeredObjects[i].yourself()._capToStick || "both";
+	    if (this._registeredObjects[i] === obj && capToStick === cap){
+		index = i;
+		break;
+	    }
+	}
+	if (index !== -1){
+	    this._registeredObjects.splice(index, 1);
+	}
+	return this;
+    },
+    /**
+     * @return {array} Registered Objects.
+     */
+    registeredObjects: function(){
+        return this._registeredObjects;
+    },
+    /**
+     * Set the vertices of the connection
+     * @param {array} vertices Array of points (vertices) - either of the form: {x: 5, y; 10} or "5 10" or "5@10"
+     * @return {Joint}
+     */
+    setVertices: function(vertices){
+        this._setVertices(vertices);
+        this.update();
+        return this;
+    },
+    /**
+     * Set connection vertices.
+     * @private
+     */
+    _setVertices: function(vertices) {
+	var conVertices = this._opt.vertices = [], p;
+	// cast vertices to points
+	for (var i = 0, l = vertices.length; i < l; i++){
+            p = (vertices[i].y === undefined) ?
+                    point(vertices[i]) : point(vertices[i].x, vertices[i].y);
+	    conVertices.push(p);
+	}
+	return this;
+    },
+    /**
+     * Get connection vertices.
+     * @return {array} array of connection vertices
+     */
+    getVertices: function(){
+	return this._opt.vertices;
+    },
+    /**
+     * Toggle the connection smoothing (bezier/straight).
+     * @return {Joint}
+     */
+    toggleSmoothing: function(){
+	this._opt.beSmooth = !this._opt.beSmooth;
+	this.update();
+	return this;
+    },
+    /**
+     * Find out whether the connection is smooth or not.
+     * @return {boolean} true if connection is smooth
+     */
+    isSmooth: function(){
+	return this._opt.beSmooth;
+    },
+    /**
+     * Set a label of the connection.
+     * @param {string|array} str label(s)
+     * @return {Joint}
+     */
+    label: function(str){
+        this._opt.label = isArray(str) ? str : [str];
+        for (var i = 0; i < str.length; i++) {
+            this._opt.labelAttrs[i] = this._opt.labelAttrsDefault;
+            this._opt.labelBoxAttrs[i] = this._opt.labelBoxAttrsDefault;
+        }
+	this.update();
+	return this;
+    },
+    /**
+     * Register callback function on various events.
+     * @link Callbacks
+     * @param {string} evt "justConnected"|"disconnected"|"justBroken"|"wiring"|"objectMoving"
+     * @param fnc Callback
+     * @return {Joint}
+     * @example
+     * j.registerCallback("justConnected", function(side){ ... this points to the object the joint was just connected to ... });
+     * j.registerCallback("disconnected", function(side){ ... this points to the object the joint was just disconnected from ... });
+     * j.registerCallback("justBroken", function(mousePos){ ... this points to the joint object ... });
+     * j.registerCallback("wiring", function(mousePos){ ... this points to the joint object ... });
+     * j.registerCallback("objectMoving", function(obj){ ... this points to the joint object ... });
+     *
+     * j.registerCallback("justConnected", function(side){
+     *   if (side === "start"){
+     *     console.log("Start cap connected.");
+     *   } else {  // side === "end"
+     *     console.log("End cap connected");
+     *   }
+     * });
+     */
+    registerCallback: function(evt, fnc){
+	this._callbacks[evt] = fnc;
+	return this;
+    },
+    /**
+     * Straighten the bent connection path.
+     * @return {Joint}
+     */
+    straighten: function(){
+	this._opt.vertices = [];
+	this.update();
+	return this;
+    },
+    /**
+     * Show/hide handle(s).
+     * If a connection arrow is, e.g., of type none, it is difficult to grab the end of the connection.
+     * For these cases, you can use handles, which are just simple circles showing at the end of a connection.
+     * @param {string} cap &optional [start|end] Specifies on what side handle should be shown.
+     * @return {Joint}
+     */
+    toggleHandle: function(cap){
+	var handle = this._opt.handle;
+	if (!cap){
+	    handle.start.enabled = !handle.start.enabled;
+	    handle.end.enabled = !handle.end.enabled;
+	} else {
+	    handle[cap].enabled = !handle[cap].enabled;
+	}
+	this.update();
+	return this;
+    },
+    /**
+     * Show handle.
+     * @return {Joint}
+     */
+    showHandle: function(cap){
+	var handle = this._opt.handle;
+	if (!cap){
+	    handle.start.enabled = true;
+	    handle.end.enabled = true;
+	} else {
+	    handle[cap].enabled = true;
+	}
+	this.update();
+	return this;
+    },
+    /**
+     * Hide handle.
+     * @return {Joint}
+     */
+    hideHandle: function(cap){
+	var handle = this._opt.handle;
+	if (!cap){
+	    handle.start.enabled = false;
+	    handle.end.enabled = false;
+	} else {
+	    handle[cap].enabled = false;
+	}
+	this.update();
+	return this;
+    },
+    /**
+     * Set bounding box correction.
+     * This advanced feature of Joint library allows you to shift a point to which a connection sticks.
+     * You can for example modify a connection to point to the center of an object or you can set a distance
+     * between an object and a connection arrow.
+     * @param {object} [corr] correction Correction
+     * @param {string} [corr.type] fake type of an object to which a cap points
+     * @param {number} [corr.x] x-axis shift of an object bounding box
+     * @param {number} [corr.y] y-axis shift of an object bounding box
+     * @param {number} [corr.width] change in an object bounding box width (can be negative)
+     * @param {number} [corr.height] change in an object bounding box height (can be negative)
+     * @param {string} cap "start|end"|undefined cap (undefined === both caps)
+     * @return {Joint}
+     * @example
+     * // 1.) both sides of the connection will point to the center of
+     * //     a circular object with radius == 30
+     * j.setBBoxCorrection({
+     *   type: "ellipse",
+     *   x: 30,
+     *   y: 30,
+     *   width: -60,
+     *   height: -60
+     * });
+     *
+     * // 2.) keep 20px distance between connection's arrow
+     * //     and a circular object
+     * j.setBBoxCorrection({
+     *   type: "ellipse",
+     *   x: -20,
+     *   y: -20,
+     *   width: 40,
+     *   height: 40
+     * });
+     */
+    setBBoxCorrection: function(corr, cap){
+	if (!cap){
+	    this._opt.bboxCorrection.start = this._opt.bboxCorrection.end = corr;
+	} else {
+	    this._opt.bboxCorrection[cap] = corr;
+	}
+	this.update();
+	return this;
+    },
+
+    /**
+     * Highlight connection.
+     * Note that highlight diseappears after the first update.
+     * @return {Joint} Return this.
+     */
+    highlight: function(color){
+        color = color || "red";
+	this.connection().attr("stroke", color);
+	return this;
+    },
+
+    /**
+     * Unhighlight connection.
+     * @return {Joint} Return this.
+     */
+    unhighlight: function(){
+	this.connection().attr("stroke", this._opt.attrs.stroke || "#000");
+	return this;
+    }
+};
+
+/**
+ * Reference to current joint when an object is dragging
+ * can be global across all raphael 'worlds' because only one object can be dragged at a time.
+ * @private
+ * @type Joint
+ */
+Joint.currentJoint = null;
+
+/**
+ * Set a paper for graphics rendering.
+ * @param {Raphael|number,number,number,number|string,number,number|HTMLElement} p
+ * @return {Raphael} Paper.
+ * @example
+ * // create paper from existing HTMLElement with id "world" specifying width and height
+ * Joint.paper("world", 640, 480);
+ * // create paper specifying x, y position and width and height
+ * Joint.paper(50, 50, 640, 480);
+ * // paper is created from the HTMLElement with id "world"
+ * Joint.paper(document.getElementById("world"));
+ * // create paper using Raphael
+ * Joint.paper(Raphael("world", 640, 480));
+ */
+Joint.paper = function paper(){
+    var p = arguments[0];
+    if (p === undefined){
+	return this._paper;
+    }
+    this._paperArguments = arguments;	// save for later reset
+    if (!(p instanceof global.Raphael)){
+	return (this._paper = global.Raphael.apply(global, arguments));
+    }
+    return (this._paper = p);
+};
+
+/**
+ * Clear paper, reset again.
+ * @example
+ * // create paper from existing HTMLElement with id "world" specifying width and height
+ * Joint.paper("world", 640, 480);
+ * // ... draw objects, diagrams, etc. ...
+ * Joint.resetPaper();
+ * // paper is clear and ready for next usage
+ */
+Joint.resetPaper = function resetPaper(){
+    if (!this._paper){
+	return;
+    }
+    var canvas = this._paper.canvas;
+    canvas.parentNode.removeChild(canvas);
+    Joint.paper.apply(Joint, this._paperArguments);
+};
+
+    // get an arrow object
+Joint.getArrow = function(type, size, attrs){
+    if (!size){
+	size = 2; // default
+    }
+    var arrow = Joint.arrows[type](size);
+    if (!arrow.attrs) arrow.attrs = {};
+
+    if (attrs){
+	for (var key in attrs){
+	    arrow.attrs[key] = attrs[key];
+	}
+    }
+    return arrow;
+};
+
+/**
+ * This object contains predefined arrow types. Currently, there are only two types: none and basic.
+ * These are considered general types and are suitable for most diagrams. Nevertheless, new arrows
+ * can be easily added. See arrows.js plugin, which provides some fancier arrows.
+ * The names can be used as startArrow|endArrow types.
+ * @example circle.joint(rect, { startArrow: { type: basic, size: 5, attrs: ... } });
+ */
+Joint.arrows = {
+    none: function(size){
+	if (!size){ size = 2; }
+	return {
+	    path: ["M",size.toString(),"0","L",(-size).toString(),"0"],
+	    dx: size,
+	    dy: size,
+            attrs: { opacity: 0 }
+	};
+    },
+    basic: function(size){
+	if (!size){ size = 5; }
+   	return {
+	    path: ["M",size.toString(),"0",
+		   "L",(-size).toString(),(-size).toString(),
+		   "L",(-size).toString(),size.toString(),"z"],
+	    dx: size,
+	    dy: size,
+	    attrs: {
+		stroke: "black",
+		fill: "black"
+	    }
+	};
+    }
+};
+
+/**
+ * Get an absolute position of an element.
+ * @private
+ * @return {Point}
+ */
+Joint.findPos = function(el){
+    var p = point(0, 0);
+    if (el.offsetParent){
+	while (el){
+	    p.offset(el.offsetLeft, el.offsetTop);
+	    el = el.offsetParent;
+	}
+    } else {
+	// firefox (supposing el is Raphael canvas element)
+	p.offset(el.parentNode.offsetLeft, el.parentNode.offsetTop);
+    }
+    return p;
+};
+/**
+ * Get the mouse position relative to the raphael paper.
+ * @private
+ * @param {Event} e Javascript event object
+ * @param {Element} el DOM element
+ * @return {Point}
+ */
+Joint.getMousePosition = function(e, el){
+    var pos;
+    if (e.pageX || e.pageY) {
+        pos = point(e.pageX, e.pageY);
+    } else {
+	var
+	docEl = document.documentElement,
+	docBody = document.body;
+	pos = point(e.clientX + (docEl.scrollLeft || docBody.scrollLeft) - docEl.clientLeft,
+		    e.clientY + (docEl.scrollTop || docBody.scrollTop) - docEl.clientTop);
+    }
+    var rp = Joint.findPos(el);
+    return point(pos.x - rp.x, pos.y - rp.y);
+};
+/**
+ * MouseMove event callback.
+ * @private
+ * @param {Event} e
+ */
+Joint.mouseMove = function(e){
+    if (Joint.currentJoint !== null){
+	var joint = Joint.currentJoint;
+	if (joint.state === joint.STARTCAPDRAGGING ||
+	    joint.state === joint.ENDCAPDRAGGING){
+	    joint.capDragging(e);
+	} else if (joint.state === joint.CONNECTIONWIRING){
+	    joint.connectionWiring(e);
+	}
+    }
+};
+/**
+ * MouseUp event callback.
+ * @private
+ * @param {Event} e
+ */
+Joint.mouseUp = function(e){
+    if (Joint.currentJoint !== null){
+	var joint = Joint.currentJoint;
+	if (joint.state === joint.STARTCAPDRAGGING ||
+	    joint.state === joint.ENDCAPDRAGGING){
+	    joint.capEndDragging();
+	}
+    }
+    Joint.currentJoint = null;
+};
+
+Joint.fixEvent = function(event) {
+    // add W3C standard event methods
+    event.preventDefault = Joint.fixEvent.preventDefault;
+    event.stopPropagation = Joint.fixEvent.stopPropagation;
+    return event;
+};
+Joint.fixEvent.preventDefault = function() {
+    this.returnValue = false;
+};
+Joint.fixEvent.stopPropagation = function() {
+    this.cancelBubble = true;
+};
+Joint.handleEvent = function(event){
+    var returnValue = true;
+    // grab the event object (IE uses a global event object)
+    event = event || Joint.fixEvent(((global.ownerDocument || global.document || global).parentWindow || global).event);
+    // get a reference to the hash table of event handlers
+    var handlers = this.events[event.type];
+    // execute each event handler
+    for (var i in handlers) {
+	this.$$handleEvent = handlers[i];
+	if (this.$$handleEvent(event) === false) {
+	    returnValue = false;
+	}
+    }
+    return returnValue;
+};
+Joint.addEvent = function(element, type, handler){
+    if (element.addEventListener) {
+	element.addEventListener(type, handler, false);
+    } else {
+	// assign each event handler a unique ID
+	if (!handler.$$guid){ handler.$$guid = Joint.addEvent.guid++; }
+	// create a hash table of event types for the element
+	if (!element.events){ element.events = {}; }
+	// create a hash table of event handlers for each element/event pair
+	var handlers = element.events[type];
+	if (!handlers) {
+	    handlers = element.events[type] = {};
+	    // store the existing event handler (if there is one)
+	    if (element["on" + type]) {
+		handlers[0] = element["on" + type];
+	    }
+	}
+	// store the event handler in the hash table
+	handlers[handler.$$guid] = handler;
+	// assign a global event handler to do all the work
+	element["on" + type] = Joint.handleEvent;
+    }
+};
+// a counter used to create unique IDs
+Joint.addEvent.guid = 1;
+
+Joint.removeEvent = function(element, type, handler){
+    if (element.removeEventListener) {
+	element.removeEventListener(type, handler, false);
+    } else {
+	// delete the event handler from the hash table
+	if (element.events && element.events[type]){
+	    delete element.events[type][handler.$$guid];
+	}
+    }
+};
+
+/*
+ * @todo register handlers only if draggable caps
+ * are allowed in options. Applications may not need it.
+ */
+Joint.addEvent(document, "mousemove", Joint.mouseMove);
+Joint.addEvent(document, "mouseup", Joint.mouseUp);
+
+var JointDOMBuilder = {
+    init: function(paper, opt, start, end, jointLocation, connectionPathCommands, labelLocation){
+	this.paper = paper;
+	this.opt = opt;
+	this.start = start;
+	this.end = end;
+	this.jointLocation = jointLocation;
+	this.connectionPathCommands = connectionPathCommands;
+	this.labelLocation = labelLocation;
+	return this;
+    },
+    dummy: function(startOrEnd, pos, opt){
+	startOrEnd.dummy = true;
+	startOrEnd.shape = this.paper.circle(pos.x, pos.y, opt.radius).attr(opt.attrs);
+	startOrEnd.shape.show();
+	return startOrEnd.shape;
+    },
+    dummyStart: function(){
+	return this.dummy(this.start, this.jointLocation.start.bound, this.opt.dummy.start);
+    },
+    dummyEnd: function(){
+	return this.dummy(this.end, this.jointLocation.end.bound, this.opt.dummy.end);
+    },
+    handleStart: function(){
+	var opt = this.opt.handle.start;
+	if (!opt.enabled) return undefined;
+	var pos = this.jointLocation.start.bound;
+	return this.paper.circle(pos.x, pos.y, opt.radius).attr(opt.attrs);
+    },
+    handleEnd: function(){
+	var opt = this.opt.handle.end;
+	if (!opt.enabled) return undefined;
+	var pos = this.jointLocation.end.bound;
+	return this.paper.circle(pos.x, pos.y, opt.radius).attr(opt.attrs);
+    },
+    connection: function(){
+	var opt = this.opt, paths = [],
+	    con = this.paper.path(this.connectionPathCommands.join(" ")).attr(opt.attrs);
+        if (opt.subConnectionAttrs) {
+            var i = 0, l = opt.subConnectionAttrs.length, 
+                length = con.getTotalLength();
+            for (; i < l; i++) {
+                var attrs = opt.subConnectionAttrs[i];
+                var from = attrs.from || 2, to = attrs.to || 1;
+                from = from > length ? length : from;
+                from = from < 0 ? length + from : from;
+                from = from > 1 ? from : length * from;
+                to = to > length ? length : to;
+                to = to < 0 ? length + to : to;
+                to = to > 1 ? to : length * to;                
+                var subPath = this.paper.path(con.getSubpath(from, to)).attr(attrs);
+                subPath.node.style.cursor = opt.cursor;
+                paths.push(subPath);
+            }
+        }
+	con.node.style.cursor = opt.cursor;
+	con.show();
+	return [con].concat(paths);
+    },
+    label: function(){
+	if (this.opt.label === undefined) return undefined;
+	var labels = isArray(this.opt.label) ? this.opt.label : [this.opt.label],
+            attrs = this.opt.labelAttrs,
+            len = labels.length, i = 0, components = [];
+
+        for (; i < len; i++) {
+            var pos = this.labelLocation[i],
+	        labelText = this.paper.text(pos.x, pos.y + (attrs[i].offset || 0), labels[i]).attr(attrs[i]),
+	        bb = labelText.getBBox(),
+                padding = attrs[i].padding || 0,
+	        labelBox = this.paper.rect(bb.x - padding, bb.y - padding + (attrs[i].offset || 0), bb.width + 2*padding, bb.height + 2*padding).attr(this.opt.labelBoxAttrs[i]);
+	    labelText.insertAfter(labelBox);
+            components.push(labelText, labelBox)
+        }
+	return components;
+    },
+    startCap: function(){
+	var opt = this.opt.arrow.start,
+	    startCap = this.paper.path(opt.path.join(" ")).attr(opt.attrs);
+	startCap.translate(this.jointLocation.start.translate.x,
+			   this.jointLocation.start.translate.y);
+	startCap.rotate(this.jointLocation.start.rotate);
+	startCap.show();
+	return startCap;
+    },
+    endCap: function(){
+	var opt = this.opt.arrow.end,
+	    endCap = this.paper.path(opt.path.join(" ")).attr(opt.attrs);
+	endCap.translate(this.jointLocation.end.translate.x,
+			 this.jointLocation.end.translate.y);
+	endCap.rotate(this.jointLocation.end.rotate);
+	endCap.show();
+	return endCap;
+    }
+};
+
+/**
+ * Geometry-Primitives.
+ */
+
+/**
+ * Point object.
+ * @constructor
+ */
+function Point(x, y){
+    var xy;
+    if (y === undefined){
+        // from string
+        xy = x.split(x.indexOf("@") === -1 ? " " : "@");
+        this.x = parseInt(xy[0], 10);
+        this.y = parseInt(xy[1], 10);
+    } else {
+        this.x = x;
+        this.y = y;
+    }
+}
+function point(x, y){ return new Point(x, y); }
+
+Point.prototype = {
+    constructor: Point,
+    _isPoint: true,
+
+    toString: function(){ return this.x + "@" + this.y; },
+
+    deepCopy: function(){ return point(this.x, this.y); },
+    /**
+     * If I lie outside rectangle r, return the nearest point on the boundary of rect r,
+     * otherwise return me.
+     * (see Squeak Smalltalk, Point>>adhereTo:)
+     * @param {Rect} r
+     * @return {Point}
+     */
+    adhereToRect: function(r){
+	if (r.containsPoint(this)){
+	    return this;
+	}
+	this.x = mmin(mmax(this.x, r.x), r.x + r.width);
+	this.y = mmin(mmax(this.y, r.y), r.y + r.height);
+	return this;
+    },
+
+    /**
+     * Compute the angle between me and p and the x axis.
+     * (cartesian-to-polar coordinates conversion)
+     * @param {Point} p
+     * @return {object} theta in degrees and radians
+     */
+    theta: function(p){
+	var y = -(p.y - this.y),	// invert the y-axis
+	x = p.x - this.x,
+	rad = atan2(y, x);
+	if (rad < 0){ // correction for III. and IV. quadrant
+	    rad = 2*PI + rad;
+	}
+	return {
+	    degrees: 180*rad / PI,
+	    radians: rad
+	};
+    },
+
+    /**
+     * @return {number} distance between me and point p
+     */
+    distance: function(p){
+	return line(this, p).length();
+    },
+
+    /**
+     * Offset me by the specified amount.
+     */
+    offset: function(dx, dy){
+	this.x += dx;
+	this.y += dy;
+	return this;
+    },
+
+    /**
+     * Scale the line segment between (0,0) and me to have a length of len
+     */
+    normalize: function(len){
+	var s = len / sqrt((this.x*this.x) + (this.y*this.y));
+	this.x = s * this.x;
+	this.y = s * this.y;
+	return this;
+    }
+};
+
+/**
+ * Alternative constructor, from polar coordinates.
+ */
+Point.fromPolar = function(r, angle){
+    return point(r * cos(angle), r * sin(angle));
+};
+
+
+/**
+ * Line object.
+ */
+function Line(p1, p2){
+    this.start = p1;
+    this.end = p2;
+}
+
+function line(p1, p2) { return new Line(p1, p2); }
+
+Line.prototype = {
+    constructor: Line,
+
+    toString: function(){
+	return "start: " + this.start.toString() + " end:" + this.end.toString();
+    },
+
+    /**
+     * @return {double} length of the line
+     */
+    length: function(){ return sqrt(this.squaredLength()); },
+
+    /**
+     * @return {integer} length without sqrt
+     * @note for applications where the exact length is not necessary (e.g. compare only)
+     */
+    squaredLength: function(){
+	var
+	x0 = this.start.x, y0 = this.start.y,
+	x1 = this.end.x, y1 = this.end.y;
+	return (x0 -= x1)*x0 + (y0 -= y1)*y0;
+    },
+
+    /**
+     * @return {point} my midpoint
+     */
+    midpoint: function(){
+	return point((this.start.x + this.end.x) / 2,
+		     (this.start.y + this.end.y) / 2);
+    },
+
+
+    /**
+     * @return {point} where I intersect l.
+     * @see Squeak Smalltalk, LineSegment>>intersectionWith:
+     */
+    intersection: function(l){
+	var pt1Dir = point(this.end.x - this.start.x, this.end.y - this.start.y),
+	pt2Dir = point(l.end.x - l.start.x, l.end.y - l.start.y),
+	det = (pt1Dir.x * pt2Dir.y) - (pt1Dir.y * pt2Dir.x),
+	deltaPt = point(l.start.x - this.start.x, l.start.y - this.start.y),
+	alpha = (deltaPt.x * pt2Dir.y) - (deltaPt.y * pt2Dir.x),
+	beta = (deltaPt.x * pt1Dir.y) - (deltaPt.y * pt1Dir.x);
+
+	if (det === 0 ||
+	    alpha * det < 0 ||
+	    beta * det < 0){
+	    return null;	// no intersection
+	}
+
+	if (det > 0){
+	    if (alpha > det || beta > det){
+		return null;
+	    }
+	} else {
+	    if (alpha < det || beta < det){
+		return null;
+	    }
+	}
+	return point(this.start.x + (alpha * pt1Dir.x / det),
+		     this.start.y + (alpha * pt1Dir.y / det));
+    }
+};
+
+/**
+ * Rectangle object.
+ */
+function Rect(o){
+    this.x = o.x;
+    this.y = o.y;
+    this.width = o.width;
+    this.height = o.height;
+}
+
+function rect(o){
+    if (typeof o.width === "undefined"){
+	return new Rect({x: arguments[0],
+			 y: arguments[1],
+			 width: arguments[2],
+			 height: arguments[3]});
+    }
+    return new Rect(o);
+}
+
+Rect.prototype = {
+    constructor: Rect,
+
+    toString: function(){
+	return "origin: " + this.origin().toString() + " corner: " + this.corner().toString();
+    },
+
+    origin: function(){ return point(this.x, this.y); },
+    corner: function(){ return point(this.x + this.width, this.y + this.height); },
+    topRight: function(){ return point(this.x + this.width, this.y); },
+    bottomLeft: function(){ return point(this.x, this.y + this.height); },
+    center: function(){ return point(this.x + this.width/2, this.y + this.height/2); },
+
+    /**
+     * @return {boolean} true if rectangles intersect
+     */
+    intersect: function(r){
+	var myOrigin = this.origin(),
+	myCorner = this.corner(),
+	rOrigin = r.origin(),
+	rCorner = r.corner();
+	if (rCorner.x <= myOrigin.x){ return false; }
+	if (rCorner.y <= myOrigin.y){ return false; }
+	if (rOrigin.x >= myCorner.x){ return false; }
+	if (rOrigin.y >= myCorner.y){ return false; }
+	return true;
+    },
+
+    /**
+     * @return {string} (left|right|top|bottom) side which is nearest to point
+     * @see Squeak Smalltalk, Rectangle>>sideNearestTo:
+     */
+    sideNearestToPoint: function(p){
+	var distToLeft = p.x - this.x,
+	distToRight = (this.x + this.width) - p.x,
+	distToTop = p.y - this.y,
+	distToBottom = (this.y + this.height) - p.y,
+	closest = distToLeft,
+	side = "left";
+	if (distToRight < closest){
+	    closest = distToRight;
+	    side = "right";
+	}
+	if (distToTop < closest){
+	    closest = distToTop;
+	    side = "top";
+	}
+	if (distToBottom < closest){
+	    closest = distToBottom;
+	    side = "bottom";
+	}
+	return side;
+    },
+
+    /**
+     * @return {bool} true if point p is insight me
+     */
+    containsPoint: function(p){
+	if (p.x > this.x && p.x < this.x + this.width &&
+	    p.y > this.y && p.y < this.y + this.height){
+	    return true;
+	}
+	return false;
+    },
+
+    /**
+     * @return {point} a point on my border nearest to parameter point
+     * @see Squeak Smalltalk, Rectangle>>pointNearestTo:
+     */
+    pointNearestToPoint: function(p){
+	if (this.containsPoint(p)){
+	    var side = this.sideNearestToPoint(p);
+	    switch (side){
+	    case "right": return point(this.x + this.width, p.y);
+	    case "left": return point(this.x, p.y);
+	    case "bottom": return point(p.x, this.y + this.height);
+	    case "top": return point(p.x, this.y);
+	    }
+	} else {
+	    return p.adhereToRect(this);
+	}
+    },
+
+    /**
+     * Find point on me where line starting
+     * from my center ending in point p intersects my boundary.
+     */
+    boundPoint: function(p){
+	var center = point(this.x + this.width/2, this.y + this.height/2);
+	// (clockwise, starting from the top side)
+	var sides = [
+	    line(this.origin(), this.topRight()),
+	    line(this.topRight(), this.corner()),
+	    line(this.corner(), this.bottomLeft()),
+	    line(this.bottomLeft(), this.origin())
+	],
+	connector = line(center, p);
+	for (var i = sides.length - 1; i >= 0; --i){
+	    var intersection = sides[i].intersection(connector);
+	    if (intersection !== null){
+		return intersection;
+	    }
+	}
+	// assert(false)
+    },
+
+    /**
+     * Move and expand me.
+     * @param r {rectangle} representing deltas
+     */
+    moveAndExpand: function(r){
+	this.x += r.x;
+	this.y += r.y;
+	this.width += r.width;
+	this.height += r.height;
+	return this;
+    }
+};
+
+/**
+ * Ellipse object.
+ */
+function Ellipse(c, a, b){
+    this.x = c.x;
+    this.y = c.y;
+    this.a = a;
+    this.b = b;
+}
+
+function ellipse(c, a, b){ return new Ellipse(c, a, b); }
+
+Ellipse.prototype = {
+    constructor: Ellipse,
+
+    bbox: function(){
+	return rect({x: this.x - this.a, y: this.y - this.b, width: 2*this.a, height: 2*this.b});
+    },
+
+    /**
+     * Find point on me where line from my center to
+     * point p intersects my boundary.
+     * @see Squeak Smalltalk, EllipseMorph>>intersectionWithLineSegmentFromCenterTo:
+     */
+    intersectionWithLineFromCenterToPoint: function(p){
+	var dx = p.x - this.x,
+	dy = p.y - this.y;
+	if (dx === 0){
+	    return this.bbox().pointNearestToPoint(p);
+	}
+
+	var m = dy / dx,
+	mSquared = m * m,
+	aSquared = this.a * this.a,
+	bSquared = this.b * this.b,
+	x = sqrt(1 / ((1 / aSquared) + (mSquared / bSquared)));
+	if (dx < 0){
+	    x = -x;
+	}
+	var y = m * x;
+	return point(this.x + x, this.y + y);
+    }
+
+};
+
+/**
+ * Bezier segment object.
+ */
+function BezierSegment(p0, p1, p2, p3){
+    this.p0 = p0;
+    this.p1 = p1;
+    this.p2 = p2;
+    this.p3 = p3;
+}
+
+function bezierSegment(p0, p1, p2, p3){
+    return new BezierSegment(p0, p1, p2, p3);
+}
+
+BezierSegment.prototype = {
+    constructor: BezierSegment,
+
+    /**
+     * Get a point on me at the specified time t.
+     */
+    getPoint: function(t){
+	var
+	a = 1 - t,	// (1 - t)
+	b = a*a,	// (1 - t)^2
+	c = b*a,	// (1 - t)^3
+	tt = t*t,	// t^2
+	ttt = tt*t;	// t^3
+
+	return point(c*this.p0.x + 3*b*t*this.p1.x + 3*a*tt*this.p2.x + ttt*this.p3.x,
+		     c*this.p0.y + 3*b*t*this.p1.y + 3*a*tt*this.p2.y + ttt*this.p3.y);
+    }
+
+};
+
+/**
+ * Various methods for Bezier curves manipulation.
+ */
+function Bezier(){}
+
+/**
+ * Cubic Bezier curve path through points.
+ * Ported from ActionScript implementation by Andy Woodruff (http://cartogrammar.com/blog)
+ */
+Bezier.curveThroughPoints = function(points, z, angleFactor){
+    // default values
+    if (typeof z === "undefined"){
+	z = 0.5;
+    }
+    if (typeof angleFactor === "undefined"){
+	angleFactor = 0.75;
+    }
+
+    var path = [];	// the result SVG path as an array of path commands
+    if (points.length < 2){
+	throw new Error("Points array must have minimum of two points.");
+    }
+
+    var p = [points[0]];
+    // remove duplicate neighbours
+    for (var i = 1, len = points.length; i < len; i++){
+	if (points[i].x != points[i-1].x || points[i].y != points[i-1].y){
+	    p.push(points[i]);
+	}
+    }
+
+    // z is_in (0,1]
+    if (z <= 0){
+	z = 0.5;
+    } else if (z > 1){
+	z = 1;
+    }
+
+    // angleFactor is_in [0,1]
+    if (angleFactor < 0){
+	angleFactor = 0;
+    } else if (angleFactor > 1){
+	angleFactor = 1;
+    }
+
+    /**
+     * Calculate all the curve control points.
+     */
+
+    // None of this junk will do any good if there are only two points
+    if (p.length > 2){
+	// Ordinarily, curve calculations will start with the second point
+	// and go through the second-to-last point
+	var firstPt = 1;
+	var lastPt = p.length-1;
+	// Check if this is a closed line
+	if (p[0].x == p[lastPt].x && p[0].y == p[lastPt].y){
+	    // Include first and last points in curve calculations
+	    firstPt = 0;
+	    lastPt = p.length;
+	}
+
+	// An array to store the two control points for each point
+	var controlPts = [];
+	// Loop through all the points (except the first and last
+	// if not a closed line) to get curve control points for each.
+	for (var i = firstPt; i < lastPt; i++) {
+	    // The previous, current, and next points
+
+	    // If the first point (of a closed line), use the
+	    // second-to-last point as the previous point
+	    var p0 = (i-1 < 0) ? p[p.length-2] : p[i-1];
+	    var p1 = p[i];
+	    // If the last point (of a closed line), use the
+	    // second point as the next point
+	    var p2 = (i+1 == p.length) ? p[1] : p[i+1];
+
+	    // Distance from previous point to current point
+	    var a = p0.distance(p1);
+	    // Correct for near-zero distances, a cheap way to prevent
+	    // division by zero
+	    if (a < 0.001){ a = 0.001; }
+	    // Distance from current point to next point
+	    var b = p1.distance(p2);
+	    if (b < 0.001){ b = 0.001; }
+	    // Distance from previous point to next point
+	    var c = p0.distance(p2);
+	    if (c < 0.001){ c = 0.001; }
+	    var cos = (b*b+a*a-c*c)/(2*b*a);
+	    // Make sure above value is between -1 and 1 so that acos will work
+	    if (cos < -1){ cos = -1; }
+	    else if (cos > 1){ cos = 1; }
+	    // Angle formed by the two sides of the triangle
+	    // (described by the three points above) adjacent to the current point
+	    var C = acos(cos);
+	    // Duplicate set of points. Start by giving previous and next points
+	    // values RELATIVE to the current point.
+	    var aPt = point(p0.x-p1.x,p0.y-p1.y);
+	    var bPt = point(p1.x,p1.y);
+	    var cPt = point(p2.x-p1.x,p2.y-p1.y);
+
+	    /* We'll be adding adding the vectors from the previous and next points
+	       to the current point, but we don't want differing magnitudes (i.e.
+	       line segment lengths) to affect the direction of the new vector.
+               Therefore we make sure the segments we use, based on the duplicate points
+	       created above, are of equal length. The angle of the new vector will
+               thus bisect angle C (defined above) and the perpendicular to this is
+               nice for the line tangent to the curve. The curve control points will
+               be along that tangent line.
+	    */
+	    if (a > b){
+		// Scale the segment to aPt (bPt to aPt) to the size of b
+		// (bPt to cPt) if b is shorter.
+		aPt.normalize(b);
+	    } else if (b > a){
+		// Scale the segment to cPt (bPt to cPt) to the size of a (aPt to bPt)
+		// if a is shorter.
+		cPt.normalize(a);
+	    }
+	    // Offset aPt and cPt by the current point to get them back to
+	    // their absolute position.
+	    aPt.offset(p1.x,p1.y);
+	    cPt.offset(p1.x,p1.y);
+
+	    // Get the sum of the two vectors, which is perpendicular to the line
+	    // along which our curve control points will lie.
+
+	    // x component of the segment from previous to current point
+	    var ax = bPt.x-aPt.x;
+	    var ay = bPt.y-aPt.y;
+	    // x component of the segment from next to current point
+	    var bx = bPt.x-cPt.x;
+	    var by = bPt.y-cPt.y;
+	    // sum of x components
+	    var rx = ax + bx;
+	    var ry = ay + by;
+	    // Correct for three points in a line by finding the angle between just two of them
+	    if (rx === 0 && ry === 0){
+		// Really not sure why this seems to have to be negative
+		rx = -bx;
+		ry = by;
+	    }
+	    // Switch rx and ry when y or x difference is 0. This seems to prevent
+	    // the angle from being perpendicular to what it should be.
+	    if (ay === 0 && by === 0){
+		rx = 0;
+		ry = 1;
+	    } else if (ax === 0 && bx === 0){
+		rx = 1;
+		ry = 0;
+	    }
+	    // length of the summed vector - not being used, but there it is anyway
+	    // var r = sqrt(rx*rx+ry*ry);
+	    // angle of the new vector
+	    var theta = atan2(ry,rx);
+	    // Distance of curve control points from current point: a fraction
+	    // the length of the shorter adjacent triangle side
+	    var controlDist = mmin(a,b)*z;
+	    // Scale the distance based on the acuteness of the angle. Prevents
+	    // big loops around long, sharp-angled triangles.
+	    var controlScaleFactor = C/PI;
+	    // Mess with this for some fine-tuning
+	    controlDist *= ((1-angleFactor) + angleFactor*controlScaleFactor);
+	    // The angle from the current point to control points:
+	    // the new vector angle plus 90 degrees (tangent to the curve).
+	    var controlAngle = theta+PI/2;
+	    // Control point 2, curving to the next point.
+	    var controlPoint2 = Point.fromPolar(controlDist,controlAngle);
+	    // Control point 1, curving from the previous point
+	    // (180 degrees away from control point 2).
+	    var controlPoint1 = Point.fromPolar(controlDist,controlAngle+PI);
+
+	    // Offset control points to put them in the correct absolute position
+	    controlPoint1.offset(p1.x,p1.y);
+	    controlPoint2.offset(p1.x,p1.y);
+
+	    /* Haven't quite worked out how this happens, but some control
+	       points will be reversed. In this case controlPoint2 will be
+               farther from the next point than controlPoint1 is.
+	       Check for that and switch them if it's true.
+	    */
+	    if (controlPoint2.distance(p2) > controlPoint1.distance(p2)){
+		// Add the two control points to the array in reverse order
+		controlPts[i] = [controlPoint2,controlPoint1];
+	    } else {
+		// Otherwise add the two control points to the array in normal order
+		controlPts[i] = [controlPoint1,controlPoint2];
+	    }
+	}//endfor (var i = firstPt; i < lastPt; i++) {
+
+	// DRAW THE CURVE
+
+	path.push("M", p[0].x, p[0].y);
+	// console.log(controlPts);
+
+	// If this isn't a closed line
+	if (firstPt == 1){
+	    // Draw a regular quadratic Bézier curve from the first to second points,
+	    // using the first control point of the second point
+	    path.push("S", controlPts[1][0].x,controlPts[1][0].y,p[1].x,p[1].y);
+	}
+
+	// Change to true if you want to use lineTo for straight lines of 3 or
+	// more points rather than curves. You'll get straight lines but possible sharp corners!
+	var straightLines = true;
+	// Loop through points to draw cubic Bézier curves through the penultimate
+	// point, or through the last point if the line is closed.
+	for (var i = firstPt; i < lastPt - 1; i++){
+	    // Determine if multiple points in a row are in a straight line
+	    var isStraight = false;
+	    if ( ( i > 0 && atan2(p[i].y-p[i-1].y,p[i].x-p[i-1].x) == atan2(p[i+1].y-p[i].y,p[i+1].x-p[i].x) )|| ( i < p.length - 2 && atan2(p[i+2].y-p[i+1].y,p[i+2].x-p[i+1].x) == atan2(p[i+1].y-p[i].y,p[i+1].x-p[i].x) ) ){
+		isStraight = true;
+	    }
+
+	    if (straightLines && isStraight){
+		path.push("L", p[i+1].x,p[i+1].y);
+	    } else {
+		// BezierSegment instance using the current point, its second control
+		// point, the next point's first control point, and the next point
+		var bezier = bezierSegment(p[i],controlPts[i][1],controlPts[i+1][0],p[i+1]);
+		// Construct the curve out of 100 segments (adjust number for less/more detail)
+		for (var t = 0.01; t < 1.01; t += 0.01){
+		    // x,y on the curve for a given t
+		    var val = bezier.getPoint(t);
+		    path.push("L", val.x, val.y);
+		}
+	    }
+	}
+	// If this isn't a closed line
+	if (lastPt == p.length-1){
+	    // Curve to the last point using the second control point of the penultimate point.
+	    path.push("S", controlPts[i][1].x,controlPts[i][1].y,p[i+1].x,p[i+1].y);
+	}
+
+	// just draw a line if only two points
+    } else if (p.length == 2){
+	path.push("M", p[0].x,p[0].y);
+	path.push("L", p[1].x,p[1].y);
+    }
+    return path;
+};
+
+Joint.Point = Point;
+Joint.point = point;
+Joint.Rect = Rect;
+Joint.rect = rect;
+Joint.Line = Line;
+Joint.line = line;
+Joint.Ellipse = Ellipse;
+Joint.ellipse = ellipse;
+Joint.BezierSegment = BezierSegment;
+Joint.bezierSegment = bezierSegment;
+Joint.Bezier = Bezier;
+Joint.Mixin = Mixin;
+Joint.Supplement = Supplement;
+Joint.DeepMixin = DeepMixin;
+Joint.DeepSupplement = DeepSupplement;
+
+/**
+ * TODO: rotation support. there is a problem because
+ * rotation does not set any attribute in this.attrs but
+ * instead it sets transformation directly to let the browser
+ * SVG engine compute the position.
+ */
+var _attr = global.Raphael.el.attr;
+global.Raphael.el.attr = function(){
+    // is it a getter or el is not a joint object?
+    if ((arguments.length == 1 &&
+	 (typeof arguments[0] === "string" || typeof arguments[0] === "array")) ||
+	(typeof this.joints === "undefined")){
+	return _attr.apply(this, arguments);	// yes
+    }
+
+    // old attributes
+    var o = {};
+    for (var key in this.attrs){
+	o[key] = this.attrs[key];
+    }
+
+    _attr.apply(this, arguments);
+
+    var
+    n = this.attrs,	// new attributes
+    positionChanged = false,
+    strokeChanged = false;
+
+    if (o.x != n.x || o.y != n.y ||	// rect/image/text
+	o.cx != n.cx || o.cy != n.cy ||	// circle/ellipse
+	o.path != n.path ||	// path
+	o.r != n.r){	// radius
+	positionChanged = true;
+    }
+    if (o.stroke != n.stroke){
+	strokeChanged = true;
+    }
+
+    for (var i = this.joints().length - 1; i >= 0; --i){
+	var joint = this.joints()[i];
+
+	if (positionChanged){
+	    joint.update();
+	    joint.callback("objectMoving", joint, [this]);
+	}
+	//if (strokeChanged){}
+    }
+    return this;
+};
+
+
+/**
+ * Create a joint between a Raphael object and to object.
+ * @param {RaphaelObject} to
+ * @param {object} [opts] opt {@link Joint}
+ * @return {Joint}
+ */
+global.Raphael.el.joint = function(to, opt){
+    Joint.paper(this.paper);
+    return new Joint(this, to, opt);
+};
+
+/**
+ * Return element unique id.
+ */
+global.Raphael.el.euid = function(){
+    return Joint.generateEuid.call(this);
+};
+
+global.Raphael.el.yourself = function(){
+    return this;
+};
+
+global.Raphael.el.joints = function(){
+    return (this._joints || (this._joints = []));
+};
+
+global.Raphael.fn.euid = function(){
+    return Joint.generateEuid.call(this);
+};
+
+})(this);	// END CLOSURE
diff --git a/js/lib/json2.js b/js/lib/json2.js
new file mode 100644
index 0000000..a1a3b17
--- /dev/null
+++ b/js/lib/json2.js
@@ -0,0 +1,482 @@
+/*
+    http://www.JSON.org/json2.js
+    2010-03-20
+
+    Public Domain.
+
+    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+
+    See http://www.JSON.org/js.html
+
+
+    This code should be minified before deployment.
+    See http://javascript.crockford.com/jsmin.html
+
+    USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
+    NOT CONTROL.
+
+
+    This file creates a global JSON object containing two methods: stringify
+    and parse.
+
+        JSON.stringify(value, replacer, space)
+            value       any JavaScript value, usually an object or array.
+
+            replacer    an optional parameter that determines how object
+                        values are stringified for objects. It can be a
+                        function or an array of strings.
+
+            space       an optional parameter that specifies the indentation
+                        of nested structures. If it is omitted, the text will
+                        be packed without extra whitespace. If it is a number,
+                        it will specify the number of spaces to indent at each
+                        level. If it is a string (such as '\t' or '&nbsp;'),
+                        it contains the characters used to indent at each level.
+
+            This method produces a JSON text from a JavaScript value.
+
+            When an object value is found, if the object contains a toJSON
+            method, its toJSON method will be called and the result will be
+            stringified. A toJSON method does not serialize: it returns the
+            value represented by the name/value pair that should be serialized,
+            or undefined if nothing should be serialized. The toJSON method
+            will be passed the key associated with the value, and this will be
+            bound to the value
+
+            For example, this would serialize Dates as ISO strings.
+
+                Date.prototype.toJSON = function (key) {
+                    function f(n) {
+                        // Format integers to have at least two digits.
+                        return n < 10 ? '0' + n : n;
+                    }
+
+                    return this.getUTCFullYear()   + '-' +
+                         f(this.getUTCMonth() + 1) + '-' +
+                         f(this.getUTCDate())      + 'T' +
+                         f(this.getUTCHours())     + ':' +
+                         f(this.getUTCMinutes())   + ':' +
+                         f(this.getUTCSeconds())   + 'Z';
+                };
+
+            You can provide an optional replacer method. It will be passed the
+            key and value of each member, with this bound to the containing
+            object. The value that is returned from your method will be
+            serialized. If your method returns undefined, then the member will
+            be excluded from the serialization.
+
+            If the replacer parameter is an array of strings, then it will be
+            used to select the members to be serialized. It filters the results
+            such that only members with keys listed in the replacer array are
+            stringified.
+
+            Values that do not have JSON representations, such as undefined or
+            functions, will not be serialized. Such values in objects will be
+            dropped; in arrays they will be replaced with null. You can use
+            a replacer function to replace those with JSON values.
+            JSON.stringify(undefined) returns undefined.
+
+            The optional space parameter produces a stringification of the
+            value that is filled with line breaks and indentation to make it
+            easier to read.
+
+            If the space parameter is a non-empty string, then that string will
+            be used for indentation. If the space parameter is a number, then
+            the indentation will be that many spaces.
+
+            Example:
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}]);
+            // text is '["e",{"pluribus":"unum"}]'
+
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
+            // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
+
+            text = JSON.stringify([new Date()], function (key, value) {
+                return this[key] instanceof Date ?
+                    'Date(' + this[key] + ')' : value;
+            });
+            // text is '["Date(---current time---)"]'
+
+
+        JSON.parse(text, reviver)
+            This method parses a JSON text to produce an object or array.
+            It can throw a SyntaxError exception.
+
+            The optional reviver parameter is a function that can filter and
+            transform the results. It receives each of the keys and values,
+            and its return value is used instead of the original value.
+            If it returns what it received, then the structure is not modified.
+            If it returns undefined then the member is deleted.
+
+            Example:
+
+            // Parse the text. Values that look like ISO date strings will
+            // be converted to Date objects.
+
+            myData = JSON.parse(text, function (key, value) {
+                var a;
+                if (typeof value === 'string') {
+                    a =
+/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
+                    if (a) {
+                        return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+                            +a[5], +a[6]));
+                    }
+                }
+                return value;
+            });
+
+            myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
+                var d;
+                if (typeof value === 'string' &&
+                        value.slice(0, 5) === 'Date(' &&
+                        value.slice(-1) === ')') {
+                    d = new Date(value.slice(5, -1));
+                    if (d) {
+                        return d;
+                    }
+                }
+                return value;
+            });
+
+
+    This is a reference implementation. You are free to copy, modify, or
+    redistribute.
+*/
+
+/*jslint evil: true, strict: false */
+
+/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
+    call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
+    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
+    lastIndex, length, parse, prototype, push, replace, slice, stringify,
+    test, toJSON, toString, valueOf
+*/
+
+
+// Create a JSON object only if one does not already exist. We create the
+// methods in a closure to avoid creating global variables.
+
+if (!this.JSON) {
+    this.JSON = {};
+}
+
+(function () {
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+
+    if (typeof Date.prototype.toJSON !== 'function') {
+
+        Date.prototype.toJSON = function (key) {
+
+            return isFinite(this.valueOf()) ?
+                   this.getUTCFullYear()   + '-' +
+                 f(this.getUTCMonth() + 1) + '-' +
+                 f(this.getUTCDate())      + 'T' +
+                 f(this.getUTCHours())     + ':' +
+                 f(this.getUTCMinutes())   + ':' +
+                 f(this.getUTCSeconds())   + 'Z' : null;
+        };
+
+        String.prototype.toJSON =
+        Number.prototype.toJSON =
+        Boolean.prototype.toJSON = function (key) {
+            return this.valueOf();
+        };
+    }
+
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        escapable.lastIndex = 0;
+        return escapable.test(string) ?
+            '"' + string.replace(escapable, function (a) {
+                var c = meta[a];
+                return typeof c === 'string' ? c :
+                    '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+            }) + '"' :
+            '"' + string + '"';
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === 'object' &&
+                typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+        case 'string':
+            return quote(value);
+
+        case 'number':
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+            return isFinite(value) ? String(value) : 'null';
+
+        case 'boolean':
+        case 'null':
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce 'null'. The case is included here in
+// the remote chance that this gets fixed someday.
+
+            return String(value);
+
+// If the type is 'object', we might be dealing with an object or an array or
+// null.
+
+        case 'object':
+
+// Due to a specification blunder in ECMAScript, typeof null is 'object',
+// so watch out for that case.
+
+            if (!value) {
+                return 'null';
+            }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+            gap += indent;
+            partial = [];
+
+// Is the value an array?
+
+            if (Object.prototype.toString.apply(value) === '[object Array]') {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || 'null';
+                }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                v = partial.length === 0 ? '[]' :
+                    gap ? '[\n' + gap +
+                            partial.join(',\n' + gap) + '\n' +
+                                mind + ']' :
+                          '[' + partial.join(',') + ']';
+                gap = mind;
+                return v;
+            }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+            if (rep && typeof rep === 'object') {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    k = rep[i];
+                    if (typeof k === 'string') {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                for (k in value) {
+                    if (Object.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+            v = partial.length === 0 ? '{}' :
+                gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' +
+                        mind + '}' : '{' + partial.join(',') + '}';
+            gap = mind;
+            return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = '';
+            indent = '';
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === 'string') {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                    (typeof replacer !== 'object' ||
+                     typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+
+// Make a fake root object containing our value under the key of ''.
+// Return the result of stringifying the value.
+
+            return str('', {'': value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            text = String(text);
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with '()' and 'new'
+// because they can cause invocation, and '=' because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
+// replace all simple value tokens with ']' characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or ']' or
+// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
+
+            if (/^[\],:{}\s]*$/.
+test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
+replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
+replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval('(' + text + ')');
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return typeof reviver === 'function' ?
+                    walk({'': j}, '') : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());
diff --git a/js/lib/prettify/lang-apollo.js b/js/lib/prettify/lang-apollo.js
new file mode 100644
index 0000000..7098baf
--- /dev/null
+++ b/js/lib/prettify/lang-apollo.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\n\r]*/,null,"#"],["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
+null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[ES]?BANK=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^'(?:-*(?:\w|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?)?/],["pln",/^-*(?:[!-z]|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?/],["pun",/^[^\w\t\n\r "'-);\\\xa0]+/]]),["apollo","agc","aea"]);
diff --git a/js/lib/prettify/lang-clj.js b/js/lib/prettify/lang-clj.js
new file mode 100644
index 0000000..542a220
--- /dev/null
+++ b/js/lib/prettify/lang-clj.js
@@ -0,0 +1,18 @@
+/*
+ Copyright (C) 2011 Google Inc.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+var a=null;
+PR.registerLangHandler(PR.createSimpleLexer([["opn",/^[([{]+/,a,"([{"],["clo",/^[)\]}]+/,a,")]}"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:def|if|do|let|quote|var|fn|loop|recur|throw|try|monitor-enter|monitor-exit|defmacro|defn|defn-|macroexpand|macroexpand-1|for|doseq|dosync|dotimes|and|or|when|not|assert|doto|proxy|defstruct|first|rest|cons|defprotocol|deftype|defrecord|reify|defmulti|defmethod|meta|with-meta|ns|in-ns|create-ns|import|intern|refer|alias|namespace|resolve|ref|deref|refset|new|set!|memfn|to-array|into-array|aset|gen-class|reduce|map|filter|find|nil?|empty?|hash-map|hash-set|vec|vector|seq|flatten|reverse|assoc|dissoc|list|list?|disj|get|union|difference|intersection|extend|extend-type|extend-protocol|prn)\b/,a],
+["typ",/^:[\dA-Za-z-]+/]]),["clj"]);
diff --git a/js/lib/prettify/lang-css.js b/js/lib/prettify/lang-css.js
new file mode 100644
index 0000000..041e1f5
--- /dev/null
+++ b/js/lib/prettify/lang-css.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n"]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com",
+/^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);
diff --git a/js/lib/prettify/lang-go.js b/js/lib/prettify/lang-go.js
new file mode 100644
index 0000000..fc18dc0
--- /dev/null
+++ b/js/lib/prettify/lang-go.js
@@ -0,0 +1 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"],["pln",/^(?:"(?:[^"\\]|\\[\S\s])*(?:"|$)|'(?:[^'\\]|\\[\S\s])+(?:'|$)|`[^`]*(?:`|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\n\r]*|\/\*[\S\s]*?\*\/)/],["pln",/^(?:[^"'/`]|\/(?![*/]))+/]]),["go"]);
diff --git a/js/lib/prettify/lang-hs.js b/js/lib/prettify/lang-hs.js
new file mode 100644
index 0000000..9d77b08
--- /dev/null
+++ b/js/lib/prettify/lang-hs.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t-\r ]+/,null,"\t\n\r "],["str",/^"(?:[^\n\f\r"\\]|\\[\S\s])*(?:"|$)/,null,'"'],["str",/^'(?:[^\n\f\r'\\]|\\[^&])'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:--+[^\n\f\r]*|{-(?:[^-]|-+[^}-])*-})/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^\d'A-Za-z]|$)/,
+null],["pln",/^(?:[A-Z][\w']*\.)*[A-Za-z][\w']*/],["pun",/^[^\d\t-\r "'A-Za-z]+/]]),["hs"]);
diff --git a/js/lib/prettify/lang-lisp.js b/js/lib/prettify/lang-lisp.js
new file mode 100644
index 0000000..02a30e8
--- /dev/null
+++ b/js/lib/prettify/lang-lisp.js
@@ -0,0 +1,3 @@
+var a=null;
+PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(+/,a,"("],["clo",/^\)+/,a,")"],["com",/^;[^\n\r]*/,a,";"],["pln",/^[\t\n\r \xa0]+/,a,"\t\n\r \xa0"],["str",/^"(?:[^"\\]|\\[\S\s])*(?:"|$)/,a,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,a],
+["lit",/^[+-]?(?:[#0]x[\da-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[de][+-]?\d+)?)/i],["lit",/^'(?:-*(?:\w|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?)?/],["pln",/^-*(?:[_a-z]|\\[!-~])(?:[\w-]*|\\[!-~])[!=?]?/i],["pun",/^[^\w\t\n\r "'-);\\\xa0]+/]]),["cl","el","lisp","scm"]);
diff --git a/js/lib/prettify/lang-lua.js b/js/lib/prettify/lang-lua.js
new file mode 100644
index 0000000..e83a3c4
--- /dev/null
+++ b/js/lib/prettify/lang-lua.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"],["str",/^(?:"(?:[^"\\]|\\[\S\s])*(?:"|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\S\s]*?(?:]\1]|$)|[^\n\r]*)/],["str",/^\[(=*)\[[\S\s]*?(?:]\1]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:\.\d+|\d+(?:\.\d*)?)(?:e[+-]?\d+)?)/i],
+["pln",/^[_a-z]\w*/i],["pun",/^[^\w\t\n\r \xa0][^\w\t\n\r "'+=\xa0-]*/]]),["lua"]);
diff --git a/js/lib/prettify/lang-ml.js b/js/lib/prettify/lang-ml.js
new file mode 100644
index 0000000..6df02d7
--- /dev/null
+++ b/js/lib/prettify/lang-ml.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"],["com",/^#(?:if[\t\n\r \xa0]+(?:[$_a-z][\w']*|``[^\t\n\r`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:"(?:[^"\\]|\\[\S\s])*(?:"|$)|'(?:[^'\\]|\\[\S\s])(?:'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\n\r]*|\(\*[\S\s]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
+["lit",/^[+-]?(?:0x[\da-f]+|(?:\.\d+|\d+(?:\.\d*)?)(?:e[+-]?\d+)?)/i],["pln",/^(?:[_a-z][\w']*[!#?]?|``[^\t\n\r`]*(?:``|$))/i],["pun",/^[^\w\t\n\r "'\xa0]+/]]),["fs","ml"]);
diff --git a/js/lib/prettify/lang-n.js b/js/lib/prettify/lang-n.js
new file mode 100644
index 0000000..6c2e85b
--- /dev/null
+++ b/js/lib/prettify/lang-n.js
@@ -0,0 +1,4 @@
+var a=null;
+PR.registerLangHandler(PR.createSimpleLexer([["str",/^(?:'(?:[^\n\r'\\]|\\.)*'|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,a,'"'],["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,a,"#"],["pln",/^\s+/,a," \r\n\t\xa0"]],[["str",/^@"(?:[^"]|"")*(?:"|$)/,a],["str",/^<#[^#>]*(?:#>|$)/,a],["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,a],["com",/^\/\/[^\n\r]*/,a],["com",/^\/\*[\S\s]*?(?:\*\/|$)/,
+a],["kwd",/^(?:abstract|and|as|base|catch|class|def|delegate|enum|event|extern|false|finally|fun|implements|interface|internal|is|macro|match|matches|module|mutable|namespace|new|null|out|override|params|partial|private|protected|public|ref|sealed|static|struct|syntax|this|throw|true|try|type|typeof|using|variant|virtual|volatile|when|where|with|assert|assert2|async|break|checked|continue|do|else|ensures|for|foreach|if|late|lock|new|nolate|otherwise|regexp|repeat|requires|return|surroundwith|unchecked|unless|using|while|yield)\b/,
+a],["typ",/^(?:array|bool|byte|char|decimal|double|float|int|list|long|object|sbyte|short|string|ulong|uint|ufloat|ulong|ushort|void)\b/,a],["lit",/^@[$_a-z][\w$@]*/i,a],["typ",/^@[A-Z]+[a-z][\w$@]*/,a],["pln",/^'?[$_a-z][\w$@]*/i,a],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,a,"0123456789"],["pun",/^.[^\s\w"-$'./@`]*/,a]]),["n","nemerle"]);
diff --git a/js/lib/prettify/lang-proto.js b/js/lib/prettify/lang-proto.js
new file mode 100644
index 0000000..f006ad8
--- /dev/null
+++ b/js/lib/prettify/lang-proto.js
@@ -0,0 +1 @@
+PR.registerLangHandler(PR.sourceDecorator({keywords:"bytes,default,double,enum,extend,extensions,false,group,import,max,message,option,optional,package,repeated,required,returns,rpc,service,syntax,to,true",types:/^(bool|(double|s?fixed|[su]?int)(32|64)|float|string)\b/,cStyleComments:!0}),["proto"]);
diff --git a/js/lib/prettify/lang-scala.js b/js/lib/prettify/lang-scala.js
new file mode 100644
index 0000000..60d034d
--- /dev/null
+++ b/js/lib/prettify/lang-scala.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"],["str",/^"(?:""(?:""?(?!")|[^"\\]|\\.)*"{0,3}|(?:[^\n\r"\\]|\\.)*"?)/,null,'"'],["lit",/^`(?:[^\n\r\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&(--:-@[-^{-~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\n\r'\\]|\\(?:'|[^\n\r']+))'/],["lit",/^'[$A-Z_a-z][\w$]*(?![\w$'])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
+["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:0(?:[0-7]+|x[\da-f]+)l?|(?:0|[1-9]\d*)(?:(?:\.\d+)?(?:e[+-]?\d+)?f?|l?)|\\.\d+(?:e[+-]?\d+)?f?)/i],["typ",/^[$_]*[A-Z][\d$A-Z_]*[a-z][\w$]*/],["pln",/^[$A-Z_a-z][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"]);
diff --git a/js/lib/prettify/lang-sql.js b/js/lib/prettify/lang-sql.js
new file mode 100644
index 0000000..da705b0
--- /dev/null
+++ b/js/lib/prettify/lang-sql.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"],["str",/^(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\n\r]*|\/\*[\S\s]*?(?:\*\/|$))/],["kwd",/^(?:add|all|alter|and|any|as|asc|authorization|backup|begin|between|break|browse|bulk|by|cascade|case|check|checkpoint|close|clustered|coalesce|collate|column|commit|compute|constraint|contains|containstable|continue|convert|create|cross|current|current_date|current_time|current_timestamp|current_user|cursor|database|dbcc|deallocate|declare|default|delete|deny|desc|disk|distinct|distributed|double|drop|dummy|dump|else|end|errlvl|escape|except|exec|execute|exists|exit|fetch|file|fillfactor|for|foreign|freetext|freetexttable|from|full|function|goto|grant|group|having|holdlock|identity|identitycol|identity_insert|if|in|index|inner|insert|intersect|into|is|join|key|kill|left|like|lineno|load|match|merge|national|nocheck|nonclustered|not|null|nullif|of|off|offsets|on|open|opendatasource|openquery|openrowset|openxml|option|or|order|outer|over|percent|plan|precision|primary|print|proc|procedure|public|raiserror|read|readtext|reconfigure|references|replication|restore|restrict|return|revoke|right|rollback|rowcount|rowguidcol|rule|save|schema|select|session_user|set|setuser|shutdown|some|statistics|system_user|table|textsize|then|to|top|tran|transaction|trigger|truncate|tsequal|union|unique|update|updatetext|use|user|using|values|varying|view|waitfor|when|where|while|with|writetext)(?=[^\w-]|$)/i,
+null],["lit",/^[+-]?(?:0x[\da-f]+|(?:\.\d+|\d+(?:\.\d*)?)(?:e[+-]?\d+)?)/i],["pln",/^[_a-z][\w-]*/i],["pun",/^[^\w\t\n\r "'\xa0][^\w\t\n\r "'+\xa0-]*/]]),["sql"]);
diff --git a/js/lib/prettify/lang-tex.js b/js/lib/prettify/lang-tex.js
new file mode 100644
index 0000000..ce96fbb
--- /dev/null
+++ b/js/lib/prettify/lang-tex.js
@@ -0,0 +1 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"],["com",/^%[^\n\r]*/,null,"%"]],[["kwd",/^\\[@-Za-z]+/],["kwd",/^\\./],["typ",/^[$&]/],["lit",/[+-]?(?:\.\d+|\d+(?:\.\d*)?)(cm|em|ex|in|pc|pt|bp|mm)/i],["pun",/^[()=[\]{}]+/]]),["latex","tex"]);
diff --git a/js/lib/prettify/lang-vb.js b/js/lib/prettify/lang-vb.js
new file mode 100644
index 0000000..07506b0
--- /dev/null
+++ b/js/lib/prettify/lang-vb.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0\u2028\u2029]+/,null,"\t\n\r Â\xa0

"],["str",/^(?:["\u201c\u201d](?:[^"\u201c\u201d]|["\u201c\u201d]{2})(?:["\u201c\u201d]c|$)|["\u201c\u201d](?:[^"\u201c\u201d]|["\u201c\u201d]{2})*(?:["\u201c\u201d]|$))/i,null,'"“â€�'],["com",/^['\u2018\u2019].*/,null,"'‘’"]],[["kwd",/^(?:addhandler|addressof|alias|and|andalso|ansi|as|assembly|auto|boolean|byref|byte|byval|call|case|catch|cbool|cbyte|cchar|cdate|cdbl|cdec|char|cint|class|clng|cobj|const|cshort|csng|cstr|ctype|date|decimal|declare|default|delegate|dim|directcast|do|double|each|else|elseif|end|endif|enum|erase|error|event|exit|finally|for|friend|function|get|gettype|gosub|goto|handles|if|implements|imports|in|inherits|integer|interface|is|let|lib|like|long|loop|me|mod|module|mustinherit|mustoverride|mybase|myclass|namespace|new|next|not|notinheritable|notoverridable|object|on|option|optional|or|orelse|overloads|overridable|overrides|paramarray|preserve|private|property|protected|public|raiseevent|readonly|redim|removehandler|resume|return|select|set|shadows|shared|short|single|static|step|stop|string|structure|sub|synclock|then|throw|to|try|typeof|unicode|until|variant|wend|when|while|with|withevents|writeonly|xor|endif|gosub|let|variant|wend)\b/i,
+null],["com",/^rem.*/i],["lit",/^(?:true\b|false\b|nothing\b|\d+(?:e[+-]?\d+[dfr]?|[dfilrs])?|(?:&h[\da-f]+|&o[0-7]+)[ils]?|\d*\.\d+(?:e[+-]?\d+)?[dfr]?|#\s+(?:\d+[/-]\d+[/-]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:am|pm))?)?|\d+:\d+(?::\d+)?(\s*(?:am|pm))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*])/i],["pun",/^[^\w\t\n\r "'[\]\xa0\u2018\u2019\u201c\u201d\u2028\u2029]+/],["pun",/^(?:\[|])/]]),["vb","vbs"]);
diff --git a/js/lib/prettify/lang-vhdl.js b/js/lib/prettify/lang-vhdl.js
new file mode 100644
index 0000000..128b5b6
--- /dev/null
+++ b/js/lib/prettify/lang-vhdl.js
@@ -0,0 +1,3 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xa0]+/,null,"\t\n\r Â\xa0"]],[["str",/^(?:[box]?"(?:[^"]|"")*"|'.')/i],["com",/^--[^\n\r]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
+null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^'(?:active|ascending|base|delayed|driving|driving_value|event|high|image|instance_name|last_active|last_event|last_value|left|leftof|length|low|path_name|pos|pred|quiet|range|reverse_range|right|rightof|simple_name|stable|succ|transaction|val|value)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w.\\]+#(?:[+-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:e[+-]?\d+(?:_\d+)*)?)/i],
+["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r "'\xa0][^\w\t\n\r "'\xa0-]*/]]),["vhdl","vhd"]);
diff --git a/js/lib/prettify/lang-wiki.js b/js/lib/prettify/lang-wiki.js
new file mode 100644
index 0000000..9b0b448
--- /dev/null
+++ b/js/lib/prettify/lang-wiki.js
@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\d\t a-gi-z\xa0]+/,null,"\t Â\xa0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[*=[\]^~]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^[A-Z][a-z][\da-z]+[A-Z][a-z][^\W_]+\b/],["lang-",/^{{{([\S\s]+?)}}}/],["lang-",/^`([^\n\r`]+)`/],["str",/^https?:\/\/[^\s#/?]*(?:\/[^\s#?]*)?(?:\?[^\s#]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\S\s])[^\n\r#*=A-[^`h{~]*/]]),["wiki"]);
+PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"]);
diff --git a/js/lib/prettify/lang-xq.js b/js/lib/prettify/lang-xq.js
new file mode 100644
index 0000000..e323ae3
--- /dev/null
+++ b/js/lib/prettify/lang-xq.js
@@ -0,0 +1,3 @@
+PR.registerLangHandler(PR.createSimpleLexer([["var pln",/^\$[\w-]+/,null,"$"]],[["pln",/^[\s=][<>][\s=]/],["lit",/^@[\w-]+/],["tag",/^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["com",/^\(:[\S\s]*?:\)/],["pln",/^[(),/;[\]{}]$/],["str",/^(?:"(?:[^"\\{]|\\[\S\s])*(?:"|$)|'(?:[^'\\{]|\\[\S\s])*(?:'|$))/,null,"\"'"],["kwd",/^(?:xquery|where|version|variable|union|typeswitch|treat|to|then|text|stable|sortby|some|self|schema|satisfies|returns|return|ref|processing-instruction|preceding-sibling|preceding|precedes|parent|only|of|node|namespace|module|let|item|intersect|instance|in|import|if|function|for|follows|following-sibling|following|external|except|every|else|element|descending|descendant-or-self|descendant|define|default|declare|comment|child|cast|case|before|attribute|assert|ascending|as|ancestor-or-self|ancestor|after|eq|order|by|or|and|schema-element|document-node|node|at)\b/],
+["typ",/^(?:xs:yearMonthDuration|xs:unsignedLong|xs:time|xs:string|xs:short|xs:QName|xs:Name|xs:long|xs:integer|xs:int|xs:gYearMonth|xs:gYear|xs:gMonthDay|xs:gDay|xs:float|xs:duration|xs:double|xs:decimal|xs:dayTimeDuration|xs:dateTime|xs:date|xs:byte|xs:boolean|xs:anyURI|xf:yearMonthDuration)\b/,null],["fun pln",/^(?:xp:dereference|xinc:node-expand|xinc:link-references|xinc:link-expand|xhtml:restructure|xhtml:clean|xhtml:add-lists|xdmp:zip-manifest|xdmp:zip-get|xdmp:zip-create|xdmp:xquery-version|xdmp:word-convert|xdmp:with-namespaces|xdmp:version|xdmp:value|xdmp:user-roles|xdmp:user-last-login|xdmp:user|xdmp:url-encode|xdmp:url-decode|xdmp:uri-is-file|xdmp:uri-format|xdmp:uri-content-type|xdmp:unquote|xdmp:unpath|xdmp:triggers-database|xdmp:trace|xdmp:to-json|xdmp:tidy|xdmp:subbinary|xdmp:strftime|xdmp:spawn-in|xdmp:spawn|xdmp:sleep|xdmp:shutdown|xdmp:set-session-field|xdmp:set-response-encoding|xdmp:set-response-content-type|xdmp:set-response-code|xdmp:set-request-time-limit|xdmp:set|xdmp:servers|xdmp:server-status|xdmp:server-name|xdmp:server|xdmp:security-database|xdmp:security-assert|xdmp:schema-database|xdmp:save|xdmp:role-roles|xdmp:role|xdmp:rethrow|xdmp:restart|xdmp:request-timestamp|xdmp:request-status|xdmp:request-cancel|xdmp:request|xdmp:redirect-response|xdmp:random|xdmp:quote|xdmp:query-trace|xdmp:query-meters|xdmp:product-edition|xdmp:privilege-roles|xdmp:privilege|xdmp:pretty-print|xdmp:powerpoint-convert|xdmp:platform|xdmp:permission|xdmp:pdf-convert|xdmp:path|xdmp:octal-to-integer|xdmp:node-uri|xdmp:node-replace|xdmp:node-kind|xdmp:node-insert-child|xdmp:node-insert-before|xdmp:node-insert-after|xdmp:node-delete|xdmp:node-database|xdmp:mul64|xdmp:modules-root|xdmp:modules-database|xdmp:merging|xdmp:merge-cancel|xdmp:merge|xdmp:md5|xdmp:logout|xdmp:login|xdmp:log-level|xdmp:log|xdmp:lock-release|xdmp:lock-acquire|xdmp:load|xdmp:invoke-in|xdmp:invoke|xdmp:integer-to-octal|xdmp:integer-to-hex|xdmp:http-put|xdmp:http-post|xdmp:http-options|xdmp:http-head|xdmp:http-get|xdmp:http-delete|xdmp:hosts|xdmp:host-status|xdmp:host-name|xdmp:host|xdmp:hex-to-integer|xdmp:hash64|xdmp:hash32|xdmp:has-privilege|xdmp:groups|xdmp:group-serves|xdmp:group-servers|xdmp:group-name|xdmp:group-hosts|xdmp:group|xdmp:get-session-field-names|xdmp:get-session-field|xdmp:get-response-encoding|xdmp:get-response-code|xdmp:get-request-username|xdmp:get-request-user|xdmp:get-request-url|xdmp:get-request-protocol|xdmp:get-request-path|xdmp:get-request-method|xdmp:get-request-header-names|xdmp:get-request-header|xdmp:get-request-field-names|xdmp:get-request-field-filename|xdmp:get-request-field-content-type|xdmp:get-request-field|xdmp:get-request-client-certificate|xdmp:get-request-client-address|xdmp:get-request-body|xdmp:get-current-user|xdmp:get-current-roles|xdmp:get|xdmp:function-name|xdmp:function-module|xdmp:function|xdmp:from-json|xdmp:forests|xdmp:forest-status|xdmp:forest-restore|xdmp:forest-restart|xdmp:forest-name|xdmp:forest-delete|xdmp:forest-databases|xdmp:forest-counts|xdmp:forest-clear|xdmp:forest-backup|xdmp:forest|xdmp:filesystem-file|xdmp:filesystem-directory|xdmp:exists|xdmp:excel-convert|xdmp:eval-in|xdmp:eval|xdmp:estimate|xdmp:email|xdmp:element-content-type|xdmp:elapsed-time|xdmp:document-set-quality|xdmp:document-set-property|xdmp:document-set-properties|xdmp:document-set-permissions|xdmp:document-set-collections|xdmp:document-remove-properties|xdmp:document-remove-permissions|xdmp:document-remove-collections|xdmp:document-properties|xdmp:document-locks|xdmp:document-load|xdmp:document-insert|xdmp:document-get-quality|xdmp:document-get-properties|xdmp:document-get-permissions|xdmp:document-get-collections|xdmp:document-get|xdmp:document-forest|xdmp:document-delete|xdmp:document-add-properties|xdmp:document-add-permissions|xdmp:document-add-collections|xdmp:directory-properties|xdmp:directory-locks|xdmp:directory-delete|xdmp:directory-create|xdmp:directory|xdmp:diacritic-less|xdmp:describe|xdmp:default-permissions|xdmp:default-collections|xdmp:databases|xdmp:database-restore-validate|xdmp:database-restore-status|xdmp:database-restore-cancel|xdmp:database-restore|xdmp:database-name|xdmp:database-forests|xdmp:database-backup-validate|xdmp:database-backup-status|xdmp:database-backup-purge|xdmp:database-backup-cancel|xdmp:database-backup|xdmp:database|xdmp:collection-properties|xdmp:collection-locks|xdmp:collection-delete|xdmp:collation-canonical-uri|xdmp:castable-as|xdmp:can-grant-roles|xdmp:base64-encode|xdmp:base64-decode|xdmp:architecture|xdmp:apply|xdmp:amp-roles|xdmp:amp|xdmp:add64|xdmp:add-response-header|xdmp:access|trgr:trigger-set-recursive|trgr:trigger-set-permissions|trgr:trigger-set-name|trgr:trigger-set-module|trgr:trigger-set-event|trgr:trigger-set-description|trgr:trigger-remove-permissions|trgr:trigger-module|trgr:trigger-get-permissions|trgr:trigger-enable|trgr:trigger-disable|trgr:trigger-database-online-event|trgr:trigger-data-event|trgr:trigger-add-permissions|trgr:remove-trigger|trgr:property-content|trgr:pre-commit|trgr:post-commit|trgr:get-trigger-by-id|trgr:get-trigger|trgr:document-scope|trgr:document-content|trgr:directory-scope|trgr:create-trigger|trgr:collection-scope|trgr:any-property-content|thsr:set-entry|thsr:remove-term|thsr:remove-synonym|thsr:remove-entry|thsr:query-lookup|thsr:lookup|thsr:load|thsr:insert|thsr:expand|thsr:add-synonym|spell:suggest-detailed|spell:suggest|spell:remove-word|spell:make-dictionary|spell:load|spell:levenshtein-distance|spell:is-correct|spell:insert|spell:double-metaphone|spell:add-word|sec:users-collection|sec:user-set-roles|sec:user-set-password|sec:user-set-name|sec:user-set-description|sec:user-set-default-permissions|sec:user-set-default-collections|sec:user-remove-roles|sec:user-privileges|sec:user-get-roles|sec:user-get-description|sec:user-get-default-permissions|sec:user-get-default-collections|sec:user-doc-permissions|sec:user-doc-collections|sec:user-add-roles|sec:unprotect-collection|sec:uid-for-name|sec:set-realm|sec:security-version|sec:security-namespace|sec:security-installed|sec:security-collection|sec:roles-collection|sec:role-set-roles|sec:role-set-name|sec:role-set-description|sec:role-set-default-permissions|sec:role-set-default-collections|sec:role-remove-roles|sec:role-privileges|sec:role-get-roles|sec:role-get-description|sec:role-get-default-permissions|sec:role-get-default-collections|sec:role-doc-permissions|sec:role-doc-collections|sec:role-add-roles|sec:remove-user|sec:remove-role-from-users|sec:remove-role-from-role|sec:remove-role-from-privileges|sec:remove-role-from-amps|sec:remove-role|sec:remove-privilege|sec:remove-amp|sec:protect-collection|sec:privileges-collection|sec:privilege-set-roles|sec:privilege-set-name|sec:privilege-remove-roles|sec:privilege-get-roles|sec:privilege-add-roles|sec:priv-doc-permissions|sec:priv-doc-collections|sec:get-user-names|sec:get-unique-elem-id|sec:get-role-names|sec:get-role-ids|sec:get-privilege|sec:get-distinct-permissions|sec:get-collection|sec:get-amp|sec:create-user-with-role|sec:create-user|sec:create-role|sec:create-privilege|sec:create-amp|sec:collections-collection|sec:collection-set-permissions|sec:collection-remove-permissions|sec:collection-get-permissions|sec:collection-add-permissions|sec:check-admin|sec:amps-collection|sec:amp-set-roles|sec:amp-remove-roles|sec:amp-get-roles|sec:amp-doc-permissions|sec:amp-doc-collections|sec:amp-add-roles|search:unparse|search:suggest|search:snippet|search:search|search:resolve-nodes|search:resolve|search:remove-constraint|search:parse|search:get-default-options|search:estimate|search:check-options|prof:value|prof:reset|prof:report|prof:invoke|prof:eval|prof:enable|prof:disable|prof:allowed|ppt:clean|pki:template-set-request|pki:template-set-name|pki:template-set-key-type|pki:template-set-key-options|pki:template-set-description|pki:template-in-use|pki:template-get-version|pki:template-get-request|pki:template-get-name|pki:template-get-key-type|pki:template-get-key-options|pki:template-get-id|pki:template-get-description|pki:need-certificate|pki:is-temporary|pki:insert-trusted-certificates|pki:insert-template|pki:insert-signed-certificates|pki:insert-certificate-revocation-list|pki:get-trusted-certificate-ids|pki:get-template-ids|pki:get-template-certificate-authority|pki:get-template-by-name|pki:get-template|pki:get-pending-certificate-requests-xml|pki:get-pending-certificate-requests-pem|pki:get-pending-certificate-request|pki:get-certificates-for-template-xml|pki:get-certificates-for-template|pki:get-certificates|pki:get-certificate-xml|pki:get-certificate-pem|pki:get-certificate|pki:generate-temporary-certificate-if-necessary|pki:generate-temporary-certificate|pki:generate-template-certificate-authority|pki:generate-certificate-request|pki:delete-template|pki:delete-certificate|pki:create-template|pdf:make-toc|pdf:insert-toc-headers|pdf:get-toc|pdf:clean|p:status-transition|p:state-transition|p:remove|p:pipelines|p:insert|p:get-by-id|p:get|p:execute|p:create|p:condition|p:collection|p:action|ooxml:runs-merge|ooxml:package-uris|ooxml:package-parts-insert|ooxml:package-parts|msword:clean|mcgm:polygon|mcgm:point|mcgm:geospatial-query-from-elements|mcgm:geospatial-query|mcgm:circle|math:tanh|math:tan|math:sqrt|math:sinh|math:sin|math:pow|math:modf|math:log10|math:log|math:ldexp|math:frexp|math:fmod|math:floor|math:fabs|math:exp|math:cosh|math:cos|math:ceil|math:atan2|math:atan|math:asin|math:acos|map:put|map:map|map:keys|map:get|map:delete|map:count|map:clear|lnk:to|lnk:remove|lnk:insert|lnk:get|lnk:from|lnk:create|kml:polygon|kml:point|kml:interior-polygon|kml:geospatial-query-from-elements|kml:geospatial-query|kml:circle|kml:box|gml:polygon|gml:point|gml:interior-polygon|gml:geospatial-query-from-elements|gml:geospatial-query|gml:circle|gml:box|georss:point|georss:geospatial-query|georss:circle|geo:polygon|geo:point|geo:interior-polygon|geo:geospatial-query-from-elements|geo:geospatial-query|geo:circle|geo:box|fn:zero-or-one|fn:years-from-duration|fn:year-from-dateTime|fn:year-from-date|fn:upper-case|fn:unordered|fn:true|fn:translate|fn:trace|fn:tokenize|fn:timezone-from-time|fn:timezone-from-dateTime|fn:timezone-from-date|fn:sum|fn:subtract-dateTimes-yielding-yearMonthDuration|fn:subtract-dateTimes-yielding-dayTimeDuration|fn:substring-before|fn:substring-after|fn:substring|fn:subsequence|fn:string-to-codepoints|fn:string-pad|fn:string-length|fn:string-join|fn:string|fn:static-base-uri|fn:starts-with|fn:seconds-from-time|fn:seconds-from-duration|fn:seconds-from-dateTime|fn:round-half-to-even|fn:round|fn:root|fn:reverse|fn:resolve-uri|fn:resolve-QName|fn:replace|fn:remove|fn:QName|fn:prefix-from-QName|fn:position|fn:one-or-more|fn:number|fn:not|fn:normalize-unicode|fn:normalize-space|fn:node-name|fn:node-kind|fn:nilled|fn:namespace-uri-from-QName|fn:namespace-uri-for-prefix|fn:namespace-uri|fn:name|fn:months-from-duration|fn:month-from-dateTime|fn:month-from-date|fn:minutes-from-time|fn:minutes-from-duration|fn:minutes-from-dateTime|fn:min|fn:max|fn:matches|fn:lower-case|fn:local-name-from-QName|fn:local-name|fn:last|fn:lang|fn:iri-to-uri|fn:insert-before|fn:index-of|fn:in-scope-prefixes|fn:implicit-timezone|fn:idref|fn:id|fn:hours-from-time|fn:hours-from-duration|fn:hours-from-dateTime|fn:floor|fn:false|fn:expanded-QName|fn:exists|fn:exactly-one|fn:escape-uri|fn:escape-html-uri|fn:error|fn:ends-with|fn:encode-for-uri|fn:empty|fn:document-uri|fn:doc-available|fn:doc|fn:distinct-values|fn:distinct-nodes|fn:default-collation|fn:deep-equal|fn:days-from-duration|fn:day-from-dateTime|fn:day-from-date|fn:data|fn:current-time|fn:current-dateTime|fn:current-date|fn:count|fn:contains|fn:concat|fn:compare|fn:collection|fn:codepoints-to-string|fn:codepoint-equal|fn:ceiling|fn:boolean|fn:base-uri|fn:avg|fn:adjust-time-to-timezone|fn:adjust-dateTime-to-timezone|fn:adjust-date-to-timezone|fn:abs|feed:unsubscribe|feed:subscription|feed:subscribe|feed:request|feed:item|feed:description|excel:clean|entity:enrich|dom:set-pipelines|dom:set-permissions|dom:set-name|dom:set-evaluation-context|dom:set-domain-scope|dom:set-description|dom:remove-pipeline|dom:remove-permissions|dom:remove|dom:get|dom:evaluation-context|dom:domains|dom:domain-scope|dom:create|dom:configuration-set-restart-user|dom:configuration-set-permissions|dom:configuration-set-evaluation-context|dom:configuration-set-default-domain|dom:configuration-get|dom:configuration-create|dom:collection|dom:add-pipeline|dom:add-permissions|dls:retention-rules|dls:retention-rule-remove|dls:retention-rule-insert|dls:retention-rule|dls:purge|dls:node-expand|dls:link-references|dls:link-expand|dls:documents-query|dls:document-versions-query|dls:document-version-uri|dls:document-version-query|dls:document-version-delete|dls:document-version-as-of|dls:document-version|dls:document-update|dls:document-unmanage|dls:document-set-quality|dls:document-set-property|dls:document-set-properties|dls:document-set-permissions|dls:document-set-collections|dls:document-retention-rules|dls:document-remove-properties|dls:document-remove-permissions|dls:document-remove-collections|dls:document-purge|dls:document-manage|dls:document-is-managed|dls:document-insert-and-manage|dls:document-include-query|dls:document-history|dls:document-get-permissions|dls:document-extract-part|dls:document-delete|dls:document-checkout-status|dls:document-checkout|dls:document-checkin|dls:document-add-properties|dls:document-add-permissions|dls:document-add-collections|dls:break-checkout|dls:author-query|dls:as-of-query|dbk:convert|dbg:wait|dbg:value|dbg:stopped|dbg:stop|dbg:step|dbg:status|dbg:stack|dbg:out|dbg:next|dbg:line|dbg:invoke|dbg:function|dbg:finish|dbg:expr|dbg:eval|dbg:disconnect|dbg:detach|dbg:continue|dbg:connect|dbg:clear|dbg:breakpoints|dbg:break|dbg:attached|dbg:attach|cvt:save-converted-documents|cvt:part-uri|cvt:destination-uri|cvt:basepath|cvt:basename|cts:words|cts:word-query-weight|cts:word-query-text|cts:word-query-options|cts:word-query|cts:word-match|cts:walk|cts:uris|cts:uri-match|cts:train|cts:tokenize|cts:thresholds|cts:stem|cts:similar-query-weight|cts:similar-query-nodes|cts:similar-query|cts:shortest-distance|cts:search|cts:score|cts:reverse-query-weight|cts:reverse-query-nodes|cts:reverse-query|cts:remainder|cts:registered-query-weight|cts:registered-query-options|cts:registered-query-ids|cts:registered-query|cts:register|cts:query|cts:quality|cts:properties-query-query|cts:properties-query|cts:polygon-vertices|cts:polygon|cts:point-longitude|cts:point-latitude|cts:point|cts:or-query-queries|cts:or-query|cts:not-query-weight|cts:not-query-query|cts:not-query|cts:near-query-weight|cts:near-query-queries|cts:near-query-options|cts:near-query-distance|cts:near-query|cts:highlight|cts:geospatial-co-occurrences|cts:frequency|cts:fitness|cts:field-words|cts:field-word-query-weight|cts:field-word-query-text|cts:field-word-query-options|cts:field-word-query-field-name|cts:field-word-query|cts:field-word-match|cts:entity-highlight|cts:element-words|cts:element-word-query-weight|cts:element-word-query-text|cts:element-word-query-options|cts:element-word-query-element-name|cts:element-word-query|cts:element-word-match|cts:element-values|cts:element-value-ranges|cts:element-value-query-weight|cts:element-value-query-text|cts:element-value-query-options|cts:element-value-query-element-name|cts:element-value-query|cts:element-value-match|cts:element-value-geospatial-co-occurrences|cts:element-value-co-occurrences|cts:element-range-query-weight|cts:element-range-query-value|cts:element-range-query-options|cts:element-range-query-operator|cts:element-range-query-element-name|cts:element-range-query|cts:element-query-query|cts:element-query-element-name|cts:element-query|cts:element-pair-geospatial-values|cts:element-pair-geospatial-value-match|cts:element-pair-geospatial-query-weight|cts:element-pair-geospatial-query-region|cts:element-pair-geospatial-query-options|cts:element-pair-geospatial-query-longitude-name|cts:element-pair-geospatial-query-latitude-name|cts:element-pair-geospatial-query-element-name|cts:element-pair-geospatial-query|cts:element-pair-geospatial-boxes|cts:element-geospatial-values|cts:element-geospatial-value-match|cts:element-geospatial-query-weight|cts:element-geospatial-query-region|cts:element-geospatial-query-options|cts:element-geospatial-query-element-name|cts:element-geospatial-query|cts:element-geospatial-boxes|cts:element-child-geospatial-values|cts:element-child-geospatial-value-match|cts:element-child-geospatial-query-weight|cts:element-child-geospatial-query-region|cts:element-child-geospatial-query-options|cts:element-child-geospatial-query-element-name|cts:element-child-geospatial-query-child-name|cts:element-child-geospatial-query|cts:element-child-geospatial-boxes|cts:element-attribute-words|cts:element-attribute-word-query-weight|cts:element-attribute-word-query-text|cts:element-attribute-word-query-options|cts:element-attribute-word-query-element-name|cts:element-attribute-word-query-attribute-name|cts:element-attribute-word-query|cts:element-attribute-word-match|cts:element-attribute-values|cts:element-attribute-value-ranges|cts:element-attribute-value-query-weight|cts:element-attribute-value-query-text|cts:element-attribute-value-query-options|cts:element-attribute-value-query-element-name|cts:element-attribute-value-query-attribute-name|cts:element-attribute-value-query|cts:element-attribute-value-match|cts:element-attribute-value-geospatial-co-occurrences|cts:element-attribute-value-co-occurrences|cts:element-attribute-range-query-weight|cts:element-attribute-range-query-value|cts:element-attribute-range-query-options|cts:element-attribute-range-query-operator|cts:element-attribute-range-query-element-name|cts:element-attribute-range-query-attribute-name|cts:element-attribute-range-query|cts:element-attribute-pair-geospatial-values|cts:element-attribute-pair-geospatial-value-match|cts:element-attribute-pair-geospatial-query-weight|cts:element-attribute-pair-geospatial-query-region|cts:element-attribute-pair-geospatial-query-options|cts:element-attribute-pair-geospatial-query-longitude-name|cts:element-attribute-pair-geospatial-query-latitude-name|cts:element-attribute-pair-geospatial-query-element-name|cts:element-attribute-pair-geospatial-query|cts:element-attribute-pair-geospatial-boxes|cts:document-query-uris|cts:document-query|cts:distance|cts:directory-query-uris|cts:directory-query-depth|cts:directory-query|cts:destination|cts:deregister|cts:contains|cts:confidence|cts:collections|cts:collection-query-uris|cts:collection-query|cts:collection-match|cts:classify|cts:circle-radius|cts:circle-center|cts:circle|cts:box-west|cts:box-south|cts:box-north|cts:box-east|cts:box|cts:bearing|cts:arc-intersection|cts:and-query-queries|cts:and-query-options|cts:and-query|cts:and-not-query-positive-query|cts:and-not-query-negative-query|cts:and-not-query|css:get|css:convert|cpf:success|cpf:failure|cpf:document-set-state|cpf:document-set-processing-status|cpf:document-set-last-updated|cpf:document-set-error|cpf:document-get-state|cpf:document-get-processing-status|cpf:document-get-last-updated|cpf:document-get-error|cpf:check-transition|alert:spawn-matching-actions|alert:rule-user-id-query|alert:rule-set-user-id|alert:rule-set-query|alert:rule-set-options|alert:rule-set-name|alert:rule-set-description|alert:rule-set-action|alert:rule-remove|alert:rule-name-query|alert:rule-insert|alert:rule-id-query|alert:rule-get-user-id|alert:rule-get-query|alert:rule-get-options|alert:rule-get-name|alert:rule-get-id|alert:rule-get-description|alert:rule-get-action|alert:rule-action-query|alert:remove-triggers|alert:make-rule|alert:make-log-action|alert:make-config|alert:make-action|alert:invoke-matching-actions|alert:get-my-rules|alert:get-all-rules|alert:get-actions|alert:find-matching-rules|alert:create-triggers|alert:config-set-uri|alert:config-set-trigger-ids|alert:config-set-options|alert:config-set-name|alert:config-set-description|alert:config-set-cpf-domain-names|alert:config-set-cpf-domain-ids|alert:config-insert|alert:config-get-uri|alert:config-get-trigger-ids|alert:config-get-options|alert:config-get-name|alert:config-get-id|alert:config-get-description|alert:config-get-cpf-domain-names|alert:config-get-cpf-domain-ids|alert:config-get|alert:config-delete|alert:action-set-options|alert:action-set-name|alert:action-set-module-root|alert:action-set-module-db|alert:action-set-module|alert:action-set-description|alert:action-remove|alert:action-insert|alert:action-get-options|alert:action-get-name|alert:action-get-module-root|alert:action-get-module-db|alert:action-get-module|alert:action-get-description|zero-or-one|years-from-duration|year-from-dateTime|year-from-date|upper-case|unordered|true|translate|trace|tokenize|timezone-from-time|timezone-from-dateTime|timezone-from-date|sum|subtract-dateTimes-yielding-yearMonthDuration|subtract-dateTimes-yielding-dayTimeDuration|substring-before|substring-after|substring|subsequence|string-to-codepoints|string-pad|string-length|string-join|string|static-base-uri|starts-with|seconds-from-time|seconds-from-duration|seconds-from-dateTime|round-half-to-even|round|root|reverse|resolve-uri|resolve-QName|replace|remove|QName|prefix-from-QName|position|one-or-more|number|not|normalize-unicode|normalize-space|node-name|node-kind|nilled|namespace-uri-from-QName|namespace-uri-for-prefix|namespace-uri|name|months-from-duration|month-from-dateTime|month-from-date|minutes-from-time|minutes-from-duration|minutes-from-dateTime|min|max|matches|lower-case|local-name-from-QName|local-name|last|lang|iri-to-uri|insert-before|index-of|in-scope-prefixes|implicit-timezone|idref|id|hours-from-time|hours-from-duration|hours-from-dateTime|floor|false|expanded-QName|exists|exactly-one|escape-uri|escape-html-uri|error|ends-with|encode-for-uri|empty|document-uri|doc-available|doc|distinct-values|distinct-nodes|default-collation|deep-equal|days-from-duration|day-from-dateTime|day-from-date|data|current-time|current-dateTime|current-date|count|contains|concat|compare|collection|codepoints-to-string|codepoint-equal|ceiling|boolean|base-uri|avg|adjust-time-to-timezone|adjust-dateTime-to-timezone|adjust-date-to-timezone|abs)\b/],
+["pln",/^[\w:-]+/],["pln",/^[\t\n\r \xa0]+/]]),["xq","xquery"]);
diff --git a/js/lib/prettify/lang-yaml.js b/js/lib/prettify/lang-yaml.js
new file mode 100644
index 0000000..c38729b
--- /dev/null
+++ b/js/lib/prettify/lang-yaml.js
@@ -0,0 +1,2 @@
+var a=null;
+PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:>?|]+/,a,":|>?"],["dec",/^%(?:YAML|TAG)[^\n\r#]+/,a,"%"],["typ",/^&\S+/,a,"&"],["typ",/^!\S*/,a,"!"],["str",/^"(?:[^"\\]|\\.)*(?:"|$)/,a,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,a,"'"],["com",/^#[^\n\r]*/,a,"#"],["pln",/^\s+/,a," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\n\r]|$)/],["pun",/^-/],["kwd",/^\w+:[\n\r ]/],["pln",/^\w+/]]),["yaml","yml"]);
diff --git a/js/lib/prettify/prettify.css b/js/lib/prettify/prettify.css
new file mode 100644
index 0000000..babf060
--- /dev/null
+++ b/js/lib/prettify/prettify.css
@@ -0,0 +1 @@
+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
\ No newline at end of file
diff --git a/js/lib/prettify/prettify.js b/js/lib/prettify/prettify.js
new file mode 100644
index 0000000..eef5ad7
--- /dev/null
+++ b/js/lib/prettify/prettify.js
@@ -0,0 +1,28 @@
+var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
+(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
+[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
+f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
+(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
+{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
+t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
+"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
+l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
+q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
+q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
+"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
+a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
+for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
+m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
+a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
+j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
+"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
+H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
+J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
+I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
+["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
+/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
+["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
+hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
+!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
+250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
+PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
diff --git a/js/lib/raphael.js b/js/lib/raphael.js
new file mode 100644
index 0000000..8c45c3d
--- /dev/null
+++ b/js/lib/raphael.js
@@ -0,0 +1,3395 @@
+/*!
+ * Raphael 1.4.3 - JavaScript Vector Library
+ *
+ * Copyright (c) 2010 Dmitry Baranovskiy (http://raphaeljs.com)
+ * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
+ */
+ 
+Raphael = (function () {
+    function R() {
+        if (R.is(arguments[0], array)) {
+            var a = arguments[0],
+                cnv = create[apply](R, a.splice(0, 3 + R.is(a[0], nu))),
+                res = cnv.set();
+            for (var i = 0, ii = a[length]; i < ii; i++) {
+                var j = a[i] || {};
+                elements.test(j.type) && res[push](cnv[j.type]().attr(j));
+            }
+            return res;
+        }
+        return create[apply](R, arguments);
+    }
+    R.version = "1.4.3";
+    var separator = /[, ]+/,
+        elements = /^(circle|rect|path|ellipse|text|image)$/,
+        proto = "prototype",
+        has = "hasOwnProperty",
+        doc = document,
+        win = window,
+        oldRaphael = {
+            was: Object[proto][has].call(win, "Raphael"),
+            is: win.Raphael
+        },
+        Paper = function () {},
+        appendChild = "appendChild",
+        apply = "apply",
+        concat = "concat",
+        supportsTouch = "createTouch" in doc,
+        E = "",
+        S = " ",
+        split = "split",
+        events = "click dblclick mousedown mousemove mouseout mouseover mouseup touchstart touchmove touchend orientationchange touchcancel gesturestart gesturechange gestureend"[split](S),
+        touchMap = {
+            mousedown: "touchstart",
+            mousemove: "touchmove",
+            mouseup: "touchend"
+        },
+        join = "join",
+        length = "length",
+        lowerCase = String[proto].toLowerCase,
+        math = Math,
+        mmax = math.max,
+        mmin = math.min,
+        nu = "number",
+        string = "string",
+        array = "array",
+        toString = "toString",
+        fillString = "fill",
+        objectToString = Object[proto][toString],
+        paper = {},
+        pow = math.pow,
+        push = "push",
+        rg = /^(?=[\da-f]$)/,
+        ISURL = /^url\(['"]?([^\)]+?)['"]?\)$/i,
+        colourRegExp = /^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+(?:\s*,\s*[\d\.]+)?)\s*\)|rgba?\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%(?:\s*,\s*[\d\.]+%))\s*\)|hs[bl]\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|hs[bl]\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\))\s*$/i,
+        round = math.round,
+        setAttribute = "setAttribute",
+        toFloat = parseFloat,
+        toInt = parseInt,
+        ms = " progid:DXImageTransform.Microsoft",
+        upperCase = String[proto].toUpperCase,
+        availableAttrs = {blur: 0, "clip-rect": "0 0 1e9 1e9", cursor: "default", cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0},
+        availableAnimAttrs = {along: "along", blur: nu, "clip-rect": "csv", cx: nu, cy: nu, fill: "colour", "fill-opacity": nu, "font-size": nu, height: nu, opacity: nu, path: "path", r: nu, rotation: "csv", rx: nu, ry: nu, scale: "csv", stroke: "colour", "stroke-opacity": nu, "stroke-width": nu, translation: "csv", width: nu, x: nu, y: nu},
+        rp = "replace";
+    R.type = (win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
+    if (R.type == "VML") {
+        var d = doc.createElement("div");
+        d.innerHTML = '<!--[if vml]><br><br><![endif]-->';
+        if (d.childNodes[length] != 2) {
+            return R.type = null;
+        }
+        d = null;
+    }
+    R.svg = !(R.vml = R.type == "VML");
+    Paper[proto] = R[proto];
+    R._id = 0;
+    R._oid = 0;
+    R.fn = {};
+    R.is = function (o, type) {
+        type = lowerCase.call(type);
+        return  (type == "object" && o === Object(o)) ||
+                (type == "undefined" && typeof o == type) ||
+                (type == "null" && o == null) ||
+                lowerCase.call(objectToString.call(o).slice(8, -1)) == type;
+    };
+
+    R.setWindow = function (newwin) {
+        win = newwin;
+        doc = win.document;
+    };
+    // colour utilities
+    var toHex = function (color) {
+        if (R.vml) {
+            // http://dean.edwards.name/weblog/2009/10/convert-any-colour-value-to-hex-in-msie/
+            var trim = /^\s+|\s+$/g;
+            toHex = cacher(function (color) {
+                var bod;
+                color = (color + E)[rp](trim, E);
+                try {
+                    var docum = new win.ActiveXObject("htmlfile");
+                    docum.write("<body>");
+                    docum.close();
+                    bod = docum.body;
+                } catch(e) {
+                    bod = win.createPopup().document.body;
+                }
+                var range = bod.createTextRange();
+                try {
+                    bod.style.color = color;
+                    var value = range.queryCommandValue("ForeColor");
+                    value = ((value & 255) << 16) | (value & 65280) | ((value & 16711680) >>> 16);
+                    return "#" + ("000000" + value[toString](16)).slice(-6);
+                } catch(e) {
+                    return "none";
+                }
+            });
+        } else {
+            var i = doc.createElement("i");
+            i.title = "Rapha\xebl Colour Picker";
+            i.style.display = "none";
+            doc.body[appendChild](i);
+            toHex = cacher(function (color) {
+                i.style.color = color;
+                return doc.defaultView.getComputedStyle(i, E).getPropertyValue("color");
+            });
+        }
+        return toHex(color);
+    };
+    var hsbtoString = function () {
+        return "hsb(" + [this.h, this.s, this.b] + ")";
+    },
+    rgbtoString = function () {
+        return this.hex;
+    };
+    R.hsb2rgb = cacher(function (hue, saturation, brightness) {
+        if (R.is(hue, "object") && "h" in hue && "s" in hue && "b" in hue) {
+            brightness = hue.b;
+            saturation = hue.s;
+            hue = hue.h;
+        }
+        var red,
+            green,
+            blue;
+        if (brightness == 0) {
+            return {r: 0, g: 0, b: 0, hex: "#000"};
+        }
+        if (hue > 1 || saturation > 1 || brightness > 1) {
+            hue /= 255;
+            saturation /= 255;
+            brightness /= 255;
+        }
+        var i = ~~(hue * 6),
+            f = (hue * 6) - i,
+            p = brightness * (1 - saturation),
+            q = brightness * (1 - (saturation * f)),
+            t = brightness * (1 - (saturation * (1 - f)));
+        red = [brightness, q, p, p, t, brightness, brightness][i];
+        green = [t, brightness, brightness, q, p, p, t][i];
+        blue = [p, p, t, brightness, brightness, q, p][i];
+        red *= 255;
+        green *= 255;
+        blue *= 255;
+        var rgb = {r: red, g: green, b: blue, toString: rgbtoString},
+            r = (~~red)[toString](16),
+            g = (~~green)[toString](16),
+            b = (~~blue)[toString](16);
+        r = r[rp](rg, "0");
+        g = g[rp](rg, "0");
+        b = b[rp](rg, "0");
+        rgb.hex = "#" + r + g + b;
+        return rgb;
+    }, R);
+    R.rgb2hsb = cacher(function (red, green, blue) {
+        if (R.is(red, "object") && "r" in red && "g" in red && "b" in red) {
+            blue = red.b;
+            green = red.g;
+            red = red.r;
+        }
+        if (R.is(red, string)) {
+            var clr = R.getRGB(red);
+            red = clr.r;
+            green = clr.g;
+            blue = clr.b;
+        }
+        if (red > 1 || green > 1 || blue > 1) {
+            red /= 255;
+            green /= 255;
+            blue /= 255;
+        }
+        var max = mmax(red, green, blue),
+            min = mmin(red, green, blue),
+            hue,
+            saturation,
+            brightness = max;
+        if (min == max) {
+            return {h: 0, s: 0, b: max};
+        } else {
+            var delta = (max - min);
+            saturation = delta / max;
+            if (red == max) {
+                hue = (green - blue) / delta;
+            } else if (green == max) {
+                hue = 2 + ((blue - red) / delta);
+            } else {
+                hue = 4 + ((red - green) / delta);
+            }
+            hue /= 6;
+            hue < 0 && hue++;
+            hue > 1 && hue--;
+        }
+        return {h: hue, s: saturation, b: brightness, toString: hsbtoString};
+    }, R);
+    var p2s = /,?([achlmqrstvxz]),?/gi,
+        commaSpaces = /\s*,\s*/,
+        hsrg = {hs: 1, rg: 1};
+    R._path2string = function () {
+        return this.join(",")[rp](p2s, "$1");
+    };
+    function cacher(f, scope, postprocessor) {
+        function newf() {
+            var arg = Array[proto].slice.call(arguments, 0),
+                args = arg[join]("\u25ba"),
+                cache = newf.cache = newf.cache || {},
+                count = newf.count = newf.count || [];
+            if (cache[has](args)) {
+                return postprocessor ? postprocessor(cache[args]) : cache[args];
+            }
+            count[length] >= 1e3 && delete cache[count.shift()];
+            count[push](args);
+            cache[args] = f[apply](scope, arg);
+            return postprocessor ? postprocessor(cache[args]) : cache[args];
+        }
+        return newf;
+    }
+ 
+    R.getRGB = cacher(function (colour) {
+        if (!colour || !!((colour = colour + E).indexOf("-") + 1)) {
+            return {r: -1, g: -1, b: -1, hex: "none", error: 1};
+        }
+        if (colour == "none") {
+            return {r: -1, g: -1, b: -1, hex: "none"};
+        }
+        !(hsrg[has](colour.substring(0, 2)) || colour.charAt() == "#") && (colour = toHex(colour));
+        var res,
+            red,
+            green,
+            blue,
+            opacity,
+            t,
+            rgb = colour.match(colourRegExp);
+        if (rgb) {
+            if (rgb[2]) {
+                blue = toInt(rgb[2].substring(5), 16);
+                green = toInt(rgb[2].substring(3, 5), 16);
+                red = toInt(rgb[2].substring(1, 3), 16);
+            }
+            if (rgb[3]) {
+                blue = toInt((t = rgb[3].charAt(3)) + t, 16);
+                green = toInt((t = rgb[3].charAt(2)) + t, 16);
+                red = toInt((t = rgb[3].charAt(1)) + t, 16);
+            }
+            if (rgb[4]) {
+                rgb = rgb[4][split](commaSpaces);
+                red = toFloat(rgb[0]);
+                green = toFloat(rgb[1]);
+                blue = toFloat(rgb[2]);
+                opacity = toFloat(rgb[3]);
+            }
+            if (rgb[5]) {
+                rgb = rgb[5][split](commaSpaces);
+                red = toFloat(rgb[0]) * 2.55;
+                green = toFloat(rgb[1]) * 2.55;
+                blue = toFloat(rgb[2]) * 2.55;
+                opacity = toFloat(rgb[3]);
+            }
+            if (rgb[6]) {
+                rgb = rgb[6][split](commaSpaces);
+                red = toFloat(rgb[0]);
+                green = toFloat(rgb[1]);
+                blue = toFloat(rgb[2]);
+                return R.hsb2rgb(red, green, blue);
+            }
+            if (rgb[7]) {
+                rgb = rgb[7][split](commaSpaces);
+                red = toFloat(rgb[0]) * 2.55;
+                green = toFloat(rgb[1]) * 2.55;
+                blue = toFloat(rgb[2]) * 2.55;
+                return R.hsb2rgb(red, green, blue);
+            }
+            rgb = {r: red, g: green, b: blue};
+            var r = (~~red)[toString](16),
+                g = (~~green)[toString](16),
+                b = (~~blue)[toString](16);
+            r = r[rp](rg, "0");
+            g = g[rp](rg, "0");
+            b = b[rp](rg, "0");
+            rgb.hex = "#" + r + g + b;
+            isFinite(toFloat(opacity)) && (rgb.o = opacity);
+            return rgb;
+        }
+        return {r: -1, g: -1, b: -1, hex: "none", error: 1};
+    }, R);
+    R.getColor = function (value) {
+        var start = this.getColor.start = this.getColor.start || {h: 0, s: 1, b: value || .75},
+            rgb = this.hsb2rgb(start.h, start.s, start.b);
+        start.h += .075;
+        if (start.h > 1) {
+            start.h = 0;
+            start.s -= .2;
+            start.s <= 0 && (this.getColor.start = {h: 0, s: 1, b: start.b});
+        }
+        return rgb.hex;
+    };
+    R.getColor.reset = function () {
+        delete this.start;
+    };
+    // path utilities
+    var pathCommand = /([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig,
+        pathValues = /(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig;
+    R.parsePathString = cacher(function (pathString) {
+        if (!pathString) {
+            return null;
+        }
+        var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
+            data = [];
+        if (R.is(pathString, array) && R.is(pathString[0], array)) { // rough assumption
+            data = pathClone(pathString);
+        }
+        if (!data[length]) {
+            (pathString + E)[rp](pathCommand, function (a, b, c) {
+                var params = [],
+                    name = lowerCase.call(b);
+                c[rp](pathValues, function (a, b) {
+                    b && params[push](+b);
+                });
+                if (name == "m" && params[length] > 2) {
+                    data[push]([b][concat](params.splice(0, 2)));
+                    name = "l";
+                    b = b == "m" ? "l" : "L";
+                }
+                while (params[length] >= paramCounts[name]) {
+                    data[push]([b][concat](params.splice(0, paramCounts[name])));
+                    if (!paramCounts[name]) {
+                        break;
+                    }
+                }
+            });
+        }
+        data[toString] = R._path2string;
+        return data;
+    });
+    R.findDotsAtSegment = function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+        var t1 = 1 - t,
+            x = pow(t1, 3) * p1x + pow(t1, 2) * 3 * t * c1x + t1 * 3 * t * t * c2x + pow(t, 3) * p2x,
+            y = pow(t1, 3) * p1y + pow(t1, 2) * 3 * t * c1y + t1 * 3 * t * t * c2y + pow(t, 3) * p2y,
+            mx = p1x + 2 * t * (c1x - p1x) + t * t * (c2x - 2 * c1x + p1x),
+            my = p1y + 2 * t * (c1y - p1y) + t * t * (c2y - 2 * c1y + p1y),
+            nx = c1x + 2 * t * (c2x - c1x) + t * t * (p2x - 2 * c2x + c1x),
+            ny = c1y + 2 * t * (c2y - c1y) + t * t * (p2y - 2 * c2y + c1y),
+            ax = (1 - t) * p1x + t * c1x,
+            ay = (1 - t) * p1y + t * c1y,
+            cx = (1 - t) * c2x + t * p2x,
+            cy = (1 - t) * c2y + t * p2y,
+            alpha = (90 - math.atan((mx - nx) / (my - ny)) * 180 / math.PI);
+        (mx > nx || my < ny) && (alpha += 180);
+        return {x: x, y: y, m: {x: mx, y: my}, n: {x: nx, y: ny}, start: {x: ax, y: ay}, end: {x: cx, y: cy}, alpha: alpha};
+    };
+    var pathDimensions = cacher(function (path) {
+        if (!path) {
+            return {x: 0, y: 0, width: 0, height: 0};
+        }
+        path = path2curve(path);
+        var x = 0, 
+            y = 0,
+            X = [],
+            Y = [],
+            p;
+        for (var i = 0, ii = path[length]; i < ii; i++) {
+            p = path[i];
+            if (p[0] == "M") {
+                x = p[1];
+                y = p[2];
+                X[push](x);
+                Y[push](y);
+            } else {
+                var dim = curveDim(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
+                X = X[concat](dim.min.x, dim.max.x);
+                Y = Y[concat](dim.min.y, dim.max.y);
+                x = p[5];
+                y = p[6];
+            }
+        }
+        var xmin = mmin[apply](0, X),
+            ymin = mmin[apply](0, Y);
+        return {
+            x: xmin,
+            y: ymin,
+            width: mmax[apply](0, X) - xmin,
+            height: mmax[apply](0, Y) - ymin
+        };
+    }),
+        pathClone = function (pathArray) {
+            var res = [];
+            if (!R.is(pathArray, array) || !R.is(pathArray && pathArray[0], array)) { // rough assumption
+                pathArray = R.parsePathString(pathArray);
+            }
+            for (var i = 0, ii = pathArray[length]; i < ii; i++) {
+                res[i] = [];
+                for (var j = 0, jj = pathArray[i][length]; j < jj; j++) {
+                    res[i][j] = pathArray[i][j];
+                }
+            }
+            res[toString] = R._path2string;
+            return res;
+        },
+        pathToRelative = cacher(function (pathArray) {
+            if (!R.is(pathArray, array) || !R.is(pathArray && pathArray[0], array)) { // rough assumption
+                pathArray = R.parsePathString(pathArray);
+            }
+            var res = [],
+                x = 0,
+                y = 0,
+                mx = 0,
+                my = 0,
+                start = 0;
+            if (pathArray[0][0] == "M") {
+                x = pathArray[0][1];
+                y = pathArray[0][2];
+                mx = x;
+                my = y;
+                start++;
+                res[push](["M", x, y]);
+            }
+            for (var i = start, ii = pathArray[length]; i < ii; i++) {
+                var r = res[i] = [],
+                    pa = pathArray[i];
+                if (pa[0] != lowerCase.call(pa[0])) {
+                    r[0] = lowerCase.call(pa[0]);
+                    switch (r[0]) {
+                        case "a":
+                            r[1] = pa[1];
+                            r[2] = pa[2];
+                            r[3] = pa[3];
+                            r[4] = pa[4];
+                            r[5] = pa[5];
+                            r[6] = +(pa[6] - x).toFixed(3);
+                            r[7] = +(pa[7] - y).toFixed(3);
+                            break;
+                        case "v":
+                            r[1] = +(pa[1] - y).toFixed(3);
+                            break;
+                        case "m":
+                            mx = pa[1];
+                            my = pa[2];
+                        default:
+                            for (var j = 1, jj = pa[length]; j < jj; j++) {
+                                r[j] = +(pa[j] - ((j % 2) ? x : y)).toFixed(3);
+                            }
+                    }
+                } else {
+                    r = res[i] = [];
+                    if (pa[0] == "m") {
+                        mx = pa[1] + x;
+                        my = pa[2] + y;
+                    }
+                    for (var k = 0, kk = pa[length]; k < kk; k++) {
+                        res[i][k] = pa[k];
+                    }
+                }
+                var len = res[i][length];
+                switch (res[i][0]) {
+                    case "z":
+                        x = mx;
+                        y = my;
+                        break;
+                    case "h":
+                        x += +res[i][len - 1];
+                        break;
+                    case "v":
+                        y += +res[i][len - 1];
+                        break;
+                    default:
+                        x += +res[i][len - 2];
+                        y += +res[i][len - 1];
+                }
+            }
+            res[toString] = R._path2string;
+            return res;
+        }, 0, pathClone),
+        pathToAbsolute = cacher(function (pathArray) {
+            if (!R.is(pathArray, array) || !R.is(pathArray && pathArray[0], array)) { // rough assumption
+                pathArray = R.parsePathString(pathArray);
+            }
+            var res = [],
+                x = 0,
+                y = 0,
+                mx = 0,
+                my = 0,
+                start = 0;
+            if (pathArray[0][0] == "M") {
+                x = +pathArray[0][1];
+                y = +pathArray[0][2];
+                mx = x;
+                my = y;
+                start++;
+                res[0] = ["M", x, y];
+            }
+            for (var i = start, ii = pathArray[length]; i < ii; i++) {
+                var r = res[i] = [],
+                    pa = pathArray[i];
+                if (pa[0] != upperCase.call(pa[0])) {
+                    r[0] = upperCase.call(pa[0]);
+                    switch (r[0]) {
+                        case "A":
+                            r[1] = pa[1];
+                            r[2] = pa[2];
+                            r[3] = pa[3];
+                            r[4] = pa[4];
+                            r[5] = pa[5];
+                            r[6] = +(pa[6] + x);
+                            r[7] = +(pa[7] + y);
+                            break;
+                        case "V":
+                            r[1] = +pa[1] + y;
+                            break;
+                        case "H":
+                            r[1] = +pa[1] + x;
+                            break;
+                        case "M":
+                            mx = +pa[1] + x;
+                            my = +pa[2] + y;
+                        default:
+                            for (var j = 1, jj = pa[length]; j < jj; j++) {
+                                r[j] = +pa[j] + ((j % 2) ? x : y);
+                            }
+                    }
+                } else {
+                    for (var k = 0, kk = pa[length]; k < kk; k++) {
+                        res[i][k] = pa[k];
+                    }
+                }
+                switch (r[0]) {
+                    case "Z":
+                        x = mx;
+                        y = my;
+                        break;
+                    case "H":
+                        x = r[1];
+                        break;
+                    case "V":
+                        y = r[1];
+                        break;
+                    default:
+                        x = res[i][res[i][length] - 2];
+                        y = res[i][res[i][length] - 1];
+                }
+            }
+            res[toString] = R._path2string;
+            return res;
+        }, null, pathClone),
+        l2c = function (x1, y1, x2, y2) {
+            return [x1, y1, x2, y2, x2, y2];
+        },
+        q2c = function (x1, y1, ax, ay, x2, y2) {
+            var _13 = 1 / 3,
+                _23 = 2 / 3;
+            return [
+                    _13 * x1 + _23 * ax,
+                    _13 * y1 + _23 * ay,
+                    _13 * x2 + _23 * ax,
+                    _13 * y2 + _23 * ay,
+                    x2,
+                    y2
+                ];
+        },
+        a2c = function (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
+            // for more information of where this math came from visit:
+            // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
+            var PI = math.PI,
+                _120 = PI * 120 / 180,
+                rad = PI / 180 * (+angle || 0),
+                res = [],
+                xy,
+                rotate = cacher(function (x, y, rad) {
+                    var X = x * math.cos(rad) - y * math.sin(rad),
+                        Y = x * math.sin(rad) + y * math.cos(rad);
+                    return {x: X, y: Y};
+                });
+            if (!recursive) {
+                xy = rotate(x1, y1, -rad);
+                x1 = xy.x;
+                y1 = xy.y;
+                xy = rotate(x2, y2, -rad);
+                x2 = xy.x;
+                y2 = xy.y;
+                var cos = math.cos(PI / 180 * angle),
+                    sin = math.sin(PI / 180 * angle),
+                    x = (x1 - x2) / 2,
+                    y = (y1 - y2) / 2;
+                var h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
+                if (h > 1) {
+                    h = math.sqrt(h);
+                    rx = h * rx;
+                    ry = h * ry;
+                }
+                var rx2 = rx * rx,
+                    ry2 = ry * ry,
+                    k = (large_arc_flag == sweep_flag ? -1 : 1) *
+                        math.sqrt(math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x))),
+                    cx = k * rx * y / ry + (x1 + x2) / 2,
+                    cy = k * -ry * x / rx + (y1 + y2) / 2,
+                    f1 = math.asin(((y1 - cy) / ry).toFixed(7)),
+                    f2 = math.asin(((y2 - cy) / ry).toFixed(7));
+
+                f1 = x1 < cx ? PI - f1 : f1;
+                f2 = x2 < cx ? PI - f2 : f2;
+                f1 < 0 && (f1 = PI * 2 + f1);
+                f2 < 0 && (f2 = PI * 2 + f2);
+                if (sweep_flag && f1 > f2) {
+                    f1 = f1 - PI * 2;
+                }
+                if (!sweep_flag && f2 > f1) {
+                    f2 = f2 - PI * 2;
+                }
+            } else {
+                f1 = recursive[0];
+                f2 = recursive[1];
+                cx = recursive[2];
+                cy = recursive[3];
+            }
+            var df = f2 - f1;
+            if (math.abs(df) > _120) {
+                var f2old = f2,
+                    x2old = x2,
+                    y2old = y2;
+                f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
+                x2 = cx + rx * math.cos(f2);
+                y2 = cy + ry * math.sin(f2);
+                res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
+            }
+            df = f2 - f1;
+            var c1 = math.cos(f1),
+                s1 = math.sin(f1),
+                c2 = math.cos(f2),
+                s2 = math.sin(f2),
+                t = math.tan(df / 4),
+                hx = 4 / 3 * rx * t,
+                hy = 4 / 3 * ry * t,
+                m1 = [x1, y1],
+                m2 = [x1 + hx * s1, y1 - hy * c1],
+                m3 = [x2 + hx * s2, y2 - hy * c2],
+                m4 = [x2, y2];
+            m2[0] = 2 * m1[0] - m2[0];
+            m2[1] = 2 * m1[1] - m2[1];
+            if (recursive) {
+                return [m2, m3, m4][concat](res);
+            } else {
+                res = [m2, m3, m4][concat](res)[join]()[split](",");
+                var newres = [];
+                for (var i = 0, ii = res[length]; i < ii; i++) {
+                    newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;
+                }
+                return newres;
+            }
+        },
+        findDotAtSegment = function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+            var t1 = 1 - t;
+            return {
+                x: pow(t1, 3) * p1x + pow(t1, 2) * 3 * t * c1x + t1 * 3 * t * t * c2x + pow(t, 3) * p2x,
+                y: pow(t1, 3) * p1y + pow(t1, 2) * 3 * t * c1y + t1 * 3 * t * t * c2y + pow(t, 3) * p2y
+            };
+        },
+        curveDim = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
+            var a = (c2x - 2 * c1x + p1x) - (p2x - 2 * c2x + c1x),
+                b = 2 * (c1x - p1x) - 2 * (c2x - c1x),
+                c = p1x - c1x,
+                t1 = (-b + math.sqrt(b * b - 4 * a * c)) / 2 / a,
+                t2 = (-b - math.sqrt(b * b - 4 * a * c)) / 2 / a,
+                y = [p1y, p2y],
+                x = [p1x, p2x],
+                dot;
+            math.abs(t1) > 1e12 && (t1 = .5);
+            math.abs(t2) > 1e12 && (t2 = .5);
+            if (t1 > 0 && t1 < 1) {
+                dot = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
+                x[push](dot.x);
+                y[push](dot.y);
+            }
+            if (t2 > 0 && t2 < 1) {
+                dot = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
+                x[push](dot.x);
+                y[push](dot.y);
+            }
+            a = (c2y - 2 * c1y + p1y) - (p2y - 2 * c2y + c1y);
+            b = 2 * (c1y - p1y) - 2 * (c2y - c1y);
+            c = p1y - c1y;
+            t1 = (-b + math.sqrt(b * b - 4 * a * c)) / 2 / a;
+            t2 = (-b - math.sqrt(b * b - 4 * a * c)) / 2 / a;
+            math.abs(t1) > 1e12 && (t1 = .5);
+            math.abs(t2) > 1e12 && (t2 = .5);
+            if (t1 > 0 && t1 < 1) {
+                dot = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
+                x[push](dot.x);
+                y[push](dot.y);
+            }
+            if (t2 > 0 && t2 < 1) {
+                dot = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
+                x[push](dot.x);
+                y[push](dot.y);
+            }
+            return {
+                min: {x: mmin[apply](0, x), y: mmin[apply](0, y)},
+                max: {x: mmax[apply](0, x), y: mmax[apply](0, y)}
+            };
+        }),
+        path2curve = cacher(function (path, path2) {
+            var p = pathToAbsolute(path),
+                p2 = path2 && pathToAbsolute(path2),
+                attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
+                attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
+                processPath = function (path, d) {
+                    var nx, ny;
+                    if (!path) {
+                        return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
+                    }
+                    !(path[0] in {T:1, Q:1}) && (d.qx = d.qy = null);
+                    switch (path[0]) {
+                        case "M":
+                            d.X = path[1];
+                            d.Y = path[2];
+                            break;
+                        case "A":
+                            path = ["C"][concat](a2c[apply](0, [d.x, d.y][concat](path.slice(1))));
+                            break;
+                        case "S":
+                            nx = d.x + (d.x - (d.bx || d.x));
+                            ny = d.y + (d.y - (d.by || d.y));
+                            path = ["C", nx, ny][concat](path.slice(1));
+                            break;
+                        case "T":
+                            d.qx = d.x + (d.x - (d.qx || d.x));
+                            d.qy = d.y + (d.y - (d.qy || d.y));
+                            path = ["C"][concat](q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
+                            break;
+                        case "Q":
+                            d.qx = path[1];
+                            d.qy = path[2];
+                            path = ["C"][concat](q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
+                            break;
+                        case "L":
+                            path = ["C"][concat](l2c(d.x, d.y, path[1], path[2]));
+                            break;
+                        case "H":
+                            path = ["C"][concat](l2c(d.x, d.y, path[1], d.y));
+                            break;
+                        case "V":
+                            path = ["C"][concat](l2c(d.x, d.y, d.x, path[1]));
+                            break;
+                        case "Z":
+                            path = ["C"][concat](l2c(d.x, d.y, d.X, d.Y));
+                            break;
+                    }
+                    return path;
+                },
+                fixArc = function (pp, i) {
+                    if (pp[i][length] > 7) {
+                        pp[i].shift();
+                        var pi = pp[i];
+                        while (pi[length]) {
+                            pp.splice(i++, 0, ["C"][concat](pi.splice(0, 6)));
+                        }
+                        pp.splice(i, 1);
+                        ii = mmax(p[length], p2 && p2[length] || 0);
+                    }
+                },
+                fixM = function (path1, path2, a1, a2, i) {
+                    if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") {
+                        path2.splice(i, 0, ["M", a2.x, a2.y]);
+                        a1.bx = 0;
+                        a1.by = 0;
+                        a1.x = path1[i][1];
+                        a1.y = path1[i][2];
+                        ii = mmax(p[length], p2 && p2[length] || 0);
+                    }
+                };
+            for (var i = 0, ii = mmax(p[length], p2 && p2[length] || 0); i < ii; i++) {
+                p[i] = processPath(p[i], attrs);
+                fixArc(p, i);
+                p2 && (p2[i] = processPath(p2[i], attrs2));
+                p2 && fixArc(p2, i);
+                fixM(p, p2, attrs, attrs2, i);
+                fixM(p2, p, attrs2, attrs, i);
+                var seg = p[i],
+                    seg2 = p2 && p2[i],
+                    seglen = seg[length],
+                    seg2len = p2 && seg2[length];
+                attrs.x = seg[seglen - 2];
+                attrs.y = seg[seglen - 1];
+                attrs.bx = toFloat(seg[seglen - 4]) || attrs.x;
+                attrs.by = toFloat(seg[seglen - 3]) || attrs.y;
+                attrs2.bx = p2 && (toFloat(seg2[seg2len - 4]) || attrs2.x);
+                attrs2.by = p2 && (toFloat(seg2[seg2len - 3]) || attrs2.y);
+                attrs2.x = p2 && seg2[seg2len - 2];
+                attrs2.y = p2 && seg2[seg2len - 1];
+            }
+            return p2 ? [p, p2] : p;
+        }, null, pathClone),
+        parseDots = cacher(function (gradient) {
+            var dots = [];
+            for (var i = 0, ii = gradient[length]; i < ii; i++) {
+                var dot = {},
+                    par = gradient[i].match(/^([^:]*):?([\d\.]*)/);
+                dot.color = R.getRGB(par[1]);
+                if (dot.color.error) {
+                    return null;
+                }
+                dot.color = dot.color.hex;
+                par[2] && (dot.offset = par[2] + "%");
+                dots[push](dot);
+            }
+            for (i = 1, ii = dots[length] - 1; i < ii; i++) {
+                if (!dots[i].offset) {
+                    var start = toFloat(dots[i - 1].offset || 0),
+                        end = 0;
+                    for (var j = i + 1; j < ii; j++) {
+                        if (dots[j].offset) {
+                            end = dots[j].offset;
+                            break;
+                        }
+                    }
+                    if (!end) {
+                        end = 100;
+                        j = ii;
+                    }
+                    end = toFloat(end);
+                    var d = (end - start) / (j - i + 1);
+                    for (; i < j; i++) {
+                        start += d;
+                        dots[i].offset = start + "%";
+                    }
+                }
+            }
+            return dots;
+        }),
+        getContainer = function (x, y, w, h) {
+            var container;
+            if (R.is(x, string) || R.is(x, "object")) {
+                container = R.is(x, string) ? doc.getElementById(x) : x;
+                if (container.tagName) {
+                    if (y == null) {
+                        return {
+                            container: container,
+                            width: container.style.pixelWidth || container.offsetWidth,
+                            height: container.style.pixelHeight || container.offsetHeight
+                        };
+                    } else {
+                        return {container: container, width: y, height: w};
+                    }
+                }
+            } else {
+                return {container: 1, x: x, y: y, width: w, height: h};
+            }
+        },
+        plugins = function (con, add) {
+            var that = this;
+            for (var prop in add) {
+                if (add[has](prop) && !(prop in con)) {
+                    switch (typeof add[prop]) {
+                        case "function":
+                            (function (f) {
+                                con[prop] = con === that ? f : function () { return f[apply](that, arguments); };
+                            })(add[prop]);
+                        break;
+                        case "object":
+                            con[prop] = con[prop] || {};
+                            plugins.call(this, con[prop], add[prop]);
+                        break;
+                        default:
+                            con[prop] = add[prop];
+                        break;
+                    }
+                }
+            }
+        },
+        tear = function (el, paper) {
+            el == paper.top && (paper.top = el.prev);
+            el == paper.bottom && (paper.bottom = el.next);
+            el.next && (el.next.prev = el.prev);
+            el.prev && (el.prev.next = el.next);
+        },
+        tofront = function (el, paper) {
+            if (paper.top === el) {
+                return;
+            }
+            tear(el, paper);
+            el.next = null;
+            el.prev = paper.top;
+            paper.top.next = el;
+            paper.top = el;
+        },
+        toback = function (el, paper) {
+            if (paper.bottom === el) {
+                return;
+            }
+            tear(el, paper);
+            el.next = paper.bottom;
+            el.prev = null;
+            paper.bottom.prev = el;
+            paper.bottom = el;
+        },
+        insertafter = function (el, el2, paper) {
+            tear(el, paper);
+            el2 == paper.top && (paper.top = el);
+            el2.next && (el2.next.prev = el);
+            el.next = el2.next;
+            el.prev = el2;
+            el2.next = el;
+        },
+        insertbefore = function (el, el2, paper) {
+            tear(el, paper);
+            el2 == paper.bottom && (paper.bottom = el);
+            el2.prev && (el2.prev.next = el);
+            el.prev = el2.prev;
+            el2.prev = el;
+            el.next = el2;
+        },
+        removed = function (methodname) {
+            return function () {
+                throw new Error("Rapha\xebl: you are calling to method \u201c" + methodname + "\u201d of removed object");
+            };
+        },
+        radial_gradient = /^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/;
+ 
+    // SVG
+    if (R.svg) {
+        Paper[proto].svgns = "http://www.w3.org/2000/svg";
+        Paper[proto].xlink = "http://www.w3.org/1999/xlink";
+        round = function (num) {
+            return +num + (~~num === num) * .5;
+        };
+        var $ = function (el, attr) {
+            if (attr) {
+                for (var key in attr) {
+                    if (attr[has](key)) {
+                        el[setAttribute](key, attr[key] + E);
+                    }
+                }
+            } else {
+                el = doc.createElementNS(Paper[proto].svgns, el);
+                el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
+                return el;
+            }
+        };
+        R[toString] = function () {
+            return  "Your browser supports SVG.\nYou are running Rapha\xebl " + this.version;
+        };
+        var thePath = function (pathString, SVG) {
+            var el = $("path");
+            SVG.canvas && SVG.canvas[appendChild](el);
+            var p = new Element(el, SVG);
+            p.type = "path";
+            setFillAndStroke(p, {fill: "none", stroke: "#000", path: pathString});
+            return p;
+        };
+        var addGradientFill = function (o, gradient, SVG) {
+            var type = "linear",
+                fx = .5, fy = .5,
+                s = o.style;
+            gradient = (gradient + E)[rp](radial_gradient, function (all, _fx, _fy) {
+                type = "radial";
+                if (_fx && _fy) {
+                    fx = toFloat(_fx);
+                    fy = toFloat(_fy);
+                    var dir = ((fy > .5) * 2 - 1);
+                    pow(fx - .5, 2) + pow(fy - .5, 2) > .25 &&
+                        (fy = math.sqrt(.25 - pow(fx - .5, 2)) * dir + .5) &&
+                        fy != .5 &&
+                        (fy = fy.toFixed(5) - 1e-5 * dir);
+                }
+                return E;
+            });
+            gradient = gradient[split](/\s*\-\s*/);
+            if (type == "linear") {
+                var angle = gradient.shift();
+                angle = -toFloat(angle);
+                if (isNaN(angle)) {
+                    return null;
+                }
+                var vector = [0, 0, math.cos(angle * math.PI / 180), math.sin(angle * math.PI / 180)],
+                    max = 1 / (mmax(math.abs(vector[2]), math.abs(vector[3])) || 1);
+                vector[2] *= max;
+                vector[3] *= max;
+                if (vector[2] < 0) {
+                    vector[0] = -vector[2];
+                    vector[2] = 0;
+                }
+                if (vector[3] < 0) {
+                    vector[1] = -vector[3];
+                    vector[3] = 0;
+                }
+            }
+            var dots = parseDots(gradient);
+            if (!dots) {
+                return null;
+            }
+            var id = o.getAttribute(fillString);
+            id = id.match(/^url\(#(.*)\)$/);
+            id && SVG.defs.removeChild(doc.getElementById(id[1]));
+            
+            var el = $(type + "Gradient");
+            el.id = "r" + (R._id++)[toString](36);
+            $(el, type == "radial" ? {fx: fx, fy: fy} : {x1: vector[0], y1: vector[1], x2: vector[2], y2: vector[3]});
+            SVG.defs[appendChild](el);
+            for (var i = 0, ii = dots[length]; i < ii; i++) {
+                var stop = $("stop");
+                $(stop, {
+                    offset: dots[i].offset ? dots[i].offset : !i ? "0%" : "100%",
+                    "stop-color": dots[i].color || "#fff"
+                });
+                el[appendChild](stop);
+            }
+            $(o, {
+                fill: "url(#" + el.id + ")",
+                opacity: 1,
+                "fill-opacity": 1
+            });
+            s.fill = E;
+            s.opacity = 1;
+            s.fillOpacity = 1;
+            return 1;
+        };
+        var updatePosition = function (o) {
+            var bbox = o.getBBox();
+            $(o.pattern, {patternTransform: R.format("translate({0},{1})", bbox.x, bbox.y)});
+        };
+        var setFillAndStroke = function (o, params) {
+            var dasharray = {
+                    "": [0],
+                    "none": [0],
+                    "-": [3, 1],
+                    ".": [1, 1],
+                    "-.": [3, 1, 1, 1],
+                    "-..": [3, 1, 1, 1, 1, 1],
+                    ". ": [1, 3],
+                    "- ": [4, 3],
+                    "--": [8, 3],
+                    "- .": [4, 3, 1, 3],
+                    "--.": [8, 3, 1, 3],
+                    "--..": [8, 3, 1, 3, 1, 3]
+                },
+                node = o.node,
+                attrs = o.attrs,
+                rot = o.rotate(),
+                addDashes = function (o, value) {
+                    value = dasharray[lowerCase.call(value)];
+                    if (value) {
+                        var width = o.attrs["stroke-width"] || "1",
+                            butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
+                            dashes = [];
+                        var i = value[length];
+                        while (i--) {
+                            dashes[i] = value[i] * width + ((i % 2) ? 1 : -1) * butt;
+                        }
+                        $(node, {"stroke-dasharray": dashes[join](",")});
+                    }
+                };
+            params[has]("rotation") && (rot = params.rotation);
+            var rotxy = (rot + E)[split](separator);
+            if (!(rotxy.length - 1)) {
+                rotxy = null;
+            } else {
+                rotxy[1] = +rotxy[1];
+                rotxy[2] = +rotxy[2];
+            }
+            toFloat(rot) && o.rotate(0, true);
+            for (var att in params) {
+                if (params[has](att)) {
+                    if (!availableAttrs[has](att)) {
+                        continue;
+                    }
+                    var value = params[att];
+                    attrs[att] = value;
+                    switch (att) {
+                        case "blur":
+                            o.blur(value);
+                            break;
+                        case "rotation":
+                            o.rotate(value, true);
+                            break;
+                        case "href":
+                        case "title":
+                        case "target":
+                            var pn = node.parentNode;
+                            if (lowerCase.call(pn.tagName) != "a") {
+                                var hl = $("a");
+                                pn.insertBefore(hl, node);
+                                hl[appendChild](node);
+                                pn = hl;
+                            }
+                            pn.setAttributeNS(o.paper.xlink, att, value);
+                            break;
+                        case "cursor":
+                            node.style.cursor = value;
+                            break;
+                        case "clip-rect":
+                            var rect = (value + E)[split](separator);
+                            if (rect[length] == 4) {
+                                o.clip && o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);
+                                var el = $("clipPath"),
+                                    rc = $("rect");
+                                el.id = "r" + (R._id++)[toString](36);
+                                $(rc, {
+                                    x: rect[0],
+                                    y: rect[1],
+                                    width: rect[2],
+                                    height: rect[3]
+                                });
+                                el[appendChild](rc);
+                                o.paper.defs[appendChild](el);
+                                $(node, {"clip-path": "url(#" + el.id + ")"});
+                                o.clip = rc;
+                            }
+                            if (!value) {
+                                var clip = doc.getElementById(node.getAttribute("clip-path")[rp](/(^url\(#|\)$)/g, E));
+                                clip && clip.parentNode.removeChild(clip);
+                                $(node, {"clip-path": E});
+                                delete o.clip;
+                            }
+                        break;
+                        case "path":
+                            if (o.type == "path") {
+                                $(node, {d: value ? attrs.path = pathToAbsolute(value) : "M0,0"});
+                            }
+                            break;
+                        case "width":
+                            node[setAttribute](att, value);
+                            if (attrs.fx) {
+                                att = "x";
+                                value = attrs.x;
+                            } else {
+                                break;
+                            }
+                        case "x":
+                            if (attrs.fx) {
+                                value = -attrs.x - (attrs.width || 0);
+                            }
+                        case "rx":
+                            if (att == "rx" && o.type == "rect") {
+                                break;
+                            }
+                        case "cx":
+                            rotxy && (att == "x" || att == "cx") && (rotxy[1] += value - attrs[att]);
+                            node[setAttribute](att, round(value));
+                            o.pattern && updatePosition(o);
+                            break;
+                        case "height":
+                            node[setAttribute](att, value);
+                            if (attrs.fy) {
+                                att = "y";
+                                value = attrs.y;
+                            } else {
+                                break;
+                            }
+                        case "y":
+                            if (attrs.fy) {
+                                value = -attrs.y - (attrs.height || 0);
+                            }
+                        case "ry":
+                            if (att == "ry" && o.type == "rect") {
+                                break;
+                            }
+                        case "cy":
+                            rotxy && (att == "y" || att == "cy") && (rotxy[2] += value - attrs[att]);
+                            node[setAttribute](att, round(value));
+                            o.pattern && updatePosition(o);
+                            break;
+                        case "r":
+                            if (o.type == "rect") {
+                                $(node, {rx: value, ry: value});
+                            } else {
+                                node[setAttribute](att, value);
+                            }
+                            break;
+                        case "src":
+                            if (o.type == "image") {
+                                node.setAttributeNS(o.paper.xlink, "href", value);
+                            }
+                            break;
+                        case "stroke-width":
+                            node.style.strokeWidth = value;
+                            // Need following line for Firefox
+                            node[setAttribute](att, value);
+                            if (attrs["stroke-dasharray"]) {
+                                addDashes(o, attrs["stroke-dasharray"]);
+                            }
+                            break;
+                        case "stroke-dasharray":
+                            addDashes(o, value);
+                            break;
+                        case "translation":
+                            var xy = (value + E)[split](separator);
+                            xy[0] = +xy[0] || 0;
+                            xy[1] = +xy[1] || 0;
+                            if (rotxy) {
+                                rotxy[1] += xy[0];
+                                rotxy[2] += xy[1];
+                            }
+                            translate.call(o, xy[0], xy[1]);
+                            break;
+                        case "scale":
+                            xy = (value + E)[split](separator);
+                            o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1, isNaN(toFloat(xy[2])) ? null : +xy[2], isNaN(toFloat(xy[3])) ? null : +xy[3]);
+                            break;
+                        case fillString:
+                            var isURL = (value + E).match(ISURL);
+                            if (isURL) {
+                                el = $("pattern");
+                                var ig = $("image");
+                                el.id = "r" + (R._id++)[toString](36);
+                                $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse", height: 1, width: 1});
+                                $(ig, {x: 0, y: 0});
+                                ig.setAttributeNS(o.paper.xlink, "href", isURL[1]);
+                                el[appendChild](ig);
+ 
+                                var img = doc.createElement("img");
+                                img.style.cssText = "position:absolute;left:-9999em;top-9999em";
+                                img.onload = function () {
+                                    $(el, {width: this.offsetWidth, height: this.offsetHeight});
+                                    $(ig, {width: this.offsetWidth, height: this.offsetHeight});
+                                    doc.body.removeChild(this);
+                                    o.paper.safari();
+                                };
+                                doc.body[appendChild](img);
+                                img.src = isURL[1];
+                                o.paper.defs[appendChild](el);
+                                node.style.fill = "url(#" + el.id + ")";
+                                $(node, {fill: "url(#" + el.id + ")"});
+                                o.pattern = el;
+                                o.pattern && updatePosition(o);
+                                break;
+                            }
+                            var clr = R.getRGB(value);
+                            if (!clr.error) {
+                                delete params.gradient;
+                                delete attrs.gradient;
+                                !R.is(attrs.opacity, "undefined") &&
+                                    R.is(params.opacity, "undefined") &&
+                                    $(node, {opacity: attrs.opacity});
+                                !R.is(attrs["fill-opacity"], "undefined") &&
+                                    R.is(params["fill-opacity"], "undefined") &&
+                                    $(node, {"fill-opacity": attrs["fill-opacity"]});
+                            } else if ((({circle: 1, ellipse: 1})[has](o.type) || (value + E).charAt() != "r") && addGradientFill(node, value, o.paper)) {
+                                attrs.gradient = value;
+                                attrs.fill = "none";
+                                break;
+                            }
+                            clr[has]("o") && $(node, {"fill-opacity": clr.o / 100});
+                        case "stroke":
+                            clr = R.getRGB(value);
+                            node[setAttribute](att, clr.hex);
+                            att == "stroke" && clr[has]("o") && $(node, {"stroke-opacity": clr.o / 100});
+                            break;
+                        case "gradient":
+                            (({circle: 1, ellipse: 1})[has](o.type) || (value + E).charAt() != "r") && addGradientFill(node, value, o.paper);
+                            break;
+                        case "opacity":
+                        case "fill-opacity":
+                            if (attrs.gradient) {
+                                var gradient = doc.getElementById(node.getAttribute(fillString)[rp](/^url\(#|\)$/g, E));
+                                if (gradient) {
+                                    var stops = gradient.getElementsByTagName("stop");
+                                    stops[stops[length] - 1][setAttribute]("stop-opacity", value);
+                                }
+                                break;
+                            }
+                        default:
+                            att == "font-size" && (value = toInt(value, 10) + "px");
+                            var cssrule = att[rp](/(\-.)/g, function (w) {
+                                return upperCase.call(w.substring(1));
+                            });
+                            node.style[cssrule] = value;
+                            // Need following line for Firefox
+                            node[setAttribute](att, value);
+                            break;
+                    }
+                }
+            }
+            
+            tuneText(o, params);
+            if (rotxy) {
+                o.rotate(rotxy.join(S));
+            } else {
+                toFloat(rot) && o.rotate(rot, true);
+            }
+        };
+        var leading = 1.2,
+        tuneText = function (el, params) {
+            if (el.type != "text" || !(params[has]("text") || params[has]("font") || params[has]("font-size") || params[has]("x") || params[has]("y"))) {
+                return;
+            }
+            var a = el.attrs,
+                node = el.node,
+                fontSize = node.firstChild ? toInt(doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue("font-size"), 10) : 10;
+ 
+            if (params[has]("text")) {
+                a.text = params.text;
+                while (node.firstChild) {
+                    node.removeChild(node.firstChild);
+                }
+                var texts = (params.text + E)[split]("\n");
+                for (var i = 0, ii = texts[length]; i < ii; i++) if (texts[i]) {
+                    var tspan = $("tspan");
+                    i && $(tspan, {dy: fontSize * leading, x: a.x});
+                    tspan[appendChild](doc.createTextNode(texts[i]));
+                    node[appendChild](tspan);
+                }
+            } else {
+                texts = node.getElementsByTagName("tspan");
+                for (i = 0, ii = texts[length]; i < ii; i++) {
+                    i && $(texts[i], {dy: fontSize * leading, x: a.x});
+                }
+            }
+            $(node, {y: a.y});
+            var bb = el.getBBox(),
+                dif = a.y - (bb.y + bb.height / 2);
+            dif && isFinite(dif) && $(node, {y: a.y + dif});
+        },
+        Element = function (node, svg) {
+            var X = 0,
+                Y = 0;
+            this[0] = node;
+            this.id = R._oid++;
+            this.node = node;
+            node.raphael = this;
+            this.paper = svg;
+            this.attrs = this.attrs || {};
+            this.transformations = []; // rotate, translate, scale
+            this._ = {
+                tx: 0,
+                ty: 0,
+                rt: {deg: 0, cx: 0, cy: 0},
+                sx: 1,
+                sy: 1
+            };
+            !svg.bottom && (svg.bottom = this);
+            this.prev = svg.top;
+            svg.top && (svg.top.next = this);
+            svg.top = this;
+            this.next = null;
+        };
+        Element[proto].rotate = function (deg, cx, cy) {
+            if (this.removed) {
+                return this;
+            }
+            if (deg == null) {
+                if (this._.rt.cx) {
+                    return [this._.rt.deg, this._.rt.cx, this._.rt.cy][join](S);
+                }
+                return this._.rt.deg;
+            }
+            var bbox = this.getBBox();
+            deg = (deg + E)[split](separator);
+            if (deg[length] - 1) {
+                cx = toFloat(deg[1]);
+                cy = toFloat(deg[2]);
+            }
+            deg = toFloat(deg[0]);
+            if (cx != null) {
+                this._.rt.deg = deg;
+            } else {
+                this._.rt.deg += deg;
+            }
+            (cy == null) && (cx = null);
+            this._.rt.cx = cx;
+            this._.rt.cy = cy;
+            cx = cx == null ? bbox.x + bbox.width / 2 : cx;
+            cy = cy == null ? bbox.y + bbox.height / 2 : cy;
+            if (this._.rt.deg) {
+                this.transformations[0] = R.format("rotate({0} {1} {2})", this._.rt.deg, cx, cy);
+                this.clip && $(this.clip, {transform: R.format("rotate({0} {1} {2})", -this._.rt.deg, cx, cy)});
+            } else {
+                this.transformations[0] = E;
+                this.clip && $(this.clip, {transform: E});
+            }
+            $(this.node, {transform: this.transformations[join](S)});
+            return this;
+        };
+        Element[proto].hide = function () {
+            !this.removed && (this.node.style.display = "none");
+            return this;
+        };
+        Element[proto].show = function () {
+            !this.removed && (this.node.style.display = "");
+            return this;
+        };
+        Element[proto].remove = function () {
+            if (this.removed) {
+                return;
+            }
+            tear(this, this.paper);
+            this.node.parentNode.removeChild(this.node);
+            for (var i in this) {
+                delete this[i];
+            }
+            this.removed = true;
+        };
+        Element[proto].getBBox = function () {
+            if (this.removed) {
+                return this;
+            }
+            if (this.type == "path") {
+                return pathDimensions(this.attrs.path);
+            }
+            if (this.node.style.display == "none") {
+                this.show();
+                var hide = true;
+            }
+            var bbox = {};
+            try {
+                bbox = this.node.getBBox();
+            } catch(e) {
+                // Firefox 3.0.x plays badly here
+            } finally {
+                bbox = bbox || {};
+            }
+            if (this.type == "text") {
+                bbox = {x: bbox.x, y: Infinity, width: 0, height: 0};
+                for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) {
+                    var bb = this.node.getExtentOfChar(i);
+                    (bb.y < bbox.y) && (bbox.y = bb.y);
+                    (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y);
+                    (bb.x + bb.width - bbox.x > bbox.width) && (bbox.width = bb.x + bb.width - bbox.x);
+                }
+            }
+            hide && this.hide();
+            return bbox;
+        };
+        Element[proto].attr = function (name, value) {
+            if (this.removed) {
+                return this;
+            }
+            if (name == null) {
+                var res = {};
+                for (var i in this.attrs) if (this.attrs[has](i)) {
+                    res[i] = this.attrs[i];
+                }
+                this._.rt.deg && (res.rotation = this.rotate());
+                (this._.sx != 1 || this._.sy != 1) && (res.scale = this.scale());
+                res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient;
+                return res;
+            }
+            if (value == null && R.is(name, string)) {
+                if (name == "translation") {
+                    return translate.call(this);
+                }
+                if (name == "rotation") {
+                    return this.rotate();
+                }
+                if (name == "scale") {
+                    return this.scale();
+                }
+                if (name == fillString && this.attrs.fill == "none" && this.attrs.gradient) {
+                    return this.attrs.gradient;
+                }
+                return this.attrs[name];
+            }
+            if (value == null && R.is(name, array)) {
+                var values = {};
+                for (var j = 0, jj = name.length; j < jj; j++) {
+                    values[name[j]] = this.attr(name[j]);
+                }
+                return values;
+            }
+            if (value != null) {
+                var params = {};
+                params[name] = value;
+                setFillAndStroke(this, params);
+            } else if (name != null && R.is(name, "object")) {
+                setFillAndStroke(this, name);
+            }
+            return this;
+        };
+        Element[proto].toFront = function () {
+            if (this.removed) {
+                return this;
+            }
+            this.node.parentNode[appendChild](this.node);
+            var svg = this.paper;
+            svg.top != this && tofront(this, svg);
+            return this;
+        };
+        Element[proto].toBack = function () {
+            if (this.removed) {
+                return this;
+            }
+            if (this.node.parentNode.firstChild != this.node) {
+                this.node.parentNode.insertBefore(this.node, this.node.parentNode.firstChild);
+                toback(this, this.paper);
+                var svg = this.paper;
+            }
+            return this;
+        };
+        Element[proto].insertAfter = function (element) {
+            if (this.removed) {
+                return this;
+            }
+            var node = element.node;
+            if (node.nextSibling) {
+                node.parentNode.insertBefore(this.node, node.nextSibling);
+            } else {
+                node.parentNode[appendChild](this.node);
+            }
+            insertafter(this, element, this.paper);
+            return this;
+        };
+        Element[proto].insertBefore = function (element) {
+            if (this.removed) {
+                return this;
+            }
+            var node = element.node;
+            node.parentNode.insertBefore(this.node, node);
+            insertbefore(this, element, this.paper);
+            return this;
+        };
+        Element[proto].blur = function (size) {
+            // Experimental. No Safari support. Use it on your own risk.
+            var t = this;
+            if (+size !== 0) {
+                var fltr = $("filter"),
+                    blur = $("feGaussianBlur");
+                t.attrs.blur = size;
+                fltr.id = "r" + (R._id++)[toString](36);
+                $(blur, {stdDeviation: +size || 1.5});
+                fltr.appendChild(blur);
+                t.paper.defs.appendChild(fltr);
+                t._blur = fltr;
+                $(t.node, {filter: "url(#" + fltr.id + ")"});
+            } else {
+                if (t._blur) {
+                    t._blur.parentNode.removeChild(t._blur);
+                    delete t._blur;
+                    delete t.attrs.blur;
+                }
+                t.node.removeAttribute("filter");
+            }
+        };
+        var theCircle = function (svg, x, y, r) {
+            x = round(x);
+            y = round(y);
+            var el = $("circle");
+            svg.canvas && svg.canvas[appendChild](el);
+            var res = new Element(el, svg);
+            res.attrs = {cx: x, cy: y, r: r, fill: "none", stroke: "#000"};
+            res.type = "circle";
+            $(el, res.attrs);
+            return res;
+        };
+        var theRect = function (svg, x, y, w, h, r) {
+            x = round(x);
+            y = round(y);
+            var el = $("rect");
+            svg.canvas && svg.canvas[appendChild](el);
+            var res = new Element(el, svg);
+            res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0, ry: r || 0, fill: "none", stroke: "#000"};
+            res.type = "rect";
+            $(el, res.attrs);
+            return res;
+        };
+        var theEllipse = function (svg, x, y, rx, ry) {
+            x = round(x);
+            y = round(y);
+            var el = $("ellipse");
+            svg.canvas && svg.canvas[appendChild](el);
+            var res = new Element(el, svg);
+            res.attrs = {cx: x, cy: y, rx: rx, ry: ry, fill: "none", stroke: "#000"};
+            res.type = "ellipse";
+            $(el, res.attrs);
+            return res;
+        };
+        var theImage = function (svg, src, x, y, w, h) {
+            var el = $("image");
+            $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: "none"});
+            el.setAttributeNS(svg.xlink, "href", src);
+            svg.canvas && svg.canvas[appendChild](el);
+            var res = new Element(el, svg);
+            res.attrs = {x: x, y: y, width: w, height: h, src: src};
+            res.type = "image";
+            return res;
+        };
+        var theText = function (svg, x, y, text) {
+            var el = $("text");
+            $(el, {x: x, y: y, "text-anchor": "middle"});
+            svg.canvas && svg.canvas[appendChild](el);
+            var res = new Element(el, svg);
+            res.attrs = {x: x, y: y, "text-anchor": "middle", text: text, font: availableAttrs.font, stroke: "none", fill: "#000"};
+            res.type = "text";
+            setFillAndStroke(res, res.attrs);
+            return res;
+        };
+        var setSize = function (width, height) {
+            this.width = width || this.width;
+            this.height = height || this.height;
+            this.canvas[setAttribute]("width", this.width);
+            this.canvas[setAttribute]("height", this.height);
+            return this;
+        };
+        var create = function () {
+            var con = getContainer[apply](0, arguments),
+                container = con && con.container,
+                x = con.x,
+                y = con.y,
+                width = con.width,
+                height = con.height;
+            if (!container) {
+                throw new Error("SVG container not found.");
+            }
+            var cnvs = $("svg");
+            x = x || 0;
+            y = y || 0;
+            width = width || 512;
+            height = height || 342;
+            $(cnvs, {
+                xmlns: "http://www.w3.org/2000/svg",
+                version: 1.1,
+                width: width,
+                height: height
+            });
+            if (container == 1) {
+                cnvs.style.cssText = "position:absolute;left:" + x + "px;top:" + y + "px";
+                doc.body[appendChild](cnvs);
+            } else {
+                if (container.firstChild) {
+                    container.insertBefore(cnvs, container.firstChild);
+                } else {
+                    container[appendChild](cnvs);
+                }
+            }
+            container = new Paper;
+            container.width = width;
+            container.height = height;
+            container.canvas = cnvs;
+            plugins.call(container, container, R.fn);
+            container.clear();
+            return container;
+        };
+        Paper[proto].clear = function () {
+            var c = this.canvas;
+            while (c.firstChild) {
+                c.removeChild(c.firstChild);
+            }
+            this.bottom = this.top = null;
+            (this.desc = $("desc"))[appendChild](doc.createTextNode("Created with Rapha\xebl"));
+            c[appendChild](this.desc);
+            c[appendChild](this.defs = $("defs"));
+        };
+        Paper[proto].remove = function () {
+            this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
+            for (var i in this) {
+                this[i] = removed(i);
+            }
+        };
+    }
+
+    // VML
+    if (R.vml) {
+        var map = {M: "m", L: "l", C: "c", Z: "x", m: "t", l: "r", c: "v", z: "x"},
+            bites = /([clmz]),?([^clmz]*)/gi,
+            val = /-?[^,\s-]+/g,
+            coordsize = 1e3 + S + 1e3,
+            zoom = 10,
+            pathlike = {path: 1, rect: 1},
+            path2vml = function (path) {
+                var total =  /[ahqstv]/ig,
+                    command = pathToAbsolute;
+                (path + E).match(total) && (command = path2curve);
+                total = /[clmz]/g;
+                if (command == pathToAbsolute && !(path + E).match(total)) {
+                    var res = (path + E)[rp](bites, function (all, command, args) {
+                        var vals = [],
+                            isMove = lowerCase.call(command) == "m",
+                            res = map[command];
+                        args[rp](val, function (value) {
+                            if (isMove && vals[length] == 2) {
+                                res += vals + map[command == "m" ? "l" : "L"];
+                                vals = [];
+                            }
+                            vals[push](round(value * zoom));
+                        });
+                        return res + vals;
+                    });
+                    return res;
+                }
+                var pa = command(path), p, r;
+                res = [];
+                for (var i = 0, ii = pa[length]; i < ii; i++) {
+                    p = pa[i];
+                    r = lowerCase.call(pa[i][0]);
+                    r == "z" && (r = "x");
+                    for (var j = 1, jj = p[length]; j < jj; j++) {
+                        r += round(p[j] * zoom) + (j != jj - 1 ? "," : E);
+                    }
+                    res[push](r);
+                }
+                return res[join](S);
+            };
+        
+        R[toString] = function () {
+            return  "Your browser doesn\u2019t support SVG. Falling down to VML.\nYou are running Rapha\xebl " + this.version;
+        };
+        thePath = function (pathString, vml) {
+            var g = createNode("group");
+            g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
+            g.coordsize = vml.coordsize;
+            g.coordorigin = vml.coordorigin;
+            var el = createNode("shape"), ol = el.style;
+            ol.width = vml.width + "px";
+            ol.height = vml.height + "px";
+            el.coordsize = coordsize;
+            el.coordorigin = vml.coordorigin;
+            g[appendChild](el);
+            var p = new Element(el, g, vml),
+                attr = {fill: "none", stroke: "#000"};
+            pathString && (attr.path = pathString);
+            p.isAbsolute = true;
+            p.type = "path";
+            p.path = [];
+            p.Path = E;
+            setFillAndStroke(p, attr);
+            vml.canvas[appendChild](g);
+            return p;
+        };
+        setFillAndStroke = function (o, params) {
+            o.attrs = o.attrs || {};
+            var node = o.node,
+                a = o.attrs,
+                s = node.style,
+                xy,
+                newpath = (params.x != a.x || params.y != a.y || params.width != a.width || params.height != a.height || params.r != a.r) && o.type == "rect",
+                res = o;
+            
+            for (var par in params) if (params[has](par)) {
+                a[par] = params[par];
+            }
+            if (newpath) {
+                a.path = rectPath(a.x, a.y, a.width, a.height, a.r);
+                o.X = a.x;
+                o.Y = a.y;
+                o.W = a.width;
+                o.H = a.height;
+            }
+            params.href && (node.href = params.href);
+            params.title && (node.title = params.title);
+            params.target && (node.target = params.target);
+            params.cursor && (s.cursor = params.cursor);
+            "blur" in params && o.blur(params.blur);
+            if (params.path && o.type == "path" || newpath) {
+                    node.path = path2vml(a.path);
+            }
+            if (params.rotation != null) {
+                o.rotate(params.rotation, true);
+            }
+            if (params.translation) {
+                xy = (params.translation + E)[split](separator);
+                translate.call(o, xy[0], xy[1]);
+                if (o._.rt.cx != null) {
+                    o._.rt.cx +=+ xy[0];
+                    o._.rt.cy +=+ xy[1];
+                    o.setBox(o.attrs, xy[0], xy[1]);
+                }
+            }
+            if (params.scale) {
+                xy = (params.scale + E)[split](separator);
+                o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1, +xy[2] || null, +xy[3] || null);
+            }
+            if ("clip-rect" in params) {
+                var rect = (params["clip-rect"] + E)[split](separator);
+                if (rect[length] == 4) {
+                    rect[2] = +rect[2] + (+rect[0]);
+                    rect[3] = +rect[3] + (+rect[1]);
+                    var div = node.clipRect || doc.createElement("div"),
+                        dstyle = div.style,
+                        group = node.parentNode;
+                    dstyle.clip = R.format("rect({1}px {2}px {3}px {0}px)", rect);
+                    if (!node.clipRect) {
+                        dstyle.position = "absolute";
+                        dstyle.top = 0;
+                        dstyle.left = 0;
+                        dstyle.width = o.paper.width + "px";
+                        dstyle.height = o.paper.height + "px";
+                        group.parentNode.insertBefore(div, group);
+                        div[appendChild](group);
+                        node.clipRect = div;
+                    }
+                }
+                if (!params["clip-rect"]) {
+                    node.clipRect && (node.clipRect.style.clip = E);
+                }
+            }
+            if (o.type == "image" && params.src) {
+                node.src = params.src;
+            }
+            if (o.type == "image" && params.opacity) {
+                node.filterOpacity = ms + ".Alpha(opacity=" + (params.opacity * 100) + ")";
+                s.filter = (node.filterMatrix || E) + (node.filterOpacity || E);
+            }
+            params.font && (s.font = params.font);
+            params["font-family"] && (s.fontFamily = '"' + params["font-family"][split](",")[0][rp](/^['"]+|['"]+$/g, E) + '"');
+            params["font-size"] && (s.fontSize = params["font-size"]);
+            params["font-weight"] && (s.fontWeight = params["font-weight"]);
+            params["font-style"] && (s.fontStyle = params["font-style"]);
+            if (params.opacity != null || 
+                params["stroke-width"] != null ||
+                params.fill != null ||
+                params.stroke != null ||
+                params["stroke-width"] != null ||
+                params["stroke-opacity"] != null ||
+                params["fill-opacity"] != null ||
+                params["stroke-dasharray"] != null ||
+                params["stroke-miterlimit"] != null ||
+                params["stroke-linejoin"] != null ||
+                params["stroke-linecap"] != null) {
+                node = o.shape || node;
+                var fill = (node.getElementsByTagName(fillString) && node.getElementsByTagName(fillString)[0]),
+                    newfill = false;
+                !fill && (newfill = fill = createNode(fillString));
+                if ("fill-opacity" in params || "opacity" in params) {
+                    var opacity = ((+a["fill-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1) * ((+R.getRGB(params.fill).o + 1 || 2) - 1);
+                    opacity < 0 && (opacity = 0);
+                    opacity > 1 && (opacity = 1);
+                    fill.opacity = opacity;
+                }
+                params.fill && (fill.on = true);
+                if (fill.on == null || params.fill == "none") {
+                    fill.on = false;
+                }
+                if (fill.on && params.fill) {
+                    var isURL = params.fill.match(ISURL);
+                    if (isURL) {
+                        fill.src = isURL[1];
+                        fill.type = "tile";
+                    } else {
+                        fill.color = R.getRGB(params.fill).hex;
+                        fill.src = E;
+                        fill.type = "solid";
+                        if (R.getRGB(params.fill).error && (res.type in {circle: 1, ellipse: 1} || (params.fill + E).charAt() != "r") && addGradientFill(res, params.fill)) {
+                            a.fill = "none";
+                            a.gradient = params.fill;
+                        }
+                    }
+                }
+                newfill && node[appendChild](fill);
+                var stroke = (node.getElementsByTagName("stroke") && node.getElementsByTagName("stroke")[0]),
+                newstroke = false;
+                !stroke && (newstroke = stroke = createNode("stroke"));
+                if ((params.stroke && params.stroke != "none") ||
+                    params["stroke-width"] ||
+                    params["stroke-opacity"] != null ||
+                    params["stroke-dasharray"] ||
+                    params["stroke-miterlimit"] ||
+                    params["stroke-linejoin"] ||
+                    params["stroke-linecap"]) {
+                    stroke.on = true;
+                }
+                (params.stroke == "none" || stroke.on == null || params.stroke == 0 || params["stroke-width"] == 0) && (stroke.on = false);
+                var strokeColor = R.getRGB(params.stroke);
+                stroke.on && params.stroke && (stroke.color = strokeColor.hex);
+                opacity = ((+a["stroke-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1) * ((+strokeColor.o + 1 || 2) - 1);
+                var width = (toFloat(params["stroke-width"]) || 1) * .75;
+                opacity < 0 && (opacity = 0);
+                opacity > 1 && (opacity = 1);
+                params["stroke-width"] == null && (width = a["stroke-width"]);
+                params["stroke-width"] && (stroke.weight = width);
+                width && width < 1 && (opacity *= width) && (stroke.weight = 1);
+                stroke.opacity = opacity;
+                
+                params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
+                stroke.miterlimit = params["stroke-miterlimit"] || 8;
+                params["stroke-linecap"] && (stroke.endcap = params["stroke-linecap"] == "butt" ? "flat" : params["stroke-linecap"] == "square" ? "square" : "round");
+                if (params["stroke-dasharray"]) {
+                    var dasharray = {
+                        "-": "shortdash",
+                        ".": "shortdot",
+                        "-.": "shortdashdot",
+                        "-..": "shortdashdotdot",
+                        ". ": "dot",
+                        "- ": "dash",
+                        "--": "longdash",
+                        "- .": "dashdot",
+                        "--.": "longdashdot",
+                        "--..": "longdashdotdot"
+                    };
+                    stroke.dashstyle = dasharray[has](params["stroke-dasharray"]) ? dasharray[params["stroke-dasharray"]] : E;
+                }
+                newstroke && node[appendChild](stroke);
+            }
+            if (res.type == "text") {
+                s = res.paper.span.style;
+                a.font && (s.font = a.font);
+                a["font-family"] && (s.fontFamily = a["font-family"]);
+                a["font-size"] && (s.fontSize = a["font-size"]);
+                a["font-weight"] && (s.fontWeight = a["font-weight"]);
+                a["font-style"] && (s.fontStyle = a["font-style"]);
+                res.node.string && (res.paper.span.innerHTML = (res.node.string + E)[rp](/</g, "&#60;")[rp](/&/g, "&#38;")[rp](/\n/g, "<br>"));
+                res.W = a.w = res.paper.span.offsetWidth;
+                res.H = a.h = res.paper.span.offsetHeight;
+                res.X = a.x;
+                res.Y = a.y + round(res.H / 2);
+ 
+                // text-anchor emulationm
+                switch (a["text-anchor"]) {
+                    case "start":
+                        res.node.style["v-text-align"] = "left";
+                        res.bbx = round(res.W / 2);
+                    break;
+                    case "end":
+                        res.node.style["v-text-align"] = "right";
+                        res.bbx = -round(res.W / 2);
+                    break;
+                    default:
+                        res.node.style["v-text-align"] = "center";
+                    break;
+                }
+            }
+        };
+        addGradientFill = function (o, gradient) {
+            o.attrs = o.attrs || {};
+            var attrs = o.attrs,
+                fill,
+                type = "linear",
+                fxfy = ".5 .5";
+            o.attrs.gradient = gradient;
+            gradient = (gradient + E)[rp](radial_gradient, function (all, fx, fy) {
+                type = "radial";
+                if (fx && fy) {
+                    fx = toFloat(fx);
+                    fy = toFloat(fy);
+                    pow(fx - .5, 2) + pow(fy - .5, 2) > .25 && (fy = math.sqrt(.25 - pow(fx - .5, 2)) * ((fy > .5) * 2 - 1) + .5);
+                    fxfy = fx + S + fy;
+                }
+                return E;
+            });
+            gradient = gradient[split](/\s*\-\s*/);
+            if (type == "linear") {
+                var angle = gradient.shift();
+                angle = -toFloat(angle);
+                if (isNaN(angle)) {
+                    return null;
+                }
+            }
+            var dots = parseDots(gradient);
+            if (!dots) {
+                return null;
+            }
+            o = o.shape || o.node;
+            fill = o.getElementsByTagName(fillString)[0] || createNode(fillString);
+            !fill.parentNode && o.appendChild(fill);
+            if (dots[length]) {
+                fill.on = true;
+                fill.method = "none";
+                fill.color = dots[0].color;
+                fill.color2 = dots[dots[length] - 1].color;
+                var clrs = [];
+                for (var i = 0, ii = dots[length]; i < ii; i++) {
+                    dots[i].offset && clrs[push](dots[i].offset + S + dots[i].color);
+                }
+                fill.colors && (fill.colors.value = clrs[length] ? clrs[join]() : "0% " + fill.color);
+                if (type == "radial") {
+                    fill.type = "gradientradial";
+                    fill.focus = "100%";
+                    fill.focussize = fxfy;
+                    fill.focusposition = fxfy;
+                } else {
+                    fill.type = "gradient";
+                    fill.angle = (270 - angle) % 360;
+                }
+            }
+            return 1;
+        };
+        Element = function (node, group, vml) {
+            var Rotation = 0,
+                RotX = 0,
+                RotY = 0,
+                Scale = 1;
+            this[0] = node;
+            this.id = R._oid++;
+            this.node = node;
+            node.raphael = this;
+            this.X = 0;
+            this.Y = 0;
+            this.attrs = {};
+            this.Group = group;
+            this.paper = vml;
+            this._ = {
+                tx: 0,
+                ty: 0,
+                rt: {deg:0},
+                sx: 1,
+                sy: 1
+            };
+            !vml.bottom && (vml.bottom = this);
+            this.prev = vml.top;
+            vml.top && (vml.top.next = this);
+            vml.top = this;
+            this.next = null;
+        };
+        Element[proto].rotate = function (deg, cx, cy) {
+            if (this.removed) {
+                return this;
+            }
+            if (deg == null) {
+                if (this._.rt.cx) {
+                    return [this._.rt.deg, this._.rt.cx, this._.rt.cy][join](S);
+                }
+                return this._.rt.deg;
+            }
+            deg = (deg + E)[split](separator);
+            if (deg[length] - 1) {
+                cx = toFloat(deg[1]);
+                cy = toFloat(deg[2]);
+            }
+            deg = toFloat(deg[0]);
+            if (cx != null) {
+                this._.rt.deg = deg;
+            } else {
+                this._.rt.deg += deg;
+            }
+            cy == null && (cx = null);
+            this._.rt.cx = cx;
+            this._.rt.cy = cy;
+            this.setBox(this.attrs, cx, cy);
+            this.Group.style.rotation = this._.rt.deg;
+            // gradient fix for rotation. TODO
+            // var fill = (this.shape || this.node).getElementsByTagName(fillString);
+            // fill = fill[0] || {};
+            // var b = ((360 - this._.rt.deg) - 270) % 360;
+            // !R.is(fill.angle, "undefined") && (fill.angle = b);
+            return this;
+        };
+        Element[proto].setBox = function (params, cx, cy) {
+            if (this.removed) {
+                return this;
+            }
+            var gs = this.Group.style,
+                os = (this.shape && this.shape.style) || this.node.style;
+            params = params || {};
+            for (var i in params) if (params[has](i)) {
+                this.attrs[i] = params[i];
+            }
+            cx = cx || this._.rt.cx;
+            cy = cy || this._.rt.cy;
+            var attr = this.attrs,
+                x,
+                y,
+                w,
+                h;
+            switch (this.type) {
+                case "circle":
+                    x = attr.cx - attr.r;
+                    y = attr.cy - attr.r;
+                    w = h = attr.r * 2;
+                    break;
+                case "ellipse":
+                    x = attr.cx - attr.rx;
+                    y = attr.cy - attr.ry;
+                    w = attr.rx * 2;
+                    h = attr.ry * 2;
+                    break;
+                case "image":
+                    x = +attr.x;
+                    y = +attr.y;
+                    w = attr.width || 0;
+                    h = attr.height || 0;
+                    break;
+                case "text":
+                    this.textpath.v = ["m", round(attr.x), ", ", round(attr.y - 2), "l", round(attr.x) + 1, ", ", round(attr.y - 2)][join](E);
+                    x = attr.x - round(this.W / 2);
+                    y = attr.y - this.H / 2;
+                    w = this.W;
+                    h = this.H;
+                    break;
+                case "rect":
+                case "path":
+                    if (!this.attrs.path) {
+                        x = 0;
+                        y = 0;
+                        w = this.paper.width;
+                        h = this.paper.height;
+                    } else {
+                        var dim = pathDimensions(this.attrs.path);
+                        x = dim.x;
+                        y = dim.y;
+                        w = dim.width;
+                        h = dim.height;
+                    }
+                    break;
+                default:
+                    x = 0;
+                    y = 0;
+                    w = this.paper.width;
+                    h = this.paper.height;
+                    break;
+            }
+            cx = (cx == null) ? x + w / 2 : cx;
+            cy = (cy == null) ? y + h / 2 : cy;
+            var left = cx - this.paper.width / 2,
+                top = cy - this.paper.height / 2, t;
+            gs.left != (t = left + "px") && (gs.left = t);
+            gs.top != (t = top + "px") && (gs.top = t);
+            this.X = pathlike[has](this.type) ? -left : x;
+            this.Y = pathlike[has](this.type) ? -top : y;
+            this.W = w;
+            this.H = h;
+            if (pathlike[has](this.type)) {
+                os.left != (t = -left * zoom + "px") && (os.left = t);
+                os.top != (t = -top * zoom + "px") && (os.top = t);
+            } else if (this.type == "text") {
+                os.left != (t = -left + "px") && (os.left = t);
+                os.top != (t = -top + "px") && (os.top = t);
+            } else {
+                gs.width != (t = this.paper.width + "px") && (gs.width = t);
+                gs.height != (t = this.paper.height + "px") && (gs.height = t);
+                os.left != (t = x - left + "px") && (os.left = t);
+                os.top != (t = y - top + "px") && (os.top = t);
+                os.width != (t = w + "px") && (os.width = t);
+                os.height != (t = h + "px") && (os.height = t);
+            }
+        };
+        Element[proto].hide = function () {
+            !this.removed && (this.Group.style.display = "none");
+            return this;
+        };
+        Element[proto].show = function () {
+            !this.removed && (this.Group.style.display = "block");
+            return this;
+        };
+        Element[proto].getBBox = function () {
+            if (this.removed) {
+                return this;
+            }
+            if (pathlike[has](this.type)) {
+                return pathDimensions(this.attrs.path);
+            }
+            return {
+                x: this.X + (this.bbx || 0),
+                y: this.Y,
+                width: this.W,
+                height: this.H
+            };
+        };
+        Element[proto].remove = function () {
+            if (this.removed) {
+                return;
+            }
+            tear(this, this.paper);
+            this.node.parentNode.removeChild(this.node);
+            this.Group.parentNode.removeChild(this.Group);
+            this.shape && this.shape.parentNode.removeChild(this.shape);
+            for (var i in this) {
+                delete this[i];
+            }
+            this.removed = true;
+        };
+        Element[proto].attr = function (name, value) {
+            if (this.removed) {
+                return this;
+            }
+            if (name == null) {
+                var res = {};
+                for (var i in this.attrs) if (this.attrs[has](i)) {
+                    res[i] = this.attrs[i];
+                }
+                this._.rt.deg && (res.rotation = this.rotate());
+                (this._.sx != 1 || this._.sy != 1) && (res.scale = this.scale());
+                res.gradient && res.fill == "none" && (res.fill = res.gradient) && delete res.gradient;
+                return res;
+            }
+            if (value == null && R.is(name, string)) {
+                if (name == "translation") {
+                    return translate.call(this);
+                }
+                if (name == "rotation") {
+                    return this.rotate();
+                }
+                if (name == "scale") {
+                    return this.scale();
+                }
+                if (name == fillString && this.attrs.fill == "none" && this.attrs.gradient) {
+                    return this.attrs.gradient;
+                }
+                return this.attrs[name];
+            }
+            if (this.attrs && value == null && R.is(name, array)) {
+                var ii, values = {};
+                for (i = 0, ii = name[length]; i < ii; i++) {
+                    values[name[i]] = this.attr(name[i]);
+                }
+                return values;
+            }
+            var params;
+            if (value != null) {
+                params = {};
+                params[name] = value;
+            }
+            value == null && R.is(name, "object") && (params = name);
+            if (params) {
+                if (params.text && this.type == "text") {
+                    this.node.string = params.text;
+                }
+                setFillAndStroke(this, params);
+                if (params.gradient && (({circle: 1, ellipse: 1})[has](this.type) || (params.gradient + E).charAt() != "r")) {
+                    addGradientFill(this, params.gradient);
+                }
+                (!pathlike[has](this.type) || this._.rt.deg) && this.setBox(this.attrs);
+            }
+            return this;
+        };
+        Element[proto].toFront = function () {
+            !this.removed && this.Group.parentNode[appendChild](this.Group);
+            this.paper.top != this && tofront(this, this.paper);
+            return this;
+        };
+        Element[proto].toBack = function () {
+            if (this.removed) {
+                return this;
+            }
+            if (this.Group.parentNode.firstChild != this.Group) {
+                this.Group.parentNode.insertBefore(this.Group, this.Group.parentNode.firstChild);
+                toback(this, this.paper);
+            }
+            return this;
+        };
+        Element[proto].insertAfter = function (element) {
+            if (this.removed) {
+                return this;
+            }
+            if (element.Group.nextSibling) {
+                element.Group.parentNode.insertBefore(this.Group, element.Group.nextSibling);
+            } else {
+                element.Group.parentNode[appendChild](this.Group);
+            }
+            insertafter(this, element, this.paper);
+            return this;
+        };
+        Element[proto].insertBefore = function (element) {
+            if (this.removed) {
+                return this;
+            }
+            element.Group.parentNode.insertBefore(this.Group, element.Group);
+            insertbefore(this, element, this.paper);
+            return this;
+        };
+        var blurregexp = / progid:\S+Blur\([^\)]+\)/g;
+        Element[proto].blur = function (size) {
+            var s = this.node.style,
+                f = s.filter;
+            f = f.replace(blurregexp, "");
+            if (+size !== 0) {
+                this.attrs.blur = size;
+                s.filter = f + ms + ".Blur(pixelradius=" + (+size || 1.5) + ")";
+                s.margin = Raphael.format("-{0}px 0 0 -{0}px", Math.round(+size || 1.5));
+            } else {
+                s.filter = f;
+                s.margin = 0;
+                delete this.attrs.blur;
+            }
+        };
+ 
+        theCircle = function (vml, x, y, r) {
+            var g = createNode("group"),
+                o = createNode("oval"),
+                ol = o.style;
+            g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
+            g.coordsize = coordsize;
+            g.coordorigin = vml.coordorigin;
+            g[appendChild](o);
+            var res = new Element(o, g, vml);
+            res.type = "circle";
+            setFillAndStroke(res, {stroke: "#000", fill: "none"});
+            res.attrs.cx = x;
+            res.attrs.cy = y;
+            res.attrs.r = r;
+            res.setBox({x: x - r, y: y - r, width: r * 2, height: r * 2});
+            vml.canvas[appendChild](g);
+            return res;
+        };
+        function rectPath(x, y, w, h, r) {
+            if (r) {
+                return R.format("M{0},{1}l{2},0a{3},{3},0,0,1,{3},{3}l0,{5}a{3},{3},0,0,1,{4},{3}l{6},0a{3},{3},0,0,1,{4},{4}l0,{7}a{3},{3},0,0,1,{3},{4}z", x + r, y, w - r * 2, r, -r, h - r * 2, r * 2 - w, r * 2 - h);
+            } else {
+                return R.format("M{0},{1}l{2},0,0,{3},{4},0z", x, y, w, h, -w);
+            }
+        }
+        theRect = function (vml, x, y, w, h, r) {
+            var path = rectPath(x, y, w, h, r),
+                res = vml.path(path),
+                a = res.attrs;
+            res.X = a.x = x;
+            res.Y = a.y = y;
+            res.W = a.width = w;
+            res.H = a.height = h;
+            a.r = r;
+            a.path = path;
+            res.type = "rect";
+            return res;
+        };
+        theEllipse = function (vml, x, y, rx, ry) {
+            var g = createNode("group"),
+                o = createNode("oval"),
+                ol = o.style;
+            g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
+            g.coordsize = coordsize;
+            g.coordorigin = vml.coordorigin;
+            g[appendChild](o);
+            var res = new Element(o, g, vml);
+            res.type = "ellipse";
+            setFillAndStroke(res, {stroke: "#000"});
+            res.attrs.cx = x;
+            res.attrs.cy = y;
+            res.attrs.rx = rx;
+            res.attrs.ry = ry;
+            res.setBox({x: x - rx, y: y - ry, width: rx * 2, height: ry * 2});
+            vml.canvas[appendChild](g);
+            return res;
+        };
+        theImage = function (vml, src, x, y, w, h) {
+            var g = createNode("group"),
+                o = createNode("image"),
+                ol = o.style;
+            g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
+            g.coordsize = coordsize;
+            g.coordorigin = vml.coordorigin;
+            o.src = src;
+            g[appendChild](o);
+            var res = new Element(o, g, vml);
+            res.type = "image";
+            res.attrs.src = src;
+            res.attrs.x = x;
+            res.attrs.y = y;
+            res.attrs.w = w;
+            res.attrs.h = h;
+            res.setBox({x: x, y: y, width: w, height: h});
+            vml.canvas[appendChild](g);
+            return res;
+        };
+        theText = function (vml, x, y, text) {
+            var g = createNode("group"),
+                el = createNode("shape"),
+                ol = el.style,
+                path = createNode("path"),
+                ps = path.style,
+                o = createNode("textpath");
+            g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
+            g.coordsize = coordsize;
+            g.coordorigin = vml.coordorigin;
+            path.v = R.format("m{0},{1}l{2},{1}", round(x * 10), round(y * 10), round(x * 10) + 1);
+            path.textpathok = true;
+            ol.width = vml.width;
+            ol.height = vml.height;
+            o.string = text + E;
+            o.on = true;
+            el[appendChild](o);
+            el[appendChild](path);
+            g[appendChild](el);
+            var res = new Element(o, g, vml);
+            res.shape = el;
+            res.textpath = path;
+            res.type = "text";
+            res.attrs.text = text;
+            res.attrs.x = x;
+            res.attrs.y = y;
+            res.attrs.w = 1;
+            res.attrs.h = 1;
+            setFillAndStroke(res, {font: availableAttrs.font, stroke: "none", fill: "#000"});
+            res.setBox();
+            vml.canvas[appendChild](g);
+            return res;
+        };
+        setSize = function (width, height) {
+            var cs = this.canvas.style;
+            width == +width && (width += "px");
+            height == +height && (height += "px");
+            cs.width = width;
+            cs.height = height;
+            cs.clip = "rect(0 " + width + " " + height + " 0)";
+            return this;
+        };
+        var createNode;
+        doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
+        try {
+            !doc.namespaces.rvml && doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
+            createNode = function (tagName) {
+                return doc.createElement('<rvml:' + tagName + ' class="rvml">');
+            };
+        } catch (e) {
+            createNode = function (tagName) {
+                return doc.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
+            };
+        }
+        create = function () {
+            var con = getContainer[apply](0, arguments),
+                container = con.container,
+                height = con.height,
+                s,
+                width = con.width,
+                x = con.x,
+                y = con.y;
+            if (!container) {
+                throw new Error("VML container not found.");
+            }
+            var res = new Paper,
+                c = res.canvas = doc.createElement("div"),
+                cs = c.style;
+            x = x || 0;
+            y = y || 0;
+            width = width || 512;
+            height = height || 342;
+            width == +width && (width += "px");
+            height == +height && (height += "px");
+            res.width = 1e3;
+            res.height = 1e3;
+            res.coordsize = zoom * 1e3 + S + zoom * 1e3;
+            res.coordorigin = "0 0";
+            res.span = doc.createElement("span");
+            res.span.style.cssText = "position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;display:inline;";
+            c[appendChild](res.span);
+            cs.cssText = R.format("width:{0};height:{1};display:inline-block;position:relative;clip:rect(0 {0} {1} 0);overflow:hidden", width, height);
+            if (container == 1) {
+                doc.body[appendChild](c);
+                cs.left = x + "px";
+                cs.top = y + "px";
+                cs.position = "absolute";
+            } else {
+                if (container.firstChild) {
+                    container.insertBefore(c, container.firstChild);
+                } else {
+                    container[appendChild](c);
+                }
+            }
+            plugins.call(res, res, R.fn);
+            return res;
+        };
+        Paper[proto].clear = function () {
+            this.canvas.innerHTML = E;
+            this.span = doc.createElement("span");
+            this.span.style.cssText = "position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;display:inline;";
+            this.canvas[appendChild](this.span);
+            this.bottom = this.top = null;
+        };
+        Paper[proto].remove = function () {
+            this.canvas.parentNode.removeChild(this.canvas);
+            for (var i in this) {
+                this[i] = removed(i);
+            }
+            return true;
+        };
+    }
+ 
+    // rest
+    // Safari or Chrome (WebKit) rendering bug workaround method
+    if ((/^Apple|^Google/).test(win.navigator.vendor) && (!(win.navigator.userAgent.indexOf("Version/4.0") + 1) || win.navigator.platform.slice(0, 2) == "iP")) {
+        Paper[proto].safari = function () {
+            var rect = this.rect(-99, -99, this.width + 99, this.height + 99);
+            win.setTimeout(function () {rect.remove();});
+        };
+    } else {
+        Paper[proto].safari = function () {};
+    }
+ 
+    // Events
+    var preventDefault = function () {
+        this.returnValue = false;
+    },
+    preventTouch = function () {
+        return this.originalEvent.preventDefault();
+    },
+    stopPropagation = function () {
+        this.cancelBubble = true;
+    },
+    stopTouch = function () {
+        return this.originalEvent.stopPropagation();
+    },
+    addEvent = (function () {
+        if (doc.addEventListener) {
+            return function (obj, type, fn, element) {
+                var realName = supportsTouch && touchMap[type] ? touchMap[type] : type;
+                var f = function (e) {
+                    if (supportsTouch && touchMap[has](type)) {
+                        for (var i = 0, ii = e.targetTouches && e.targetTouches.length; i < ii; i++) {
+                            if (e.targetTouches[i].target == obj) {
+                                var olde = e;
+                                e = e.targetTouches[i];
+                                e.originalEvent = olde;
+                                e.preventDefault = preventTouch;
+                                e.stopPropagation = stopTouch;
+                                break;
+                            }
+                        }
+                    }
+                    return fn.call(element, e);
+                };
+                obj.addEventListener(realName, f, false);
+                return function () {
+                    obj.removeEventListener(realName, f, false);
+                    return true;
+                };
+            };
+        } else if (doc.attachEvent) {
+            return function (obj, type, fn, element) {
+                var f = function (e) {
+                    e = e || win.event;
+                    e.preventDefault = e.preventDefault || preventDefault;
+                    e.stopPropagation = e.stopPropagation || stopPropagation;
+                    return fn.call(element, e);
+                };
+                obj.attachEvent("on" + type, f);
+                var detacher = function () {
+                    obj.detachEvent("on" + type, f);
+                    return true;
+                };
+                return detacher;
+            };
+        }
+    })();
+    for (var i = events[length]; i--;) {
+        (function (eventName) {
+            R[eventName] = Element[proto][eventName] = function (fn) {
+                if (R.is(fn, "function")) {
+                    this.events = this.events || [];
+                    this.events.push({name: eventName, f: fn, unbind: addEvent(this.shape || this.node || doc, eventName, fn, this)});
+                }
+                return this;
+            };
+            R["un" + eventName] = Element[proto]["un" + eventName] = function (fn) {
+                var events = this.events,
+                    l = events[length];
+                while (l--) if (events[l].name == eventName && events[l].f == fn) {
+                    events[l].unbind();
+                    events.splice(l, 1);
+                    !events.length && delete this.events;
+                    return this;
+                }
+                return this;
+            };
+        })(events[i]);
+    }
+    Element[proto].hover = function (f_in, f_out) {
+        return this.mouseover(f_in).mouseout(f_out);
+    };
+    Element[proto].unhover = function (f_in, f_out) {
+        return this.unmouseover(f_in).unmouseout(f_out);
+    };
+    Element[proto].drag = function (onmove, onstart, onend) {
+        this._drag = {};
+        var el = this.mousedown(function (e) {
+            (e.originalEvent ? e.originalEvent : e).preventDefault();
+            this._drag.x = e.clientX;
+            this._drag.y = e.clientY;
+            this._drag.id = e.identifier;
+            onstart && onstart.call(this, e.clientX, e.clientY);
+            Raphael.mousemove(move).mouseup(up);
+        }),
+            move = function (e) {
+                var x = e.clientX,
+                    y = e.clientY;
+                if (supportsTouch) {
+                    var i = e.touches.length,
+                        touch;
+                    while (i--) {
+                        touch = e.touches[i];
+                        if (touch.identifier == el._drag.id) {
+                            x = touch.clientX;
+                            y = touch.clientY;
+                            (e.originalEvent ? e.originalEvent : e).preventDefault();
+                            break;
+                        }
+                    }
+                } else {
+                    e.preventDefault();
+                }
+                onmove && onmove.call(el, x - el._drag.x, y - el._drag.y, x, y);
+            },
+            up = function () {
+                el._drag = {};
+                Raphael.unmousemove(move).unmouseup(up);
+                onend && onend.call(el);
+            };
+        return this;
+    };
+    Paper[proto].circle = function (x, y, r) {
+        return theCircle(this, x || 0, y || 0, r || 0);
+    };
+    Paper[proto].rect = function (x, y, w, h, r) {
+        return theRect(this, x || 0, y || 0, w || 0, h || 0, r || 0);
+    };
+    Paper[proto].ellipse = function (x, y, rx, ry) {
+        return theEllipse(this, x || 0, y || 0, rx || 0, ry || 0);
+    };
+    Paper[proto].path = function (pathString) {
+        pathString && !R.is(pathString, string) && !R.is(pathString[0], array) && (pathString += E);
+        return thePath(R.format[apply](R, arguments), this);
+    };
+    Paper[proto].image = function (src, x, y, w, h) {
+        return theImage(this, src || "about:blank", x || 0, y || 0, w || 0, h || 0);
+    };
+    Paper[proto].text = function (x, y, text) {
+        return theText(this, x || 0, y || 0, text || E);
+    };
+    Paper[proto].set = function (itemsArray) {
+        arguments[length] > 1 && (itemsArray = Array[proto].splice.call(arguments, 0, arguments[length]));
+        return new Set(itemsArray);
+    };
+    Paper[proto].setSize = setSize;
+    Paper[proto].top = Paper[proto].bottom = null;
+    Paper[proto].raphael = R;
+    function x_y() {
+        return this.x + S + this.y;
+    }
+    Element[proto].resetScale = function () {
+        if (this.removed) {
+            return this;
+        }
+        this._.sx = 1;
+        this._.sy = 1;
+        this.attrs.scale = "1 1";
+    };
+    Element[proto].scale = function (x, y, cx, cy) {
+        if (this.removed) {
+            return this;
+        }
+        if (x == null && y == null) {
+            return {
+                x: this._.sx,
+                y: this._.sy,
+                toString: x_y
+            };
+        }
+        y = y || x;
+        !+y && (y = x);
+        var dx,
+            dy,
+            dcx,
+            dcy,
+            a = this.attrs;
+        if (x != 0) {
+            var bb = this.getBBox(),
+                rcx = bb.x + bb.width / 2,
+                rcy = bb.y + bb.height / 2,
+                kx = x / this._.sx,
+                ky = y / this._.sy;
+            cx = (+cx || cx == 0) ? cx : rcx;
+            cy = (+cy || cy == 0) ? cy : rcy;
+            var dirx = ~~(x / math.abs(x)),
+                diry = ~~(y / math.abs(y)),
+                s = this.node.style,
+                ncx = cx + (rcx - cx) * kx,
+                ncy = cy + (rcy - cy) * ky;
+            switch (this.type) {
+                case "rect":
+                case "image":
+                    var neww = a.width * dirx * kx,
+                        newh = a.height * diry * ky;
+                    this.attr({
+                        height: newh,
+                        r: a.r * mmin(dirx * kx, diry * ky),
+                        width: neww,
+                        x: ncx - neww / 2,
+                        y: ncy - newh / 2
+                    });
+                    break;
+                case "circle":
+                case "ellipse":
+                    this.attr({
+                        rx: a.rx * dirx * kx,
+                        ry: a.ry * diry * ky,
+                        r: a.r * mmin(dirx * kx, diry * ky),
+                        cx: ncx,
+                        cy: ncy
+                    });
+                    break;
+                case "text":
+                    this.attr({
+                        x: ncx,
+                        y: ncy
+                    });
+                    break;
+                case "path":
+                    var path = pathToRelative(a.path),
+                        skip = true;
+                    for (var i = 0, ii = path[length]; i < ii; i++) {
+                        var p = path[i],
+                            P0 = upperCase.call(p[0]);
+                        if (P0 == "M" && skip) {
+                            continue;
+                        } else {
+                            skip = false;
+                        }
+                        if (P0 == "A") {
+                            p[path[i][length] - 2] *= kx;
+                            p[path[i][length] - 1] *= ky;
+                            p[1] *= dirx * kx;
+                            p[2] *= diry * ky;
+                            p[5] = +!(dirx + diry ? !+p[5] : +p[5]);
+                        } else if (P0 == "H") {
+                            for (var j = 1, jj = p[length]; j < jj; j++) {
+                                p[j] *= kx;
+                            }
+                        } else if (P0 == "V") {
+                            for (j = 1, jj = p[length]; j < jj; j++) {
+                                p[j] *= ky;
+                            }
+                         } else {
+                            for (j = 1, jj = p[length]; j < jj; j++) {
+                                p[j] *= (j % 2) ? kx : ky;
+                            }
+                        }
+                    }
+                    var dim2 = pathDimensions(path);
+                    dx = ncx - dim2.x - dim2.width / 2;
+                    dy = ncy - dim2.y - dim2.height / 2;
+                    path[0][1] += dx;
+                    path[0][2] += dy;
+                    this.attr({path: path});
+                break;
+            }
+            if (this.type in {text: 1, image:1} && (dirx != 1 || diry != 1)) {
+                if (this.transformations) {
+                    this.transformations[2] = "scale("[concat](dirx, ",", diry, ")");
+                    this.node[setAttribute]("transform", this.transformations[join](S));
+                    dx = (dirx == -1) ? -a.x - (neww || 0) : a.x;
+                    dy = (diry == -1) ? -a.y - (newh || 0) : a.y;
+                    this.attr({x: dx, y: dy});
+                    a.fx = dirx - 1;
+                    a.fy = diry - 1;
+                } else {
+                    this.node.filterMatrix = ms + ".Matrix(M11="[concat](dirx,
+                        ", M12=0, M21=0, M22=", diry,
+                        ", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')");
+                    s.filter = (this.node.filterMatrix || E) + (this.node.filterOpacity || E);
+                }
+            } else {
+                if (this.transformations) {
+                    this.transformations[2] = E;
+                    this.node[setAttribute]("transform", this.transformations[join](S));
+                    a.fx = 0;
+                    a.fy = 0;
+                } else {
+                    this.node.filterMatrix = E;
+                    s.filter = (this.node.filterMatrix || E) + (this.node.filterOpacity || E);
+                }
+            }
+            a.scale = [x, y, cx, cy][join](S);
+            this._.sx = x;
+            this._.sy = y;
+        }
+        return this;
+    };
+    Element[proto].clone = function () {
+        if (this.removed) {
+            return null;
+        }
+        var attr = this.attr();
+        delete attr.scale;
+        delete attr.translation;
+        return this.paper[this.type]().attr(attr);
+    };
+    var getPointAtSegmentLength = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) {
+        var len = 0,
+            old;
+        for (var i = 0; i < 1.001; i+=.001) {
+            var dot = R.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, i);
+            i && (len += pow(pow(old.x - dot.x, 2) + pow(old.y - dot.y, 2), .5));
+            if (len >= length) {
+                return dot;
+            }
+            old = dot;
+        }
+    }),
+    getLengthFactory = function (istotal, subpath) {
+        return function (path, length, onlystart) {
+            path = path2curve(path);
+            var x, y, p, l, sp = "", subpaths = {}, point,
+                len = 0;
+            for (var i = 0, ii = path.length; i < ii; i++) {
+                p = path[i];
+                if (p[0] == "M") {
+                    x = +p[1];
+                    y = +p[2];
+                } else {
+                    l = segmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
+                    if (len + l > length) {
+                        if (subpath && !subpaths.start) {
+                            point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);
+                            sp += ["C", point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];
+                            if (onlystart) {return sp;}
+                            subpaths.start = sp;
+                            sp = ["M", point.x, point.y + "C", point.n.x, point.n.y, point.end.x, point.end.y, p[5], p[6]][join]();
+                            len += l;
+                            x = +p[5];
+                            y = +p[6];
+                            continue;
+                        }
+                        if (!istotal && !subpath) {
+                            point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);
+                            return {x: point.x, y: point.y, alpha: point.alpha};
+                        }
+                    }
+                    len += l;
+                    x = +p[5];
+                    y = +p[6];
+                }
+                sp += p;
+            }
+            subpaths.end = sp;
+            point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[1], p[2], p[3], p[4], p[5], p[6], 1);
+            point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});
+            return point;
+        };
+    },
+    segmentLength = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
+        var old = {x: 0, y: 0},
+            len = 0;
+        for (var i = 0; i < 1.01; i+=.01) {
+            var dot = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, i);
+            i && (len += pow(pow(old.x - dot.x, 2) + pow(old.y - dot.y, 2), .5));
+            old = dot;
+        }
+        return len;
+    });
+    var getTotalLength = getLengthFactory(1),
+        getPointAtLength = getLengthFactory(),
+        getSubpathsAtLength = getLengthFactory(0, 1);
+    Element[proto].getTotalLength = function () {
+        if (this.type != "path") {return;}
+        if (this.node.getTotalLength) {
+            return this.node.getTotalLength();
+        }
+        return getTotalLength(this.attrs.path);
+    };
+    Element[proto].getPointAtLength = function (length) {
+        if (this.type != "path") {return;}
+        return getPointAtLength(this.attrs.path, length);
+    };
+    Element[proto].getSubpath = function (from, to) {
+        if (this.type != "path") {return;}
+        if (math.abs(this.getTotalLength() - to) < 1e-6) {
+            return getSubpathsAtLength(this.attrs.path, from).end;
+        }
+        var a = getSubpathsAtLength(this.attrs.path, to, 1);
+        return from ? getSubpathsAtLength(a, from).end : a;
+    };
+
+    // animation easing formulas
+    R.easing_formulas = {
+        linear: function (n) {
+            return n;
+        },
+        "<": function (n) {
+            return pow(n, 3);
+        },
+        ">": function (n) {
+            return pow(n - 1, 3) + 1;
+        },
+        "<>": function (n) {
+            n = n * 2;
+            if (n < 1) {
+                return pow(n, 3) / 2;
+            }
+            n -= 2;
+            return (pow(n, 3) + 2) / 2;
+        },
+        backIn: function (n) {
+            var s = 1.70158;
+            return n * n * ((s + 1) * n - s);
+        },
+        backOut: function (n) {
+            n = n - 1;
+            var s = 1.70158;
+            return n * n * ((s + 1) * n + s) + 1;
+        },
+        elastic: function (n) {
+            if (n == 0 || n == 1) {
+                return n;
+            }
+            var p = .3,
+                s = p / 4;
+            return pow(2, -10 * n) * math.sin((n - s) * (2 * math.PI) / p) + 1;
+        },
+        bounce: function (n) {
+            var s = 7.5625,
+                p = 2.75,
+                l;
+            if (n < (1 / p)) {
+                l = s * n * n;
+            } else {
+                if (n < (2 / p)) {
+                    n -= (1.5 / p);
+                    l = s * n * n + .75;
+                } else {
+                    if (n < (2.5 / p)) {
+                        n -= (2.25 / p);
+                        l = s * n * n + .9375;
+                    } else {
+                        n -= (2.625 / p);
+                        l = s * n * n + .984375;
+                    }
+                }
+            }
+            return l;
+        }
+    };
+
+    var animationElements = {length : 0},
+        animation = function () {
+            var Now = +new Date;
+            for (var l in animationElements) if (l != "length" && animationElements[has](l)) {
+                var e = animationElements[l];
+                if (e.stop || e.el.removed) {
+                    delete animationElements[l];
+                    animationElements[length]--;
+                    continue;
+                }
+                var time = Now - e.start,
+                    ms = e.ms,
+                    easing = e.easing,
+                    from = e.from,
+                    diff = e.diff,
+                    to = e.to,
+                    t = e.t,
+                    prev = e.prev || 0,
+                    that = e.el,
+                    callback = e.callback,
+                    set = {},
+                    now;
+                if (time < ms) {
+                    var pos = R.easing_formulas[easing] ? R.easing_formulas[easing](time / ms) : time / ms;
+                    for (var attr in from) if (from[has](attr)) {
+                        switch (availableAnimAttrs[attr]) {
+                            case "along":
+                                now = pos * ms * diff[attr];
+                                to.back && (now = to.len - now);
+                                var point = getPointAtLength(to[attr], now);
+                                that.translate(diff.sx - diff.x || 0, diff.sy - diff.y || 0);
+                                diff.x = point.x;
+                                diff.y = point.y;
+                                that.translate(point.x - diff.sx, point.y - diff.sy);
+                                to.rot && that.rotate(diff.r + point.alpha, point.x, point.y);
+                                break;
+                            case nu:
+                                now = +from[attr] + pos * ms * diff[attr];
+                                break;
+                            case "colour":
+                                now = "rgb(" + [
+                                    upto255(round(from[attr].r + pos * ms * diff[attr].r)),
+                                    upto255(round(from[attr].g + pos * ms * diff[attr].g)),
+                                    upto255(round(from[attr].b + pos * ms * diff[attr].b))
+                                ][join](",") + ")";
+                                break;
+                            case "path":
+                                now = [];
+                                for (var i = 0, ii = from[attr][length]; i < ii; i++) {
+                                    now[i] = [from[attr][i][0]];
+                                    for (var j = 1, jj = from[attr][i][length]; j < jj; j++) {
+                                        now[i][j] = +from[attr][i][j] + pos * ms * diff[attr][i][j];
+                                    }
+                                    now[i] = now[i][join](S);
+                                }
+                                now = now[join](S);
+                                break;
+                            case "csv":
+                                switch (attr) {
+                                    case "translation":
+                                        var x = diff[attr][0] * (time - prev),
+                                            y = diff[attr][1] * (time - prev);
+                                        t.x += x;
+                                        t.y += y;
+                                        now = x + S + y;
+                                    break;
+                                    case "rotation":
+                                        now = +from[attr][0] + pos * ms * diff[attr][0];
+                                        from[attr][1] && (now += "," + from[attr][1] + "," + from[attr][2]);
+                                    break;
+                                    case "scale":
+                                        now = [+from[attr][0] + pos * ms * diff[attr][0], +from[attr][1] + pos * ms * diff[attr][1], (2 in to[attr] ? to[attr][2] : E), (3 in to[attr] ? to[attr][3] : E)][join](S);
+                                    break;
+                                    case "clip-rect":
+                                        now = [];
+                                        i = 4;
+                                        while (i--) {
+                                            now[i] = +from[attr][i] + pos * ms * diff[attr][i];
+                                        }
+                                    break;
+                                }
+                                break;
+                        }
+                        set[attr] = now;
+                    }
+                    that.attr(set);
+                    that._run && that._run.call(that);
+                } else {
+                    if (to.along) {
+                        point = getPointAtLength(to.along, to.len * !to.back);
+                        that.translate(diff.sx - (diff.x || 0) + point.x - diff.sx, diff.sy - (diff.y || 0) + point.y - diff.sy);
+                        to.rot && that.rotate(diff.r + point.alpha, point.x, point.y);
+                    }
+                    (t.x || t.y) && that.translate(-t.x, -t.y);
+                    to.scale && (to.scale += E);
+                    that.attr(to);
+                    delete animationElements[l];
+                    animationElements[length]--;
+                    that.in_animation = null;
+                    R.is(callback, "function") && callback.call(that);
+                }
+                e.prev = time;
+            }
+            R.svg && that && that.paper && that.paper.safari();
+            animationElements[length] && win.setTimeout(animation);
+        },
+        upto255 = function (color) {
+            return mmax(mmin(color, 255), 0);
+        },
+        translate = function (x, y) {
+            if (x == null) {
+                return {x: this._.tx, y: this._.ty, toString: x_y};
+            }
+            this._.tx += +x;
+            this._.ty += +y;
+            switch (this.type) {
+                case "circle":
+                case "ellipse":
+                    this.attr({cx: +x + this.attrs.cx, cy: +y + this.attrs.cy});
+                    break;
+                case "rect":
+                case "image":
+                case "text":
+                    this.attr({x: +x + this.attrs.x, y: +y + this.attrs.y});
+                    break;
+                case "path":
+                    var path = pathToRelative(this.attrs.path);
+                    path[0][1] += +x;
+                    path[0][2] += +y;
+                    this.attr({path: path});
+                break;
+            }
+            return this;
+        };
+    Element[proto].animateWith = function (element, params, ms, easing, callback) {
+        animationElements[element.id] && (params.start = animationElements[element.id].start);
+        return this.animate(params, ms, easing, callback);
+    };
+    Element[proto].animateAlong = along();
+    Element[proto].animateAlongBack = along(1);
+    function along(isBack) {
+        return function (path, ms, rotate, callback) {
+            var params = {back: isBack};
+            R.is(rotate, "function") ? (callback = rotate) : (params.rot = rotate);
+            path && path.constructor == Element && (path = path.attrs.path);
+            path && (params.along = path);
+            return this.animate(params, ms, callback);
+        };
+    }
+    Element[proto].onAnimation = function (f) {
+        this._run = f || 0;
+        return this;
+    };
+    Element[proto].animate = function (params, ms, easing, callback) {
+        if (R.is(easing, "function") || !easing) {
+            callback = easing || null;
+        }
+        var from = {},
+            to = {},
+            diff = {};
+        for (var attr in params) if (params[has](attr)) {
+            if (availableAnimAttrs[has](attr)) {
+                from[attr] = this.attr(attr);
+                (from[attr] == null) && (from[attr] = availableAttrs[attr]);
+                to[attr] = params[attr];
+                switch (availableAnimAttrs[attr]) {
+                    case "along":
+                        var len = getTotalLength(params[attr]),
+                            point = getPointAtLength(params[attr], len * !!params.back),
+                            bb = this.getBBox();
+                        diff[attr] = len / ms;
+                        diff.tx = bb.x;
+                        diff.ty = bb.y;
+                        diff.sx = point.x;
+                        diff.sy = point.y;
+                        to.rot = params.rot;
+                        to.back = params.back;
+                        to.len = len;
+                        params.rot && (diff.r = toFloat(this.rotate()) || 0);
+                        break;
+                    case nu:
+                        diff[attr] = (to[attr] - from[attr]) / ms;
+                        break;
+                    case "colour":
+                        from[attr] = R.getRGB(from[attr]);
+                        var toColour = R.getRGB(to[attr]);
+                        diff[attr] = {
+                            r: (toColour.r - from[attr].r) / ms,
+                            g: (toColour.g - from[attr].g) / ms,
+                            b: (toColour.b - from[attr].b) / ms
+                        };
+                        break;
+                    case "path":
+                        var pathes = path2curve(from[attr], to[attr]);
+                        from[attr] = pathes[0];
+                        var toPath = pathes[1];
+                        diff[attr] = [];
+                        for (var i = 0, ii = from[attr][length]; i < ii; i++) {
+                            diff[attr][i] = [0];
+                            for (var j = 1, jj = from[attr][i][length]; j < jj; j++) {
+                                diff[attr][i][j] = (toPath[i][j] - from[attr][i][j]) / ms;
+                            }
+                        }
+                        break;
+                    case "csv":
+                        var values = (params[attr] + E)[split](separator),
+                            from2 = (from[attr] + E)[split](separator);
+                        switch (attr) {
+                            case "translation":
+                                from[attr] = [0, 0];
+                                diff[attr] = [values[0] / ms, values[1] / ms];
+                            break;
+                            case "rotation":
+                                from[attr] = (from2[1] == values[1] && from2[2] == values[2]) ? from2 : [0, values[1], values[2]];
+                                diff[attr] = [(values[0] - from[attr][0]) / ms, 0, 0];
+                            break;
+                            case "scale":
+                                params[attr] = values;
+                                from[attr] = (from[attr] + E)[split](separator);
+                                diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][1]) / ms, 0, 0];
+                            break;
+                            case "clip-rect":
+                                from[attr] = (from[attr] + E)[split](separator);
+                                diff[attr] = [];
+                                i = 4;
+                                while (i--) {
+                                    diff[attr][i] = (values[i] - from[attr][i]) / ms;
+                                }
+                            break;
+                        }
+                        to[attr] = values;
+                }
+            }
+        }
+        this.stop();
+        this.in_animation = 1;
+        animationElements[this.id] = {
+            start: params.start || +new Date,
+            ms: ms,
+            easing: easing,
+            from: from,
+            diff: diff,
+            to: to,
+            el: this,
+            callback: callback,
+            t: {x: 0, y: 0}
+        };
+        ++animationElements[length] == 1 && animation();
+        return this;
+    };
+    Element[proto].stop = function () {
+        animationElements[this.id] && animationElements[length]--;
+        delete animationElements[this.id];
+        return this;
+    };
+    Element[proto].translate = function (x, y) {
+        return this.attr({translation: x + " " + y});
+    };
+    Element[proto][toString] = function () {
+        return "Rapha\xebl\u2019s object";
+    };
+    R.ae = animationElements;
+ 
+    // Set
+    var Set = function (items) {
+        this.items = [];
+        this[length] = 0;
+        this.type = "set";
+        if (items) {
+            for (var i = 0, ii = items[length]; i < ii; i++) {
+                if (items[i] && (items[i].constructor == Element || items[i].constructor == Set)) {
+                    this[this.items[length]] = this.items[this.items[length]] = items[i];
+                    this[length]++;
+                }
+            }
+        }
+    };
+    Set[proto][push] = function () {
+        var item,
+            len;
+        for (var i = 0, ii = arguments[length]; i < ii; i++) {
+            item = arguments[i];
+            if (item && (item.constructor == Element || item.constructor == Set)) {
+                len = this.items[length];
+                this[len] = this.items[len] = item;
+                this[length]++;
+            }
+        }
+        return this;
+    };
+    Set[proto].pop = function () {
+        delete this[this[length]--];
+        return this.items.pop();
+    };
+    for (var method in Element[proto]) if (Element[proto][has](method)) {
+        Set[proto][method] = (function (methodname) {
+            return function () {
+                for (var i = 0, ii = this.items[length]; i < ii; i++) {
+                    this.items[i][methodname][apply](this.items[i], arguments);
+                }
+                return this;
+            };
+        })(method);
+    }
+    Set[proto].attr = function (name, value) {
+        if (name && R.is(name, array) && R.is(name[0], "object")) {
+            for (var j = 0, jj = name[length]; j < jj; j++) {
+                this.items[j].attr(name[j]);
+            }
+        } else {
+            for (var i = 0, ii = this.items[length]; i < ii; i++) {
+                this.items[i].attr(name, value);
+            }
+        }
+        return this;
+    };
+    Set[proto].animate = function (params, ms, easing, callback) {
+        (R.is(easing, "function") || !easing) && (callback = easing || null);
+        var len = this.items[length],
+            i = len,
+            item,
+            set = this,
+            collector;
+        callback && (collector = function () {
+            !--len && callback.call(set);
+        });
+        easing = R.is(easing, string) ? easing : collector;
+        item = this.items[--i].animate(params, ms, easing, collector);
+        while (i--) {
+            this.items[i].animateWith(item, params, ms, easing, collector);
+        }
+        return this;
+    };
+    Set[proto].insertAfter = function (el) {
+        var i = this.items[length];
+        while (i--) {
+            this.items[i].insertAfter(el);
+        }
+        return this;
+    };
+    Set[proto].getBBox = function () {
+        var x = [],
+            y = [],
+            w = [],
+            h = [];
+        for (var i = this.items[length]; i--;) {
+            var box = this.items[i].getBBox();
+            x[push](box.x);
+            y[push](box.y);
+            w[push](box.x + box.width);
+            h[push](box.y + box.height);
+        }
+        x = mmin[apply](0, x);
+        y = mmin[apply](0, y);
+        return {
+            x: x,
+            y: y,
+            width: mmax[apply](0, w) - x,
+            height: mmax[apply](0, h) - y
+        };
+    };
+    Set[proto].clone = function (s) {
+        s = new Set;
+        for (var i = 0, ii = this.items[length]; i < ii; i++) {
+            s[push](this.items[i].clone());
+        }
+        return s;
+    };
+
+    R.registerFont = function (font) {
+        if (!font.face) {
+            return font;
+        }
+        this.fonts = this.fonts || {};
+        var fontcopy = {
+                w: font.w,
+                face: {},
+                glyphs: {}
+            },
+            family = font.face["font-family"];
+        for (var prop in font.face) if (font.face[has](prop)) {
+            fontcopy.face[prop] = font.face[prop];
+        }
+        if (this.fonts[family]) {
+            this.fonts[family][push](fontcopy);
+        } else {
+            this.fonts[family] = [fontcopy];
+        }
+        if (!font.svg) {
+            fontcopy.face["units-per-em"] = toInt(font.face["units-per-em"], 10);
+            for (var glyph in font.glyphs) if (font.glyphs[has](glyph)) {
+                var path = font.glyphs[glyph];
+                fontcopy.glyphs[glyph] = {
+                    w: path.w,
+                    k: {},
+                    d: path.d && "M" + path.d[rp](/[mlcxtrv]/g, function (command) {
+                            return {l: "L", c: "C", x: "z", t: "m", r: "l", v: "c"}[command] || "M";
+                        }) + "z"
+                };
+                if (path.k) {
+                    for (var k in path.k) if (path[has](k)) {
+                        fontcopy.glyphs[glyph].k[k] = path.k[k];
+                    }
+                }
+            }
+        }
+        return font;
+    };
+    Paper[proto].getFont = function (family, weight, style, stretch) {
+        stretch = stretch || "normal";
+        style = style || "normal";
+        weight = +weight || {normal: 400, bold: 700, lighter: 300, bolder: 800}[weight] || 400;
+        if (!R.fonts) {
+            return;
+        }
+        var font = R.fonts[family];
+        if (!font) {
+            var name = new RegExp("(^|\\s)" + family[rp](/[^\w\d\s+!~.:_-]/g, E) + "(\\s|$)", "i");
+            for (var fontName in R.fonts) if (R.fonts[has](fontName)) {
+                if (name.test(fontName)) {
+                    font = R.fonts[fontName];
+                    break;
+                }
+            }
+        }
+        var thefont;
+        if (font) {
+            for (var i = 0, ii = font[length]; i < ii; i++) {
+                thefont = font[i];
+                if (thefont.face["font-weight"] == weight && (thefont.face["font-style"] == style || !thefont.face["font-style"]) && thefont.face["font-stretch"] == stretch) {
+                    break;
+                }
+            }
+        }
+        return thefont;
+    };
+    Paper[proto].print = function (x, y, string, font, size, origin) {
+        origin = origin || "middle"; // baseline|middle
+        var out = this.set(),
+            letters = (string + E)[split](E),
+            shift = 0,
+            path = E,
+            scale;
+        R.is(font, string) && (font = this.getFont(font));
+        if (font) {
+            scale = (size || 16) / font.face["units-per-em"];
+            var bb = font.face.bbox.split(separator),
+                top = +bb[0],
+                height = +bb[1] + (origin == "baseline" ? bb[3] - bb[1] + (+font.face.descent) : (bb[3] - bb[1]) / 2);
+            for (var i = 0, ii = letters[length]; i < ii; i++) {
+                var prev = i && font.glyphs[letters[i - 1]] || {},
+                    curr = font.glyphs[letters[i]];
+                shift += i ? (prev.w || font.w) + (prev.k && prev.k[letters[i]] || 0) : 0;
+                curr && curr.d && out[push](this.path(curr.d).attr({fill: "#000", stroke: "none", translation: [shift, 0]}));
+            }
+            out.scale(scale, scale, top, height).translate(x - top, y - height);
+        }
+        return out;
+    };
+
+    var formatrg = /\{(\d+)\}/g;
+    R.format = function (token, params) {
+        var args = R.is(params, array) ? [0][concat](params) : arguments;
+        token && R.is(token, string) && args[length] - 1 && (token = token[rp](formatrg, function (str, i) {
+            return args[++i] == null ? E : args[i];
+        }));
+        return token || E;
+    };
+    R.ninja = function () {
+        oldRaphael.was ? (Raphael = oldRaphael.is) : delete Raphael;
+        return R;
+    };
+    R.el = Element[proto];
+    return R;
+})();
\ No newline at end of file
diff --git a/js/lib/vkbeautify.0.99.00.beta.js b/js/lib/vkbeautify.0.99.00.beta.js
new file mode 100644
index 0000000..57effae
--- /dev/null
+++ b/js/lib/vkbeautify.0.99.00.beta.js
@@ -0,0 +1,358 @@
+/**
+* vkBeautify - javascript plugin to pretty-print or minify text in XML, JSON, CSS and SQL formats.
+*  
+* Version - 0.99.00.beta 
+* Copyright (c) 2012 Vadim Kiryukhin
+* vkiryukhin @ gmail.com
+* http://www.eslinstructor.net/vkbeautify/
+* 
+* Dual licensed under the MIT and GPL licenses:
+*   http://www.opensource.org/licenses/mit-license.php
+*   http://www.gnu.org/licenses/gpl.html
+*
+*   Pretty print
+*
+*        vkbeautify.xml(text [,indent_pattern]);
+*        vkbeautify.json(text [,indent_pattern]);
+*        vkbeautify.css(text [,indent_pattern]);
+*        vkbeautify.sql(text [,indent_pattern]);
+*
+*        @text - String; text to beatufy;
+*        @indent_pattern - Integer | String;
+*                Integer:  number of white spaces;
+*                String:   character string to visualize indentation ( can also be a set of white spaces )
+*   Minify
+*
+*        vkbeautify.xmlmin(text [,preserve_comments]);
+*        vkbeautify.jsonmin(text);
+*        vkbeautify.cssmin(text [,preserve_comments]);
+*        vkbeautify.sqlmin(text);
+*
+*        @text - String; text to minify;
+*        @preserve_comments - Bool; [optional];
+*                Set this flag to true to prevent removing comments from @text ( minxml and mincss functions only. )
+*
+*   Examples:
+*        vkbeautify.xml(text); // pretty print XML
+*        vkbeautify.json(text, 4 ); // pretty print JSON
+*        vkbeautify.css(text, '. . . .'); // pretty print CSS
+*        vkbeautify.sql(text, '----'); // pretty print SQL
+*
+*        vkbeautify.xmlmin(text, true);// minify XML, preserve comments
+*        vkbeautify.jsonmin(text);// minify JSON
+*        vkbeautify.cssmin(text);// minify CSS, remove comments ( default )
+*        vkbeautify.sqlmin(text);// minify SQL
+*
+*/
+
+(function() {
+
+function createShiftArr(step) {
+
+	var space = '    ';
+	
+	if ( isNaN(parseInt(step)) ) {  // argument is string
+		space = step;
+	} else { // argument is integer
+		switch(step) {
+			case 1: space = ' '; break;
+			case 2: space = '  '; break;
+			case 3: space = '   '; break;
+			case 4: space = '    '; break;
+			case 5: space = '     '; break;
+			case 6: space = '      '; break;
+			case 7: space = '       '; break;
+			case 8: space = '        '; break;
+			case 9: space = '         '; break;
+			case 10: space = '          '; break;
+			case 11: space = '           '; break;
+			case 12: space = '            '; break;
+		}
+	}
+
+	var shift = ['\n']; // array of shifts
+	for(ix=0;ix<100;ix++){
+		shift.push(shift[ix]+space); 
+	}
+	return shift;
+}
+
+function vkbeautify(){
+	this.step = '    '; // 4 spaces
+	this.shift = createShiftArr(this.step);
+};
+
+vkbeautify.prototype.xml = function(text,step) {
+
+	var ar = text.replace(/>\s{0,}</g,"><")
+				 .replace(/</g,"~::~<")
+				 .replace(/\s*xmlns\:/g,"~::~xmlns:")
+				 .replace(/\s*xmlns\=/g,"~::~xmlns=")
+				 .split('~::~'),
+		len = ar.length,
+		inComment = false,
+		deep = 0,
+		str = '',
+		ix = 0,
+		shift = step ? createShiftArr(step) : this.shift;
+
+		for(ix=0;ix<len;ix++) {
+			// start comment or <![CDATA[...]]> or <!DOCTYPE //
+			if(ar[ix].search(/<!/) > -1) { 
+				str += shift[deep]+ar[ix];
+				inComment = true; 
+				// end comment  or <![CDATA[...]]> //
+				if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1 || ar[ix].search(/!DOCTYPE/) > -1 ) { 
+					inComment = false; 
+				}
+			} else 
+			// end comment  or <![CDATA[...]]> //
+			if(ar[ix].search(/-->/) > -1 || ar[ix].search(/\]>/) > -1) { 
+				str += ar[ix];
+				inComment = false; 
+			} else 
+			// <elm></elm> //
+			if( /^<\w/.exec(ar[ix-1]) && /^<\/\w/.exec(ar[ix]) &&
+				/^<[\w:\-\.\,]+/.exec(ar[ix-1]) == /^<\/[\w:\-\.\,]+/.exec(ar[ix])[0].replace('/','')) { 
+				str += ar[ix];
+				if(!inComment) deep--;
+			} else
+			 // <elm> //
+			if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) == -1 && ar[ix].search(/\/>/) == -1 ) {
+				str = !inComment ? str += shift[deep++]+ar[ix] : str += ar[ix];
+			} else 
+			 // <elm>...</elm> //
+			if(ar[ix].search(/<\w/) > -1 && ar[ix].search(/<\//) > -1) {
+				str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];
+			} else 
+			// </elm> //
+			if(ar[ix].search(/<\//) > -1) { 
+				str = !inComment ? str += shift[--deep]+ar[ix] : str += ar[ix];
+			} else 
+			// <elm/> //
+			if(ar[ix].search(/\/>/) > -1 ) { 
+				str = !inComment ? str += shift[deep]+ar[ix] : str += ar[ix];
+			} else 
+			// <? xml ... ?> //
+			if(ar[ix].search(/<\?/) > -1) { 
+				str += shift[deep]+ar[ix];
+			} else 
+			// xmlns //
+			if( ar[ix].search(/xmlns\:/) > -1  || ar[ix].search(/xmlns\=/) > -1) { 
+				str += shift[deep]+ar[ix];
+			} 
+			
+			else {
+				str += ar[ix];
+			}
+		}
+		
+	return  (str[0] == '\n') ? str.slice(1) : str;
+}
+
+vkbeautify.prototype.json = function(text,step) {
+
+	var step = step ? step : this.step;
+	
+	if (typeof JSON === 'undefined' ) return text; 
+	
+	if ( typeof text === "string" ) return JSON.stringify(JSON.parse(text), null, step);
+	if ( typeof text === "object" ) return JSON.stringify(text, null, step);
+		
+	return text; // text is not string nor object
+}
+
+vkbeautify.prototype.css = function(text, step) {
+
+	var ar = text.replace(/\s{1,}/g,' ')
+				.replace(/\{/g,"{~::~")
+				.replace(/\}/g,"~::~}~::~")
+				.replace(/\;/g,";~::~")
+				.replace(/\/\*/g,"~::~/*")
+				.replace(/\*\//g,"*/~::~")
+				.replace(/~::~\s{0,}~::~/g,"~::~")
+				.split('~::~'),
+		len = ar.length,
+		deep = 0,
+		str = '',
+		ix = 0,
+		shift = step ? createShiftArr(step) : this.shift;
+		
+		for(ix=0;ix<len;ix++) {
+
+			if( /\{/.exec(ar[ix]))  { 
+				str += shift[deep++]+ar[ix];
+			} else 
+			if( /\}/.exec(ar[ix]))  { 
+				str += shift[--deep]+ar[ix];
+			} else
+			if( /\*\\/.exec(ar[ix]))  { 
+				str += shift[deep]+ar[ix];
+			}
+			else {
+				str += shift[deep]+ar[ix];
+			}
+		}
+		return str.replace(/^\n{1,}/,'');
+}
+
+//----------------------------------------------------------------------------
+
+function isSubquery(str, parenthesisLevel) {
+	return  parenthesisLevel - (str.replace(/\(/g,'').length - str.replace(/\)/g,'').length )
+}
+
+function split_sql(str, tab) {
+
+	return str.replace(/\s{1,}/g," ")
+
+				.replace(/ AND /ig,"~::~"+tab+tab+"AND ")
+				.replace(/ BETWEEN /ig,"~::~"+tab+"BETWEEN ")
+				.replace(/ CASE /ig,"~::~"+tab+"CASE ")
+				.replace(/ ELSE /ig,"~::~"+tab+"ELSE ")
+				.replace(/ END /ig,"~::~"+tab+"END ")
+				.replace(/ FROM /ig,"~::~FROM ")
+				.replace(/ GROUP\s{1,}BY/ig,"~::~GROUP BY ")
+				.replace(/ HAVING /ig,"~::~HAVING ")
+				//.replace(/ SET /ig," SET~::~")
+				.replace(/ IN /ig," IN ")
+				
+				.replace(/ JOIN /ig,"~::~JOIN ")
+				.replace(/ CROSS~::~{1,}JOIN /ig,"~::~CROSS JOIN ")
+				.replace(/ INNER~::~{1,}JOIN /ig,"~::~INNER JOIN ")
+				.replace(/ LEFT~::~{1,}JOIN /ig,"~::~LEFT JOIN ")
+				.replace(/ RIGHT~::~{1,}JOIN /ig,"~::~RIGHT JOIN ")
+				
+				.replace(/ ON /ig,"~::~"+tab+"ON ")
+				.replace(/ OR /ig,"~::~"+tab+tab+"OR ")
+				.replace(/ ORDER\s{1,}BY/ig,"~::~ORDER BY ")
+				.replace(/ OVER /ig,"~::~"+tab+"OVER ")
+
+				.replace(/\(\s{0,}SELECT /ig,"~::~(SELECT ")
+				.replace(/\)\s{0,}SELECT /ig,")~::~SELECT ")
+				
+				.replace(/ THEN /ig," THEN~::~"+tab+"")
+				.replace(/ UNION /ig,"~::~UNION~::~")
+				.replace(/ USING /ig,"~::~USING ")
+				.replace(/ WHEN /ig,"~::~"+tab+"WHEN ")
+				.replace(/ WHERE /ig,"~::~WHERE ")
+				.replace(/ WITH /ig,"~::~WITH ")
+				
+				//.replace(/\,\s{0,}\(/ig,",~::~( ")
+				//.replace(/\,/ig,",~::~"+tab+tab+"")
+
+				.replace(/ ALL /ig," ALL ")
+				.replace(/ AS /ig," AS ")
+				.replace(/ ASC /ig," ASC ")	
+				.replace(/ DESC /ig," DESC ")	
+				.replace(/ DISTINCT /ig," DISTINCT ")
+				.replace(/ EXISTS /ig," EXISTS ")
+				.replace(/ NOT /ig," NOT ")
+				.replace(/ NULL /ig," NULL ")
+				.replace(/ LIKE /ig," LIKE ")
+				.replace(/\s{0,}SELECT /ig,"SELECT ")
+				.replace(/\s{0,}UPDATE /ig,"UPDATE ")
+				.replace(/ SET /ig," SET ")
+							
+				.replace(/~::~{1,}/g,"~::~")
+				.split('~::~');
+}
+
+vkbeautify.prototype.sql = function(text,step) {
+
+	var ar_by_quote = text.replace(/\s{1,}/g," ")
+							.replace(/\'/ig,"~::~\'")
+							.split('~::~'),
+		len = ar_by_quote.length,
+		ar = [],
+		deep = 0,
+		tab = this.step,//+this.step,
+		inComment = true,
+		inQuote = false,
+		parenthesisLevel = 0,
+		str = '',
+		ix = 0,
+		shift = step ? createShiftArr(step) : this.shift;;
+
+		for(ix=0;ix<len;ix++) {
+			if(ix%2) {
+				ar = ar.concat(ar_by_quote[ix]);
+			} else {
+				ar = ar.concat(split_sql(ar_by_quote[ix], tab) );
+			}
+		}
+		
+		len = ar.length;
+		for(ix=0;ix<len;ix++) {
+			
+			parenthesisLevel = isSubquery(ar[ix], parenthesisLevel);
+			
+			if( /\s{0,}\s{0,}SELECT\s{0,}/.exec(ar[ix]))  { 
+				ar[ix] = ar[ix].replace(/\,/g,",\n"+tab+tab+"")
+			} 
+			
+			if( /\s{0,}\s{0,}SET\s{0,}/.exec(ar[ix]))  { 
+				ar[ix] = ar[ix].replace(/\,/g,",\n"+tab+tab+"")
+			} 
+			
+			if( /\s{0,}\(\s{0,}SELECT\s{0,}/.exec(ar[ix]))  { 
+				deep++;
+				str += shift[deep]+ar[ix];
+			} else 
+			if( /\'/.exec(ar[ix]) )  { 
+				if(parenthesisLevel<1 && deep) {
+					deep--;
+				}
+				str += ar[ix];
+			}
+			else  { 
+				str += shift[deep]+ar[ix];
+				if(parenthesisLevel<1 && deep) {
+					deep--;
+				}
+			} 
+			var junk = 0;
+		}
+
+		str = str.replace(/^\n{1,}/,'').replace(/\n{1,}/g,"\n");
+		return str;
+}
+
+
+vkbeautify.prototype.xmlmin = function(text, preserveComments) {
+
+	var str = preserveComments ? text
+							   : text.replace(/\<![ \r\n\t]*(--([^\-]|[\r\n]|-[^\-])*--[ \r\n\t]*)\>/g,"")
+									 .replace(/[ \r\n\t]{1,}xmlns/g, ' xmlns');
+	return  str.replace(/>\s{0,}</g,"><"); 
+}
+
+vkbeautify.prototype.jsonmin = function(text) {
+
+	if (typeof JSON === 'undefined' ) return text; 
+	
+	return JSON.stringify(JSON.parse(text), null, 0); 
+				
+}
+
+vkbeautify.prototype.cssmin = function(text, preserveComments) {
+	
+	var str = preserveComments ? text
+							   : text.replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g,"") ;
+
+	return str.replace(/\s{1,}/g,' ')
+			  .replace(/\{\s{1,}/g,"{")
+			  .replace(/\}\s{1,}/g,"}")
+			  .replace(/\;\s{1,}/g,";")
+			  .replace(/\/\*\s{1,}/g,"/*")
+			  .replace(/\*\/\s{1,}/g,"*/");
+}
+
+vkbeautify.prototype.sqlmin = function(text) {
+	return text.replace(/\s{1,}/g," ").replace(/\s{1,}\(/,"(").replace(/\s{1,}\)/,")");
+}
+
+window.vkbeautify = new vkbeautify();
+
+})();
+
diff --git a/mockup.html b/mockup.html
new file mode 100644
index 0000000..ff33aa1
--- /dev/null
+++ b/mockup.html
@@ -0,0 +1,408 @@
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv='cache-control' content='no-cache'>
+        <meta http-equiv='expires' content='0'>
+        <meta http-equiv='pragma' content='no-cache'>
+		
+        <script src="js/lib/json2.js" type="text/javascript"></script>
+        <script src="js/lib/raphael.js" type="text/javascript"></script>
+		<script src="js/lib/joint.js" type="text/javascript"></script>
+        <script src="js/lib/joint.arrows.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.serializer.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.fsa.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.uml.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.pn.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.devs.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.cdm.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.erd.js" type="text/javascript"></script>
+        <script src="js/lib/joint.dia.org.js" type="text/javascript"></script>
+        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
+        <script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
+        <script type="text/javascript" src="js/lib/prettify/prettify.js"></script>
+        
+        <script src="js/lib/backbone.js" type="text/javascript"></script>
+        <script src="js/lib/vkbeautify.0.99.00.beta.js" type="text/javascript"></script>
+        
+        <script src="js/backbone/view/appView.js" type="text/javascript"></script>
+        <script src="js/backbone/view/AttributeView.js" type="text/javascript"></script>
+        <script src="js/backbone/view/DiagramElementView.js" type="text/javascript"></script>
+        <script src="js/backbone/view/DiagramElementPropertiesView.js" type="text/javascript"></script>
+        <script src="js/backbone/view/DiagramConnectionView.js" type="text/javascript"></script>
+        <script src="js/backbone/collections/DiagramElementCollection.js" type="text/javascript"></script>
+        <script src="js/backbone/collections/DiagramConnectionCollection.js" type="text/javascript"></script>
+        <script src="js/backbone/view/CodeView.js" type="text/javascript"></script>
+        <script src="js/backbone/view/XMLMoversView.js" type="text/javascript"></script>
+        <script src="js/backbone/view/XMLProtocolView.js" type="text/javascript"></script>
+        
+        
+        <script src="js/backbone/model/Attribute.js" type="text/javascript"></script>
+        <script src="js/backbone/model/DiagramElement.js" type="text/javascript"></script>
+        <script src="js/backbone/model/DiagramConnection.js" type="text/javascript"></script>
+        <script src="js/backbone/app.js" type="text/javascript"></script>
+        
+        <script type="text/template" id="attribute_template">
+			<input type="text" value="<%= key %>" id="attr_key"/>
+		    <input type="text" value="<%= value %>" id="attr_value"/>  <button id="deleteBtn">X</button>
+		</script>
+		
+		<script type="text/template" id="movers_template">
+&lt;<%=name%><% attributes.each(function(attr) { %> <%= attr.get('key') %>='<%= attr.get('value') %>'<% }); %>/&gt;
+		</script>
+		<script type="text/template" id="protocols_template">
+&lt;Add <%=name%>/&gt;
+		</script>
+        <title>Rosetta Diagrams</title>
+        <style type="text/css">
+          body {
+            background-color: #ffffff
+          }
+          #world {
+            background-color: white;
+            margin: 0 auto 0 auto;
+            width: 1000;
+            height: 800px;
+            border: 3px solid gray;
+            border-radius: 30px;
+            position:relative;
+          }
+          
+          .rounded_border { 
+            border: 3px solid gray;
+            border-radius: 30px;
+          }
+          #title {
+            position: fixed;
+            left: 10px;
+            top: 10px;
+            color: white;
+            font-size: 14px;
+          }
+          #description {
+            position: fixed;
+            left: 10px;
+            top: 45px;
+            color: white;
+            font-size: 12px;
+            width: 250px;
+          }
+          #source {
+            position: fixed;
+            left: 20px;
+            top: 37px;
+            color: white;
+            font-size: 12px;
+          }
+          #menu {
+			margin: 0 auto 0 auto;
+          	background-color: white;
+          	border: 3px solid gray;
+          	width: 760px;
+          	padding: 20px;
+          	margin-bottom:20px;
+          	border-radius: 30px;
+          }
+          #connectionButton {
+          	position: absolute;
+          	display:none;
+          }
+          
+          .menuItem { 
+          	position: absolute;
+          	width:26px;
+          	height:26px;
+          	background-color: black;
+          	display:none;
+          }
+          #instructionLabel {
+          	text-align: center;
+          	display: inline;
+          }
+          #mover_div { 
+          	text-align: center
+          }
+          .DiagramElement { } 
+          #container { 
+          	width: 100%;
+          	height: 100%;
+          }
+          #workspace_container { 
+          	height:100%;
+          	float: left;
+          }
+          
+          #display_code { 
+          	margin-top: 5%;
+          	float:left;
+          	margin-left: 1%;
+          	position:relative;
+          	height:800px;
+          	width: 800px;
+          }
+          
+          #code { 
+          	display:none;
+          }
+        </style>
+   		<link href="js/lib/prettify/prettify.css" type="text/css" rel="stylesheet" />
+        <script type="text/javascript">
+ /*      
+ 
+ 		
+		var joints = [];
+		var all = [];
+		var isGoingToConnect = false;
+		var timer; //timer that clears the toolbox
+		var sourceNode;
+		var canvas = undefined;
+		
+		function gup(name){
+			name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+			var regexS = "[\\?&]" + name + "=([^&#]*)";
+			var regex = new RegExp(regexS);
+			var results = regex.exec(window.location.href);
+			if (results == null)
+				return "";
+			else
+				return results[1];
+		}
+		
+		function init(){
+			var srcs = gup("unit").split(',');
+			for (var i = 0, l = srcs.length; i < l; i++){
+				var sel = document.createElement("script");
+				sel.type = "text/javascript";
+				sel.src = srcs[i] + ".js?" + new Date;
+				document.getElementById("source").href = srcs[i] + ".js";
+				document.getElementsByTagName("head").item(0).appendChild(sel);
+			}
+		}
+
+		function title(s) {
+		document.getElementById('title').innerHTML = s;
+		}
+
+		function description(s) {
+		document.getElementById('description').innerHTML = s;
+		}
+
+		function dimension(w, h) {
+			var world = document.getElementById('world');
+			world.style.width = w + 'px';
+			world.style.height = h + 'px';
+		}
+		function connectNodes(node1, node2, connectionType) {
+            		var j = node1.joint(node2, connectionType).register(all);
+            		joints.push(j);
+            	}
+		
+		jQuery(document).ready(function(){
+			$("#add_mover").click(function(e) {
+				createMover("NewMover");				
+			 });	
+			 
+			 canvas = new Canvas(800,800);
+			 
+			 //init button: 
+			 btn = $("#connectionButton");
+			 btn.mouseenter(function(e) { clearTimeout(timer); } );
+			 btn.mouseleave( function(e) { timer =  setHideToolboxTimer(); } );
+			 btn.click( function() { 
+			 	isGoingToConnect = true;
+			 } );
+			 
+			 
+		});
+            
+            function setHideToolboxTimer() {
+	            return setTimeout(function() {$("#connectionButton").css("display","none")},1000);
+            }
+            
+            function showConnectionButton(e) { 
+            	btn = $("#connectionButton");
+            	var world = $("#world");
+            	offset = world.offset();
+		element = e.srcElement;
+            	x_elem = element.x.baseVal.value;
+            	y_elem = element.y.baseVal.value;
+            	
+            	w_elem = element.width.baseVal.value;
+            	h_elem = element.height.baseVal.value;
+            	
+            	btn.css("top",y_elem);
+            	btn.css("left", offset.left + w_elem + x_elem);
+           	btn.css("display","block");
+            }
+            
+            function createMover(name) {
+            	var world = $("#world");
+		var offset = world.offset();
+		var rel_x = world.width()/2;
+		var rel_y = world.height()/2;
+		var mover = new DiagramElementView(rel_x,rel_y,"NewMover",canvas);
+		
+		jQuery(s3.wrapper.node).mouseup( function() { 
+			if ( !isGoingToConnect ) 
+				return;
+			connectNodes(sourceNode,s3,uml.arrow);
+			isGoingToConnect = false;
+		} );
+		
+		jQuery(s3.wrapper.node).mouseenter( function(e) { 
+			showConnectionButton(e);
+			clearTimeout(timer);
+			if (!isGoingToConnect)
+				sourceNode = s3;
+		} ); 
+		
+		jQuery(s3.wrapper.node).mouseleave( function(e) { 
+			timer =  setHideToolboxTimer();
+		} );
+            } */
+        </script>
+            <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+    <body onload="prettyPrint()">
+    	<div id="container">
+    	<div id="workspace_container">
+    	<div id="menu">
+    		<button id="add_mover">Add Mover</button>
+    		<button id="add_filter">Add Filter</button>
+    		<button id="add_connection">Add Connection</button>
+    		<button id="delete_element">Delete Element</button>
+    	</div>
+        <div id="world">
+		<script type="text/javascript">
+/*
+			
+			var s1 = uml.State.create({
+			  rect: {x: 100, y: 50, width: 100, height: 60},
+			  label: "state 1",
+			  attrs: {
+			    fill: "90-#000-green:1-#fff"
+			  },
+			  shadow: true,
+			  actions: {
+			    entry: "init()",
+			    exit: "destroy()"
+			  }
+			});
+			var s2 = uml.State.create({
+			  rect: {x: 400, y: 100, width: 100, height: 60},
+			  label: "state 2",
+			  attrs: {
+			    fill: "90-#000-green:1-#fff"
+			  },
+			  shadow: true,
+			  actions: {
+			    entry: "create()",
+			    exit: "kill()",
+			    inner: ["A", "foo()", "B", "bar()"]
+			  }
+			});
+
+			var s3 = uml.State.create({
+			  rect: {x: 250, y: 250, width: 150, height: 100},
+			  label: "DockingMover",
+			  attrs: {
+			    fill: "90-#000-green:1-#fff"
+			  },
+			  shadow: true,
+			  actions: {
+			    inner: ["attribute 1", "value 1", "attribute 2" , "value 2"]
+			  }
+			});
+
+			var s4 = uml.State.create({
+			  rect: {x: 450, y: 120, width: 80, height: 50},
+			  label: "sub state 3",
+			  attrs: {
+			    fill: "90-#000-green:1-#fff"
+			  },
+			  shadow: true,
+			  actions: {
+			    entry: "create()"
+			  }
+			});
+
+			var s0 = uml.StartState.create({
+			  position: {x: 50, y: 40},
+			  shadow: true
+			});
+
+			var se = uml.EndState.create({
+			  position: {x: 550, y: 300},
+			  shadow: true
+			});
+
+			all = [s0, se, s1, s2, s3, s4];
+	
+			s2.scale(2);
+			s2.addInner(s4);
+			
+			connectNodes(s0,s1,uml.arrow);
+			connectNodes(s1,s2,uml.arrow);
+			connectNodes(s3,s4,uml.arrow);
+			connectNodes(s2,se,uml.arrow);
+			connectNodes(s1,s3,uml.arrow);
+*/
+		</script>
+        	<div id='mover_properties'>
+        	<div id="mover_div">Mover name: <input type="text" id="mover_name"/></div>
+        	<div>
+        	    <button id="add_attribute">Add Attribute</button>
+        		<ul id="attribute_list">
+        		</ul>
+        	</div>
+        	
+        	
+        	</div>
+        </div> <!-- world -->
+		</div> <!--  workspace container -->
+ 
+<pre id='display_code' class='prettyprint rounded_border'>
+
+</pre>       	
+<div id="code">
+<pre>
+&lt;ROSETTASCRIPTS&gt;
+
+        &lt;SCOREFXNS&gt;
+        &lt;/SCOREFXNS&gt;
+
+        &lt;TASKOPERATIONS&gt;
+        &lt;/TASKOPERATIONS&gt;
+
+        &lt;FILTERS&gt;
+<span id=xml_filters>
+	
+</span>
+        &lt;/FILTERS&gt;
+
+        &lt;MOVERS&gt;
+</pre>
+<span id=xml_movers>
+	
+</span>
+<pre>
+        &lt;/MOVERS&gt;
+
+        &lt;APPLY_TO_POSE&gt;
+        &lt;/APPLY_TO_POSE&gt;
+
+        &lt;PROTOCOLS&gt;
+<span id=xml_protocols>
+	
+</span>
+        &lt;/PROTOCOLS&gt;
+
+&lt;/ROSETTASCRIPTS&gt;
+</pre>
+        </div>
+        
+	</div> <!--container -->
+
+    </body>
+</html>
+