From a7e69c08104e50db9a693b9c1be4661122d115b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sat, 10 Aug 2013 19:19:52 +1000
Subject: [PATCH 01/33] Basic tournament support

---
 js/client-chat.js |  17 ++++++-
 style/client.css  | 118 ++++++++++++++++++++++++++++++++++++++++++----
 testclient.html   |   5 +-
 3 files changed, 127 insertions(+), 13 deletions(-)

diff --git a/js/client-chat.js b/js/client-chat.js
index a6c7453ad..b6345e1e0 100644
--- a/js/client-chat.js
+++ b/js/client-chat.js
@@ -33,7 +33,7 @@
 				this.$chatAdd.html('<form class="chatbox"><label style="' + hashColor(userid) + '">' + Tools.escapeHTML(name) + ':</label> <textarea class="textbox" type="text" size="70" autocomplete="off"></textarea></form>');
 				this.$chatbox = this.$chatAdd.find('textarea');
 				this.$chatbox.autoResize({
-					animate: false,	
+					animate: false,
 					extraSpace: 0
 				});
 				if (this === app.curSideRoom || this === app.curRoom) {
@@ -606,7 +606,7 @@
 		maxWidth: 1024,
 		isSideRoom: true,
 		initialize: function() {
-			var buf = '<ul class="userlist" style="display:none"></ul><div class="chat-log"><div class="inner"></div></div></div><div class="chat-log-add">Connecting...</div>';
+			var buf = '<ul class="userlist" style="display:none"></ul><div class="tournament-wrapper"></div><div class="chat-log"><div class="inner"></div></div></div><div class="chat-log-add">Connecting...</div>';
 			this.$el.addClass('ps-room-light').html(buf);
 
 			this.$chatAdd = this.$('.chat-log-add');
@@ -614,6 +614,9 @@
 			this.$chat = this.$('.inner');
 			this.$chatbox = null;
 
+			this.$tournamentWrapper = this.$('.tournament-wrapper');
+			this.tournamentBox = new TournamentBox(this, this.$tournamentWrapper);
+
 			this.users = {};
 			this.userCount = {};
 
@@ -634,10 +637,12 @@
 				this.$userList.show();
 				this.$chatFrame.addClass('hasuserlist');
 				this.$chatAdd.addClass('hasuserlist');
+				this.$tournamentWrapper.addClass('hasuserlist');
 			} else {
 				this.$userList.hide();
 				this.$chatFrame.removeClass('hasuserlist');
 				this.$chatAdd.removeClass('hasuserlist');
+				this.$tournamentWrapper.removeClass('hasuserlist');
 			}
 			this.$chatFrame.scrollTop(this.$chat.height());
 		},
@@ -783,6 +788,11 @@
 					});
 					break;
 
+				case 'tournament':
+				case 'tournaments':
+					if (!this.tournamentBox.parseMessage(row.slice(1), row[0] === 'tournaments'))
+						break;
+
 				case '':
 					this.$chat.append('<div class="notice">' + Tools.escapeHTML(row.slice(1).join('|')) + '</div>');
 					break;
@@ -793,6 +803,9 @@
 				}
 			}
 		},
+		tournamentButton: function(val, button) {
+			this.tournamentBox[$(button).data('type')](val, button);
+		},
 		parseUserList: function(userList) {
 			this.userCount = {};
 			this.users = {};
diff --git a/style/client.css b/style/client.css
index b03e4983d..1404a1bd8 100644
--- a/style/client.css
+++ b/style/client.css
@@ -45,7 +45,7 @@ body {
 	padding: 2px 3px;
 	font-family: Verdana, Helvetica, Arial, sans-serif;
 	font-size: 9pt;
-	
+
 	box-shadow: inset 0px 1px 2px #CCCCCC, 1px 1px 0 rgba(255,255,255,.6);
 	background: #F8FBFD;
 }
@@ -816,7 +816,7 @@ p.or:after {
 	padding: 1px 4px 2px 4px;
 	border: 1px solid #BBCCDD;
 	background: #F8FBFD;
-	
+
 	border-radius: 4px;
 	text-decoration: none;
 	color: #336699;
@@ -962,6 +962,105 @@ a.ilink:hover {
 	font-family: Verdana, Helvetica, Arial, sans-serif;
 }
 
+/* Tournaments */
+
+.tournament-wrapper {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 2em;
+	line-height: 2em;
+	text-align: center;
+	border-bottom: 1px #aaa solid;
+}
+.tournament-wrapper.active {
+	display: block;
+}
+.tournament-wrapper.active + .chat-log {
+	top: 2.4em;
+}
+
+.tournament-box {
+	position: absolute;
+	top: 2em;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	line-height: 1em;
+	border-bottom: 1px #aaa solid;
+	background-color: rgba(242, 247, 250, 0.85);
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.5s ease-in-out;
+	-o-transition: max-height 0.5s ease-in-out;
+	-moz-transition: max-height 0.5s ease-in-out;
+	-webkit-transition: max-height 0.5s ease-in-out;
+}
+
+.tournament-title {
+	font-weight: bold;
+}
+
+.tournament-bracket {
+	max-height: 200px;
+	overflow: auto;
+	font-size: 8pt;
+	border-bottom: 1px #aaa solid;
+}
+.tournament-bracket-table {
+	margin: 10px auto;
+	empty-cells: hide;
+	border-bottom: 1px #aaa solid;
+	border-collapse: collapse;
+}
+.tournament-bracket-table td, .tournament-bracket-table th {
+	border: 1px #aaa solid;
+	padding: 5px;
+}
+.tournament-bracket-table .empty,
+.tournament-bracket-table .tournament-bracket-table-cell-null {
+	border-width: 0;
+}
+.tournament-bracket-table-cell-result-win {
+	background-color: rgba(0, 255, 0, 0.2)
+}
+.tournament-bracket-table-cell-result-draw {
+	background-color: rgba(255, 255, 0, 0.2)
+}
+.tournament-bracket-table-cell-result-loss {
+	background-color: rgba(255, 0, 0, 0.2)
+}
+
+.tournament-tools {
+	padding: 10px;
+}
+
+.tournament-join,
+.tournament-leave {
+	display: none;
+}
+.tournament-join.active,
+.tournament-leave.active {
+	display: inline;
+}
+
+.tournament-nomatches,
+.tournament-challenge,
+.tournament-challengeby,
+.tournament-challenging,
+.tournament-challenged {
+	display: none;
+}
+.tournament-nomatches.active,
+.tournament-challenge.active,
+.tournament-challengeby.active,
+.tournament-challenging.active,
+.tournament-challenged.active  {
+	display: block;
+}
+
 /* Messages */
 
 .message-announce {
@@ -1029,7 +1128,8 @@ a.ilink:hover {
 	overflow-scrolling: touch;
 }
 .chat-log.hasuserlist,
-.chat-log-add.hasuserlist {
+.chat-log-add.hasuserlist,
+.tournament-wrapper.hasuserlist {
 	left: 146px;
 }
 .userlist,
@@ -1582,13 +1682,13 @@ a.ilink:hover {
 	height: 127px;
 	width: 626px;
 	margin-top: 8px;
-	
+
 	background-image: linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
 	background-image: -o-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
 	background-image: -moz-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
 	background-image: -webkit-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
 	background-image: -ms-linear-gradient(top, rgb(218,229,240) 10%, rgb(203,214,225) 55%);
-	
+
 	box-shadow: inset 1px 1px 0 rgba(255,255,255,.6);
 }
 .setcol {
@@ -1633,7 +1733,7 @@ a.ilink:hover {
 	font-weight: bold;
 	color: #555555;
 	padding-left: 2px;
-	
+
 	text-shadow: 1px 1px 0 rgba(255,255,255,.6);
 }
 .setchart-nickname label {
@@ -1781,7 +1881,7 @@ a.ilink:hover {
 	font-size: 9pt;
 	width: 104px;
 	height: 20px;
-	
+
 	box-shadow: inset 0px 1px 2px #CCCCCC, 1px 1px 0 rgba(255,255,255,.6);
 	background: #F8FBFD;
 	color: black;
@@ -2040,7 +2140,7 @@ a.ilink:hover {
  * <blink>
  *********************************************************/
 
-@-webkit-keyframes blinker {  
+@-webkit-keyframes blinker {
 	from { opacity: 1.0; }
 	to { opacity: 0.0; }
 }
@@ -2056,6 +2156,6 @@ blink {
 	animation-name: blinker;
 	animation-iteration-count: infinite;
 	animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-	animation-duration: 1s; 
+	animation-duration: 1s;
 	text-decoration: none;
 }
diff --git a/testclient.html b/testclient.html
index 9b527a1c6..cdc791bf0 100644
--- a/testclient.html
+++ b/testclient.html
@@ -40,14 +40,14 @@
 		<!--[if lte IE 8]>
 		<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
 		<style>
-		/* 
+		/*
 		CSS rules to use for styling the overlay:
 		.chromeFrameOverlayContent
 		.chromeFrameOverlayContent iframe
 		.chromeFrameOverlayCloseBar
 		.chromeFrameOverlayUnderlay
 		*/
-		</style> 
+		</style>
 		<script>
 			CFInstall.check({mode: "overlay"});
 		</script>
@@ -92,6 +92,7 @@
 		<script src="js/client-chat.js"></script>
 		<script src="js/client-battle.js"></script>
 		<script src="js/client-rooms.js"></script>
+		<script src="js/client-tournament.js"></script>
 
 		<script>
 			// HTML5 history throws exceptions when running on file://

From 648f1831222907c6323f76e8917c53a89e048451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sat, 10 Aug 2013 19:22:16 +1000
Subject: [PATCH 02/33] Actually commit the tournament library

---
 js/client-tournament.js | 271 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 271 insertions(+)
 create mode 100644 js/client-tournament.js

diff --git a/js/client-tournament.js b/js/client-tournament.js
new file mode 100644
index 000000000..2b308b413
--- /dev/null
+++ b/js/client-tournament.js
@@ -0,0 +1,271 @@
+(function($) {
+
+	function arrayToPhrase(array, finalSeparator) {
+		if (array.length <= 1)
+			return array.join();
+		finalSeparator = finalSeparator || "and";
+		return array.slice(0, -1).join(", ") + " " + finalSeparator + " " + array.slice(-1)[0];
+	}
+
+	var TournamentBox = this.TournamentBox = (function () {
+		function TournamentBox(room, $wrapper) {
+			this.room = room;
+			this.$wrapper = $wrapper;
+
+			$wrapper.html(
+				'<div class="tournament-title"><span class="tournament-format"></span> <span class="tournament-generator"></span> Tournament</div>' +
+				'<div class="tournament-box">' +
+					'<div class="tournament-bracket"></div>' +
+					'<div class="tournament-tools">' +
+						'<button class="button tournament-join">Join</button><button class="button tournament-leave">Leave</button>' +
+						'<div class="tournament-nomatches">There are currently no new matches available for you. Please wait for some other battles to end.</div>' +
+						'<div class="tournament-challenge">' +
+							'<span class="tournament-challenge-user"></span>' +
+							'<span class="tournament-challenge-team"></span>' +
+							'<button class="button tournament-challenge-challenge">Challenge</button>' +
+						'</div>' +
+						'<div class="tournament-challengeby"></div>' +
+						'<div class="tournament-challenging"></div>' +
+						'<div class="tournament-challenged">' +
+							'<div class="tournament-challenged-message"></div>' +
+							'<span class="tournament-challenge-team"></span>' +
+							'<button class="button tournament-challenge-accept">Accept</button>' +
+						'</div>' +
+					'</div>' +
+				'</div>');
+
+			this.$title = $wrapper.find('.tournament-title');
+			this.$format = $wrapper.find('.tournament-format');
+			this.$generator = $wrapper.find('.tournament-generator');
+			this.$box = $wrapper.find('.tournament-box');
+			this.$bracket = $wrapper.find('.tournament-bracket');
+			this.$tools = $wrapper.find('.tournament-tools');
+			this.$join = $wrapper.find('.tournament-join');
+			this.$leave = $wrapper.find('.tournament-leave');
+			this.$noMatches = $wrapper.find('.tournament-nomatches');
+			this.$challenge = $wrapper.find('.tournament-challenge');
+			this.$challengeUser = $wrapper.find('.tournament-challenge-user');
+			this.$challengeTeam = $wrapper.find('.tournament-challenge-team');
+			this.$challengeChallenge = $wrapper.find('.tournament-challenge-challenge');
+			this.$challengeBy = $wrapper.find('.tournament-challengeby');
+			this.$challenging = $wrapper.find('.tournament-challenging');
+			this.$challenged = $wrapper.find('.tournament-challenged');
+			this.$challengedMessage = $wrapper.find('.tournament-challenged-message');
+			this.$challengeAccept = $wrapper.find('.tournament-challenge-accept');
+
+			this.isActive = false;
+			this.info = null;
+			this.bracketData = null;
+			this.challenges = null;
+			this.challengeBys = null;
+
+			var self = this;
+			this.$title.on('click', function() {
+				self.$box.toggleClass('active');
+				self.$box.css('transition', '');
+				self.$box.css('max-height', self.$box.hasClass('active') ? self.$box[0].scrollHeight: '');
+			});
+			this.$box.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function() {
+				if (self.$box.hasClass('active'))
+					self.$box.css('transition', 'none');
+				if (!self.isActive)
+					self.$wrapper.removeClass('active');
+			});
+			this.$join.on('click', function() {
+				self.room.send('/tournament join');
+			});
+			this.$leave.on('click', function() {
+				self.room.send('/tournament leave');
+			});
+			this.$challengeChallenge.on('click', function() {
+				var team = app.user.teams[self.$challengeTeam.children().val()];
+				self.room.send('/utm ' + JSON.stringify(team ? team.team : null));
+				self.room.send('/tournament challenge ' + self.$challengeUser.children().val());
+			});
+			this.$challengeAccept.on('click', function() {
+				var team = app.user.teams[self.$challengeTeam.children().val()];
+				self.room.send('/utm ' + JSON.stringify(team ? team.team : null));
+				self.room.send('/tournament acceptchallenge');
+			});
+		}
+
+		TournamentBox.prototype.parseMessage = function (data, isBroadcast) {
+			if (isBroadcast) {
+				// TODO
+				return true;
+			} else {
+				if (!this.isActive) {
+					this.$wrapper.addClass("active");
+					this.$box.addClass("active");
+					this.isActive = true;
+				}
+
+				var cmd = data.shift().toLowerCase();
+				switch (cmd) {
+					case 'create':
+						this.room.$chat.append("<div class=\"tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + data.join('|') + " Tournament has been created.</div>");
+						break;
+
+					case 'update':
+						this.$tools.find('.active').removeClass('active');
+						if (this.info && this.info.isStarted)
+							this.$noMatches.addClass('active');
+						this.challenges = null;
+						this.challengeBys = null;
+						break;
+
+					case 'info':
+						this.info = JSON.parse(data.join('|'));
+						this.$format.text(BattleFormats[this.info.format].name);
+						this.$generator.text(this.info.generator);
+						break;
+
+					case 'bracketdata':
+						this.bracketData = JSON.parse(data.join('|'));
+						this.showBracket(this.bracketData);
+						break;
+
+					case 'challenges':
+						this.$noMatches.removeClass('active');
+						this.challenges = data.join('|').split(',');
+						this.$challengeUser.html(this.renderChallengeUsers());
+						this.$challengeTeam.html(app.rooms[''].renderTeams(this.info.format));
+						this.$challengeTeam.children().data('type', 'challengeTeam');
+						this.$challengeTeam.children().attr('name', 'tournamentButton');
+						this.$challenge.addClass("active");
+						break;
+
+					case 'challengebys':
+						this.$noMatches.removeClass('active');
+						this.challengeBys = data.join('|').split(',');
+						this.$challengeBy.text((this.challenges ? "Or" : "Please") + " wait for " + arrayToPhrase(this.challengeBys, "or") + " to challenge you.");
+						this.$challengeBy.addClass("active");
+						break;
+
+					case 'challenging':
+						this.$noMatches.removeClass('active');
+						this.$challenging.text("Challenging " + data[0] + "...").addClass("active");
+						break;
+
+					case 'challenged':
+						this.$noMatches.removeClass('active');
+						this.$challengedMessage.text(data[0] + " has challenged you.");
+						this.$challengeTeam.html(app.rooms[''].renderTeams(this.info.format));
+						this.$challengeTeam.children().data('type', 'challengeTeam');
+						this.$challengeTeam.children().attr('name', 'tournamentButton');
+						this.$challenged.addClass("active");
+						break;
+
+					case 'end':
+						this.room.$chat.append("<div class=\"tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(data[0].split(','))) + " for winning the tournament!</div>");
+						if (data[1])
+							this.room.$chat.append("<div class=\"tournament-message-end-runnerup\">Runner-up" + (data[1].length > 1 ? "s" : "") +": " + Tools.escapeHTML(arrayToPhrase(data[1].split(','))) + "</div>");
+						// Fallthrough
+
+					case 'forceend':
+						this.isActive = false;
+						this.info = null;
+						this.bracketData = null;
+
+						// A quick start and end will not fire the transitionend event, so we delay a bit so the transition happens
+						var self = this;
+						setTimeout(function () {
+							if (self.isActive)
+								return;
+							self.$box.removeClass("active");
+							self.$box.css('max-height', '');
+							self.$box.css('transition', '');
+						}, 0);
+
+						if (cmd === 'forceend')
+							this.room.$chat.append("<div class=\"tournament-message-forceend\">The tournament was forcibly ended.</div>");
+						break;
+
+					default:
+						return true;
+				}
+
+				this.$box.css('max-height', this.$box.hasClass('active') ? this.$box[0].scrollHeight : '');
+			}
+		};
+
+		TournamentBox.prototype.showBracket = function (data) {
+			var isJoined = false;
+			if (data.type === 'tree') {
+				// TODO
+			} else if (data.type === 'table') {
+				this.$bracket.empty();
+				var $table = $('<table class="tournament-bracket-table"></table>');
+
+				var $colHeaders = $('<tr><td class="empty"></td></tr>');
+				$table.append($colHeaders);
+				data.tableHeaders.cols.forEach(function (name) {
+					$colHeaders.append($('<th></th>').text(name));
+					if (app.user.attributes.name === name)
+						isJoined = true;
+				});
+
+				data.tableHeaders.rows.forEach(function (name, r) {
+					var $row = $('<tr></tr>');
+					$table.append($row);
+					$row.append($('<th></th>').text(name));
+					data.tableContents[r].forEach(function (cell) {
+						var $cell = $('<td></td>');
+						$row.append($cell);
+						if (!cell) {
+							$cell.addClass('tournament-bracket-table-cell-null');
+							return;
+						}
+						$cell.addClass('tournament-bracket-table-cell-' + cell.state);
+						if (cell.state === 'unavailable') {
+							$cell.text("Unavailable");
+						} else if (cell.state === 'available') {
+							$cell.text("Waiting");
+						} else if (cell.state === "inprogress") {
+							$cell.html('<a href="' + app.root + toRoomid(cell.room).toLowerCase() + '" class="ilink">In-progress</a>');
+						} else if (cell.state === 'finished') {
+							$cell.addClass('tournament-bracket-table-cell-result-' + cell.result);
+							$cell.text(cell.score.join(" - "));
+						}
+					});
+					$row.append($('<th class="tournament-bracket-row-score"></th>').text(data.scores[r]));
+				});
+
+				if (data.tableContents.length > 0)
+					this.$bracket.append($table);
+			}
+
+			if (!this.info.isStarted)
+				if (isJoined)
+					this.$leave.addClass('active');
+				else
+					this.$join.addClass('active');
+		},
+
+		TournamentBox.prototype.renderChallengeUsers = function () {
+			return '<button class="select" value="' + toId(this.challenges[0]) + '" name="tournamentButton" data-type="challengeUser">' + Tools.escapeHTML(this.challenges[0]) + '</button>';
+		};
+		TournamentBox.prototype.challengeUser = function (user, button) {
+			app.addPopup(UserPopup, {user: user, users: this.challenges, sourceEl: button});
+		};
+
+		TournamentBox.prototype.challengeTeam = function (team, button) {
+			app.addPopup(TeamPopup, {team: team, format: this.info.format, sourceEl: button});
+		};
+
+		return TournamentBox;
+	})();
+
+	var UserPopup = this.Popup.extend({
+		initialize: function (data) {
+			this.$el.html('<ul class="popupmenu">' + data.users.map(function (user) {
+				return '<li><button name="selectUser" value="' + Tools.escapeQuotes(user) + '"' + (user === data.user ? ' class="sel"' : '') + '>' + Tools.escapeHTML(user) + '</button></li>';
+			}).join('') + '</ul>');
+		},
+		selectUser: function (user) {
+			this.sourceEl.val(toId(user)).text(user);
+			this.close();
+		}
+	});
+
+}).call(this, jQuery);

From e3ef08de55dfc6967a199b1e558122b2a9b953f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 18 Aug 2013 18:00:45 +1000
Subject: [PATCH 03/33] Hide the tournament toolbox if the tournament has
 started and the user is not in the tournament

---
 js/client-tournament.js | 4 +++-
 style/client.css        | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 2b308b413..a3ae01b2f 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -107,7 +107,7 @@
 						break;
 
 					case 'update':
-						this.$tools.find('.active').removeClass('active');
+						this.$tools.find('.active').andSelf().removeClass('active');
 						if (this.info && this.info.isStarted)
 							this.$noMatches.addClass('active');
 						this.challenges = null;
@@ -240,6 +240,8 @@
 					this.$leave.addClass('active');
 				else
 					this.$join.addClass('active');
+			if (!this.info.isStarted || isJoined)
+				this.$tools.addClass('active');
 		},
 
 		TournamentBox.prototype.renderChallengeUsers = function () {
diff --git a/style/client.css b/style/client.css
index 1404a1bd8..b95b72016 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1007,7 +1007,6 @@ a.ilink:hover {
 	max-height: 200px;
 	overflow: auto;
 	font-size: 8pt;
-	border-bottom: 1px #aaa solid;
 }
 .tournament-bracket-table {
 	margin: 10px auto;
@@ -1035,6 +1034,11 @@ a.ilink:hover {
 
 .tournament-tools {
 	padding: 10px;
+	display: none;
+	border-top: 1px #aaa solid;
+}
+.tournament-tools.active {
+	display: block;
 }
 
 .tournament-join,

From 69ec4eca391fb148534dbb6ceecbc86e053bfe62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 18 Aug 2013 18:01:28 +1000
Subject: [PATCH 04/33] Make the hidability of the tournament box (slightly)
 more obvious

---
 style/client.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/style/client.css b/style/client.css
index b95b72016..103b7827b 100644
--- a/style/client.css
+++ b/style/client.css
@@ -982,6 +982,11 @@ a.ilink:hover {
 	top: 2.4em;
 }
 
+.tournament-title {
+	font-weight: bold;
+	cursor: pointer;
+}
+
 .tournament-box {
 	position: absolute;
 	top: 2em;
@@ -999,10 +1004,6 @@ a.ilink:hover {
 	-webkit-transition: max-height 0.5s ease-in-out;
 }
 
-.tournament-title {
-	font-weight: bold;
-}
-
 .tournament-bracket {
 	max-height: 200px;
 	overflow: auto;

From b2b8b8280e9777fd28cca47910a7b35aef443d1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 18 Aug 2013 18:06:36 +1000
Subject: [PATCH 05/33] Remove some unnessasary .join('|')s

---
 js/client-tournament.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index a3ae01b2f..22b1a53d6 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -127,7 +127,7 @@
 
 					case 'challenges':
 						this.$noMatches.removeClass('active');
-						this.challenges = data.join('|').split(',');
+						this.challenges = data[0].split(',');
 						this.$challengeUser.html(this.renderChallengeUsers());
 						this.$challengeTeam.html(app.rooms[''].renderTeams(this.info.format));
 						this.$challengeTeam.children().data('type', 'challengeTeam');
@@ -137,7 +137,7 @@
 
 					case 'challengebys':
 						this.$noMatches.removeClass('active');
-						this.challengeBys = data.join('|').split(',');
+						this.challengeBys = data[0].split(',');
 						this.$challengeBy.text((this.challenges ? "Or" : "Please") + " wait for " + arrayToPhrase(this.challengeBys, "or") + " to challenge you.");
 						this.$challengeBy.addClass("active");
 						break;

From a8dc8e20896987a31d2f3b1f7922ec3528ca5fbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 18 Aug 2013 19:34:38 +1000
Subject: [PATCH 06/33] Add most remaining tournament messages

---
 js/client-tournament.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 22b1a53d6..52ddbeaac 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -106,6 +106,22 @@
 						this.room.$chat.append("<div class=\"tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + data.join('|') + " Tournament has been created.</div>");
 						break;
 
+					case 'join':
+						this.room.$chat.append("<div class=\"tournament-message-join\">" + Tools.escapeHTML(data[0]) + " has joined the tournament</div>");
+						break;
+
+					case 'leave':
+						this.room.$chat.append("<div class=\"tournament-message-leave\">" + Tools.escapeHTML(data[0]) + " has left the tournament</div>");
+						break;
+
+					case 'start':
+						this.room.$chat.append("<div class=\"tournament-message-start\">The tournament has started!</div>");
+						break;
+
+					case 'disqualify':
+						this.room.$chat.append("<div class=\"tournament-message-disqualify\">" + Tools.escapeHTML(data[0]) + " has been disqualified from the tournament</div>");
+						break;
+
 					case 'update':
 						this.$tools.find('.active').andSelf().removeClass('active');
 						if (this.info && this.info.isStarted)
@@ -156,6 +172,23 @@
 						this.$challenged.addClass("active");
 						break;
 
+					case 'battlestart':
+						this.room.$chat.append('<div class="tournament-message-battlestart"><a href="' + app.root + toRoomid(data[2]).toLowerCase() + '" class="ilink">' +
+							"A tournament battle between " + Tools.escapeHTML(data[0]) + " and " + Tools.escapeHTML(data[1]) + " has started." +
+							'</a></div>');
+						break;
+
+					case 'battleend':
+						var result = "drawn";
+						if (data[2] === 'win')
+							result = "won";
+						else if (data[2] === 'loss')
+							result = "lost";
+						this.room.$chat.append('<div class="tournament-message-battleend">' +
+							Tools.escapeHTML(data[0]) + " has " + result + " the match " + Tools.escapeHTML(data[3].split(',').join(' - ')) + " against " + Tools.escapeHTML(data[1]) +
+							'</div>');
+						break;
+
 					case 'end':
 						this.room.$chat.append("<div class=\"tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(data[0].split(','))) + " for winning the tournament!</div>");
 						if (data[1])

From bccc89c2e089890b0da24068a32c839fd749ecab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 18 Aug 2013 20:14:09 +1000
Subject: [PATCH 07/33] Fix runner up grammar

---
 js/client-tournament.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 52ddbeaac..cd2bfdc1d 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -191,8 +191,10 @@
 
 					case 'end':
 						this.room.$chat.append("<div class=\"tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(data[0].split(','))) + " for winning the tournament!</div>");
-						if (data[1])
-							this.room.$chat.append("<div class=\"tournament-message-end-runnerup\">Runner-up" + (data[1].length > 1 ? "s" : "") +": " + Tools.escapeHTML(arrayToPhrase(data[1].split(','))) + "</div>");
+						if (data[1]) {
+							var runnerUps = data[1].split(',');
+							this.room.$chat.append("<div class=\"tournament-message-end-runnerup\">Runner-up" + (runnerUps.length > 1 ? "s" : "") +": " + Tools.escapeHTML(arrayToPhrase(runnerUps)) + "</div>");
+						}
 						// Fallthrough
 
 					case 'forceend':

From 64aa248ff8c820a7c04c18723cc7adad5f81df79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 18 Aug 2013 20:57:21 +1000
Subject: [PATCH 08/33] Fix some cases where the tournament box didn't update
 properly

---
 js/client-chat.js       |  1 +
 js/client-tournament.js | 20 +++++++++-----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/js/client-chat.js b/js/client-chat.js
index b6345e1e0..5b061c877 100644
--- a/js/client-chat.js
+++ b/js/client-chat.js
@@ -645,6 +645,7 @@
 				this.$tournamentWrapper.removeClass('hasuserlist');
 			}
 			this.$chatFrame.scrollTop(this.$chat.height());
+			this.tournamentBox.updateLayout();
 		},
 		show: function() {
 			Room.prototype.show.apply(this, arguments);
diff --git a/js/client-tournament.js b/js/client-tournament.js
index cd2bfdc1d..13cb6bcac 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -89,18 +89,23 @@
 			});
 		}
 
+		TournamentBox.prototype.updateLayout = function () {
+			this.$box.css('max-height', this.$box.hasClass('active') ? this.$box[0].scrollHeight: '');
+		};
+
 		TournamentBox.prototype.parseMessage = function (data, isBroadcast) {
 			if (isBroadcast) {
 				// TODO
 				return true;
 			} else {
-				if (!this.isActive) {
+				var cmd = data.shift().toLowerCase();
+
+				if (!this.isActive && cmd !== 'end') {
 					this.$wrapper.addClass("active");
 					this.$box.addClass("active");
 					this.isActive = true;
 				}
 
-				var cmd = data.shift().toLowerCase();
 				switch (cmd) {
 					case 'create':
 						this.room.$chat.append("<div class=\"tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + data.join('|') + " Tournament has been created.</div>");
@@ -202,15 +207,8 @@
 						this.info = null;
 						this.bracketData = null;
 
-						// A quick start and end will not fire the transitionend event, so we delay a bit so the transition happens
-						var self = this;
-						setTimeout(function () {
-							if (self.isActive)
-								return;
-							self.$box.removeClass("active");
-							self.$box.css('max-height', '');
-							self.$box.css('transition', '');
-						}, 0);
+						this.$box.removeClass("active");
+						this.$box.css('transition', '');
 
 						if (cmd === 'forceend')
 							this.room.$chat.append("<div class=\"tournament-message-forceend\">The tournament was forcibly ended.</div>");

From 9582aa84abaa420e23e184859bf0be1fbbf04592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Mon, 19 Aug 2013 23:22:38 +1000
Subject: [PATCH 09/33] Don't wrap normal cells in tournament table

---
 style/client.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/style/client.css b/style/client.css
index 103b7827b..5893cdf9d 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1019,6 +1019,9 @@ a.ilink:hover {
 	border: 1px #aaa solid;
 	padding: 5px;
 }
+.tournament-bracket-table td {
+	white-space: nowrap;
+}
 .tournament-bracket-table .empty,
 .tournament-bracket-table .tournament-bracket-table-cell-null {
 	border-width: 0;

From 191237c2e306d28ae77846f7bf35f5044fc28b8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Tue, 20 Aug 2013 20:29:59 +1000
Subject: [PATCH 10/33] Use the notice class for tournament messages

---
 js/client-tournament.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 13cb6bcac..2e8ab7928 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -108,23 +108,23 @@
 
 				switch (cmd) {
 					case 'create':
-						this.room.$chat.append("<div class=\"tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + data.join('|') + " Tournament has been created.</div>");
+						this.room.$chat.append("<div class=\"notice tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + data.join('|') + " Tournament has been created.</div>");
 						break;
 
 					case 'join':
-						this.room.$chat.append("<div class=\"tournament-message-join\">" + Tools.escapeHTML(data[0]) + " has joined the tournament</div>");
+						this.room.$chat.append("<div class=\"notice tournament-message-join\">" + Tools.escapeHTML(data[0]) + " has joined the tournament</div>");
 						break;
 
 					case 'leave':
-						this.room.$chat.append("<div class=\"tournament-message-leave\">" + Tools.escapeHTML(data[0]) + " has left the tournament</div>");
+						this.room.$chat.append("<div class=\"notice tournament-message-leave\">" + Tools.escapeHTML(data[0]) + " has left the tournament</div>");
 						break;
 
 					case 'start':
-						this.room.$chat.append("<div class=\"tournament-message-start\">The tournament has started!</div>");
+						this.room.$chat.append("<div class=\"notice tournament-message-start\">The tournament has started!</div>");
 						break;
 
 					case 'disqualify':
-						this.room.$chat.append("<div class=\"tournament-message-disqualify\">" + Tools.escapeHTML(data[0]) + " has been disqualified from the tournament</div>");
+						this.room.$chat.append("<div class=\"notice tournament-message-disqualify\">" + Tools.escapeHTML(data[0]) + " has been disqualified from the tournament</div>");
 						break;
 
 					case 'update':
@@ -178,7 +178,7 @@
 						break;
 
 					case 'battlestart':
-						this.room.$chat.append('<div class="tournament-message-battlestart"><a href="' + app.root + toRoomid(data[2]).toLowerCase() + '" class="ilink">' +
+						this.room.$chat.append('<div class="notice tournament-message-battlestart"><a href="' + app.root + toRoomid(data[2]).toLowerCase() + '" class="ilink">' +
 							"A tournament battle between " + Tools.escapeHTML(data[0]) + " and " + Tools.escapeHTML(data[1]) + " has started." +
 							'</a></div>');
 						break;
@@ -189,16 +189,16 @@
 							result = "won";
 						else if (data[2] === 'loss')
 							result = "lost";
-						this.room.$chat.append('<div class="tournament-message-battleend">' +
+						this.room.$chat.append('<div class="notice tournament-message-battleend">' +
 							Tools.escapeHTML(data[0]) + " has " + result + " the match " + Tools.escapeHTML(data[3].split(',').join(' - ')) + " against " + Tools.escapeHTML(data[1]) +
 							'</div>');
 						break;
 
 					case 'end':
-						this.room.$chat.append("<div class=\"tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(data[0].split(','))) + " for winning the tournament!</div>");
+						this.room.$chat.append("<div class=\"notice tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(data[0].split(','))) + " for winning the tournament!</div>");
 						if (data[1]) {
 							var runnerUps = data[1].split(',');
-							this.room.$chat.append("<div class=\"tournament-message-end-runnerup\">Runner-up" + (runnerUps.length > 1 ? "s" : "") +": " + Tools.escapeHTML(arrayToPhrase(runnerUps)) + "</div>");
+							this.room.$chat.append("<div class=\"notice tournament-message-end-runnerup\">Runner-up" + (runnerUps.length > 1 ? "s" : "") +": " + Tools.escapeHTML(arrayToPhrase(runnerUps)) + "</div>");
 						}
 						// Fallthrough
 
@@ -211,7 +211,7 @@
 						this.$box.css('transition', '');
 
 						if (cmd === 'forceend')
-							this.room.$chat.append("<div class=\"tournament-message-forceend\">The tournament was forcibly ended.</div>");
+							this.room.$chat.append("<div class=\"notice tournament-message-forceend\">The tournament was forcibly ended.</div>");
 						break;
 
 					default:

From 60385ad705be40e039ec61be2efa6547b45ef96a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Tue, 20 Aug 2013 20:31:41 +1000
Subject: [PATCH 11/33] Whitespace

---
 style/client.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style/client.css b/style/client.css
index 5893cdf9d..74229c83e 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1065,7 +1065,7 @@ a.ilink:hover {
 .tournament-challenge.active,
 .tournament-challengeby.active,
 .tournament-challenging.active,
-.tournament-challenged.active  {
+.tournament-challenged.active {
 	display: block;
 }
 

From 5d010cc7a549d59895feb27c6944d4ef8074b7c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Tue, 20 Aug 2013 20:32:29 +1000
Subject: [PATCH 12/33] Bold all tournament messages

---
 style/client.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/style/client.css b/style/client.css
index 74229c83e..4bfbaec93 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1069,6 +1069,10 @@ a.ilink:hover {
 	display: block;
 }
 
+div[class^='tournament-message-'], div[class*=' tournament-message-'] {
+	font-weight: bold;
+}
+
 /* Messages */
 
 .message-announce {

From dfc2f301c7e1d58e0f3ff6c5c9c5f33965fe4978 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Tue, 20 Aug 2013 21:59:26 +1000
Subject: [PATCH 13/33] Display final bracket at tournament end

---
 js/client-tournament.js | 52 +++++++++++++++++++++++++----------------
 style/client.css        |  5 ++++
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 2e8ab7928..8f092f9b5 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -55,6 +55,7 @@
 
 			this.isActive = false;
 			this.info = null;
+			this.isJoined = false;
 			this.bracketData = null;
 			this.challenges = null;
 			this.challengeBys = null;
@@ -131,6 +132,7 @@
 						this.$tools.find('.active').andSelf().removeClass('active');
 						if (this.info && this.info.isStarted)
 							this.$noMatches.addClass('active');
+						this.isJoined = false;
 						this.challenges = null;
 						this.challengeBys = null;
 						break;
@@ -141,9 +143,26 @@
 						this.$generator.text(this.info.generator);
 						break;
 
+					case 'isjoined':
+						this.isJoined = true;
+						break;
+
 					case 'bracketdata':
+						// The 'isjoined' packet isn't a guaranteed packet to all users, so that packet's
+						// handling is placed in the immediate next guaranteed packet, here
+						if (!this.info.isStarted)
+							if (this.isJoined)
+								this.$leave.addClass('active');
+							else
+								this.$join.addClass('active');
+						if (!this.info.isStarted || this.isJoined)
+							this.$tools.addClass('active');
+
 						this.bracketData = JSON.parse(data.join('|'));
-						this.showBracket(this.bracketData);
+						this.$bracket.empty()
+						var bracket = this.generateBracket(this.bracketData);
+						if (bracket)
+							this.$bracket.append(bracket);
 						break;
 
 					case 'challenges':
@@ -195,11 +214,16 @@
 						break;
 
 					case 'end':
-						this.room.$chat.append("<div class=\"notice tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(data[0].split(','))) + " for winning the tournament!</div>");
-						if (data[1]) {
-							var runnerUps = data[1].split(',');
-							this.room.$chat.append("<div class=\"notice tournament-message-end-runnerup\">Runner-up" + (runnerUps.length > 1 ? "s" : "") +": " + Tools.escapeHTML(arrayToPhrase(runnerUps)) + "</div>");
-						}
+						var endData = JSON.parse(data[0]);
+
+						var bracket = this.generateBracket(endData.bracketData);
+						if (bracket)
+							this.room.$chat.append($('<div class="notice tournament-message-end-bracket"></div>').append(bracket));
+
+						this.room.$chat.append("<div class=\"notice tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(endData.results[0])) + " for winning the tournament!</div>");
+						if (endData.results[1])
+							this.room.$chat.append("<div class=\"notice tournament-message-end-runnerup\">Runner-up" + (endData.results[1].length > 1 ? "s" : "") +": " + Tools.escapeHTML(arrayToPhrase(endData.results[1])) + "</div>");
+
 						// Fallthrough
 
 					case 'forceend':
@@ -222,20 +246,16 @@
 			}
 		};
 
-		TournamentBox.prototype.showBracket = function (data) {
-			var isJoined = false;
+		TournamentBox.prototype.generateBracket = function (data) {
 			if (data.type === 'tree') {
 				// TODO
 			} else if (data.type === 'table') {
-				this.$bracket.empty();
 				var $table = $('<table class="tournament-bracket-table"></table>');
 
 				var $colHeaders = $('<tr><td class="empty"></td></tr>');
 				$table.append($colHeaders);
 				data.tableHeaders.cols.forEach(function (name) {
 					$colHeaders.append($('<th></th>').text(name));
-					if (app.user.attributes.name === name)
-						isJoined = true;
 				});
 
 				data.tableHeaders.rows.forEach(function (name, r) {
@@ -265,16 +285,8 @@
 				});
 
 				if (data.tableContents.length > 0)
-					this.$bracket.append($table);
+					return $table;
 			}
-
-			if (!this.info.isStarted)
-				if (isJoined)
-					this.$leave.addClass('active');
-				else
-					this.$join.addClass('active');
-			if (!this.info.isStarted || isJoined)
-				this.$tools.addClass('active');
 		},
 
 		TournamentBox.prototype.renderChallengeUsers = function () {
diff --git a/style/client.css b/style/client.css
index 4bfbaec93..4f28352fc 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1072,6 +1072,11 @@ a.ilink:hover {
 div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 	font-weight: bold;
 }
+.tournament-message-end-bracket {
+	font-weight: normal !important;
+	max-height: 400px;
+	overflow: auto;
+}
 
 /* Messages */
 

From fdf4f04d1b091ccf243fa2d2a8da123e64d24b06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Wed, 21 Aug 2013 00:00:45 +1000
Subject: [PATCH 14/33] Centre the tournament end bracket text

---
 style/client.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/style/client.css b/style/client.css
index 63778ba17..1780fa791 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1076,6 +1076,7 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 	font-weight: normal !important;
 	max-height: 400px;
 	overflow: auto;
+	text-align: center;
 }
 
 /* Messages */

From a2aa4ac7d2bebe60b9d825dc478f3542732e73fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Fri, 13 Sep 2013 22:12:41 +1000
Subject: [PATCH 15/33] Automatically show tournament box when you can
 challenge/have challenges. Also add functions to show/hide the box for above
 purpose

---
 js/client-tournament.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 8f092f9b5..e895127b8 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -62,9 +62,7 @@
 
 			var self = this;
 			this.$title.on('click', function() {
-				self.$box.toggleClass('active');
-				self.$box.css('transition', '');
-				self.$box.css('max-height', self.$box.hasClass('active') ? self.$box[0].scrollHeight: '');
+				self.toggleBoxVisibility();
 			});
 			this.$box.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function() {
 				if (self.$box.hasClass('active'))
@@ -72,6 +70,7 @@
 				if (!self.isActive)
 					self.$wrapper.removeClass('active');
 			});
+
 			this.$join.on('click', function() {
 				self.room.send('/tournament join');
 			});
@@ -93,6 +92,22 @@
 		TournamentBox.prototype.updateLayout = function () {
 			this.$box.css('max-height', this.$box.hasClass('active') ? this.$box[0].scrollHeight: '');
 		};
+		TournamentBox.prototype.setBoxVisibility = function (isVisible) {
+			if (isVisible) {
+				if (this.$box.hasClass('active'))
+					return;
+				this.$box.addClass('active');
+			} else {
+				if (!this.$box.hasClass('active'))
+					return;
+				this.$box.removeClass('active');
+			}
+			this.$box.css('transition', '');
+			this.$box.css('max-height', this.$box.hasClass('active') ? this.$box[0].scrollHeight: '');
+		};
+		TournamentBox.prototype.toggleBoxVisibility = function () {
+			this.setBoxVisibility(!this.$box.hasClass('active'));
+		};
 
 		TournamentBox.prototype.parseMessage = function (data, isBroadcast) {
 			if (isBroadcast) {
@@ -173,6 +188,7 @@
 						this.$challengeTeam.children().data('type', 'challengeTeam');
 						this.$challengeTeam.children().attr('name', 'tournamentButton');
 						this.$challenge.addClass("active");
+						this.setBoxVisibility(true);
 						break;
 
 					case 'challengebys':
@@ -194,6 +210,7 @@
 						this.$challengeTeam.children().data('type', 'challengeTeam');
 						this.$challengeTeam.children().attr('name', 'tournamentButton');
 						this.$challenged.addClass("active");
+						this.setBoxVisibility(true);
 						break;
 
 					case 'battlestart':

From c449f4ef73af2c05d96eb36d63d71b485a87f51e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Fri, 13 Sep 2013 22:16:09 +1000
Subject: [PATCH 16/33] Make sure to sanatise the tournament type

---
 js/client-tournament.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index e895127b8..a9d7e1262 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -124,7 +124,7 @@
 
 				switch (cmd) {
 					case 'create':
-						this.room.$chat.append("<div class=\"notice tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + data.join('|') + " Tournament has been created.</div>");
+						this.room.$chat.append("<div class=\"notice tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + Tools.escapeHTML(data.join('|')) + " Tournament has been created.</div>");
 						break;
 
 					case 'join':

From 799d4c90acba1dadd6e9a111b45bda7c3fe0ac4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Fri, 13 Sep 2013 22:37:21 +1000
Subject: [PATCH 17/33] Add notification when a new tournament is created, you
 have available challenges or are challenged

---
 js/client-tournament.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index a9d7e1262..1968e5f82 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -124,7 +124,10 @@
 
 				switch (cmd) {
 					case 'create':
-						this.room.$chat.append("<div class=\"notice tournament-message-create\">A " + BattleFormats[data.shift()].name + " " + Tools.escapeHTML(data.join('|')) + " Tournament has been created.</div>");
+						var format = BattleFormats[data[0]].name;
+						var type = data[1];
+						this.room.$chat.append("<div class=\"notice tournament-message-create\">A " + format + " " + Tools.escapeHTML(type) + " Tournament has been created.</div>");
+						this.room.notifyOnce("Tournament created", "Room: " + this.room.title + "\nFormat: " + format + "\nType: " + type, 'tournament-create');
 						break;
 
 					case 'join':
@@ -188,7 +191,9 @@
 						this.$challengeTeam.children().data('type', 'challengeTeam');
 						this.$challengeTeam.children().attr('name', 'tournamentButton');
 						this.$challenge.addClass("active");
+
 						this.setBoxVisibility(true);
+						this.room.notifyOnce("Tournament challenges available", "Room: " + this.room.title, 'tournament-challenges');
 						break;
 
 					case 'challengebys':
@@ -210,7 +215,9 @@
 						this.$challengeTeam.children().data('type', 'challengeTeam');
 						this.$challengeTeam.children().attr('name', 'tournamentButton');
 						this.$challenged.addClass("active");
+
 						this.setBoxVisibility(true);
+						this.room.notifyOnce("Tournament challenge from " + data[0], "Room: " + this.room.title, 'tournament-challenged');
 						break;
 
 					case 'battlestart':

From ffcd67478eba552d81a7d66a4977fb71faf07ce4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 15 Sep 2013 15:36:37 +1000
Subject: [PATCH 18/33] Add support for tree-type tournaments

---
 js/client-tournament.js | 143 ++++++++++++++++++++++++++++++++++++++--
 style/client.css        |  45 +++++++++++++
 testclient.html         |   1 +
 3 files changed, 182 insertions(+), 7 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 1968e5f82..0fd0ef2c0 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -272,8 +272,138 @@
 
 		TournamentBox.prototype.generateBracket = function (data) {
 			if (data.type === 'tree') {
-				// TODO
+				if (!data.rootNode)
+					return;
+
+				var id = 'tournament-bracket-tree-' + Math.floor(Math.random() * 0x100000000);
+
+				// Change tree format to infovis-compatible
+				var stack = [data.rootNode];
+				var n = 0;
+				while (stack.length > 0) {
+					var node = stack.pop();
+
+					node.data = {};
+					for (var key in node)
+						if (key !== 'children' && key !== 'data') {
+							node.data[key] = node[key];
+							delete node[key];
+						}
+					node.data.children = node.children;
+
+					node.id = id + "-" + n;
+					node.name = n;
+
+					node.children.forEach(function (child) {
+						stack.push(child);
+					});
+					++n;
+				}
+
+				var $div = $('<div class="tournament-bracket-tree" id="' + id + '"></div>');
+				setTimeout(function () {
+					$div.parent().css('overflow', 'hidden');
+					var st = new $jit.ST({
+						injectInto: id,
+						constrained: false,
+						levelsToShow: 999,
+						orientation: 'right',
+						duration: 0,
+						fps: 60,
+						transition: $jit.Trans.linear,
+						Navigation: {enable: true, panning: true},
+
+						Node: {height: 30, width: 150, type: 'rectangle', CanvasStyles: {fillStyle: 'rgba(0, 0, 0, 0)'}, overridable: true},
+						Edge: {type: "bezier", overridable: true},
+
+						onBeforePlotNode: function (node) {
+							if (node.data.children.length === 0)
+								node.data.$height = 20;
+							else
+								delete node.data.$height;
+						},
+
+						onBeforePlotLine: function (edge){
+							if (edge.nodeTo.data.team && edge.nodeTo.data.team === edge.nodeFrom.data.team) {
+								edge.data.$color = '#ee0';
+								edge.data.$lineWidth = 3;
+							} else {
+								delete edge.data.$color;
+								delete edge.data.$lineWidth;
+							}
+						},
+
+						onCreateLabel: function (label, node) {
+							var $label = $(label);
+
+							if (node.data.children.length === 0) {
+								$label.addClass('tournament-bracket-tree-node-team');
+								$label.text(node.data.team || "Unavailable");
+							} else {
+								$label.addClass('tournament-bracket-tree-node-match');
+								$label.addClass('tournament-bracket-tree-node-match-' + node.data.state);
+								if (node.data.state === 'unavailable')
+									$label.text("Unavailable");
+								else {
+									var $teams = $('<div></div>');
+									$teams.addClass('tournament-bracket-tree-node-match-teams');
+									var $teamA = $('<span></span>');
+									$teamA.addClass('tournament-bracket-tree-node-match-team');
+									var $teamB = $teamA.clone();
+									$teamA.text(node.data.children[0].data.team);
+									$teamB.text(node.data.children[1].data.team);
+									$teams.append($teamA).append(" vs ").append($teamB);
+
+									if (node.data.state === 'available')
+										$label.append("Waiting");
+									else if (node.data.state === 'inprogress')
+										$label.append('<a href="' + app.root + toRoomid(node.data.room).toLowerCase() + '" class="ilink">In-progress</a>');
+									else if (node.data.state === 'finished') {
+										if (node.data.result === 'win') {
+											$teamA.addClass('tournament-bracket-tree-node-match-team-win');
+											$teamB.addClass('tournament-bracket-tree-node-match-team-loss');
+										} else if (node.data.result === 'loss') {
+											$teamA.addClass('tournament-bracket-tree-node-match-team-loss');
+											$teamB.addClass('tournament-bracket-tree-node-match-team-win');
+										} else {
+											$teamA.addClass('tournament-bracket-tree-node-match-team-draw');
+											$teamB.addClass('tournament-bracket-tree-node-match-team-draw');
+										}
+
+										$label.addClass('tournament-bracket-tree-node-match-result-' + node.data.result);
+										$label.append(Tools.escapeHTML(node.data.score.join(" - ")));
+									}
+
+									$label.prepend($teams)
+								}
+							}
+
+							var parentNode = null;
+							for (var a in node.adjacencies)
+								if (node.adjacencies[a].nodeFrom === node) {
+									parentNode = node.adjacencies[a].nodeTo;
+									break;
+								}
+
+							if (parentNode && parentNode.data.state === 'finished')
+								if (parentNode.data.result === 'draw')
+									$label.addClass("tournament-bracket-tree-node-draw");
+								else if (node.data.team === parentNode.data.team)
+									$label.addClass("tournament-bracket-tree-node-win");
+								else
+									$label.addClass("tournament-bracket-tree-node-loss");
+						}
+					});
+					st.loadJSON(data.rootNode);
+					st.compute();
+					st.onClick(st.root);
+				}, 0);
+
+				return $div;
 			} else if (data.type === 'table') {
+				if (data.tableContents.length === 0)
+					return;
+
 				var $table = $('<table class="tournament-bracket-table"></table>');
 
 				var $colHeaders = $('<tr><td class="empty"></td></tr>');
@@ -294,13 +424,13 @@
 							return;
 						}
 						$cell.addClass('tournament-bracket-table-cell-' + cell.state);
-						if (cell.state === 'unavailable') {
+						if (cell.state === 'unavailable')
 							$cell.text("Unavailable");
-						} else if (cell.state === 'available') {
+						else if (cell.state === 'available')
 							$cell.text("Waiting");
-						} else if (cell.state === "inprogress") {
+						else if (cell.state === "inprogress")
 							$cell.html('<a href="' + app.root + toRoomid(cell.room).toLowerCase() + '" class="ilink">In-progress</a>');
-						} else if (cell.state === 'finished') {
+						else if (cell.state === 'finished') {
 							$cell.addClass('tournament-bracket-table-cell-result-' + cell.result);
 							$cell.text(cell.score.join(" - "));
 						}
@@ -308,8 +438,7 @@
 					$row.append($('<th class="tournament-bracket-row-score"></th>').text(data.scores[r]));
 				});
 
-				if (data.tableContents.length > 0)
-					return $table;
+				return $table;
 			}
 		},
 
diff --git a/style/client.css b/style/client.css
index 1780fa791..30a36c213 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1009,6 +1009,7 @@ a.ilink:hover {
 	overflow: auto;
 	font-size: 8pt;
 }
+
 .tournament-bracket-table {
 	margin: 10px auto;
 	empty-cells: hide;
@@ -1036,6 +1037,50 @@ a.ilink:hover {
 	background-color: rgba(255, 0, 0, 0.2)
 }
 
+.tournament-bracket-tree {
+	width: 100%;
+	height: 200px;
+}
+.tournament-bracket-tree-node-match, .tournament-bracket-tree-node-team {
+	height: 27px;
+	width: 148px;
+	border: 1px solid rgba(178, 183, 191, 0.7);
+	border-radius: 5px 5px 5px 5px;
+	background-color: rgba(225, 232, 242, 0.7);
+	color: #000;
+	font-size: 0.8em;
+	line-height: 1.5em;
+	text-align: center;
+	cursor: default;
+	user-select: none;
+}
+.tournament-bracket-tree-node-team {
+	height: 17px;
+	line-height: 17px;
+}
+.tournament-bracket-tree-node-match-unavailable {
+	line-height: 27px;
+}
+.tournament-bracket-tree-node-match-team {
+	font-weight: bold;
+}
+.tournament-bracket-tree-node-match-team-draw, .tournament-bracket-tree-node-match-team-loss {
+	color: #aaa;
+}
+
+.tournament-bracket-tree-node-win {
+	background-color: rgba(0, 255, 0, 0.2);
+	border-color: rgba(0, 255, 0, 0.5);
+}
+.tournament-bracket-tree-node-draw {
+	background-color: rgba(255, 255, 0, 0.2);
+	border-color: rgba(255, 255, 0, 0.5);
+}
+.tournament-bracket-tree-node-loss {
+	background-color: rgba(255, 0, 0, 0.2);
+	border-color: rgba(255, 0, 0, 0.5);
+}
+
 .tournament-tools {
 	padding: 10px;
 	display: none;
diff --git a/testclient.html b/testclient.html
index 04a1601b2..edef66435 100644
--- a/testclient.html
+++ b/testclient.html
@@ -73,6 +73,7 @@
 		<script src="js/lib/html-sanitizer-minified.js"></script>
 		<script src="js/lib/lodash.compat.js"></script>
 		<script src="js/lib/backbone.js"></script>
+		<script src="js/lib/infovis-spacetree-2.0.1.js"></script>
 
 		<script>
 			document.getElementById('loading-message').innerHTML += ' DONE<br />Loading client...';

From 1322025376fa46c43a2438f4e70f5b2cf578b1f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 15 Sep 2013 15:37:16 +1000
Subject: [PATCH 19/33] Add library required for previous commit

---
 js/lib/infovis-spacetree-2.0.1.js | 10134 ++++++++++++++++++++++++++++
 1 file changed, 10134 insertions(+)
 create mode 100644 js/lib/infovis-spacetree-2.0.1.js

diff --git a/js/lib/infovis-spacetree-2.0.1.js b/js/lib/infovis-spacetree-2.0.1.js
new file mode 100644
index 000000000..217bdb152
--- /dev/null
+++ b/js/lib/infovis-spacetree-2.0.1.js
@@ -0,0 +1,10134 @@
+/*
+Copyright (c) 2013 Sencha Inc. - Author: Nicolas Garcia Belmonte (http://philogb.github.com/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+ */
+ 
+(function () { 
+
+/*
+  File: Core.js
+
+ */
+
+/*
+ Object: $jit
+
+ Defines the namespace for all library Classes and Objects.
+ This variable is the *only* global variable defined in the Toolkit.
+ There are also other interesting properties attached to this variable described below.
+ */
+this.$jit = function(w) {
+  w = w || window;
+  for(var k in $jit) {
+    if($jit[k].$extend) {
+      w[k] = $jit[k];
+    }
+  }
+};
+
+$jit.version = '2.0.1';
+/*
+  Object: $jit.id
+
+  Works just like *document.getElementById*
+
+  Example:
+  (start code js)
+  var element = $jit.id('elementId');
+  (end code)
+
+*/
+
+/*
+ Object: $jit.util
+
+ Contains utility functions.
+
+ Some of the utility functions and the Class system were based in the MooTools Framework
+ <http://mootools.net>. Copyright (c) 2006-2010 Valerio Proietti, <http://mad4milk.net/>.
+ MIT license <http://mootools.net/license.txt>.
+
+ These methods are generally also implemented in DOM manipulation frameworks like JQuery, MooTools and Prototype.
+ I'd suggest you to use the functions from those libraries instead of using these, since their functions
+ are widely used and tested in many different platforms/browsers. Use these functions only if you have to.
+
+ */
+var $ = function(d) {
+  return document.getElementById(d);
+};
+
+$.empty = function() {
+};
+
+/*
+  Method: extend
+
+  Augment an object by appending another object's properties.
+
+  Parameters:
+
+  original - (object) The object to be extended.
+  extended - (object) An object which properties are going to be appended to the original object.
+
+  Example:
+  (start code js)
+  $jit.util.extend({ 'a': 1, 'b': 2 }, { 'b': 3, 'c': 4 }); //{ 'a':1, 'b': 3, 'c': 4 }
+  (end code)
+*/
+$.extend = function(original, extended) {
+  for ( var key in (extended || {}))
+    original[key] = extended[key];
+  return original;
+};
+
+$.lambda = function(value) {
+  return (typeof value == 'function') ? value : function() {
+    return value;
+  };
+};
+
+$.time = Date.now || function() {
+  return +new Date;
+};
+
+/*
+  Method: splat
+
+  Returns an array wrapping *obj* if *obj* is not an array. Returns *obj* otherwise.
+
+  Parameters:
+
+  obj - (mixed) The object to be wrapped in an array.
+
+  Example:
+  (start code js)
+  $jit.util.splat(3);   //[3]
+  $jit.util.splat([3]); //[3]
+  (end code)
+*/
+$.splat = function(obj) {
+  var type = $.type(obj);
+  return type ? ((type != 'array') ? [ obj ] : obj) : [];
+};
+
+$.type = function(elem) {
+  var type = $.type.s.call(elem).match(/^\[object\s(.*)\]$/)[1].toLowerCase();
+  if(type != 'object') return type;
+  if(elem && elem.$$family) return elem.$$family;
+  if(elem && elem.nodeType == 9) return 'htmldocument';
+  return (elem && elem.nodeName && elem.nodeType == 1)? 'element' : type;
+};
+$.type.s = Object.prototype.toString;
+
+/*
+  Method: each
+
+  Iterates through an iterable applying *f*.
+
+  Parameters:
+
+  iterable - (array) The original array.
+  fn - (function) The function to apply to the array elements.
+
+  Example:
+  (start code js)
+  $jit.util.each([3, 4, 5], function(n) { alert('number ' + n); });
+  (end code)
+*/
+$.each = function(iterable, fn) {
+  var type = $.type(iterable);
+  if (type == 'object') {
+    for ( var key in iterable)
+      fn(iterable[key], key);
+  } else {
+    for ( var i = 0, l = iterable.length; i < l; i++)
+      fn(iterable[i], i);
+  }
+};
+
+$.indexOf = function(array, item) {
+  if(array.indexOf) return array.indexOf(item);
+  for(var i=0,l=array.length; i<l; i++) {
+    if(array[i] === item) return i;
+  }
+  return -1;
+};
+
+/*
+  Method: map
+
+  Maps or collects an array by applying *f*.
+
+  Parameters:
+
+  array - (array) The original array.
+  f - (function) The function to apply to the array elements.
+
+  Example:
+  (start code js)
+  $jit.util.map([3, 4, 5], function(n) { return n*n; }); //[9, 16, 25]
+  (end code)
+*/
+$.map = function(array, f) {
+  var ans = [];
+  $.each(array, function(elem, i) {
+    ans.push(f(elem, i));
+  });
+  return ans;
+};
+
+/*
+  Method: reduce
+
+  Iteratively applies the binary function *f* storing the result in an accumulator.
+
+  Parameters:
+
+  array - (array) The original array.
+  f - (function) The function to apply to the array elements.
+  opt - (optional|mixed) The starting value for the acumulator.
+
+  Example:
+  (start code js)
+  $jit.util.reduce([3, 4, 5], function(x, y) { return x + y; }, 0); //12
+  (end code)
+*/
+$.reduce = function(array, f, opt) {
+  var l = array.length;
+  if(l==0) return opt;
+  var acum = arguments.length == 3? opt : array[--l];
+  while(l--) {
+    acum = f(acum, array[l]);
+  }
+  return acum;
+};
+
+/*
+  Method: merge
+
+  Merges n-objects and their sub-objects creating a new, fresh object.
+
+  Parameters:
+
+  An arbitrary number of objects.
+
+  Example:
+  (start code js)
+  $jit.util.merge({ 'a': 1, 'b': 2 }, { 'b': 3, 'c': 4 }); //{ 'a':1, 'b': 3, 'c': 4 }
+  (end code)
+*/
+$.merge = function() {
+  var mix = {};
+  for ( var i = 0, l = arguments.length; i < l; i++) {
+    var object = arguments[i];
+    if ($.type(object) != 'object')
+      continue;
+    for ( var key in object) {
+      var op = object[key], mp = mix[key];
+      mix[key] = (mp && $.type(op) == 'object' && $.type(mp) == 'object') ? $
+          .merge(mp, op) : $.unlink(op);
+    }
+  }
+  return mix;
+};
+
+$.unlink = function(object) {
+  var unlinked;
+  switch ($.type(object)) {
+  case 'object':
+    unlinked = {};
+    for ( var p in object)
+      unlinked[p] = $.unlink(object[p]);
+    break;
+  case 'array':
+    unlinked = [];
+    for ( var i = 0, l = object.length; i < l; i++)
+      unlinked[i] = $.unlink(object[i]);
+    break;
+  default:
+    return object;
+  }
+  return unlinked;
+};
+
+$.zip = function() {
+  if(arguments.length === 0) return [];
+  for(var j=0, ans=[], l=arguments.length, ml=arguments[0].length; j<ml; j++) {
+    for(var i=0, row=[]; i<l; i++) {
+      row.push(arguments[i][j]);
+    }
+    ans.push(row);
+  }
+  return ans;
+};
+
+/*
+  Method: rgbToHex
+
+  Converts an RGB array into a Hex string.
+
+  Parameters:
+
+  srcArray - (array) An array with R, G and B values
+
+  Example:
+  (start code js)
+  $jit.util.rgbToHex([255, 255, 255]); //'#ffffff'
+  (end code)
+*/
+$.rgbToHex = function(srcArray, array) {
+  if (srcArray.length < 3)
+    return null;
+  if (srcArray.length == 4 && srcArray[3] == 0 && !array)
+    return 'transparent';
+  var hex = [];
+  for ( var i = 0; i < 3; i++) {
+    var bit = (srcArray[i] - 0).toString(16);
+    hex.push(bit.length == 1 ? '0' + bit : bit);
+  }
+  return array ? hex : '#' + hex.join('');
+};
+
+/*
+  Method: hexToRgb
+
+  Converts an Hex color string into an RGB array.
+
+  Parameters:
+
+  hex - (string) A color hex string.
+
+  Example:
+  (start code js)
+  $jit.util.hexToRgb('#fff'); //[255, 255, 255]
+  (end code)
+*/
+$.hexToRgb = function(hex) {
+  if (hex.length != 7) {
+    hex = hex.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
+    hex.shift();
+    if (hex.length != 3)
+      return null;
+    var rgb = [];
+    for ( var i = 0; i < 3; i++) {
+      var value = hex[i];
+      if (value.length == 1)
+        value += value;
+      rgb.push(parseInt(value, 16));
+    }
+    return rgb;
+  } else {
+    hex = parseInt(hex.slice(1), 16);
+    return [ hex >> 16, hex >> 8 & 0xff, hex & 0xff ];
+  }
+};
+
+$.destroy = function(elem) {
+  $.clean(elem);
+  if (elem.parentNode)
+    elem.parentNode.removeChild(elem);
+  if (elem.clearAttributes)
+    elem.clearAttributes();
+};
+
+$.clean = function(elem) {
+  for (var ch = elem.childNodes, i = 0, l = ch.length; i < l; i++) {
+    $.destroy(ch[i]);
+  }
+};
+
+/*
+  Method: addEvent
+
+  Cross-browser add event listener.
+
+  Parameters:
+
+  obj - (obj) The Element to attach the listener to.
+  type - (string) The listener type. For example 'click', or 'mousemove'.
+  fn - (function) The callback function to be used when the event is fired.
+
+  Example:
+  (start code js)
+  $jit.util.addEvent(elem, 'click', function(){ alert('hello'); });
+  (end code)
+*/
+$.addEvent = function(obj, type, fn) {
+  if (obj.addEventListener)
+    obj.addEventListener(type, fn, false);
+  else
+    obj.attachEvent('on' + type, fn);
+};
+
+$.addEvents = function(obj, typeObj) {
+  for(var type in typeObj) {
+    $.addEvent(obj, type, typeObj[type]);
+  }
+};
+
+$.hasClass = function(obj, klass) {
+  return (' ' + obj.className + ' ').indexOf(' ' + klass + ' ') > -1;
+};
+
+$.addClass = function(obj, klass) {
+  if (!$.hasClass(obj, klass))
+    obj.className = (obj.className + " " + klass);
+};
+
+$.removeClass = function(obj, klass) {
+  obj.className = obj.className.replace(new RegExp(
+      '(^|\\s)' + klass + '(?:\\s|$)'), '$1');
+};
+
+$.getPos = function(elem) {
+  var offset = getOffsets(elem);
+  var scroll = getScrolls(elem);
+  return {
+    x: offset.x - scroll.x,
+    y: offset.y - scroll.y
+  };
+
+  function getOffsets(elem) {
+    var position = {
+      x: 0,
+      y: 0
+    };
+    while (elem && !isBody(elem)) {
+      position.x += elem.offsetLeft;
+      position.y += elem.offsetTop;
+      elem = elem.offsetParent;
+    }
+    return position;
+  }
+
+  function getScrolls(elem) {
+    var position = {
+      x: 0,
+      y: 0
+    };
+    while (elem && !isBody(elem)) {
+      position.x += elem.scrollLeft;
+      position.y += elem.scrollTop;
+      elem = elem.parentNode;
+    }
+    return position;
+  }
+
+  function isBody(element) {
+    return (/^(?:body|html)$/i).test(element.tagName);
+  }
+};
+
+$.event = {
+  get: function(e, win) {
+    win = win || window;
+    return e || win.event;
+  },
+  getWheel: function(e) {
+    return e.wheelDelta? e.wheelDelta / 120 : -(e.detail || 0) / 3;
+  },
+  isRightClick: function(e) {
+    return (e.which == 3 || e.button == 2);
+  },
+  getPos: function(e, win) {
+    // get mouse position
+    win = win || window;
+    e = e || win.event;
+    var doc = win.document;
+    doc = doc.documentElement || doc.body;
+    //TODO(nico): make touch event handling better
+    if(e.touches && e.touches.length) {
+      e = e.touches[0];
+    }
+    var page = {
+      x: e.pageX || (e.clientX + doc.scrollLeft),
+      y: e.pageY || (e.clientY + doc.scrollTop)
+    };
+    return page;
+  },
+  stop: function(e) {
+    if (e.stopPropagation) e.stopPropagation();
+    e.cancelBubble = true;
+    if (e.preventDefault) e.preventDefault();
+    else e.returnValue = false;
+  }
+};
+
+$jit.util = $jit.id = $;
+
+var Class = function(properties) {
+  properties = properties || {};
+  var klass = function() {
+    for ( var key in this) {
+      if (typeof this[key] != 'function')
+        this[key] = $.unlink(this[key]);
+    }
+    this.constructor = klass;
+    if (Class.prototyping)
+      return this;
+    var instance = this.initialize ? this.initialize.apply(this, arguments)
+        : this;
+    //typize
+    this.$$family = 'class';
+    return instance;
+  };
+
+  for ( var mutator in Class.Mutators) {
+    if (!properties[mutator])
+      continue;
+    properties = Class.Mutators[mutator](properties, properties[mutator]);
+    delete properties[mutator];
+  }
+
+  $.extend(klass, this);
+  klass.constructor = Class;
+  klass.prototype = properties;
+  return klass;
+};
+
+Class.Mutators = {
+
+  Implements: function(self, klasses) {
+    $.each($.splat(klasses), function(klass) {
+      Class.prototyping = klass;
+      var instance = (typeof klass == 'function') ? new klass : klass;
+      for ( var prop in instance) {
+        if (!(prop in self)) {
+          self[prop] = instance[prop];
+        }
+      }
+      delete Class.prototyping;
+    });
+    return self;
+  }
+
+};
+
+$.extend(Class, {
+
+  inherit: function(object, properties) {
+    for ( var key in properties) {
+      var override = properties[key];
+      var previous = object[key];
+      var type = $.type(override);
+      if (previous && type == 'function') {
+        if (override != previous) {
+          Class.override(object, key, override);
+        }
+      } else if (type == 'object') {
+        object[key] = $.merge(previous, override);
+      } else {
+        object[key] = override;
+      }
+    }
+    return object;
+  },
+
+  override: function(object, name, method) {
+    var parent = Class.prototyping;
+    if (parent && object[name] != parent[name])
+      parent = null;
+    var override = function() {
+      var previous = this.parent;
+      this.parent = parent ? parent[name] : object[name];
+      var value = method.apply(this, arguments);
+      this.parent = previous;
+      return value;
+    };
+    object[name] = override;
+  }
+
+});
+
+Class.prototype.implement = function() {
+  var proto = this.prototype;
+  $.each(Array.prototype.slice.call(arguments || []), function(properties) {
+    Class.inherit(proto, properties);
+  });
+  return this;
+};
+
+$jit.Class = Class;
+
+/*
+  Object: $jit.json
+
+  Provides JSON utility functions.
+
+  Most of these functions are JSON-tree traversal and manipulation functions.
+*/
+$jit.json = {
+  /*
+     Method: prune
+
+     Clears all tree nodes having depth greater than maxLevel.
+
+     Parameters:
+
+        tree - (object) A JSON tree object. For more information please see <Loader.loadJSON>.
+        maxLevel - (number) An integer specifying the maximum level allowed for this tree. All nodes having depth greater than max level will be deleted.
+
+  */
+  prune: function(tree, maxLevel) {
+    this.each(tree, function(elem, i) {
+      if (i == maxLevel && elem.children) {
+        delete elem.children;
+        elem.children = [];
+      }
+    });
+  },
+  /*
+     Method: getParent
+
+     Returns the parent node of the node having _id_ as id.
+
+     Parameters:
+
+        tree - (object) A JSON tree object. See also <Loader.loadJSON>.
+        id - (string) The _id_ of the child node whose parent will be returned.
+
+    Returns:
+
+        A tree JSON node if any, or false otherwise.
+
+  */
+  getParent: function(tree, id) {
+    if (tree.id == id)
+      return false;
+    var ch = tree.children;
+    if (ch && ch.length > 0) {
+      for ( var i = 0; i < ch.length; i++) {
+        if (ch[i].id == id)
+          return tree;
+        else {
+          var ans = this.getParent(ch[i], id);
+          if (ans)
+            return ans;
+        }
+      }
+    }
+    return false;
+  },
+  /*
+     Method: getSubtree
+
+     Returns the subtree that matches the given id.
+
+     Parameters:
+
+        tree - (object) A JSON tree object. See also <Loader.loadJSON>.
+        id - (string) A node *unique* identifier.
+
+     Returns:
+
+        A subtree having a root node matching the given id. Returns null if no subtree matching the id is found.
+
+  */
+  getSubtree: function(tree, id) {
+    if (tree.id == id)
+      return tree;
+    for ( var i = 0, ch = tree.children; ch && i < ch.length; i++) {
+      var t = this.getSubtree(ch[i], id);
+      if (t != null)
+        return t;
+    }
+    return null;
+  },
+  /*
+     Method: eachLevel
+
+      Iterates on tree nodes with relative depth less or equal than a specified level.
+
+     Parameters:
+
+        tree - (object) A JSON tree or subtree. See also <Loader.loadJSON>.
+        initLevel - (number) An integer specifying the initial relative level. Usually zero.
+        toLevel - (number) An integer specifying a top level. This method will iterate only through nodes with depth less than or equal this number.
+        action - (function) A function that receives a node and an integer specifying the actual level of the node.
+
+    Example:
+   (start code js)
+     $jit.json.eachLevel(tree, 0, 3, function(node, depth) {
+        alert(node.name + ' ' + depth);
+     });
+   (end code)
+  */
+  eachLevel: function(tree, initLevel, toLevel, action) {
+    if (initLevel <= toLevel) {
+      action(tree, initLevel);
+      if(!tree.children) return;
+      for ( var i = 0, ch = tree.children; i < ch.length; i++) {
+        this.eachLevel(ch[i], initLevel + 1, toLevel, action);
+      }
+    }
+  },
+  /*
+     Method: each
+
+      A JSON tree iterator.
+
+     Parameters:
+
+        tree - (object) A JSON tree or subtree. See also <Loader.loadJSON>.
+        action - (function) A function that receives a node.
+
+    Example:
+    (start code js)
+      $jit.json.each(tree, function(node) {
+        alert(node.name);
+      });
+    (end code)
+
+  */
+  each: function(tree, action) {
+    this.eachLevel(tree, 0, Number.MAX_VALUE, action);
+  }
+};
+
+
+/*
+     An object containing multiple type of transformations. 
+*/
+
+$jit.Trans = {
+  $extend: true,
+  
+  linear: function(p){
+    return p;
+  }
+};
+
+var Trans = $jit.Trans;
+
+(function(){
+
+  var makeTrans = function(transition, params){
+    params = $.splat(params);
+    return $.extend(transition, {
+      easeIn: function(pos){
+        return transition(pos, params);
+      },
+      easeOut: function(pos){
+        return 1 - transition(1 - pos, params);
+      },
+      easeInOut: function(pos){
+        return (pos <= 0.5)? transition(2 * pos, params) / 2 : (2 - transition(
+            2 * (1 - pos), params)) / 2;
+      }
+    });
+  };
+
+  var transitions = {
+
+    Pow: function(p, x){
+      return Math.pow(p, x[0] || 6);
+    },
+
+    Expo: function(p){
+      return Math.pow(2, 8 * (p - 1));
+    },
+
+    Circ: function(p){
+      return 1 - Math.sin(Math.acos(p));
+    },
+
+    Sine: function(p){
+      return 1 - Math.sin((1 - p) * Math.PI / 2);
+    },
+
+    Back: function(p, x){
+      x = x[0] || 1.618;
+      return Math.pow(p, 2) * ((x + 1) * p - x);
+    },
+
+    Bounce: function(p){
+      var value;
+      for ( var a = 0, b = 1; 1; a += b, b /= 2) {
+        if (p >= (7 - 4 * a) / 11) {
+          value = b * b - Math.pow((11 - 6 * a - 11 * p) / 4, 2);
+          break;
+        }
+      }
+      return value;
+    },
+
+    Elastic: function(p, x){
+      return Math.pow(2, 10 * --p)
+          * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
+    }
+
+  };
+
+  $.each(transitions, function(val, key){
+    Trans[key] = makeTrans(val);
+  });
+
+  $.each( [
+      'Quad', 'Cubic', 'Quart', 'Quint'
+  ], function(elem, i){
+    Trans[elem] = makeTrans(function(p){
+      return Math.pow(p, [
+        i + 2
+      ]);
+    });
+  });
+
+})();
+
+/*
+   A Class that can perform animations for generic objects.
+
+   If you are looking for animation transitions please take a look at the <Trans> object.
+
+   Used by:
+
+   <Graph.Plot>
+   
+   Based on:
+   
+   The Animation class is based in the MooTools Framework <http://mootools.net>. Copyright (c) 2006-2009 Valerio Proietti, <http://mad4milk.net/>. MIT license <http://mootools.net/license.txt>.
+
+*/
+
+var Animation = new Class( {
+
+  initialize: function(options){
+    this.setOptions(options);
+  },
+
+  setOptions: function(options){
+    var opt = {
+      duration: 2500,
+      fps: 40,
+      transition: Trans.Quart.easeInOut,
+      compute: $.empty,
+      complete: $.empty,
+      link: 'ignore'
+    };
+    this.opt = $.merge(opt, options || {});
+    return this;
+  },
+
+  step: function(){
+    var time = $.time(), opt = this.opt;
+    if (time < this.time + opt.duration) {
+      var delta = opt.transition((time - this.time) / opt.duration);
+      opt.compute(delta);
+    } else {
+      this.timer = clearInterval(this.timer);
+      opt.compute(1);
+      opt.complete();
+    }
+  },
+
+  start: function(){
+    if (!this.check())
+      return this;
+    this.time = 0;
+    this.startTimer();
+    return this;
+  },
+
+  startTimer: function(){
+    var that = this, fps = this.opt.fps;
+    if (this.timer)
+      return false;
+    this.time = $.time() - this.time;
+    this.timer = setInterval((function(){
+      that.step();
+    }), Math.round(1000 / fps));
+    return true;
+  },
+
+  pause: function(){
+    this.stopTimer();
+    return this;
+  },
+
+  resume: function(){
+    this.startTimer();
+    return this;
+  },
+
+  stopTimer: function(){
+    if (!this.timer)
+      return false;
+    this.time = $.time() - this.time;
+    this.timer = clearInterval(this.timer);
+    return true;
+  },
+
+  check: function(){
+    if (!this.timer)
+      return true;
+    if (this.opt.link == 'cancel') {
+      this.stopTimer();
+      return true;
+    }
+    return false;
+  }
+});
+
+
+var Options = function() {
+  var args = arguments;
+  for(var i=0, l=args.length, ans={}; i<l; i++) {
+    var opt = Options[args[i]];
+    if(opt.$extend) {
+      $.extend(ans, opt);
+    } else {
+      ans[args[i]] = opt;  
+    }
+  }
+  return ans;
+};
+
+/*
+ * File: Options.Canvas.js
+ *
+*/
+
+/*
+  Object: Options.Canvas
+  
+  These are Canvas general options, like where to append it in the DOM, its dimensions, background, 
+  and other more advanced options.
+  
+  Syntax:
+  
+  (start code js)
+
+  Options.Canvas = {
+    injectInto: 'id',
+    type: '2D', //'3D'
+    width: false,
+    height: false,
+    useCanvas: false,
+    withLabels: true,
+    background: false
+  };  
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    injectInto: 'someContainerId',
+    width: 500,
+    height: 700
+  });
+  (end code)
+  
+  Parameters:
+  
+  injectInto - *required* (string|element) The id of the DOM container for the visualization. It can also be an Element provided that it has an id.
+  type - (string) Context type. Default's 2D but can be 3D for webGL enabled browsers.
+  width - (number) Default's to the *container's offsetWidth*. The width of the canvas.
+  height - (number) Default's to the *container's offsetHeight*. The height of the canvas.
+  useCanvas - (boolean|object) Default's *false*. You can pass another <Canvas> instance to be used by the visualization.
+  withLabels - (boolean) Default's *true*. Whether to use a label container for the visualization.
+  background - (boolean|object) Default's *false*. An object containing information about the rendering of a background canvas.
+*/
+
+Options.Canvas = {
+    $extend: true,
+    
+    injectInto: 'id',
+    type: '2D',
+    width: false,
+    height: false,
+    useCanvas: false,
+    withLabels: true,
+    background: false,
+    
+    Scene: {
+      Lighting: {
+        enable: false,
+        ambient: [1, 1, 1],
+        directional: {
+          direction: { x: -100, y: -100, z: -100 },
+          color: [0.5, 0.3, 0.1]
+        }
+      }
+    }
+};
+
+/*
+ * File: Options.Tree.js
+ *
+*/
+
+/*
+  Object: Options.Tree
+
+  Options related to (strict) Tree layout algorithms. These options are used by the <ST> visualization.
+
+  Syntax:
+
+  (start code js)
+  Options.Tree = {
+    orientation: "left",
+    subtreeOffset: 8,
+    siblingOffset: 5,
+    indent:10,
+    multitree: false,
+    align:"center"
+  };
+  (end code)
+
+  Example:
+
+  (start code js)
+  var st = new $jit.ST({
+    orientation: 'left',
+    subtreeOffset: 1,
+    siblingOFfset: 5,
+    multitree: true
+  });
+  (end code)
+
+  Parameters:
+
+  subtreeOffset - (number) Default's 8. Separation offset between subtrees.
+  siblingOffset - (number) Default's 5. Separation offset between siblings.
+  orientation - (string) Default's 'left'. Tree orientation layout. Possible values are 'left', 'top', 'right', 'bottom'.
+  align - (string) Default's *center*. Whether the tree alignment is 'left', 'center' or 'right'.
+  indent - (number) Default's 10. Used when *align* is left or right and shows an indentation between parent and children.
+  multitree - (boolean) Default's *false*. Used with the node $orn data property for creating multitrees.
+  levelSpacing - (string) Whether each level is evenly spaced or level spacing is relative tothe size of the parent node. The former (which is the default) is 'even', the latter is 'parent'.
+
+*/
+Options.Tree = {
+    $extend: true,
+
+    orientation: "left",
+    subtreeOffset: 8,
+    siblingOffset: 5,
+    indent:10,
+    multitree: false,
+    align:"center",
+    levelSpacing: "even"
+};
+
+
+/*
+ * File: Options.Node.js
+ *
+*/
+
+/*
+  Object: Options.Node
+
+  Provides Node rendering options for Tree and Graph based visualizations.
+
+  Syntax:
+    
+  (start code js)
+  Options.Node = {
+    overridable: false,
+    type: 'circle',
+    color: '#ccb',
+    alpha: 1,
+    dim: 3,
+    height: 20,
+    width: 90,
+    autoHeight: false,
+    autoWidth: false,
+    lineWidth: 1,
+    transform: true,
+    align: "center",
+    angularWidth:1,
+    span:1,
+    CanvasStyles: {}
+  };
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    Node: {
+      overridable: true,
+      width: 30,
+      autoHeight: true,
+      type: 'rectangle'
+    }
+  });
+  (end code)
+  
+  Parameters:
+
+  overridable - (boolean) Default's *false*. Determine whether or not general node properties can be overridden by a particular <Graph.Node>.
+  type - (string) Default's *circle*. Node's shape. Node built-in types include 'circle', 'rectangle', 'square', 'ellipse', 'triangle', 'star'. The default Node type might vary in each visualization. You can also implement (non built-in) custom Node types into your visualizations.
+  color - (string) Default's *#ccb*. Node color.
+  alpha - (number) Default's *1*. The Node's alpha value. *1* is for full opacity.
+  dim - (number) Default's *3*. An extra parameter used by 'circle', 'square', 'triangle' and 'star' node types. Depending on each shape, this parameter can set the radius of a circle, half the length of the side of a square, half the base and half the height of a triangle or the length of a side of a star (concave decagon).
+  height - (number) Default's *20*. Used by 'rectangle' and 'ellipse' node types. The height of the node shape.
+  width - (number) Default's *90*. Used by 'rectangle' and 'ellipse' node types. The width of the node shape.
+  autoHeight - (boolean) Default's *false*. Whether to set an auto height for the node depending on the content of the Node's label.
+  autoWidth - (boolean) Default's *false*. Whether to set an auto width for the node depending on the content of the Node's label.
+  lineWidth - (number) Default's *1*. Used only by some Node shapes. The line width of the strokes of a node.
+  transform - (boolean) Default's *true*. Only used by the <Hypertree> visualization. Whether to scale the nodes according to the moebius transformation.
+  align - (string) Default's *center*. Possible values are 'center', 'left' or 'right'. Used only by the <ST> visualization, these parameters are used for aligning nodes when some of they dimensions vary.
+  angularWidth - (number) Default's *1*. Used in radial layouts (like <RGraph> or <Sunburst> visualizations). The amount of relative 'space' set for a node.
+  span - (number) Default's *1*. Used in radial layouts (like <RGraph> or <Sunburst> visualizations). The angle span amount set for a node.
+  CanvasStyles - (object) Default's an empty object (i.e. {}). Attach any other canvas specific property that you'd set to the canvas context before plotting a Node.
+
+*/
+Options.Node = {
+  $extend: false,
+  
+  overridable: false,
+  type: 'circle',
+  color: '#ccb',
+  alpha: 1,
+  dim: 3,
+  height: 20,
+  width: 90,
+  autoHeight: false,
+  autoWidth: false,
+  lineWidth: 1,
+  transform: true,
+  align: "center",
+  angularWidth:1,
+  span:1,
+  //Raw canvas styles to be
+  //applied to the context instance
+  //before plotting a node
+  CanvasStyles: {}
+};
+
+
+/*
+ * File: Options.Edge.js
+ *
+*/
+
+/*
+  Object: Options.Edge
+
+  Provides Edge rendering options for Tree and Graph based visualizations.
+
+  Syntax:
+    
+  (start code js)
+  Options.Edge = {
+    overridable: false,
+    type: 'line',
+    color: '#ccb',
+    lineWidth: 1,
+    dim:15,
+    alpha: 1,
+    CanvasStyles: {}
+  };
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    Edge: {
+      overridable: true,
+      type: 'line',
+      color: '#fff',
+      CanvasStyles: {
+        shadowColor: '#ccc',
+        shadowBlur: 10
+      }
+    }
+  });
+  (end code)
+  
+  Parameters:
+    
+   overridable - (boolean) Default's *false*. Determine whether or not general edges properties can be overridden by a particular <Graph.Adjacence>.
+   type - (string) Default's 'line'. Edge styles include 'line', 'hyperline', 'arrow'. The default Edge type might vary in each visualization. You can also implement custom Edge types.
+   color - (string) Default's '#ccb'. Edge color.
+   lineWidth - (number) Default's *1*. Line/Edge width.
+   alpha - (number) Default's *1*. The Edge's alpha value. *1* is for full opacity.
+   dim - (number) Default's *15*. An extra parameter used by other complex shapes such as quadratic, bezier or arrow, to determine the shape's diameter.
+   epsilon - (number) Default's *7*. Only used when using *enableForEdges* in <Options.Events>. This dimension is used to create an area for the line where the contains method for the edge returns *true*.
+   CanvasStyles - (object) Default's an empty object (i.e. {}). Attach any other canvas specific property that you'd set to the canvas context before plotting an Edge.
+
+  See also:
+   
+   If you want to know more about how to customize Node/Edge data per element, in the JSON or programmatically, take a look at this article.
+*/
+Options.Edge = {
+  $extend: false,
+  
+  overridable: false,
+  type: 'line',
+  color: '#ccb',
+  lineWidth: 1,
+  dim:15,
+  alpha: 1,
+  epsilon: 7,
+
+  //Raw canvas styles to be
+  //applied to the context instance
+  //before plotting an edge
+  CanvasStyles: {}
+};
+
+
+/*
+ * File: Options.Fx.js
+ *
+*/
+
+/*
+  Object: Options.Fx
+
+  Provides animation options like duration of the animations, frames per second and animation transitions.  
+
+  Syntax:
+  
+  (start code js)
+    Options.Fx = {
+      fps:40,
+      duration: 2500,
+      transition: $jit.Trans.Quart.easeInOut,
+      clearCanvas: true
+    };
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    duration: 1000,
+    fps: 35,
+    transition: $jit.Trans.linear
+  });
+  (end code)
+  
+  Parameters:
+  
+  clearCanvas - (boolean) Default's *true*. Whether to clear the frame/canvas when the viz is plotted or animated.
+  duration - (number) Default's *2500*. Duration of the animation in milliseconds.
+  fps - (number) Default's *40*. Frames per second.
+  transition - (object) Default's *$jit.Trans.Quart.easeInOut*. The transition used for the animations. See below for a more detailed explanation.
+  
+  Object: $jit.Trans
+  
+  This object is used for specifying different animation transitions in all visualizations.
+
+  There are many different type of animation transitions.
+
+  linear:
+
+  Displays a linear transition
+
+  >Trans.linear
+  
+  (see Linear.png)
+
+  Quad:
+
+  Displays a Quadratic transition.
+
+  >Trans.Quad.easeIn
+  >Trans.Quad.easeOut
+  >Trans.Quad.easeInOut
+  
+ (see Quad.png)
+
+ Cubic:
+
+ Displays a Cubic transition.
+
+ >Trans.Cubic.easeIn
+ >Trans.Cubic.easeOut
+ >Trans.Cubic.easeInOut
+
+ (see Cubic.png)
+
+ Quart:
+
+ Displays a Quartetic transition.
+
+ >Trans.Quart.easeIn
+ >Trans.Quart.easeOut
+ >Trans.Quart.easeInOut
+
+ (see Quart.png)
+
+ Quint:
+
+ Displays a Quintic transition.
+
+ >Trans.Quint.easeIn
+ >Trans.Quint.easeOut
+ >Trans.Quint.easeInOut
+
+ (see Quint.png)
+
+ Expo:
+
+ Displays an Exponential transition.
+
+ >Trans.Expo.easeIn
+ >Trans.Expo.easeOut
+ >Trans.Expo.easeInOut
+
+ (see Expo.png)
+
+ Circ:
+
+ Displays a Circular transition.
+
+ >Trans.Circ.easeIn
+ >Trans.Circ.easeOut
+ >Trans.Circ.easeInOut
+
+ (see Circ.png)
+
+ Sine:
+
+ Displays a Sineousidal transition.
+
+ >Trans.Sine.easeIn
+ >Trans.Sine.easeOut
+ >Trans.Sine.easeInOut
+
+ (see Sine.png)
+
+ Back:
+
+ >Trans.Back.easeIn
+ >Trans.Back.easeOut
+ >Trans.Back.easeInOut
+
+ (see Back.png)
+
+ Bounce:
+
+ Bouncy transition.
+
+ >Trans.Bounce.easeIn
+ >Trans.Bounce.easeOut
+ >Trans.Bounce.easeInOut
+
+ (see Bounce.png)
+
+ Elastic:
+
+ Elastic curve.
+
+ >Trans.Elastic.easeIn
+ >Trans.Elastic.easeOut
+ >Trans.Elastic.easeInOut
+
+ (see Elastic.png)
+ 
+ Based on:
+     
+ Easing and Transition animation methods are based in the MooTools Framework <http://mootools.net>. Copyright (c) 2006-2010 Valerio Proietti, <http://mad4milk.net/>. MIT license <http://mootools.net/license.txt>.
+
+
+*/
+Options.Fx = {
+  $extend: true,
+  
+  fps:40,
+  duration: 2500,
+  transition: $jit.Trans.Quart.easeInOut,
+  clearCanvas: true
+};
+
+/*
+ * File: Options.Label.js
+ *
+*/
+/*
+  Object: Options.Label
+
+  Provides styling for Labels such as font size, family, etc. Also sets Node labels as HTML, SVG or Native canvas elements.  
+
+  Syntax:
+  
+  (start code js)
+    Options.Label = {
+      overridable: false,
+      type: 'HTML', //'SVG', 'Native'
+      style: ' ',
+      size: 10,
+      family: 'sans-serif',
+      textAlign: 'center',
+      textBaseline: 'alphabetic',
+      color: '#fff'
+    };
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    Label: {
+      type: 'Native',
+      size: 11,
+      color: '#ccc'
+    }
+  });
+  (end code)
+  
+  Parameters:
+    
+  overridable - (boolean) Default's *false*. Determine whether or not general label properties can be overridden by a particular <Graph.Node>.
+  type - (string) Default's *HTML*. The type for the labels. Can be 'HTML', 'SVG' or 'Native' canvas labels.
+  style - (string) Default's *empty string*. Can be 'italic' or 'bold'. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+  size - (number) Default's *10*. The font's size. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+  family - (string) Default's *sans-serif*. The font's family. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+  color - (string) Default's *#fff*. The font's color. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
+*/
+Options.Label = {
+  $extend: false,
+  
+  overridable: false,
+  type: 'HTML', //'SVG', 'Native'
+  style: ' ',
+  size: 10,
+  family: 'sans-serif',
+  textAlign: 'center',
+  textBaseline: 'alphabetic',
+  color: '#fff'
+};
+
+
+/*
+ * File: Options.Tips.js
+ *
+ */
+
+/*
+  Object: Options.Tips
+  
+  Tips options
+  
+  Syntax:
+    
+  (start code js)
+  Options.Tips = {
+    enable: false,
+    type: 'auto',
+    offsetX: 20,
+    offsetY: 20,
+    onShow: $.empty,
+    onHide: $.empty
+  };
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    Tips: {
+      enable: true,
+      type: 'Native',
+      offsetX: 10,
+      offsetY: 10,
+      onShow: function(tip, node) {
+        tip.innerHTML = node.name;
+      }
+    }
+  });
+  (end code)
+
+  Parameters:
+
+  enable - (boolean) Default's *false*. If *true*, a tooltip will be shown when a node is hovered. The tooltip is a div DOM element having "tip" as CSS class. 
+  type - (string) Default's *auto*. Defines where to attach the MouseEnter/Leave tooltip events. Possible values are 'Native' to attach them to the canvas or 'HTML' to attach them to DOM label elements (if defined). 'auto' sets this property to the value of <Options.Label>'s *type* property.
+  offsetX - (number) Default's *20*. An offset added to the current tooltip x-position (which is the same as the current mouse position). Default's 20.
+  offsetY - (number) Default's *20*. An offset added to the current tooltip y-position (which is the same as the current mouse position). Default's 20.
+  onShow(tip, node) - This callack is used right before displaying a tooltip. The first formal parameter is the tip itself (which is a DivElement). The second parameter may be a <Graph.Node> for graph based visualizations or an object with label, value properties for charts.
+  onHide() - This callack is used when hiding a tooltip.
+
+*/
+Options.Tips = {
+  $extend: false,
+  
+  enable: false,
+  type: 'auto',
+  offsetX: 20,
+  offsetY: 20,
+  force: false,
+  onShow: $.empty,
+  onHide: $.empty
+};
+
+
+/*
+ * File: Options.NodeStyles.js
+ *
+ */
+
+/*
+  Object: Options.NodeStyles
+  
+  Apply different styles when a node is hovered or selected.
+  
+  Syntax:
+    
+  (start code js)
+  Options.NodeStyles = {
+    enable: false,
+    type: 'auto',
+    stylesHover: false,
+    stylesClick: false
+  };
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    NodeStyles: {
+      enable: true,
+      type: 'Native',
+      stylesHover: {
+        dim: 30,
+        color: '#fcc'
+      },
+      duration: 600
+    }
+  });
+  (end code)
+
+  Parameters:
+  
+  enable - (boolean) Default's *false*. Whether to enable this option.
+  type - (string) Default's *auto*. Use this to attach the hover/click events in the nodes or the nodes labels (if they have been defined as DOM elements: 'HTML' or 'SVG', see <Options.Label> for more details). The default 'auto' value will set NodeStyles to the same type defined for <Options.Label>.
+  stylesHover - (boolean|object) Default's *false*. An object with node styles just like the ones defined for <Options.Node> or *false* otherwise.
+  stylesClick - (boolean|object) Default's *false*. An object with node styles just like the ones defined for <Options.Node> or *false* otherwise.
+*/
+
+Options.NodeStyles = {
+  $extend: false,
+  
+  enable: false,
+  type: 'auto',
+  stylesHover: false,
+  stylesClick: false
+};
+
+
+/*
+ * File: Options.Events.js
+ *
+*/
+
+/*
+  Object: Options.Events
+  
+  Configuration for adding mouse/touch event handlers to Nodes.
+  
+  Syntax:
+  
+  (start code js)
+  Options.Events = {
+    enable: false,
+    enableForEdges: false,
+    type: 'auto',
+    onClick: $.empty,
+    onRightClick: $.empty,
+    onMouseMove: $.empty,
+    onMouseEnter: $.empty,
+    onMouseLeave: $.empty,
+    onDragStart: $.empty,
+    onDragMove: $.empty,
+    onDragCancel: $.empty,
+    onDragEnd: $.empty,
+    onTouchStart: $.empty,
+    onTouchMove: $.empty,
+    onTouchEnd: $.empty,
+    onTouchCancel: $.empty,
+    onMouseWheel: $.empty
+  };
+  (end code)
+  
+  Example:
+  
+  (start code js)
+  var viz = new $jit.Viz({
+    Events: {
+      enable: true,
+      onClick: function(node, eventInfo, e) {
+        viz.doSomething();
+      },
+      onMouseEnter: function(node, eventInfo, e) {
+        viz.canvas.getElement().style.cursor = 'pointer';
+      },
+      onMouseLeave: function(node, eventInfo, e) {
+        viz.canvas.getElement().style.cursor = '';
+      }
+    }
+  });
+  (end code)
+  
+  Parameters:
+  
+  enable - (boolean) Default's *false*. Whether to enable the Event system.
+  enableForEdges - (boolean) Default's *false*. Whether to track events also in arcs. If *true* the same callbacks -described below- are used for nodes *and* edges. A simple duck type check for edges is to check for *node.nodeFrom*.
+  type - (string) Default's 'auto'. Whether to attach the events onto the HTML labels (via event delegation) or to use the custom 'Native' canvas Event System of the library. 'auto' is set when you let the <Options.Label> *type* parameter decide this.
+  onClick(node, eventInfo, e) - Triggered when a user performs a click in the canvas. *node* is the <Graph.Node> clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onRightClick(node, eventInfo, e) - Triggered when a user performs a right click in the canvas. *node* is the <Graph.Node> right clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onMouseMove(node, eventInfo, e) - Triggered when the user moves the mouse. *node* is the <Graph.Node> under the cursor as it's moving over the canvas or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner).  *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
+  onMouseEnter(node, eventInfo, e) - Triggered when a user moves the mouse over a node. *node* is the <Graph.Node> that the mouse just entered. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onMouseLeave(node, eventInfo, e) - Triggered when the user mouse-outs a node. *node* is the <Graph.Node> 'mouse-outed'. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onDragStart(node, eventInfo, e) - Triggered when the user mouse-downs over a node. *node* is the <Graph.Node> being pressed. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onDragMove(node, eventInfo, e) - Triggered when a user, after pressing the mouse button over a node, moves the mouse around. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onDragEnd(node, eventInfo, e) - Triggered when a user finished dragging a node. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onDragCancel(node, eventInfo, e) - Triggered when the user releases the mouse button over a <Graph.Node> that wasn't dragged (i.e. the user didn't perform any mouse movement after pressing the mouse button). *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
+  onTouchStart(node, eventInfo, e) - Behaves just like onDragStart. 
+  onTouchMove(node, eventInfo, e) - Behaves just like onDragMove. 
+  onTouchEnd(node, eventInfo, e) - Behaves just like onDragEnd. 
+  onTouchCancel(node, eventInfo, e) - Behaves just like onDragCancel.
+  onMouseWheel(delta, e) - Triggered when the user uses the mouse scroll over the canvas. *delta* is 1 or -1 depending on the sense of the mouse scroll.
+*/
+
+Options.Events = {
+  $extend: false,
+  
+  enable: false,
+  enableForEdges: false,
+  type: 'auto',
+  onClick: $.empty,
+  onRightClick: $.empty,
+  onMouseMove: $.empty,
+  onMouseEnter: $.empty,
+  onMouseLeave: $.empty,
+  onDragStart: $.empty,
+  onDragMove: $.empty,
+  onDragCancel: $.empty,
+  onDragEnd: $.empty,
+  onTouchStart: $.empty,
+  onTouchMove: $.empty,
+  onTouchEnd: $.empty,
+  onTouchCancel: $.empty,
+  onMouseWheel: $.empty
+};
+
+
+/*
+ * File: Options.Navigation.js
+ *
+*/
+
+/*
+  Object: Options.Navigation
+  
+  Panning and zooming options for Graph/Tree based visualizations. These options are implemented 
+  by all visualizations except charts (<AreaChart>, <BarChart> and <PieChart>).
+  
+  Syntax:
+  
+  (start code js)
+
+  Options.Navigation = {
+    enable: false,
+    type: 'auto',
+    panning: false, //true, 'avoid nodes'
+    zooming: false
+  };
+  
+  (end code)
+  
+  Example:
+    
+  (start code js)
+  var viz = new $jit.Viz({
+    Navigation: {
+      enable: true,
+      panning: 'avoid nodes',
+      zooming: 20
+    }
+  });
+  (end code)
+  
+  Parameters:
+  
+  enable - (boolean) Default's *false*. Whether to enable Navigation capabilities.
+  type - (string) Default's 'auto'. Whether to attach the navigation events onto the HTML labels (via event delegation) or to use the custom 'Native' canvas Event System of the library. When 'auto' set when you let the <Options.Label> *type* parameter decide this.
+  panning - (boolean|string) Default's *false*. Set this property to *true* if you want to add Drag and Drop panning support to the visualization. You can also set this parameter to 'avoid nodes' to enable DnD panning but disable it if the DnD is taking place over a node. This is useful when some other events like Drag & Drop for nodes are added to <Graph.Nodes>.
+  zooming - (boolean|number) Default's *false*. Set this property to a numeric value to turn mouse-scroll zooming on. The number will be proportional to the mouse-scroll sensitivity.
+  
+*/
+
+Options.Navigation = {
+  $extend: false,
+  
+  enable: false,
+  type: 'auto',
+  panning: false, //true | 'avoid nodes'
+  zooming: false
+};
+
+/*
+ * File: Options.Controller.js
+ *
+*/
+
+/*
+  Object: Options.Controller
+  
+  Provides controller methods. Controller methods are callback functions that get called at different stages 
+  of the animation, computing or plotting of the visualization.
+  
+  Implemented by:
+    
+  All visualizations except charts (<AreaChart>, <BarChart> and <PieChart>).
+  
+  Syntax:
+  
+  (start code js)
+
+  Options.Controller = {
+    onBeforeCompute: $.empty,
+    onAfterCompute:  $.empty,
+    onCreateLabel:   $.empty,
+    onPlaceLabel:    $.empty,
+    onComplete:      $.empty,
+    onBeforePlotLine:$.empty,
+    onAfterPlotLine: $.empty,
+    onBeforePlotNode:$.empty,
+    onAfterPlotNode: $.empty,
+    request:         false
+  };
+  
+  (end code)
+  
+  Example:
+    
+  (start code js)
+  var viz = new $jit.Viz({
+    onBeforePlotNode: function(node) {
+      if(node.selected) {
+        node.setData('color', '#ffc');
+      } else {
+        node.removeData('color');
+      }
+    },
+    onBeforePlotLine: function(adj) {
+      if(adj.nodeFrom.selected && adj.nodeTo.selected) {
+        adj.setData('color', '#ffc');
+      } else {
+        adj.removeData('color');
+      }
+    },
+    onAfterCompute: function() {
+      alert("computed!");
+    }
+  });
+  (end code)
+  
+  Parameters:
+
+   onBeforeCompute(node) - This method is called right before performing all computations and animations. The selected <Graph.Node> is passed as parameter.
+   onAfterCompute() - This method is triggered after all animations or computations ended.
+   onCreateLabel(domElement, node) - This method receives a new label DIV element as first parameter, and the corresponding <Graph.Node> as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
+   onPlaceLabel(domElement, node) - This method receives a label DIV element as first parameter and the corresponding <Graph.Node> as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
+   onBeforePlotNode(node) - This method is triggered right before plotting each <Graph.Node>. This method is useful for changing a node style right before plotting it.
+   onAfterPlotNode(node) - This method is triggered right after plotting each <Graph.Node>.
+   onBeforePlotLine(adj) - This method is triggered right before plotting a <Graph.Adjacence>. This method is useful for adding some styles to a particular edge before being plotted.
+   onAfterPlotLine(adj) - This method is triggered right after plotting a <Graph.Adjacence>.
+   onBeforeRemoveNode(node) - This method is triggered right before removing each <Graph.Node>.
+   
+    *Used in <ST>, <TM.Base> and <Icicle> visualizations*
+    
+    request(nodeId, level, onComplete) - This method is used for buffering information into the visualization. When clicking on an empty node, the visualization will make a request for this node's subtrees, specifying a given level for this subtree (defined by _levelsToShow_). Once the request is completed, the onComplete callback should be called with the given result. This is useful to provide on-demand information into the visualizations withought having to load the entire information from start. The parameters used by this method are _nodeId_, which is the id of the root of the subtree to request, _level_ which is the depth of the subtree to be requested (0 would mean just the root node). _onComplete_ is an object having the callback method _onComplete.onComplete(json)_ that should be called once the json has been retrieved.  
+ 
+ */
+Options.Controller = {
+  $extend: true,
+  
+  onBeforeCompute:   $.empty,
+  onAfterCompute:    $.empty,
+  onCreateLabel:     $.empty,
+  onPlaceLabel:      $.empty,
+  onComplete:        $.empty,
+  onBeforePlotLine:  $.empty,
+  onAfterPlotLine:   $.empty,
+  onBeforePlotNode:  $.empty,
+  onAfterPlotNode:   $.empty,
+  onBeforeRemoveNode:$.empty,
+  request:         false
+};
+
+
+/*
+ * File: Extras.js
+ * 
+ * Provides Extras such as Tips and Style Effects.
+ * 
+ * Description:
+ * 
+ * Provides the <Tips> and <NodeStyles> classes and functions.
+ *
+ */
+
+/*
+ * Manager for mouse events (clicking and mouse moving).
+ * 
+ * This class is used for registering objects implementing onClick
+ * and onMousemove methods. These methods are called when clicking or
+ * moving the mouse around  the Canvas.
+ * For now, <Tips> and <NodeStyles> are classes implementing these methods.
+ * 
+ */
+var ExtrasInitializer = {
+  initialize: function(className, viz) {
+    this.viz = viz;
+    this.canvas = viz.canvas;
+    this.config = viz.config[className];
+    this.nodeTypes = viz.fx.nodeTypes;
+    var type = this.config.type;
+    this.dom = type == 'auto'? (viz.config.Label.type != 'Native') : (type != 'Native');
+    this.labelContainer = this.dom && viz.labels.getLabelContainer();
+    this.isEnabled() && this.initializePost();
+  },
+  initializePost: $.empty,
+  setAsProperty: $.lambda(false),
+  isEnabled: function() {
+    return this.config.enable;
+  },
+  isLabel: function(e, win, group) {
+    e = $.event.get(e, win);
+    var labelContainer = this.labelContainer,
+        target = e.target || e.srcElement,
+        related = e.relatedTarget;
+    if(group) {
+      return related && related == this.viz.canvas.getCtx().canvas 
+          && !!target && this.isDescendantOf(target, labelContainer);
+    } else {
+      return this.isDescendantOf(target, labelContainer);
+    }
+  },
+  isDescendantOf: function(elem, par) {
+    while(elem && elem.parentNode) {
+      if(elem.parentNode == par)
+        return elem;
+      elem = elem.parentNode;
+    }
+    return false;
+  }
+};
+
+var EventsInterface = {
+  onMouseUp: $.empty,
+  onMouseDown: $.empty,
+  onMouseMove: $.empty,
+  onMouseOver: $.empty,
+  onMouseOut: $.empty,
+  onMouseWheel: $.empty,
+  onTouchStart: $.empty,
+  onTouchMove: $.empty,
+  onTouchEnd: $.empty,
+  onTouchCancel: $.empty
+};
+
+var MouseEventsManager = new Class({
+  initialize: function(viz) {
+    this.viz = viz;
+    this.canvas = viz.canvas;
+    this.node = false;
+    this.edge = false;
+    this.registeredObjects = [];
+    this.attachEvents();
+  },
+  
+  attachEvents: function() {
+    var htmlCanvas = this.canvas.getElement(), 
+        that = this;
+    htmlCanvas.oncontextmenu = $.lambda(false);
+    $.addEvents(htmlCanvas, {
+      'mouseup': function(e, win) {
+        var event = $.event.get(e, win);
+        that.handleEvent('MouseUp', e, win, 
+            that.makeEventObject(e, win), 
+            $.event.isRightClick(event));
+      },
+      'mousedown': function(e, win) {
+        var event = $.event.get(e, win);
+        that.handleEvent('MouseDown', e, win, that.makeEventObject(e, win), 
+            $.event.isRightClick(event));
+      },
+      'mousemove': function(e, win) {
+        that.handleEvent('MouseMove', e, win, that.makeEventObject(e, win));
+      },
+      'mouseover': function(e, win) {
+        that.handleEvent('MouseOver', e, win, that.makeEventObject(e, win));
+      },
+      'mouseout': function(e, win) {
+        that.handleEvent('MouseOut', e, win, that.makeEventObject(e, win));
+      },
+      'touchstart': function(e, win) {
+        that.handleEvent('TouchStart', e, win, that.makeEventObject(e, win));
+      },
+      'touchmove': function(e, win) {
+        that.handleEvent('TouchMove', e, win, that.makeEventObject(e, win));
+      },
+      'touchend': function(e, win) {
+        that.handleEvent('TouchEnd', e, win, that.makeEventObject(e, win));
+      }
+    });
+    //attach mousewheel event
+    var handleMouseWheel = function(e, win) {
+      var event = $.event.get(e, win);
+      var wheel = $.event.getWheel(event);
+      that.handleEvent('MouseWheel', e, win, wheel);
+    };
+    //TODO(nico): this is a horrible check for non-gecko browsers!
+    if(!document.getBoxObjectFor && window.mozInnerScreenX == null) {
+      $.addEvent(htmlCanvas, 'mousewheel', handleMouseWheel);
+    } else {
+      htmlCanvas.addEventListener('DOMMouseScroll', handleMouseWheel, false);
+    }
+  },
+  
+  register: function(obj) {
+    this.registeredObjects.push(obj);
+  },
+  
+  handleEvent: function() {
+    var args = Array.prototype.slice.call(arguments),
+        type = args.shift();
+    for(var i=0, regs=this.registeredObjects, l=regs.length; i<l; i++) {
+      regs[i]['on' + type].apply(regs[i], args);
+    }
+  },
+  
+  makeEventObject: function(e, win) {
+    var that = this,
+        graph = this.viz.graph,
+        fx = this.viz.fx,
+        ntypes = fx.nodeTypes,
+        etypes = fx.edgeTypes;
+    return {
+      pos: false,
+      node: false,
+      edge: false,
+      contains: false,
+      getNodeCalled: false,
+      getEdgeCalled: false,
+      getPos: function() {
+        //TODO(nico): check why this can't be cache anymore when using edge detection
+        //if(this.pos) return this.pos;
+        var canvas = that.viz.canvas,
+            s = canvas.getSize(),
+            p = canvas.getPos(),
+            ox = canvas.translateOffsetX,
+            oy = canvas.translateOffsetY,
+            sx = canvas.scaleOffsetX,
+            sy = canvas.scaleOffsetY,
+            pos = $.event.getPos(e, win);
+        this.pos = {
+          x: (pos.x - p.x - s.width/2 - ox) * 1/sx,
+          y: (pos.y - p.y - s.height/2 - oy) * 1/sy
+        };
+        return this.pos;
+      },
+      getNode: function() {
+        if(this.getNodeCalled) return this.node;
+        this.getNodeCalled = true;
+        for(var id in graph.nodes) {
+          var n = graph.nodes[id],
+              geom = n && ntypes[n.getData('type')],
+              contains = geom && geom.contains && geom.contains.call(fx, n, this.getPos());
+          if(contains) {
+            this.contains = contains;
+            return that.node = this.node = n;
+          }
+        }
+        return that.node = this.node = false;
+      },
+      getEdge: function() {
+        if(this.getEdgeCalled) return this.edge;
+        this.getEdgeCalled = true;
+        var hashset = {};
+        for(var id in graph.edges) {
+          var edgeFrom = graph.edges[id];
+          hashset[id] = true;
+          for(var edgeId in edgeFrom) {
+            if(edgeId in hashset) continue;
+            var e = edgeFrom[edgeId],
+                geom = e && etypes[e.getData('type')],
+                contains = geom && geom.contains && geom.contains.call(fx, e, this.getPos());
+            if(contains) {
+              this.contains = contains;
+              return that.edge = this.edge = e;
+            }
+          }
+        }
+        return that.edge = this.edge = false;
+      },
+      getContains: function() {
+        if(this.getNodeCalled) return this.contains;
+        this.getNode();
+        return this.contains;
+      }
+    };
+  }
+});
+
+/* 
+ * Provides the initialization function for <NodeStyles> and <Tips> implemented 
+ * by all main visualizations.
+ *
+ */
+var Extras = {
+  initializeExtras: function() {
+    var mem = new MouseEventsManager(this), that = this;
+    $.each(['NodeStyles', 'Tips', 'Navigation', 'Events'], function(k) {
+      var obj = new Extras.Classes[k](k, that);
+      if(obj.isEnabled()) {
+        mem.register(obj);
+      }
+      if(obj.setAsProperty()) {
+        that[k.toLowerCase()] = obj;
+      }
+    });
+  }   
+};
+
+Extras.Classes = {};
+/*
+  Class: Events
+   
+  This class defines an Event API to be accessed by the user.
+  The methods implemented are the ones defined in the <Options.Events> object.
+*/
+
+Extras.Classes.Events = new Class({
+  Implements: [ExtrasInitializer, EventsInterface],
+  
+  initializePost: function() {
+    this.fx = this.viz.fx;
+    this.ntypes = this.viz.fx.nodeTypes;
+    this.etypes = this.viz.fx.edgeTypes;
+    
+    this.hovered = false;
+    this.pressed = false;
+    this.touched = false;
+
+    this.touchMoved = false;
+    this.moved = false;
+    
+  },
+  
+  setAsProperty: $.lambda(true),
+  
+  onMouseUp: function(e, win, event, isRightClick) {
+    var evt = $.event.get(e, win);
+    if(!this.moved) {
+      if(isRightClick) {
+        this.config.onRightClick(this.hovered, event, evt);
+      } else {
+        this.config.onClick(this.pressed, event, evt);
+      }
+    }
+    if(this.pressed) {
+      if(this.moved) {
+        this.config.onDragEnd(this.pressed, event, evt);
+      } else {
+        this.config.onDragCancel(this.pressed, event, evt);
+      }
+      this.pressed = this.moved = false;
+    }
+  },
+
+  onMouseOut: function(e, win, event) {
+   //mouseout a label
+   var evt = $.event.get(e, win), label;
+   if(this.dom && (label = this.isLabel(e, win, true))) {
+     this.config.onMouseLeave(this.viz.graph.getNode(label.id),
+                              event, evt);
+     this.hovered = false;
+     return;
+   }
+   //mouseout canvas
+   var rt = evt.relatedTarget,
+       canvasWidget = this.canvas.getElement();
+   while(rt && rt.parentNode) {
+     if(canvasWidget == rt.parentNode) return;
+     rt = rt.parentNode;
+   }
+   if(this.hovered) {
+     this.config.onMouseLeave(this.hovered,
+         event, evt);
+     this.hovered = false;
+   }
+  },
+  
+  onMouseOver: function(e, win, event) {
+    //mouseover a label
+    var evt = $.event.get(e, win), label;
+    if(this.dom && (label = this.isLabel(e, win, true))) {
+      this.hovered = this.viz.graph.getNode(label.id);
+      this.config.onMouseEnter(this.hovered,
+                               event, evt);
+    }
+  },
+  
+  onMouseMove: function(e, win, event) {
+   var label, evt = $.event.get(e, win);
+   if(this.pressed) {
+     this.moved = true;
+     this.config.onDragMove(this.pressed, event, evt);
+     return;
+   }
+   if(this.dom) {
+     this.config.onMouseMove(this.hovered,
+         event, evt);
+   } else {
+     if(this.hovered) {
+       var hn = this.hovered;
+       var geom = hn.nodeFrom? this.etypes[hn.getData('type')] : this.ntypes[hn.getData('type')];
+       var contains = geom && geom.contains 
+         && geom.contains.call(this.fx, hn, event.getPos());
+       if(contains) {
+         this.config.onMouseMove(hn, event, evt);
+         return;
+       } else {
+         this.config.onMouseLeave(hn, event, evt);
+         this.hovered = false;
+       }
+     }
+     if(this.hovered = (event.getNode() || (this.config.enableForEdges && event.getEdge()))) {
+       this.config.onMouseEnter(this.hovered, event, evt);
+     } else {
+       this.config.onMouseMove(false, event, evt);
+     }
+   }
+  },
+  
+  onMouseWheel: function(e, win, delta) {
+    this.config.onMouseWheel(delta, $.event.get(e, win));
+  },
+  
+  onMouseDown: function(e, win, event) {
+    var evt = $.event.get(e, win), label;
+    if(this.dom) {
+      if(label = this.isLabel(e, win)) {
+        this.pressed = this.viz.graph.getNode(label.id);
+      }
+    } else {
+      this.pressed = event.getNode() || (this.config.enableForEdges && event.getEdge());
+    }
+    this.pressed && this.config.onDragStart(this.pressed, event, evt);
+  },
+  
+  onTouchStart: function(e, win, event) {
+    var evt = $.event.get(e, win), label;
+    if(this.dom && (label = this.isLabel(e, win))) {
+      this.touched = this.viz.graph.getNode(label.id);
+    } else {
+      this.touched = event.getNode() || (this.config.enableForEdges && event.getEdge());
+    }
+    this.touched && this.config.onTouchStart(this.touched, event, evt);
+  },
+  
+  onTouchMove: function(e, win, event) {
+    var evt = $.event.get(e, win);
+    if(this.touched) {
+      this.touchMoved = true;
+      this.config.onTouchMove(this.touched, event, evt);
+    }
+  },
+  
+  onTouchEnd: function(e, win, event) {
+    var evt = $.event.get(e, win);
+    if(this.touched) {
+      if(this.touchMoved) {
+        this.config.onTouchEnd(this.touched, event, evt);
+      } else {
+        this.config.onTouchCancel(this.touched, event, evt);
+      }
+      this.touched = this.touchMoved = false;
+    }
+  }
+});
+
+/*
+   Class: Tips
+    
+   A class containing tip related functions. This class is used internally.
+   
+   Used by:
+   
+   <ST>, <Sunburst>, <Hypertree>, <RGraph>, <TM>, <ForceDirected>, <Icicle>
+   
+   See also:
+   
+   <Options.Tips>
+*/
+
+Extras.Classes.Tips = new Class({
+  Implements: [ExtrasInitializer, EventsInterface],
+  
+  initializePost: function() {
+    //add DOM tooltip
+    if(document.body) {
+      var tip = $('_tooltip') || document.createElement('div');
+      tip.id = '_tooltip';
+      tip.className = 'tip';
+      $.extend(tip.style, {
+        position: 'absolute',
+        display: 'none',
+        zIndex: 13000
+      });
+      document.body.appendChild(tip);
+      this.tip = tip;
+      this.node = false;
+    }
+  },
+  
+  setAsProperty: $.lambda(true),
+  
+  onMouseOut: function(e, win) {
+    //mouseout a label
+    var evt = $.event.get(e, win);
+    if(this.dom && this.isLabel(e, win, true)) {
+      this.hide(true);
+      return;
+    }
+    //mouseout canvas
+    var rt = e.relatedTarget,
+        canvasWidget = this.canvas.getElement();
+    while(rt && rt.parentNode) {
+      if(canvasWidget == rt.parentNode) return;
+      rt = rt.parentNode;
+    }
+    this.hide(false);
+  },
+  
+  onMouseOver: function(e, win) {
+    //mouseover a label
+    var label;
+    if(this.dom && (label = this.isLabel(e, win, false))) {
+      this.node = this.viz.graph.getNode(label.id);
+      this.config.onShow(this.tip, this.node, label);
+    }
+  },
+  
+  onMouseMove: function(e, win, opt) {
+    if(this.dom && this.isLabel(e, win)) {
+      this.setTooltipPosition($.event.getPos(e, win));
+    }
+    if(!this.dom) {
+      var node = opt.getNode();
+      if(!node) {
+        this.hide(true);
+        return;
+      }
+      if(this.config.force || !this.node || this.node.id != node.id) {
+        this.node = node;
+        this.config.onShow(this.tip, node, opt.getContains());
+      }
+      this.setTooltipPosition($.event.getPos(e, win));
+    }
+  },
+  
+  setTooltipPosition: function(pos) {
+    var tip = this.tip, 
+        style = tip.style, 
+        cont = this.config;
+    style.display = '';
+    //get viewport dimensions
+    var elem = document.compatMode === "CSS1Compat" && document.documentElement ||
+               document.body ||
+               document.documentElement;
+    var view = {
+      'width': elem.clientWidth,
+      'height': elem.clientHeight,
+      'x': window.pageXOffset ||
+           document.documentElement && document.documentElement.scrollLeft ||
+           document.body && document.body.scrollLeft ||
+           0,
+      'y': window.pageYOffset ||
+           document.documentElement && document.documentElement.scrollTop ||
+           document.body && document.body.scrollTop ||
+           0
+    };
+    //get tooltip dimensions
+    var obj = {
+      'width': tip.offsetWidth,
+      'height': tip.offsetHeight  
+    };
+    //set tooltip position
+    var x = cont.offsetX, y = cont.offsetY;
+    style.top = ((pos.y + obj.height + y > view.height + view.y)?
+        (pos.y - obj.height - y) : pos.y + y) + 'px';
+    style.left = ((pos.x + obj.width + x > view.width + view.x)?
+        (pos.x - obj.width - x) : pos.x + x) + 'px';
+  },
+  
+  hide: function(triggerCallback) {
+    this.tip.style.display = 'none';
+    triggerCallback && this.config.onHide();
+  }
+});
+
+/*
+  Class: NodeStyles
+   
+  Change node styles when clicking or hovering a node. This class is used internally.
+  
+  Used by:
+  
+  <ST>, <Sunburst>, <Hypertree>, <RGraph>, <TM>, <ForceDirected>, <Icicle>
+  
+  See also:
+  
+  <Options.NodeStyles>
+*/
+Extras.Classes.NodeStyles = new Class({
+  Implements: [ExtrasInitializer, EventsInterface],
+  
+  initializePost: function() {
+    this.fx = this.viz.fx;
+    this.types = this.viz.fx.nodeTypes;
+    this.nStyles = this.config;
+    this.nodeStylesOnHover = this.nStyles.stylesHover;
+    this.nodeStylesOnClick = this.nStyles.stylesClick;
+    this.hoveredNode = false;
+    this.fx.nodeFxAnimation = new Animation();
+    
+    this.down = false;
+    this.move = false;
+  },
+  
+  onMouseOut: function(e, win) {
+    this.down = this.move = false;
+    if(!this.hoveredNode) return;
+    //mouseout a label
+    if(this.dom && this.isLabel(e, win, true)) {
+      this.toggleStylesOnHover(this.hoveredNode, false);
+    }
+    //mouseout canvas
+    var rt = e.relatedTarget,
+        canvasWidget = this.canvas.getElement();
+    while(rt && rt.parentNode) {
+      if(canvasWidget == rt.parentNode) return;
+      rt = rt.parentNode;
+    }
+    this.toggleStylesOnHover(this.hoveredNode, false);
+    this.hoveredNode = false;
+  },
+  
+  onMouseOver: function(e, win) {
+    //mouseover a label
+    var label;
+    if(this.dom && (label = this.isLabel(e, win, true))) {
+      var node = this.viz.graph.getNode(label.id);
+      if(node.selected) return;
+      this.hoveredNode = node;
+      this.toggleStylesOnHover(this.hoveredNode, true);
+    }
+  },
+  
+  onMouseDown: function(e, win, event, isRightClick) {
+    if(isRightClick) return;
+    var label;
+    if(this.dom && (label = this.isLabel(e, win))) {
+      this.down = this.viz.graph.getNode(label.id);
+    } else if(!this.dom) {
+      this.down = event.getNode();
+    }
+    this.move = false;
+  },
+  
+  onMouseUp: function(e, win, event, isRightClick) {
+    if(isRightClick) return;
+    if(!this.move) {
+      this.onClick(event.getNode());
+    }
+    this.down = this.move = false;
+  },
+  
+  getRestoredStyles: function(node, type) {
+    var restoredStyles = {}, 
+        nStyles = this['nodeStylesOn' + type];
+    for(var prop in nStyles) {
+      restoredStyles[prop] = node.styles['$' + prop];
+    }
+    return restoredStyles;
+  },
+  
+  toggleStylesOnHover: function(node, set) {
+    if(this.nodeStylesOnHover) {
+      this.toggleStylesOn('Hover', node, set);
+    }
+  },
+
+  toggleStylesOnClick: function(node, set) {
+    if(this.nodeStylesOnClick) {
+      this.toggleStylesOn('Click', node, set);
+    }
+  },
+  
+  toggleStylesOn: function(type, node, set) {
+    var viz = this.viz;
+    var nStyles = this.nStyles;
+    if(set) {
+      var that = this;
+      if(!node.styles) {
+        node.styles = $.merge(node.data, {});
+      }
+      for(var s in this['nodeStylesOn' + type]) {
+        var $s = '$' + s;
+        if(!($s in node.styles)) {
+            node.styles[$s] = node.getData(s); 
+        }
+      }
+      viz.fx.nodeFx($.extend({
+        'elements': {
+          'id': node.id,
+          'properties': that['nodeStylesOn' + type]
+         },
+         transition: Trans.Quart.easeOut,
+         duration:300,
+         fps:40
+      }, this.config));
+    } else {
+      var restoredStyles = this.getRestoredStyles(node, type);
+      viz.fx.nodeFx($.extend({
+        'elements': {
+          'id': node.id,
+          'properties': restoredStyles
+         },
+         transition: Trans.Quart.easeOut,
+         duration:300,
+         fps:40
+      }, this.config));
+    }
+  },
+
+  onClick: function(node) {
+    if(!node) return;
+    var nStyles = this.nodeStylesOnClick;
+    if(!nStyles) return;
+    //if the node is selected then unselect it
+    if(node.selected) {
+      this.toggleStylesOnClick(node, false);
+      delete node.selected;
+    } else {
+      //unselect all selected nodes...
+      this.viz.graph.eachNode(function(n) {
+        if(n.selected) {
+          for(var s in nStyles) {
+            n.setData(s, n.styles['$' + s], 'end');
+          }
+          delete n.selected;
+        }
+      });
+      //select clicked node
+      this.toggleStylesOnClick(node, true);
+      node.selected = true;
+      delete node.hovered;
+      this.hoveredNode = false;
+    }
+  },
+  
+  onMouseMove: function(e, win, event) {
+    //if mouse button is down and moving set move=true
+    if(this.down) this.move = true;
+    //already handled by mouseover/out
+    if(this.dom && this.isLabel(e, win)) return;
+    var nStyles = this.nodeStylesOnHover;
+    if(!nStyles) return;
+    
+    if(!this.dom) {
+      if(this.hoveredNode) {
+        var geom = this.types[this.hoveredNode.getData('type')];
+        var contains = geom && geom.contains && geom.contains.call(this.fx, 
+            this.hoveredNode, event.getPos());
+        if(contains) return;
+      }
+      var node = event.getNode();
+      //if no node is being hovered then just exit
+      if(!this.hoveredNode && !node) return;
+      //if the node is hovered then exit
+      if(node.hovered) return;
+      //select hovered node
+      if(node && !node.selected) {
+        //check if an animation is running and exit it
+        this.fx.nodeFxAnimation.stopTimer();
+        //unselect all hovered nodes...
+        this.viz.graph.eachNode(function(n) {
+          if(n.hovered && !n.selected) {
+            for(var s in nStyles) {
+              n.setData(s, n.styles['$' + s], 'end');
+            }
+            delete n.hovered;
+          }
+        });
+        //select hovered node
+        node.hovered = true;
+        this.hoveredNode = node;
+        this.toggleStylesOnHover(node, true);
+      } else if(this.hoveredNode && !this.hoveredNode.selected) {
+        //check if an animation is running and exit it
+        this.fx.nodeFxAnimation.stopTimer();
+        //unselect hovered node
+        this.toggleStylesOnHover(this.hoveredNode, false);
+        delete this.hoveredNode.hovered;
+        this.hoveredNode = false;
+      }
+    }
+  }
+});
+
+Extras.Classes.Navigation = new Class({
+  Implements: [ExtrasInitializer, EventsInterface],
+  
+  initializePost: function() {
+    this.pos = false;
+    this.pressed = false;
+  },
+  
+  onMouseWheel: function(e, win, scroll) {
+    if(!this.config.zooming) return;
+    $.event.stop($.event.get(e, win));
+    var val = this.config.zooming / 1000,
+        ans = 1 + scroll * val;
+    this.canvas.scale(ans, ans);
+  },
+  
+  onMouseDown: function(e, win, eventInfo) {
+    if(!this.config.panning) return;
+    e.preventDefault ? e.preventDefault() : e.returnValue = false;
+    $.addClass(this.canvas.getElement(), 'grabbing');
+    if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : (eventInfo.getNode() || eventInfo.getEdge()))) return;
+    this.pressed = true;
+    this.pos = eventInfo.getPos();
+    var canvas = this.canvas,
+        ox = canvas.translateOffsetX,
+        oy = canvas.translateOffsetY,
+        sx = canvas.scaleOffsetX,
+        sy = canvas.scaleOffsetY;
+    this.pos.x *= sx;
+    this.pos.x += ox;
+    this.pos.y *= sy;
+    this.pos.y += oy;
+  },
+  
+  onMouseMove: function(e, win, eventInfo) {
+    if(!this.config.panning) return;
+    if(!this.pressed) return;
+    if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return;
+    var thispos = this.pos, 
+        currentPos = eventInfo.getPos(),
+        canvas = this.canvas,
+        ox = canvas.translateOffsetX,
+        oy = canvas.translateOffsetY,
+        sx = canvas.scaleOffsetX,
+        sy = canvas.scaleOffsetY;
+    currentPos.x *= sx;
+    currentPos.y *= sy;
+    currentPos.x += ox;
+    currentPos.y += oy;
+    var x = currentPos.x - thispos.x,
+        y = currentPos.y - thispos.y;
+    this.pos = currentPos;
+    this.canvas.translate(x * 1/sx, y * 1/sy);
+  },
+  
+  onMouseUp: function(e, win, eventInfo, isRightClick) {
+    if(!this.config.panning) return;
+    $.removeClass(this.canvas.getElement(), 'grabbing');
+    this.pressed = false;
+  }
+});
+
+
+/*
+ * File: Canvas.js
+ *
+ */
+
+/*
+ Class: Canvas
+ 
+ 	A canvas widget used by all visualizations. The canvas object can be accessed by doing *viz.canvas*. If you want to 
+ 	know more about <Canvas> options take a look at <Options.Canvas>.
+ 
+ A canvas widget is a set of DOM elements that wrap the native canvas DOM Element providing a consistent API and behavior 
+ across all browsers. It can also include Elements to add DOM (SVG or HTML) label support to all visualizations.
+ 
+ Example:
+ 
+ Suppose we have this HTML
+ 
+ (start code xml)
+ 	<div id="infovis"></div>
+ (end code)
+ 
+ Now we create a new Visualization
+ 
+ (start code js)
+ 	var viz = new $jit.Viz({
+ 		//Where to inject the canvas. Any div container will do.
+ 		'injectInto':'infovis',
+		 //width and height for canvas. 
+		 //Default's to the container offsetWidth and Height.
+		 'width': 900,
+		 'height':500
+	 });
+ (end code)
+
+ The generated HTML will look like this
+ 
+ (start code xml)
+ <div id="infovis">
+ 	<div id="infovis-canvaswidget" style="position:relative;">
+ 	<canvas id="infovis-canvas" width=900 height=500
+ 	style="position:absolute; top:0; left:0; width:900px; height:500px;" />
+ 	<div id="infovis-label"
+ 	style="overflow:visible; position:absolute; top:0; left:0; width:900px; height:0px">
+ 	</div>
+ 	</div>
+ </div>
+ (end code)
+ 
+ As you can see, the generated HTML consists of a canvas DOM Element of id *infovis-canvas* and a div label container
+ of id *infovis-label*, wrapped in a main div container of id *infovis-canvaswidget*.
+ */
+
+var Canvas;
+(function() {
+  //check for native canvas support
+  var canvasType = typeof HTMLCanvasElement,
+      supportsCanvas = (canvasType == 'object' || canvasType == 'function');
+  //create element function
+  function $E(tag, props) {
+    var elem = document.createElement(tag);
+    for(var p in props) {
+      if(typeof props[p] == "object") {
+        $.extend(elem[p], props[p]);
+      } else {
+        elem[p] = props[p];
+      }
+    }
+    if (tag == "canvas" && !supportsCanvas && G_vmlCanvasManager) {
+      elem = G_vmlCanvasManager.initElement(document.body.appendChild(elem));
+    }
+    return elem;
+  }
+  //canvas widget which we will call just Canvas
+  $jit.Canvas = Canvas = new Class({
+    canvases: [],
+    pos: false,
+    element: false,
+    labelContainer: false,
+    translateOffsetX: 0,
+    translateOffsetY: 0,
+    scaleOffsetX: 1,
+    scaleOffsetY: 1,
+    
+    initialize: function(viz, opt) {
+      this.viz = viz;
+      this.opt = this.config = opt;
+      var id = $.type(opt.injectInto) == 'string'? 
+          opt.injectInto:opt.injectInto.id,
+          type = opt.type,
+          idLabel = id + "-label", 
+          wrapper = $(id),
+          width = opt.width || wrapper.offsetWidth,
+          height = opt.height || wrapper.offsetHeight;
+      this.id = id;
+      //canvas options
+      var canvasOptions = {
+        injectInto: id,
+        width: width,
+        height: height
+      };
+      //create main wrapper
+      this.element = $E('div', {
+        'id': id + '-canvaswidget',
+        'style': {
+          'position': 'relative',
+          'width': width + 'px',
+          'height': height + 'px'
+        }
+      });
+      //create label container
+      this.labelContainer = this.createLabelContainer(opt.Label.type, 
+          idLabel, canvasOptions);
+      //create primary canvas
+      this.canvases.push(new Canvas.Base[type]({
+        config: $.extend({idSuffix: '-canvas'}, canvasOptions),
+        plot: function(base) {
+          viz.fx.plot();
+        },
+        resize: function() {
+          viz.refresh();
+        }
+      }));
+      //create secondary canvas
+      var back = opt.background;
+      if(back) {
+        var backCanvas = new Canvas.Background[back.type](viz, $.extend(back, canvasOptions));
+        this.canvases.push(new Canvas.Base[type](backCanvas));
+      }
+      //insert canvases
+      var len = this.canvases.length;
+      while(len--) {
+        this.element.appendChild(this.canvases[len].canvas);
+        if(len > 0) {
+          this.canvases[len].plot();
+        }
+      }
+      this.element.appendChild(this.labelContainer);
+      wrapper.appendChild(this.element);
+      //Update canvas position when the page is scrolled.
+      var timer = null, that = this;
+      $.addEvent(window, 'scroll', function() {
+        clearTimeout(timer);
+        timer = setTimeout(function() {
+          that.getPos(true); //update canvas position
+        }, 500);
+      });
+    },
+    /*
+      Method: getCtx
+      
+      Returns the main canvas context object
+      
+      Example:
+      
+      (start code js)
+       var ctx = canvas.getCtx();
+       //Now I can use the native canvas context
+       //and for example change some canvas styles
+       ctx.globalAlpha = 1;
+      (end code)
+    */
+    getCtx: function(i) {
+      return this.canvases[i || 0].getCtx();
+    },
+    /*
+      Method: getConfig
+      
+      Returns the current Configuration for this Canvas Widget.
+      
+      Example:
+      
+      (start code js)
+       var config = canvas.getConfig();
+      (end code)
+    */
+    getConfig: function() {
+      return this.opt;
+    },
+    /*
+      Method: getElement
+
+      Returns the main Canvas DOM wrapper
+      
+      Example:
+      
+      (start code js)
+       var wrapper = canvas.getElement();
+       //Returns <div id="infovis-canvaswidget" ... >...</div> as element
+      (end code)
+    */
+    getElement: function() {
+      return this.element;
+    },
+    /*
+      Method: getSize
+      
+      Returns canvas dimensions.
+      
+      Returns:
+      
+      An object with *width* and *height* properties.
+      
+      Example:
+      (start code js)
+      canvas.getSize(); //returns { width: 900, height: 500 }
+      (end code)
+    */
+    getSize: function(i) {
+      return this.canvases[i || 0].getSize();
+    },
+    /*
+      Method: resize
+      
+      Resizes the canvas.
+      
+      Parameters:
+      
+      width - New canvas width.
+      height - New canvas height.
+      
+      Example:
+      
+      (start code js)
+       canvas.resize(width, height);
+      (end code)
+    
+    */
+    resize: function(width, height) {
+      this.getPos(true);
+      this.translateOffsetX = this.translateOffsetY = 0;
+      this.scaleOffsetX = this.scaleOffsetY = 1;
+      for(var i=0, l=this.canvases.length; i<l; i++) {
+        this.canvases[i].resize(width, height);
+      }
+      var style = this.element.style;
+      style.width = width + 'px';
+      style.height = height + 'px';
+      if(this.labelContainer)
+        this.labelContainer.style.width = width + 'px';
+    },
+    /*
+      Method: translate
+      
+      Applies a translation to the canvas.
+      
+      Parameters:
+      
+      x - (number) x offset.
+      y - (number) y offset.
+      disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
+      
+      Example:
+      
+      (start code js)
+       canvas.translate(30, 30);
+      (end code)
+    
+    */
+    translate: function(x, y, disablePlot) {
+      this.translateOffsetX += x*this.scaleOffsetX;
+      this.translateOffsetY += y*this.scaleOffsetY;
+      for(var i=0, l=this.canvases.length; i<l; i++) {
+        this.canvases[i].translate(x, y, disablePlot);
+      }
+    },
+    /*
+      Method: scale
+      
+      Scales the canvas.
+      
+      Parameters:
+      
+      x - (number) scale value.
+      y - (number) scale value.
+      disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
+      
+      Example:
+      
+      (start code js)
+       canvas.scale(0.5, 0.5);
+      (end code)
+    
+    */
+    scale: function(x, y, disablePlot) {
+      var px = this.scaleOffsetX * x,
+          py = this.scaleOffsetY * y;
+      var dx = this.translateOffsetX * (x -1) / px,
+          dy = this.translateOffsetY * (y -1) / py;
+      this.scaleOffsetX = px;
+      this.scaleOffsetY = py;
+      for(var i=0, l=this.canvases.length; i<l; i++) {
+        this.canvases[i].scale(x, y, true);
+      }
+      this.translate(dx, dy, false);
+    },
+    /*
+      Method: getZoom
+
+      Returns canvas zooming factors. *1* means initial zoom.
+
+      Returns:
+
+      An object with *x* and *y* properties.
+    */
+    getZoom: function() {
+      return new Complex(this.scaleOffsetX, this.scaleOffsetY);
+    },
+    /*
+      Method: setZoom
+
+      Sets the zoom to given factors. *1* means initial zoom.
+
+      Parameters:
+
+      x - (number) zooming factor
+      y - (number) zooming factor
+      disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
+
+      Example:
+      (start code js)
+      canvas.setZoom(2, 2); //sets 2x zoom
+      (end code)
+    */
+    setZoom: function(x, y, disablePlot) {
+      var cur = this.getZoom(),
+          px = x / cur.x,
+          py = y / cur.y;
+      this.scale(px, py, disablePlot);
+    },
+    /*
+      Method: getPos
+      
+      Returns the canvas position as an *x, y* object.
+      
+      Parameters:
+      
+      force - (boolean) Default's *false*. Set this to *true* if you want to recalculate the position without using any cache information.
+      
+      Returns:
+      
+      An object with *x* and *y* properties.
+      
+      Example:
+      (start code js)
+      canvas.getPos(true); //returns { x: 900, y: 500 }
+      (end code)
+    */
+    getPos: function(force){
+      if(force || !this.pos) {
+        return this.pos = $.getPos(this.getElement());
+      }
+      return this.pos;
+    },
+    /*
+       Method: clear
+       
+       Clears the canvas.
+    */
+    clear: function(i){
+      this.canvases[i||0].clear();
+    },
+    
+    path: function(type, action){
+      var ctx = this.canvases[0].getCtx();
+      ctx.beginPath();
+      action(ctx);
+      ctx[type]();
+      ctx.closePath();
+    },
+    
+    createLabelContainer: function(type, idLabel, dim) {
+      var NS = 'http://www.w3.org/2000/svg';
+      if(type == 'HTML' || type == 'Native') {
+        return $E('div', {
+          'id': idLabel,
+          'style': {
+            'overflow': 'visible',
+            'position': 'absolute',
+            'top': 0,
+            'left': 0,
+            'width': dim.width + 'px',
+            'height': 0
+          }
+        });
+      } else if(type == 'SVG') {
+        var svgContainer = document.createElementNS(NS, 'svg:svg');
+        svgContainer.setAttribute("width", dim.width);
+        svgContainer.setAttribute('height', dim.height);
+        var style = svgContainer.style;
+        style.position = 'absolute';
+        style.left = style.top = '0px';
+        var labelContainer = document.createElementNS(NS, 'svg:g');
+        labelContainer.setAttribute('width', dim.width);
+        labelContainer.setAttribute('height', dim.height);
+        labelContainer.setAttribute('x', 0);
+        labelContainer.setAttribute('y', 0);
+        labelContainer.setAttribute('id', idLabel);
+        svgContainer.appendChild(labelContainer);
+        return svgContainer;
+      }
+    }
+  });
+  //base canvas wrapper
+  Canvas.Base = {};
+  Canvas.Base['2D'] = new Class({
+    translateOffsetX: 0,
+    translateOffsetY: 0,
+    scaleOffsetX: 1,
+    scaleOffsetY: 1,
+
+    initialize: function(viz) {
+      this.viz = viz;
+      this.opt = viz.config;
+      this.size = false;
+      this.createCanvas();
+      this.translateToCenter();
+    },
+    createCanvas: function() {
+      var opt = this.opt,
+          width = opt.width,
+          height = opt.height;
+      this.canvas = $E('canvas', {
+        'id': opt.injectInto + opt.idSuffix,
+        'width': width,
+        'height': height,
+        'style': {
+          'position': 'absolute',
+          'top': 0,
+          'left': 0,
+          'width': width + 'px',
+          'height': height + 'px'
+        }
+      });
+    },
+    getCtx: function() {
+      if(!this.ctx) 
+        return this.ctx = this.canvas.getContext('2d');
+      return this.ctx;
+    },
+    getSize: function() {
+      if(this.size) return this.size;
+      var canvas = this.canvas;
+      return this.size = {
+        width: canvas.width,
+        height: canvas.height
+      };
+    },
+    translateToCenter: function(ps) {
+      var size = this.getSize(),
+          width = ps? (size.width - ps.width - this.translateOffsetX*2) : size.width;
+          height = ps? (size.height - ps.height - this.translateOffsetY*2) : size.height;
+      var ctx = this.getCtx();
+      ps && ctx.scale(1/this.scaleOffsetX, 1/this.scaleOffsetY);
+      ctx.translate(width/2, height/2);
+    },
+    resize: function(width, height) {
+      var size = this.getSize(),
+          canvas = this.canvas,
+          styles = canvas.style;
+      this.size = false;
+      canvas.width = width;
+      canvas.height = height;
+      styles.width = width + "px";
+      styles.height = height + "px";
+      //small ExCanvas fix
+      if(!supportsCanvas) {
+        this.translateToCenter(size);
+      } else {
+        this.translateToCenter();
+      }
+      this.translateOffsetX =
+        this.translateOffsetY = 0;
+      this.scaleOffsetX = 
+        this.scaleOffsetY = 1;
+      this.clear();
+      this.viz.resize(width, height, this);
+    },
+    translate: function(x, y, disablePlot) {
+      var sx = this.scaleOffsetX,
+          sy = this.scaleOffsetY;
+      this.translateOffsetX += x*sx;
+      this.translateOffsetY += y*sy;
+      this.getCtx().translate(x, y);
+      !disablePlot && this.plot();
+    },
+    scale: function(x, y, disablePlot) {
+      this.scaleOffsetX *= x;
+      this.scaleOffsetY *= y;
+      this.getCtx().scale(x, y);
+      !disablePlot && this.plot();
+    },
+    clear: function(){
+      var size = this.getSize(),
+          ox = this.translateOffsetX,
+          oy = this.translateOffsetY,
+          sx = this.scaleOffsetX,
+          sy = this.scaleOffsetY;
+      this.getCtx().clearRect((-size.width / 2 - ox) * 1/sx, 
+                              (-size.height / 2 - oy) * 1/sy, 
+                              size.width * 1/sx, size.height * 1/sy);
+    },
+    plot: function() {
+      this.clear();
+      this.viz.plot(this);
+    }
+  });
+  //background canvases
+  //TODO(nico): document this!
+  Canvas.Background = {};
+  Canvas.Background.Circles = new Class({
+    initialize: function(viz, options) {
+      this.viz = viz;
+      this.config = $.merge({
+        idSuffix: '-bkcanvas',
+        levelDistance: 100,
+        numberOfCircles: 6,
+        CanvasStyles: {},
+        offset: 0
+      }, options);
+    },
+    resize: function(width, height, base) {
+      this.plot(base);
+    },
+    plot: function(base) {
+      var canvas = base.canvas,
+          ctx = base.getCtx(),
+          conf = this.config,
+          styles = conf.CanvasStyles;
+      //set canvas styles
+      for(var s in styles) ctx[s] = styles[s];
+      var n = conf.numberOfCircles,
+          rho = conf.levelDistance;
+      for(var i=1; i<=n; i++) {
+        ctx.beginPath();
+        ctx.arc(0, 0, rho * i, 0, 2 * Math.PI, false);
+        ctx.stroke();
+        ctx.closePath();
+      }
+      //TODO(nico): print labels too!
+    }
+  });
+})();
+
+
+/*
+ * File: Polar.js
+ * 
+ * Defines the <Polar> class.
+ *
+ * Description:
+ *
+ * The <Polar> class, just like the <Complex> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
+ *
+ * See also:
+ *
+ * <http://en.wikipedia.org/wiki/Polar_coordinates>
+ *
+*/
+
+/*
+   Class: Polar
+
+   A multi purpose polar representation.
+
+   Description:
+ 
+   The <Polar> class, just like the <Complex> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
+ 
+   See also:
+ 
+   <http://en.wikipedia.org/wiki/Polar_coordinates>
+ 
+   Parameters:
+
+      theta - An angle.
+      rho - The norm.
+*/
+
+var Polar = function(theta, rho) {
+  this.theta = theta || 0;
+  this.rho = rho || 0;
+};
+
+$jit.Polar = Polar;
+
+Polar.prototype = {
+    /*
+       Method: getc
+    
+       Returns a complex number.
+    
+       Parameters:
+
+       simple - _optional_ If *true*, this method will return only an object holding x and y properties and not a <Complex> instance. Default's *false*.
+
+      Returns:
+    
+          A complex number.
+    */
+    getc: function(simple) {
+        return this.toComplex(simple);
+    },
+
+    /*
+       Method: getp
+    
+       Returns a <Polar> representation.
+    
+       Returns:
+    
+          A variable in polar coordinates.
+    */
+    getp: function() {
+        return this;
+    },
+
+
+    /*
+       Method: set
+    
+       Sets a number.
+
+       Parameters:
+
+       v - A <Complex> or <Polar> instance.
+    
+    */
+    set: function(v) {
+        v = v.getp();
+        this.theta = v.theta; this.rho = v.rho;
+    },
+
+    /*
+       Method: setc
+    
+       Sets a <Complex> number.
+
+       Parameters:
+
+       x - A <Complex> number real part.
+       y - A <Complex> number imaginary part.
+    
+    */
+    setc: function(x, y) {
+        this.rho = Math.sqrt(x * x + y * y);
+        this.theta = Math.atan2(y, x);
+        if(this.theta < 0) this.theta += Math.PI * 2;
+    },
+
+    /*
+       Method: setp
+    
+       Sets a polar number.
+
+       Parameters:
+
+       theta - A <Polar> number angle property.
+       rho - A <Polar> number rho property.
+    
+    */
+    setp: function(theta, rho) {
+        this.theta = theta; 
+        this.rho = rho;
+    },
+
+    /*
+       Method: clone
+    
+       Returns a copy of the current object.
+    
+       Returns:
+    
+          A copy of the real object.
+    */
+    clone: function() {
+        return new Polar(this.theta, this.rho);
+    },
+
+    /*
+       Method: toComplex
+    
+        Translates from polar to cartesian coordinates and returns a new <Complex> instance.
+    
+        Parameters:
+
+        simple - _optional_ If *true* this method will only return an object with x and y properties (and not the whole <Complex> instance). Default's *false*.
+ 
+        Returns:
+    
+          A new <Complex> instance.
+    */
+    toComplex: function(simple) {
+        var x = Math.cos(this.theta) * this.rho;
+        var y = Math.sin(this.theta) * this.rho;
+        if(simple) return { 'x': x, 'y': y};
+        return new Complex(x, y);
+    },
+
+    /*
+       Method: add
+    
+        Adds two <Polar> instances.
+    
+       Parameters:
+
+       polar - A <Polar> number.
+
+       Returns:
+    
+          A new Polar instance.
+    */
+    add: function(polar) {
+        return new Polar(this.theta + polar.theta, this.rho + polar.rho);
+    },
+    
+    /*
+       Method: scale
+    
+        Scales a polar norm.
+    
+        Parameters:
+
+        number - A scale factor.
+        
+        Returns:
+    
+          A new Polar instance.
+    */
+    scale: function(number) {
+        return new Polar(this.theta, this.rho * number);
+    },
+    
+    /*
+       Method: equals
+    
+       Comparison method.
+
+       Returns *true* if the theta and rho properties are equal.
+
+       Parameters:
+
+       c - A <Polar> number.
+
+       Returns:
+
+       *true* if the theta and rho parameters for these objects are equal. *false* otherwise.
+    */
+    equals: function(c) {
+        return this.theta == c.theta && this.rho == c.rho;
+    },
+    
+    /*
+       Method: $add
+    
+        Adds two <Polar> instances affecting the current object.
+    
+       Paramters:
+
+       polar - A <Polar> instance.
+
+       Returns:
+    
+          The changed object.
+    */
+    $add: function(polar) {
+        this.theta = this.theta + polar.theta; this.rho += polar.rho;
+        return this;
+    },
+
+    /*
+       Method: $madd
+    
+        Adds two <Polar> instances affecting the current object. The resulting theta angle is modulo 2pi.
+    
+       Parameters:
+
+       polar - A <Polar> instance.
+
+       Returns:
+    
+          The changed object.
+    */
+    $madd: function(polar) {
+        this.theta = (this.theta + polar.theta) % (Math.PI * 2); this.rho += polar.rho;
+        return this;
+    },
+
+    
+    /*
+       Method: $scale
+    
+        Scales a polar instance affecting the object.
+    
+      Parameters:
+
+      number - A scaling factor.
+
+      Returns:
+    
+          The changed object.
+    */
+    $scale: function(number) {
+        this.rho *= number;
+        return this;
+    },
+    
+    /*
+      Method: isZero
+   
+      Returns *true* if the number is zero.
+   
+   */
+    isZero: function () {
+      var almostZero = 0.0001, abs = Math.abs;
+      return abs(this.theta) < almostZero && abs(this.rho) < almostZero;
+    },
+
+    /*
+       Method: interpolate
+    
+        Calculates a polar interpolation between two points at a given delta moment.
+
+        Parameters:
+      
+        elem - A <Polar> instance.
+        delta - A delta factor ranging [0, 1].
+    
+       Returns:
+    
+          A new <Polar> instance representing an interpolation between _this_ and _elem_
+    */
+    interpolate: function(elem, delta) {
+        var pi = Math.PI, pi2 = pi * 2;
+        var ch = function(t) {
+            var a =  (t < 0)? (t % pi2) + pi2 : t % pi2;
+            return a;
+        };
+        var tt = this.theta, et = elem.theta;
+        var sum, diff = Math.abs(tt - et);
+        if(diff == pi) {
+          if(tt > et) {
+            sum = ch((et + ((tt - pi2) - et) * delta)) ;
+          } else {
+            sum = ch((et - pi2 + (tt - (et)) * delta));
+          }
+        } else if(diff >= pi) {
+          if(tt > et) {
+            sum = ch((et + ((tt - pi2) - et) * delta)) ;
+          } else {
+            sum = ch((et - pi2 + (tt - (et - pi2)) * delta));
+          }
+        } else {  
+          sum = ch((et + (tt - et) * delta)) ;
+        }
+        var r = (this.rho - elem.rho) * delta + elem.rho;
+        return {
+          'theta': sum,
+          'rho': r
+        };
+    }
+};
+
+
+var $P = function(a, b) { return new Polar(a, b); };
+
+Polar.KER = $P(0, 0);
+
+
+
+/*
+ * File: Complex.js
+ * 
+ * Defines the <Complex> class.
+ *
+ * Description:
+ *
+ * The <Complex> class, just like the <Polar> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
+ *
+ * See also:
+ *
+ * <http://en.wikipedia.org/wiki/Complex_number>
+ *
+*/
+
+/*
+   Class: Complex
+    
+   A multi-purpose Complex Class with common methods.
+ 
+   Description:
+ 
+   The <Complex> class, just like the <Polar> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
+ 
+   See also:
+ 
+   <http://en.wikipedia.org/wiki/Complex_number>
+
+   Parameters:
+
+   x - _optional_ A Complex number real part.
+   y - _optional_ A Complex number imaginary part.
+ 
+*/
+
+var Complex = function(x, y) {
+  this.x = x || 0;
+  this.y = y || 0;
+};
+
+$jit.Complex = Complex;
+
+Complex.prototype = {
+    /*
+       Method: getc
+    
+       Returns a complex number.
+    
+       Returns:
+    
+          A complex number.
+    */
+    getc: function() {
+        return this;
+    },
+
+    /*
+       Method: getp
+    
+       Returns a <Polar> representation of this number.
+    
+       Parameters:
+
+       simple - _optional_ If *true*, this method will return only an object holding theta and rho properties and not a <Polar> instance. Default's *false*.
+
+       Returns:
+    
+          A variable in <Polar> coordinates.
+    */
+    getp: function(simple) {
+        return this.toPolar(simple);
+    },
+
+
+    /*
+       Method: set
+    
+       Sets a number.
+
+       Parameters:
+
+       c - A <Complex> or <Polar> instance.
+    
+    */
+    set: function(c) {
+      c = c.getc(true);
+      this.x = c.x; 
+      this.y = c.y;
+    },
+
+    /*
+       Method: setc
+    
+       Sets a complex number.
+
+       Parameters:
+
+       x - A <Complex> number Real part.
+       y - A <Complex> number Imaginary part.
+    
+    */
+    setc: function(x, y) {
+        this.x = x; 
+        this.y = y;
+    },
+
+    /*
+       Method: setp
+    
+       Sets a polar number.
+
+       Parameters:
+
+       theta - A <Polar> number theta property.
+       rho - A <Polar> number rho property.
+    
+    */
+    setp: function(theta, rho) {
+        this.x = Math.cos(theta) * rho;
+        this.y = Math.sin(theta) * rho;
+    },
+
+    /*
+       Method: clone
+    
+       Returns a copy of the current object.
+    
+       Returns:
+    
+          A copy of the real object.
+    */
+    clone: function() {
+        return new Complex(this.x, this.y);
+    },
+
+    /*
+       Method: toPolar
+    
+       Transforms cartesian to polar coordinates.
+    
+       Parameters:
+
+       simple - _optional_ If *true* this method will only return an object with theta and rho properties (and not the whole <Polar> instance). Default's *false*.
+       
+       Returns:
+    
+          A new <Polar> instance.
+    */
+    
+    toPolar: function(simple) {
+        var rho = this.norm();
+        var atan = Math.atan2(this.y, this.x);
+        if(atan < 0) atan += Math.PI * 2;
+        if(simple) return { 'theta': atan, 'rho': rho };
+        return new Polar(atan, rho);
+    },
+    /*
+       Method: norm
+    
+       Calculates a <Complex> number norm.
+    
+       Returns:
+    
+          A real number representing the complex norm.
+    */
+    norm: function () {
+        return Math.sqrt(this.squaredNorm());
+    },
+    
+    /*
+       Method: squaredNorm
+    
+       Calculates a <Complex> number squared norm.
+    
+       Returns:
+    
+          A real number representing the complex squared norm.
+    */
+    squaredNorm: function () {
+        return this.x*this.x + this.y*this.y;
+    },
+
+    /*
+       Method: add
+    
+       Returns the result of adding two complex numbers.
+       
+       Does not alter the original object.
+
+       Parameters:
+    
+          pos - A <Complex> instance.
+    
+       Returns:
+    
+         The result of adding two complex numbers.
+    */
+    add: function(pos) {
+        return new Complex(this.x + pos.x, this.y + pos.y);
+    },
+
+    /*
+       Method: prod
+    
+       Returns the result of multiplying two <Complex> numbers.
+       
+       Does not alter the original object.
+
+       Parameters:
+    
+          pos - A <Complex> instance.
+    
+       Returns:
+    
+         The result of multiplying two complex numbers.
+    */
+    prod: function(pos) {
+        return new Complex(this.x*pos.x - this.y*pos.y, this.y*pos.x + this.x*pos.y);
+    },
+
+    /*
+       Method: conjugate
+    
+       Returns the conjugate of this <Complex> number.
+
+       Does not alter the original object.
+
+       Returns:
+    
+         The conjugate of this <Complex> number.
+    */
+    conjugate: function() {
+        return new Complex(this.x, -this.y);
+    },
+
+
+    /*
+       Method: scale
+    
+       Returns the result of scaling a <Complex> instance.
+       
+       Does not alter the original object.
+
+       Parameters:
+    
+          factor - A scale factor.
+    
+       Returns:
+    
+         The result of scaling this complex to a factor.
+    */
+    scale: function(factor) {
+        return new Complex(this.x * factor, this.y * factor);
+    },
+
+    /*
+       Method: equals
+    
+       Comparison method.
+
+       Returns *true* if both real and imaginary parts are equal.
+
+       Parameters:
+
+       c - A <Complex> instance.
+
+       Returns:
+
+       A boolean instance indicating if both <Complex> numbers are equal.
+    */
+    equals: function(c) {
+        return this.x == c.x && this.y == c.y;
+    },
+
+    /*
+       Method: $add
+    
+       Returns the result of adding two <Complex> numbers.
+       
+       Alters the original object.
+
+       Parameters:
+    
+          pos - A <Complex> instance.
+    
+       Returns:
+    
+         The result of adding two complex numbers.
+    */
+    $add: function(pos) {
+        this.x += pos.x; this.y += pos.y;
+        return this;    
+    },
+    
+    /*
+       Method: $prod
+    
+       Returns the result of multiplying two <Complex> numbers.
+       
+       Alters the original object.
+
+       Parameters:
+    
+          pos - A <Complex> instance.
+    
+       Returns:
+    
+         The result of multiplying two complex numbers.
+    */
+    $prod:function(pos) {
+        var x = this.x, y = this.y;
+        this.x = x*pos.x - y*pos.y;
+        this.y = y*pos.x + x*pos.y;
+        return this;
+    },
+    
+    /*
+       Method: $conjugate
+    
+       Returns the conjugate for this <Complex>.
+       
+       Alters the original object.
+
+       Returns:
+    
+         The conjugate for this complex.
+    */
+    $conjugate: function() {
+        this.y = -this.y;
+        return this;
+    },
+    
+    /*
+       Method: $scale
+    
+       Returns the result of scaling a <Complex> instance.
+       
+       Alters the original object.
+
+       Parameters:
+    
+          factor - A scale factor.
+    
+       Returns:
+    
+         The result of scaling this complex to a factor.
+    */
+    $scale: function(factor) {
+        this.x *= factor; this.y *= factor;
+        return this;
+    },
+    
+    /*
+       Method: $div
+    
+       Returns the division of two <Complex> numbers.
+       
+       Alters the original object.
+
+       Parameters:
+    
+          pos - A <Complex> number.
+    
+       Returns:
+    
+         The result of scaling this complex to a factor.
+    */
+    $div: function(pos) {
+        var x = this.x, y = this.y;
+        var sq = pos.squaredNorm();
+        this.x = x * pos.x + y * pos.y; this.y = y * pos.x - x * pos.y;
+        return this.$scale(1 / sq);
+    },
+
+    /*
+      Method: isZero
+   
+      Returns *true* if the number is zero.
+   
+   */
+    isZero: function () {
+      var almostZero = 0.0001, abs = Math.abs;
+      return abs(this.x) < almostZero && abs(this.y) < almostZero;
+    }
+};
+
+var $C = function(a, b) { return new Complex(a, b); };
+
+Complex.KER = $C(0, 0);
+Complex.IM = $C(0, 1);
+
+
+
+/*
+ * File: Graph.js
+ *
+*/
+
+/*
+ Class: Graph
+
+ A Graph Class that provides useful manipulation functions. You can find more manipulation methods in the <Graph.Util> object.
+
+ An instance of this class can be accessed by using the *graph* parameter of any tree or graph visualization.
+ 
+ Example:
+
+ (start code js)
+   //create new visualization
+   var viz = new $jit.Viz(options);
+   //load JSON data
+   viz.loadJSON(json);
+   //access model
+   viz.graph; //<Graph> instance
+ (end code)
+ 
+ Implements:
+ 
+ The following <Graph.Util> methods are implemented in <Graph>
+ 
+  - <Graph.Util.getNode>
+  - <Graph.Util.eachNode>
+  - <Graph.Util.computeLevels>
+  - <Graph.Util.eachBFS>
+  - <Graph.Util.clean>
+  - <Graph.Util.getClosestNodeToPos>
+  - <Graph.Util.getClosestNodeToOrigin>
+ 
+*/  
+
+$jit.Graph = new Class({
+
+  initialize: function(opt, Node, Edge, Label) {
+    var innerOptions = {
+    'klass': Complex,
+    'Node': {}
+    };
+    this.Node = Node;
+    this.Edge = Edge;
+    this.Label = Label;
+    this.opt = $.merge(innerOptions, opt || {});
+    this.nodes = {};
+    this.edges = {};
+    
+    //add nodeList methods
+    var that = this;
+    this.nodeList = {};
+    for(var p in Accessors) {
+      that.nodeList[p] = (function(p) {
+        return function() {
+          var args = Array.prototype.slice.call(arguments);
+          that.eachNode(function(n) {
+            n[p].apply(n, args);
+          });
+        };
+      })(p);
+    }
+
+ },
+
+/*
+     Method: getNode
+    
+     Returns a <Graph.Node> by *id*.
+
+     Parameters:
+
+     id - (string) A <Graph.Node> id.
+
+     Example:
+
+     (start code js)
+       var node = graph.getNode('nodeId');
+     (end code)
+*/  
+ getNode: function(id) {
+    if(this.hasNode(id)) return this.nodes[id];
+    return false;
+ },
+
+ /*
+     Method: get
+    
+     An alias for <Graph.Util.getNode>. Returns a node by *id*.
+    
+     Parameters:
+    
+     id - (string) A <Graph.Node> id.
+    
+     Example:
+    
+     (start code js)
+       var node = graph.get('nodeId');
+     (end code)
+*/  
+  get: function(id) {
+    return this.getNode(id);
+  },
+
+ /*
+   Method: getByName
+  
+   Returns a <Graph.Node> by *name*.
+  
+   Parameters:
+  
+   name - (string) A <Graph.Node> name.
+  
+   Example:
+  
+   (start code js)
+     var node = graph.getByName('someName');
+   (end code)
+  */  
+  getByName: function(name) {
+    for(var id in this.nodes) {
+      var n = this.nodes[id];
+      if(n.name == name) return n;
+    }
+    return false;
+  },
+
+/*
+   Method: getAdjacence
+  
+   Returns a <Graph.Adjacence> object connecting nodes with ids *id* and *id2*.
+
+   Parameters:
+
+   id - (string) A <Graph.Node> id.
+   id2 - (string) A <Graph.Node> id.
+*/  
+  getAdjacence: function (id, id2) {
+    if(id in this.edges) {
+      return this.edges[id][id2];
+    }
+    return false;
+ },
+
+    /*
+     Method: addNode
+    
+     Adds a node.
+     
+     Parameters:
+    
+      obj - An object with the properties described below
+
+      id - (string) A node id
+      name - (string) A node's name
+      data - (object) A node's data hash
+
+    See also:
+    <Graph.Node>
+
+  */  
+  addNode: function(obj) { 
+   if(!this.nodes[obj.id]) {  
+     var edges = this.edges[obj.id] = {};
+     this.nodes[obj.id] = new Graph.Node($.extend({
+        'id': obj.id,
+        'name': obj.name,
+        'data': $.merge(obj.data || {}, {}),
+        'adjacencies': edges 
+      }, this.opt.Node), 
+      this.opt.klass, 
+      this.Node, 
+      this.Edge,
+      this.Label);
+    }
+    return this.nodes[obj.id];
+  },
+  
+    /*
+     Method: addAdjacence
+    
+     Connects nodes specified by *obj* and *obj2*. If not found, nodes are created.
+     
+     Parameters:
+    
+      obj - (object) A <Graph.Node> object.
+      obj2 - (object) Another <Graph.Node> object.
+      data - (object) A data object. Used to store some extra information in the <Graph.Adjacence> object created.
+
+    See also:
+
+    <Graph.Node>, <Graph.Adjacence>
+    */  
+  addAdjacence: function (obj, obj2, data) {
+    if(!this.hasNode(obj.id)) { this.addNode(obj); }
+    if(!this.hasNode(obj2.id)) { this.addNode(obj2); }
+    obj = this.nodes[obj.id]; obj2 = this.nodes[obj2.id];
+    if(!obj.adjacentTo(obj2)) {
+      var adjsObj = this.edges[obj.id] = this.edges[obj.id] || {};
+      var adjsObj2 = this.edges[obj2.id] = this.edges[obj2.id] || {};
+      adjsObj[obj2.id] = adjsObj2[obj.id] = new Graph.Adjacence(obj, obj2, data, this.Edge, this.Label);
+      return adjsObj[obj2.id];
+    }
+    return this.edges[obj.id][obj2.id];
+ },
+
+    /*
+     Method: removeNode
+    
+     Removes a <Graph.Node> matching the specified *id*.
+
+     Parameters:
+
+     id - (string) A node's id.
+
+    */  
+  removeNode: function(id) {
+    if(this.hasNode(id)) {
+      delete this.nodes[id];
+      var adjs = this.edges[id];
+      for(var to in adjs) {
+        delete this.edges[to][id];
+      }
+      delete this.edges[id];
+    }
+  },
+  
+/*
+     Method: removeAdjacence
+    
+     Removes a <Graph.Adjacence> matching *id1* and *id2*.
+
+     Parameters:
+
+     id1 - (string) A <Graph.Node> id.
+     id2 - (string) A <Graph.Node> id.
+*/  
+  removeAdjacence: function(id1, id2) {
+    delete this.edges[id1][id2];
+    delete this.edges[id2][id1];
+  },
+
+   /*
+     Method: hasNode
+    
+     Returns a boolean indicating if the node belongs to the <Graph> or not.
+     
+     Parameters:
+    
+        id - (string) Node id.
+   */  
+  hasNode: function(id) {
+    return id in this.nodes;
+  },
+  
+  /*
+    Method: empty
+
+    Empties the Graph
+
+  */
+  empty: function() { this.nodes = {}; this.edges = {};}
+
+});
+
+var Graph = $jit.Graph;
+
+/*
+ Object: Accessors
+ 
+ Defines a set of methods for data, canvas and label styles manipulation implemented by <Graph.Node> and <Graph.Adjacence> instances.
+ 
+ */
+var Accessors;
+
+(function () {
+  var getDataInternal = function(prefix, prop, type, force, prefixConfig) {
+    var data;
+    type = type || 'current';
+    prefix = "$" + (prefix ? prefix + "-" : "");
+
+    if(type == 'current') {
+      data = this.data;
+    } else if(type == 'start') {
+      data = this.startData;
+    } else if(type == 'end') {
+      data = this.endData;
+    }
+
+    var dollar = prefix + prop;
+
+    if(force) {
+      return data[dollar];
+    }
+
+    if(!this.Config.overridable)
+      return prefixConfig[prop] || 0;
+
+    return (dollar in data) ?
+      data[dollar] : ((dollar in this.data) ? this.data[dollar] : (prefixConfig[prop] || 0));
+  }
+
+  var setDataInternal = function(prefix, prop, value, type) {
+    type = type || 'current';
+    prefix = '$' + (prefix ? prefix + '-' : '');
+
+    var data;
+
+    if(type == 'current') {
+      data = this.data;
+    } else if(type == 'start') {
+      data = this.startData;
+    } else if(type == 'end') {
+      data = this.endData;
+    }
+
+    data[prefix + prop] = value;
+  }
+
+  var removeDataInternal = function(prefix, properties) {
+    prefix = '$' + (prefix ? prefix + '-' : '');
+    var that = this;
+    $.each(properties, function(prop) {
+      var pref = prefix + prop;
+      delete that.data[pref];
+      delete that.endData[pref];
+      delete that.startData[pref];
+    });
+  }
+
+  Accessors = {
+    /*
+    Method: getData
+
+    Returns the specified data value property.
+    This is useful for querying special/reserved <Graph.Node> data properties
+    (i.e dollar prefixed properties).
+
+    Parameters:
+
+      prop  - (string) The name of the property. The dollar sign is not needed. For
+              example *getData(width)* will return *data.$width*.
+      type  - (string) The type of the data property queried. Default's "current". You can access *start* and *end* 
+              data properties also. These properties are used when making animations.
+      force - (boolean) Whether to obtain the true value of the property (equivalent to
+              *data.$prop*) or to check for *node.overridable = true* first.
+
+    Returns:
+
+      The value of the dollar prefixed property or the global Node/Edge property
+      value if *overridable=false*
+
+    Example:
+    (start code js)
+     node.getData('width'); //will return node.data.$width if Node.overridable=true;
+    (end code)
+    */
+    getData: function(prop, type, force) {
+      return getDataInternal.call(this, "", prop, type, force, this.Config);
+    },
+
+
+    /*
+    Method: setData
+
+    Sets the current data property with some specific value.
+    This method is only useful for reserved (dollar prefixed) properties.
+
+    Parameters:
+
+      prop  - (string) The name of the property. The dollar sign is not necessary. For
+              example *setData(width)* will set *data.$width*.
+      value - (mixed) The value to store.
+      type  - (string) The type of the data property to store. Default's "current" but
+              can also be "start" or "end".
+
+    Example:
+    
+    (start code js)
+     node.setData('width', 30);
+    (end code)
+    
+    If we were to make an animation of a node/edge width then we could do
+    
+    (start code js)
+      var node = viz.getNode('nodeId');
+      //set start and end values
+      node.setData('width', 10, 'start');
+      node.setData('width', 30, 'end');
+      //will animate nodes width property
+      viz.fx.animate({
+        modes: ['node-property:width'],
+        duration: 1000
+      });
+    (end code)
+    */
+    setData: function(prop, value, type) {
+      setDataInternal.call(this, "", prop, value, type);
+    },
+
+    /*
+    Method: setDataset
+
+    Convenience method to set multiple data values at once.
+    
+    Parameters:
+    
+    types - (array|string) A set of 'current', 'end' or 'start' values.
+    obj - (object) A hash containing the names and values of the properties to be altered.
+
+    Example:
+    (start code js)
+      node.setDataset(['current', 'end'], {
+        'width': [100, 5],
+        'color': ['#fff', '#ccc']
+      });
+      //...or also
+      node.setDataset('end', {
+        'width': 5,
+        'color': '#ccc'
+      });
+    (end code)
+    
+    See also: 
+    
+    <Accessors.setData>
+    
+    */
+    setDataset: function(types, obj) {
+      types = $.splat(types);
+      for(var attr in obj) {
+        for(var i=0, val = $.splat(obj[attr]), l=types.length; i<l; i++) {
+          this.setData(attr, val[i], types[i]);
+        }
+      }
+    },
+    
+    /*
+    Method: removeData
+
+    Remove data properties.
+
+    Parameters:
+
+    One or more property names as arguments. The dollar sign is not needed.
+
+    Example:
+    (start code js)
+    node.removeData('width'); //now the default width value is returned
+    (end code)
+    */
+    removeData: function() {
+      removeDataInternal.call(this, "", Array.prototype.slice.call(arguments));
+    },
+
+    /*
+    Method: getCanvasStyle
+
+    Returns the specified canvas style data value property. This is useful for
+    querying special/reserved <Graph.Node> canvas style data properties (i.e.
+    dollar prefixed properties that match with $canvas-<name of canvas style>).
+
+    Parameters:
+
+      prop  - (string) The name of the property. The dollar sign is not needed. For
+              example *getCanvasStyle(shadowBlur)* will return *data[$canvas-shadowBlur]*.
+      type  - (string) The type of the data property queried. Default's *current*. You can access *start* and *end* 
+              data properties also.
+              
+    Example:
+    (start code js)
+      node.getCanvasStyle('shadowBlur');
+    (end code)
+    
+    See also:
+    
+    <Accessors.getData>
+    */
+    getCanvasStyle: function(prop, type, force) {
+      return getDataInternal.call(
+          this, 'canvas', prop, type, force, this.Config.CanvasStyles);
+    },
+
+    /*
+    Method: setCanvasStyle
+
+    Sets the canvas style data property with some specific value.
+    This method is only useful for reserved (dollar prefixed) properties.
+    
+    Parameters:
+    
+    prop - (string) Name of the property. Can be any canvas property like 'shadowBlur', 'shadowColor', 'strokeStyle', etc.
+    value - (mixed) The value to set to the property.
+    type - (string) Default's *current*. Whether to set *start*, *current* or *end* type properties.
+    
+    Example:
+    
+    (start code js)
+     node.setCanvasStyle('shadowBlur', 30);
+    (end code)
+    
+    If we were to make an animation of a node/edge shadowBlur canvas style then we could do
+    
+    (start code js)
+      var node = viz.getNode('nodeId');
+      //set start and end values
+      node.setCanvasStyle('shadowBlur', 10, 'start');
+      node.setCanvasStyle('shadowBlur', 30, 'end');
+      //will animate nodes canvas style property for nodes
+      viz.fx.animate({
+        modes: ['node-style:shadowBlur'],
+        duration: 1000
+      });
+    (end code)
+    
+    See also:
+    
+    <Accessors.setData>.
+    */
+    setCanvasStyle: function(prop, value, type) {
+      setDataInternal.call(this, 'canvas', prop, value, type);
+    },
+
+    /*
+    Method: setCanvasStyles
+
+    Convenience method to set multiple styles at once.
+
+    Parameters:
+    
+    types - (array|string) A set of 'current', 'end' or 'start' values.
+    obj - (object) A hash containing the names and values of the properties to be altered.
+
+    See also:
+    
+    <Accessors.setDataset>.
+    */
+    setCanvasStyles: function(types, obj) {
+      types = $.splat(types);
+      for(var attr in obj) {
+        for(var i=0, val = $.splat(obj[attr]), l=types.length; i<l; i++) {
+          this.setCanvasStyle(attr, val[i], types[i]);
+        }
+      }
+    },
+
+    /*
+    Method: removeCanvasStyle
+
+    Remove canvas style properties from data.
+
+    Parameters:
+    
+    A variable number of canvas style strings.
+
+    See also:
+    
+    <Accessors.removeData>.
+    */
+    removeCanvasStyle: function() {
+      removeDataInternal.call(this, 'canvas', Array.prototype.slice.call(arguments));
+    },
+
+    /*
+    Method: getLabelData
+
+    Returns the specified label data value property. This is useful for
+    querying special/reserved <Graph.Node> label options (i.e.
+    dollar prefixed properties that match with $label-<name of label style>).
+
+    Parameters:
+
+      prop  - (string) The name of the property. The dollar sign prefix is not needed. For
+              example *getLabelData(size)* will return *data[$label-size]*.
+      type  - (string) The type of the data property queried. Default's *current*. You can access *start* and *end* 
+              data properties also.
+              
+    See also:
+    
+    <Accessors.getData>.
+    */
+    getLabelData: function(prop, type, force) {
+      return getDataInternal.call(
+          this, 'label', prop, type, force, this.Label);
+    },
+
+    /*
+    Method: setLabelData
+
+    Sets the current label data with some specific value.
+    This method is only useful for reserved (dollar prefixed) properties.
+
+    Parameters:
+    
+    prop - (string) Name of the property. Can be any canvas property like 'shadowBlur', 'shadowColor', 'strokeStyle', etc.
+    value - (mixed) The value to set to the property.
+    type - (string) Default's *current*. Whether to set *start*, *current* or *end* type properties.
+    
+    Example:
+    
+    (start code js)
+     node.setLabelData('size', 30);
+    (end code)
+    
+    If we were to make an animation of a node label size then we could do
+    
+    (start code js)
+      var node = viz.getNode('nodeId');
+      //set start and end values
+      node.setLabelData('size', 10, 'start');
+      node.setLabelData('size', 30, 'end');
+      //will animate nodes label size
+      viz.fx.animate({
+        modes: ['label-property:size'],
+        duration: 1000
+      });
+    (end code)
+    
+    See also:
+    
+    <Accessors.setData>.
+    */
+    setLabelData: function(prop, value, type) {
+      setDataInternal.call(this, 'label', prop, value, type);
+    },
+
+    /*
+    Method: setLabelDataset
+
+    Convenience function to set multiple label data at once.
+
+    Parameters:
+    
+    types - (array|string) A set of 'current', 'end' or 'start' values.
+    obj - (object) A hash containing the names and values of the properties to be altered.
+
+    See also:
+    
+    <Accessors.setDataset>.
+    */
+    setLabelDataset: function(types, obj) {
+      types = $.splat(types);
+      for(var attr in obj) {
+        for(var i=0, val = $.splat(obj[attr]), l=types.length; i<l; i++) {
+          this.setLabelData(attr, val[i], types[i]);
+        }
+      }
+    },
+
+    /*
+    Method: removeLabelData
+
+    Remove label properties from data.
+    
+    Parameters:
+    
+    A variable number of label property strings.
+
+    See also:
+    
+    <Accessors.removeData>.
+    */
+    removeLabelData: function() {
+      removeDataInternal.call(this, 'label', Array.prototype.slice.call(arguments));
+    }
+  };
+})();
+
+/*
+     Class: Graph.Node
+
+     A <Graph> node.
+     
+     Implements:
+     
+     <Accessors> methods.
+     
+     The following <Graph.Util> methods are implemented by <Graph.Node>
+     
+    - <Graph.Util.eachAdjacency>
+    - <Graph.Util.eachLevel>
+    - <Graph.Util.eachSubgraph>
+    - <Graph.Util.eachSubnode>
+    - <Graph.Util.anySubnode>
+    - <Graph.Util.getSubnodes>
+    - <Graph.Util.getParents>
+    - <Graph.Util.isDescendantOf>     
+*/
+Graph.Node = new Class({
+    
+  initialize: function(opt, klass, Node, Edge, Label) {
+    var innerOptions = {
+      'id': '',
+      'name': '',
+      'data': {},
+      'startData': {},
+      'endData': {},
+      'adjacencies': {},
+
+      'selected': false,
+      'drawn': false,
+      'exist': false,
+
+      'angleSpan': {
+        'begin': 0,
+        'end' : 0
+      },
+
+      'pos': new klass,
+      'startPos': new klass,
+      'endPos': new klass
+    };
+    
+    $.extend(this, $.extend(innerOptions, opt));
+    this.Config = this.Node = Node;
+    this.Edge = Edge;
+    this.Label = Label;
+  },
+
+    /*
+       Method: adjacentTo
+    
+       Indicates if the node is adjacent to the node specified by id
+
+       Parameters:
+    
+          id - (string) A node id.
+    
+       Example:
+       (start code js)
+        node.adjacentTo('nodeId') == true;
+       (end code)
+    */
+    adjacentTo: function(node) {
+        return node.id in this.adjacencies;
+    },
+
+    /*
+     Method: adjacentWithDirectionTo
+
+     Indicates if the node has a directed edge to the node specified by id
+
+     Parameters:
+
+     id - (string) A node id.
+
+     Example:
+     (start code js)
+     node.adjacentWithDirectionTo('nodeId') == true;
+     (end code)
+     */
+    adjacentWithDirectionTo: function(node) {
+        var areNeighbors = node.id in this.adjacencies;
+        if (!areNeighbors) {
+            return false;
+        }
+
+        var direction = this.adjacencies[node.id].data.$direction;
+        return direction[0] === this.id ;
+    },
+
+    /*
+       Method: getAdjacency
+    
+       Returns a <Graph.Adjacence> object connecting the current <Graph.Node> and the node having *id* as id.
+
+       Parameters:
+    
+          id - (string) A node id.
+    */  
+    getAdjacency: function(id) {
+        return this.adjacencies[id];
+    },
+
+    /*
+      Method: getPos
+   
+      Returns the position of the node.
+  
+      Parameters:
+   
+         type - (string) Default's *current*. Possible values are "start", "end" or "current".
+   
+      Returns:
+   
+        A <Complex> or <Polar> instance.
+  
+      Example:
+      (start code js)
+       var pos = node.getPos('end');
+      (end code)
+   */
+   getPos: function(type) {
+       type = type || "current";
+       if(type == "current") {
+         return this.pos;
+       } else if(type == "end") {
+         return this.endPos;
+       } else if(type == "start") {
+         return this.startPos;
+       }
+   },
+   /*
+     Method: setPos
+  
+     Sets the node's position.
+  
+     Parameters:
+  
+        value - (object) A <Complex> or <Polar> instance.
+        type - (string) Default's *current*. Possible values are "start", "end" or "current".
+  
+     Example:
+     (start code js)
+      node.setPos(new $jit.Complex(0, 0), 'end');
+     (end code)
+  */
+  setPos: function(value, type) {
+      type = type || "current";
+      var pos;
+      if(type == "current") {
+        pos = this.pos;
+      } else if(type == "end") {
+        pos = this.endPos;
+      } else if(type == "start") {
+        pos = this.startPos;
+      }
+      pos.set(value);
+  }
+});
+
+Graph.Node.implement(Accessors);
+
+/*
+     Class: Graph.Adjacence
+
+     A <Graph> adjacence (or edge) connecting two <Graph.Nodes>.
+     
+     Implements:
+     
+     <Accessors> methods.
+
+     See also:
+
+     <Graph>, <Graph.Node>
+
+     Properties:
+     
+      nodeFrom - A <Graph.Node> connected by this edge.
+      nodeTo - Another  <Graph.Node> connected by this edge.
+      data - Node data property containing a hash (i.e {}) with custom options.
+*/
+Graph.Adjacence = new Class({
+  
+  initialize: function(nodeFrom, nodeTo, data, Edge, Label) {
+    this.nodeFrom = nodeFrom;
+    this.nodeTo = nodeTo;
+    this.data = data || {};
+    this.startData = {};
+    this.endData = {};
+    this.Config = this.Edge = Edge;
+    this.Label = Label;
+  }
+});
+
+Graph.Adjacence.implement(Accessors);
+
+/*
+   Object: Graph.Util
+
+   <Graph> traversal and processing utility object.
+   
+   Note:
+   
+   For your convenience some of these methods have also been appended to <Graph> and <Graph.Node> classes.
+*/
+Graph.Util = {
+    /*
+       filter
+    
+       For internal use only. Provides a filtering function based on flags.
+    */
+    filter: function(param) {
+        if(!param || !($.type(param) == 'string')) return function() { return true; };
+        var props = param.split(" ");
+        return function(elem) {
+            for(var i=0; i<props.length; i++) { 
+              if(elem[props[i]]) { 
+                return false; 
+              }
+            }
+            return true;
+        };
+    },
+    /*
+       Method: getNode
+    
+       Returns a <Graph.Node> by *id*.
+       
+       Also implemented by:
+       
+       <Graph>
+
+       Parameters:
+
+       graph - (object) A <Graph> instance.
+       id - (string) A <Graph.Node> id.
+
+       Example:
+
+       (start code js)
+         $jit.Graph.Util.getNode(graph, 'nodeid');
+         //or...
+         graph.getNode('nodeid');
+       (end code)
+    */
+    getNode: function(graph, id) {
+        return graph.nodes[id];
+    },
+    
+    /*
+       Method: eachNode
+    
+       Iterates over <Graph> nodes performing an *action*.
+       
+       Also implemented by:
+       
+       <Graph>.
+
+       Parameters:
+
+       graph - (object) A <Graph> instance.
+       action - (function) A callback function having a <Graph.Node> as first formal parameter.
+
+       Example:
+       (start code js)
+         $jit.Graph.Util.eachNode(graph, function(node) {
+          alert(node.name);
+         });
+         //or...
+         graph.eachNode(function(node) {
+           alert(node.name);
+         });
+       (end code)
+    */
+    eachNode: function(graph, action, flags) {
+        var filter = this.filter(flags);
+        for(var i in graph.nodes) {
+          if(filter(graph.nodes[i])) action(graph.nodes[i]);
+        } 
+    },
+    
+    /*
+      Method: each
+   
+      Iterates over <Graph> nodes performing an *action*. It's an alias for <Graph.Util.eachNode>.
+      
+      Also implemented by:
+      
+      <Graph>.
+  
+      Parameters:
+  
+      graph - (object) A <Graph> instance.
+      action - (function) A callback function having a <Graph.Node> as first formal parameter.
+  
+      Example:
+      (start code js)
+        $jit.Graph.Util.each(graph, function(node) {
+         alert(node.name);
+        });
+        //or...
+        graph.each(function(node) {
+          alert(node.name);
+        });
+      (end code)
+   */
+   each: function(graph, action, flags) {
+      this.eachNode(graph, action, flags); 
+   },
+
+ /*
+       Method: eachAdjacency
+    
+       Iterates over <Graph.Node> adjacencies applying the *action* function.
+       
+       Also implemented by:
+       
+       <Graph.Node>.
+
+       Parameters:
+
+       node - (object) A <Graph.Node>.
+       action - (function) A callback function having <Graph.Adjacence> as first formal parameter.
+
+       Example:
+       (start code js)
+         $jit.Graph.Util.eachAdjacency(node, function(adj) {
+          alert(adj.nodeTo.name);
+         });
+         //or...
+         node.eachAdjacency(function(adj) {
+           alert(adj.nodeTo.name);
+         });
+       (end code)
+    */
+    eachAdjacency: function(node, action, flags) {
+        var adj = node.adjacencies, filter = this.filter(flags);
+        for(var id in adj) {
+          var a = adj[id];
+          if(filter(a)) {
+            if(a.nodeFrom != node) {
+              var tmp = a.nodeFrom;
+              a.nodeFrom = a.nodeTo;
+              a.nodeTo = tmp;
+            }
+            action(a, id);
+          }
+        }
+    },
+
+     /*
+       Method: computeLevels
+    
+       Performs a BFS traversal setting the correct depth for each node.
+        
+       Also implemented by:
+       
+       <Graph>.
+       
+       Note:
+       
+       The depth of each node can then be accessed by 
+       >node._depth
+
+       Parameters:
+
+       graph - (object) A <Graph>.
+       id - (string) A starting node id for the BFS traversal.
+       startDepth - (optional|number) A minimum depth value. Default's 0.
+
+    */
+    computeLevels: function(graph, id, startDepth, flags) {
+        startDepth = startDepth || 0;
+        var filter = this.filter(flags);
+        this.eachNode(graph, function(elem) {
+            elem._flag = false;
+            elem._depth = -1;
+        }, flags);
+        var root = graph.getNode(id);
+        root._depth = startDepth;
+        var queue = [root];
+        while(queue.length != 0) {
+            var node = queue.pop();
+            node._flag = true;
+            this.eachAdjacency(node, function(adj) {
+                var n = adj.nodeTo;
+                if(n._flag == false && filter(n) && !adj._hiding) {
+                    if(n._depth < 0) n._depth = node._depth + 1 + startDepth;
+                    queue.unshift(n);
+                }
+            }, flags);
+        }
+    },
+
+    /*
+       Method: eachBFS
+    
+       Performs a BFS traversal applying *action* to each <Graph.Node>.
+       
+       Also implemented by:
+       
+       <Graph>.
+
+       Parameters:
+
+       graph - (object) A <Graph>.
+       id - (string) A starting node id for the BFS traversal.
+       action - (function) A callback function having a <Graph.Node> as first formal parameter.
+
+       Example:
+       (start code js)
+         $jit.Graph.Util.eachBFS(graph, 'mynodeid', function(node) {
+          alert(node.name);
+         });
+         //or...
+         graph.eachBFS('mynodeid', function(node) {
+           alert(node.name);
+         });
+       (end code)
+    */
+    eachBFS: function(graph, id, action, flags) {
+        var filter = this.filter(flags);
+        this.clean(graph);
+        var queue = [graph.getNode(id)];
+        while(queue.length != 0) {
+            var node = queue.pop();
+            if (!node) return;
+            node._flag = true;
+            action(node, node._depth);
+            this.eachAdjacency(node, function(adj) {
+                var n = adj.nodeTo;
+                if(n._flag == false && filter(n) && !adj._hiding) {
+                    n._flag = true;
+                    queue.unshift(n);
+                }
+            }, flags);
+        }
+    },
+    
+    /*
+       Method: eachLevel
+    
+       Iterates over a node's subgraph applying *action* to the nodes of relative depth between *levelBegin* and *levelEnd*.
+       In case you need to break the iteration, *action* should return false.
+       
+       Also implemented by:
+       
+       <Graph.Node>.
+
+       Parameters:
+       
+       node - (object) A <Graph.Node>.
+       levelBegin - (number) A relative level value.
+       levelEnd - (number) A relative level value.
+       action - (function) A callback function having a <Graph.Node> as first formal parameter.
+
+    */
+    eachLevel: function(node, levelBegin, levelEnd, action, flags) {
+        var d = node._depth, filter = this.filter(flags), that = this, shouldContinue = true;
+        levelEnd = levelEnd === false? Number.MAX_VALUE -d : levelEnd;
+        (function loopLevel(node, levelBegin, levelEnd) {
+            if(!shouldContinue) return;
+            var d = node._depth, ret;
+            if(d >= levelBegin && d <= levelEnd && filter(node)) ret = action(node, d);
+            if(typeof ret !== "undefined") shouldContinue = ret;
+            if(shouldContinue && d < levelEnd) {
+                that.eachAdjacency(node, function(adj) {
+                    var n = adj.nodeTo;
+                    if(n._depth > d) loopLevel(n, levelBegin, levelEnd);
+                });
+            }
+        })(node, levelBegin + d, levelEnd + d);
+    },
+
+    /*
+       Method: eachSubgraph
+    
+       Iterates over a node's children recursively.
+       
+       Also implemented by:
+       
+       <Graph.Node>.
+
+       Parameters:
+       node - (object) A <Graph.Node>.
+       action - (function) A callback function having a <Graph.Node> as first formal parameter.
+
+       Example:
+       (start code js)
+         $jit.Graph.Util.eachSubgraph(node, function(node) {
+           alert(node.name);
+         });
+         //or...
+         node.eachSubgraph(function(node) {
+           alert(node.name);
+         });
+       (end code)
+    */
+    eachSubgraph: function(node, action, flags) {
+      this.eachLevel(node, 0, false, action, flags);
+    },
+
+    /*
+       Method: eachSubnode
+    
+       Iterates over a node's children (without deeper recursion).
+       
+       Also implemented by:
+       
+       <Graph.Node>.
+       
+       Parameters:
+       node - (object) A <Graph.Node>.
+       action - (function) A callback function having a <Graph.Node> as first formal parameter.
+
+       Example:
+       (start code js)
+         $jit.Graph.Util.eachSubnode(node, function(node) {
+          alert(node.name);
+         });
+         //or...
+         node.eachSubnode(function(node) {
+           alert(node.name);
+         });
+       (end code)
+    */
+    eachSubnode: function(node, action, flags) {
+        this.eachLevel(node, 1, 1, action, flags);
+    },
+
+    /*
+       Method: anySubnode
+    
+       Returns *true* if any subnode matches the given condition.
+       
+       Also implemented by:
+       
+       <Graph.Node>.
+
+       Parameters:
+       node - (object) A <Graph.Node>.
+       cond - (function) A callback function returning a Boolean instance. This function has as first formal parameter a <Graph.Node>.
+
+       Example:
+       (start code js)
+         $jit.Graph.Util.anySubnode(node, function(node) { return node.name == "mynodename"; });
+         //or...
+         node.anySubnode(function(node) { return node.name == 'mynodename'; });
+       (end code)
+    */
+    anySubnode: function(node, cond, flags) {
+      var flag = false;
+      cond = cond || $.lambda(true);
+      var c = $.type(cond) == 'string'? function(n) { return n[cond]; } : cond;
+      this.eachSubnode(node, function(elem) {
+        if(c(elem)) flag = true;
+      }, flags);
+      return flag;
+    },
+  
+    /*
+       Method: getSubnodes
+    
+       Collects all subnodes for a specified node. 
+       The *level* parameter filters nodes having relative depth of *level* from the root node. 
+       
+       Also implemented by:
+       
+       <Graph.Node>.
+
+       Parameters:
+       node - (object) A <Graph.Node>.
+       level - (optional|number) Default's *0*. A starting relative depth for collecting nodes.
+
+       Returns:
+       An array of nodes.
+
+    */
+    getSubnodes: function(node, level, flags) {
+        var ans = [], that = this;
+        level = level || 0;
+        var levelStart, levelEnd;
+        if($.type(level) == 'array') {
+            levelStart = level[0];
+            levelEnd = level[1];
+        } else {
+            levelStart = level;
+            levelEnd = Number.MAX_VALUE - node._depth;
+        }
+        this.eachLevel(node, levelStart, levelEnd, function(n) {
+            ans.push(n);
+        }, flags);
+        return ans;
+    },
+  
+  
+    /*
+       Method: getParents
+    
+       Returns an Array of <Graph.Nodes> which are parents of the given node.
+       
+       Also implemented by:
+       
+       <Graph.Node>.
+
+       Parameters:
+       node - (object) A <Graph.Node>.
+
+       Returns:
+       An Array of <Graph.Nodes>.
+
+       Example:
+       (start code js)
+         var pars = $jit.Graph.Util.getParents(node);
+         //or...
+         var pars = node.getParents();
+         
+         if(pars.length > 0) {
+           //do stuff with parents
+         }
+       (end code)
+    */
+    getParents: function(node) {
+        var ans = [];
+        this.eachAdjacency(node, function(adj) {
+            var n = adj.nodeTo;
+            if(n._depth < node._depth) ans.push(n);
+        });
+        return ans;
+    },
+    
+    /*
+    Method: isDescendantOf
+ 
+    Returns a boolean indicating if some node is descendant of the node with the given id. 
+
+    Also implemented by:
+    
+    <Graph.Node>.
+    
+    
+    Parameters:
+    node - (object) A <Graph.Node>.
+    id - (string) A <Graph.Node> id.
+
+    Example:
+    (start code js)
+      $jit.Graph.Util.isDescendantOf(node, "nodeid"); //true|false
+      //or...
+      node.isDescendantOf('nodeid');//true|false
+    (end code)
+ */
+ isDescendantOf: function(node, id) {
+    if(node.id == id) return true;
+    var pars = this.getParents(node), ans = false;
+    for ( var i = 0; !ans && i < pars.length; i++) {
+    ans = ans || this.isDescendantOf(pars[i], id);
+  }
+    return ans;
+ },
+
+ /*
+     Method: clean
+  
+     Cleans flags from nodes.
+
+     Also implemented by:
+     
+     <Graph>.
+     
+     Parameters:
+     graph - A <Graph> instance.
+  */
+  clean: function(graph) { this.eachNode(graph, function(elem) { elem._flag = false; }); },
+  
+  /* 
+    Method: getClosestNodeToOrigin 
+  
+    Returns the closest node to the center of canvas.
+  
+    Also implemented by:
+    
+    <Graph>.
+    
+    Parameters:
+   
+     graph - (object) A <Graph> instance.
+     prop - (optional|string) Default's 'current'. A <Graph.Node> position property. Possible properties are 'start', 'current' or 'end'.
+  
+  */
+  getClosestNodeToOrigin: function(graph, prop, flags) {
+   return this.getClosestNodeToPos(graph, Polar.KER, prop, flags);
+  },
+  
+  /* 
+    Method: getClosestNodeToPos
+  
+    Returns the closest node to the given position.
+  
+    Also implemented by:
+    
+    <Graph>.
+    
+    Parameters:
+   
+     graph - (object) A <Graph> instance.
+     pos - (object) A <Complex> or <Polar> instance.
+     prop - (optional|string) Default's *current*. A <Graph.Node> position property. Possible properties are 'start', 'current' or 'end'.
+  
+  */
+  getClosestNodeToPos: function(graph, pos, prop, flags) {
+   var node = null;
+   prop = prop || 'current';
+   pos = pos && pos.getc(true) || Complex.KER;
+   var distance = function(a, b) {
+     var d1 = a.x - b.x, d2 = a.y - b.y;
+     return d1 * d1 + d2 * d2;
+   };
+   this.eachNode(graph, function(elem) {
+     node = (node == null || distance(elem.getPos(prop).getc(true), pos) < distance(
+         node.getPos(prop).getc(true), pos)) ? elem : node;
+   }, flags);
+   return node;
+  } 
+};
+
+//Append graph methods to <Graph>
+$.each(['get', 'getNode', 'each', 'eachNode', 'computeLevels', 'eachBFS', 'clean', 'getClosestNodeToPos', 'getClosestNodeToOrigin'], function(m) {
+  Graph.prototype[m] = function() {
+    return Graph.Util[m].apply(Graph.Util, [this].concat(Array.prototype.slice.call(arguments)));
+  };
+});
+
+//Append node methods to <Graph.Node>
+$.each(['eachAdjacency', 'eachLevel', 'eachSubgraph', 'eachSubnode', 'anySubnode', 'getSubnodes', 'getParents', 'isDescendantOf'], function(m) {
+  Graph.Node.prototype[m] = function() {
+    return Graph.Util[m].apply(Graph.Util, [this].concat(Array.prototype.slice.call(arguments)));
+  };
+});
+
+/*
+ * File: Graph.Op.js
+ *
+*/
+
+/*
+   Object: Graph.Op
+
+   Perform <Graph> operations like adding/removing <Graph.Nodes> or <Graph.Adjacences>, 
+   morphing a <Graph> into another <Graph>, contracting or expanding subtrees, etc.
+
+*/
+Graph.Op = {
+
+    options: {
+      type: 'nothing',
+      duration: 2000,
+      hideLabels: true,
+      fps:30
+    },
+    
+    initialize: function(viz) {
+      this.viz = viz;
+    },
+
+    /*
+       Method: removeNode
+    
+       Removes one or more <Graph.Nodes> from the visualization. 
+       It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.
+
+       Parameters:
+    
+        node - (string|array) The node's id. Can also be an array having many ids.
+        opt - (object) Animation options. It's an object with optional properties described below
+        type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq",  "fade:con" or "iter".
+        duration - Described in <Options.Fx>.
+        fps - Described in <Options.Fx>.
+        transition - Described in <Options.Fx>.
+        hideLabels - (boolean) Default's *true*. Hide labels during the animation.
+   
+      Example:
+      (start code js)
+        var viz = new $jit.Viz(options);
+        viz.op.removeNode('nodeId', {
+          type: 'fade:seq',
+          duration: 1000,
+          hideLabels: false,
+          transition: $jit.Trans.Quart.easeOut
+        });
+        //or also
+        viz.op.removeNode(['someId', 'otherId'], {
+          type: 'fade:con',
+          duration: 1500
+        });
+      (end code)
+    */
+  
+    removeNode: function(node, opt) {
+        var viz = this.viz;
+        var options = $.merge(this.options, viz.controller, opt);
+        var n = $.splat(node);
+        var i, that, nodeObj;
+        switch(options.type) {
+            case 'nothing':
+                for(i=0; i<n.length; i++) {
+                    options.onBeforeRemoveNode(viz.graph.getNode(n[i]));
+                    viz.graph.removeNode(n[i]);
+                }
+                break;
+            
+            case 'replot':
+                this.removeNode(n, { type: 'nothing' });
+                viz.labels.clearLabels();
+                viz.refresh(true);
+                break;
+            
+            case 'fade:seq': case 'fade':
+                that = this;
+                //set alpha to 0 for nodes to remove.
+                for(i=0; i<n.length; i++) {
+                    nodeObj = viz.graph.getNode(n[i]);
+                    nodeObj.setData('alpha', 0, 'end');
+                }
+                viz.fx.animate($.merge(options, {
+                    modes: ['node-property:alpha'],
+                    onComplete: function() {
+                        that.removeNode(n, { type: 'nothing' });
+                        viz.labels.clearLabels();
+                        viz.reposition();
+                        viz.fx.animate($.merge(options, {
+                            modes: ['linear']
+                        }));
+                    }
+                }));
+                break;
+            
+            case 'fade:con':
+                that = this;
+                //set alpha to 0 for nodes to remove. Tag them for being ignored on computing positions.
+                for(i=0; i<n.length; i++) {
+                    nodeObj = viz.graph.getNode(n[i]);
+                    nodeObj.setData('alpha', 0, 'end');
+                    nodeObj.ignore = true;
+                }
+                viz.reposition();
+                viz.fx.animate($.merge(options, {
+                    modes: ['node-property:alpha', 'linear'],
+                    onComplete: function() {
+                        that.removeNode(n, { type: 'nothing' });
+                        options.onComplete && options.onComplete();
+                    }
+                }));
+                break;
+            
+            case 'iter':
+                that = this;
+                viz.fx.sequence({
+                    condition: function() { return n.length != 0; },
+                    step: function() { that.removeNode(n.shift(), { type: 'nothing' });  viz.labels.clearLabels(); },
+                    onComplete: function() { options.onComplete && options.onComplete(); },
+                    duration: Math.ceil(options.duration / n.length)
+                });
+                break;
+                
+            default: this.doError();
+        }
+    },
+    
+    /*
+       Method: removeEdge
+    
+       Removes one or more <Graph.Adjacences> from the visualization. 
+       It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.
+
+       Parameters:
+    
+       vertex - (array) An array having two strings which are the ids of the nodes connected by this edge (i.e ['id1', 'id2']). Can also be a two dimensional array holding many edges (i.e [['id1', 'id2'], ['id3', 'id4'], ...]).
+       opt - (object) Animation options. It's an object with optional properties described below
+       type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq",  "fade:con" or "iter".
+       duration - Described in <Options.Fx>.
+       fps - Described in <Options.Fx>.
+       transition - Described in <Options.Fx>.
+       hideLabels - (boolean) Default's *true*. Hide labels during the animation.
+   
+      Example:
+      (start code js)
+        var viz = new $jit.Viz(options);
+        viz.op.removeEdge(['nodeId', 'otherId'], {
+          type: 'fade:seq',
+          duration: 1000,
+          hideLabels: false,
+          transition: $jit.Trans.Quart.easeOut
+        });
+        //or also
+        viz.op.removeEdge([['someId', 'otherId'], ['id3', 'id4']], {
+          type: 'fade:con',
+          duration: 1500
+        });
+      (end code)
+    
+    */
+    removeEdge: function(vertex, opt) {
+        var viz = this.viz;
+        var options = $.merge(this.options, viz.controller, opt);
+        var v = ($.type(vertex[0]) == 'string')? [vertex] : vertex;
+        var i, that, adj;
+        switch(options.type) {
+            case 'nothing':
+                for(i=0; i<v.length; i++)   viz.graph.removeAdjacence(v[i][0], v[i][1]);
+                break;
+            
+            case 'replot':
+                this.removeEdge(v, { type: 'nothing' });
+                viz.refresh(true);
+                break;
+            
+            case 'fade:seq': case 'fade':
+                that = this;
+                //set alpha to 0 for edges to remove.
+                for(i=0; i<v.length; i++) {
+                    adj = viz.graph.getAdjacence(v[i][0], v[i][1]);
+                    if(adj) {
+                        adj.setData('alpha', 0,'end');
+                    }
+                }
+                viz.fx.animate($.merge(options, {
+                    modes: ['edge-property:alpha'],
+                    onComplete: function() {
+                        that.removeEdge(v, { type: 'nothing' });
+                        viz.reposition();
+                        viz.fx.animate($.merge(options, {
+                            modes: ['linear']
+                        }));
+                    }
+                }));
+                break;
+            
+            case 'fade:con':
+                that = this;
+                //set alpha to 0 for nodes to remove. Tag them for being ignored when computing positions.
+                for(i=0; i<v.length; i++) {
+                    adj = viz.graph.getAdjacence(v[i][0], v[i][1]);
+                    if(adj) {
+                        adj.setData('alpha',0 ,'end');
+                        adj.ignore = true;
+                    }
+                }
+                viz.reposition();
+                viz.fx.animate($.merge(options, {
+                    modes: ['edge-property:alpha', 'linear'],
+                    onComplete: function() {
+                        that.removeEdge(v, { type: 'nothing' });
+                        options.onComplete && options.onComplete();
+                    }
+                }));
+                break;
+            
+            case 'iter':
+                that = this;
+                viz.fx.sequence({
+                    condition: function() { return v.length != 0; },
+                    step: function() { that.removeEdge(v.shift(), { type: 'nothing' }); viz.labels.clearLabels(); },
+                    onComplete: function() { options.onComplete(); },
+                    duration: Math.ceil(options.duration / v.length)
+                });
+                break;
+                
+            default: this.doError();
+        }
+    },
+    
+    /*
+       Method: sum
+    
+       Adds a new graph to the visualization. 
+       The JSON graph (or tree) must at least have a common node with the current graph plotted by the visualization. 
+       The resulting graph can be defined as follows <http://mathworld.wolfram.com/GraphSum.html>
+
+       Parameters:
+    
+       json - (object) A json tree or graph structure. See also <Loader.loadJSON>.
+       opt - (object) Animation options. It's an object with optional properties described below
+       type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq",  "fade:con".
+       duration - Described in <Options.Fx>.
+       fps - Described in <Options.Fx>.
+       transition - Described in <Options.Fx>.
+       hideLabels - (boolean) Default's *true*. Hide labels during the animation.
+   
+      Example:
+      (start code js)
+        //...json contains a tree or graph structure...
+
+        var viz = new $jit.Viz(options);
+        viz.op.sum(json, {
+          type: 'fade:seq',
+          duration: 1000,
+          hideLabels: false,
+          transition: $jit.Trans.Quart.easeOut
+        });
+        //or also
+        viz.op.sum(json, {
+          type: 'fade:con',
+          duration: 1500
+        });
+      (end code)
+    
+    */
+    sum: function(json, opt) {
+        var viz = this.viz;
+        var options = $.merge(this.options, viz.controller, opt), root = viz.root;
+        var graph;
+        viz.root = opt.id || viz.root;
+        switch(options.type) {
+            case 'nothing':
+                graph = viz.construct(json);
+                graph.eachNode(function(elem) {
+                    elem.eachAdjacency(function(adj) {
+                        viz.graph.addAdjacence(adj.nodeFrom, adj.nodeTo, adj.data);
+                    });
+                });
+                break;
+            
+            case 'replot':
+                viz.refresh(true);
+                this.sum(json, { type: 'nothing' });
+                viz.refresh(true);
+                break;
+            
+            case 'fade:seq': case 'fade': case 'fade:con':
+                that = this;
+                graph = viz.construct(json);
+
+                //set alpha to 0 for nodes to add.
+                var fadeEdges = this.preprocessSum(graph);
+                var modes = !fadeEdges? ['node-property:alpha'] : ['node-property:alpha', 'edge-property:alpha'];
+                viz.reposition();
+                if(options.type != 'fade:con') {
+                    viz.fx.animate($.merge(options, {
+                        modes: ['linear'],
+                        onComplete: function() {
+                            viz.fx.animate($.merge(options, {
+                                modes: modes,
+                                onComplete: function() {
+                                    options.onComplete();
+                                }
+                            }));
+                        }
+                    }));
+                } else {
+                    viz.graph.eachNode(function(elem) {
+                        if (elem.id != root && elem.pos.isZero()) {
+                          elem.pos.set(elem.endPos); 
+                          elem.startPos.set(elem.endPos);
+                        }
+                    });
+                    viz.fx.animate($.merge(options, {
+                        modes: ['linear'].concat(modes)
+                    }));
+                }
+                break;
+
+            default: this.doError();
+        }
+    },
+    
+    /*
+       Method: morph
+    
+       This method will transform the current visualized graph into the new JSON representation passed in the method. 
+       The JSON object must at least have the root node in common with the current visualized graph.
+
+       Parameters:
+    
+       json - (object) A json tree or graph structure. See also <Loader.loadJSON>.
+       opt - (object) Animation options. It's an object with optional properties described below
+       type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:con".
+       duration - Described in <Options.Fx>.
+       fps - Described in <Options.Fx>.
+       transition - Described in <Options.Fx>.
+       hideLabels - (boolean) Default's *true*. Hide labels during the animation.
+       id - (string) The shared <Graph.Node> id between both graphs.
+       
+       extraModes - (optional|object) When morphing with an animation, dollar prefixed data parameters are added to 
+                    *endData* and not *data* itself. This way you can animate dollar prefixed parameters during your morphing operation. 
+                    For animating these extra-parameters you have to specify an object that has animation groups as keys and animation 
+                    properties as values, just like specified in <Graph.Plot.animate>.
+   
+      Example:
+      (start code js)
+        //...json contains a tree or graph structure...
+
+        var viz = new $jit.Viz(options);
+        viz.op.morph(json, {
+          type: 'fade',
+          duration: 1000,
+          hideLabels: false,
+          transition: $jit.Trans.Quart.easeOut
+        });
+        //or also
+        viz.op.morph(json, {
+          type: 'fade',
+          duration: 1500
+        });
+        //if the json data contains dollar prefixed params
+        //like $width or $height these too can be animated
+        viz.op.morph(json, {
+          type: 'fade',
+          duration: 1500
+        }, {
+          'node-property': ['width', 'height']
+        });
+      (end code)
+    
+    */
+    morph: function(json, opt, extraModes) {
+        extraModes = extraModes || {};
+        var viz = this.viz;
+        var options = $.merge(this.options, viz.controller, opt), root = viz.root;
+        var graph;
+        //TODO(nico) this hack makes morphing work with the Hypertree. 
+        //Need to check if it has been solved and this can be removed.
+        viz.root = opt.id || viz.root;
+        switch(options.type) {
+            case 'nothing':
+                graph = viz.construct(json);
+                graph.eachNode(function(elem) {
+                  var nodeExists = viz.graph.hasNode(elem.id);  
+                  elem.eachAdjacency(function(adj) {
+                    var adjExists = !!viz.graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
+                    viz.graph.addAdjacence(adj.nodeFrom, adj.nodeTo, adj.data);
+                    //Update data properties if the node existed
+                    if(adjExists) {
+                      var addedAdj = viz.graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
+                      for(var prop in (adj.data || {})) {
+                        addedAdj.data[prop] = adj.data[prop];
+                      }
+                    }
+                  });
+                  //Update data properties if the node existed
+                  if(nodeExists) {
+                    var addedNode = viz.graph.getNode(elem.id);
+                    for(var prop in (elem.data || {})) {
+                      addedNode.data[prop] = elem.data[prop];
+                    }
+                  }
+                });
+                viz.graph.eachNode(function(elem) {
+                    elem.eachAdjacency(function(adj) {
+                        if(!graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id)) {
+                            viz.graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
+                        }
+                    });
+                    if(!graph.hasNode(elem.id)) viz.graph.removeNode(elem.id);
+                });
+                
+                break;
+            
+            case 'replot':
+                viz.labels.clearLabels(true);
+                this.morph(json, { type: 'nothing' });
+                viz.refresh(true);
+                viz.refresh(true);
+                break;
+                
+            case 'fade:seq': case 'fade': case 'fade:con':
+                that = this;
+                graph = viz.construct(json);
+                //preprocessing for nodes to delete.
+                //get node property modes to interpolate
+                var nodeModes = ('node-property' in extraModes) 
+                  && $.map($.splat(extraModes['node-property']), 
+                      function(n) { return '$' + n; });
+                viz.graph.eachNode(function(elem) {
+                  var graphNode = graph.getNode(elem.id);   
+                  if(!graphNode) {
+                      elem.setData('alpha', 1);
+                      elem.setData('alpha', 1, 'start');
+                      elem.setData('alpha', 0, 'end');
+                      elem.ignore = true;
+                    } else {
+                      //Update node data information
+                      var graphNodeData = graphNode.data;
+                      for(var prop in graphNodeData) {
+                        if(nodeModes && ($.indexOf(nodeModes, prop) > -1)) {
+                          elem.endData[prop] = graphNodeData[prop];
+                        } else {
+                          elem.data[prop] = graphNodeData[prop];
+                        }
+                      }
+                    }
+                }); 
+                viz.graph.eachNode(function(elem) {
+                    if(elem.ignore) return;
+                    elem.eachAdjacency(function(adj) {
+                        if(adj.nodeFrom.ignore || adj.nodeTo.ignore) return;
+                        var nodeFrom = graph.getNode(adj.nodeFrom.id);
+                        var nodeTo = graph.getNode(adj.nodeTo.id);
+                        if(!nodeFrom.adjacentTo(nodeTo)) {
+                            var adj = viz.graph.getAdjacence(nodeFrom.id, nodeTo.id);
+                            fadeEdges = true;
+                            adj.setData('alpha', 1);
+                            adj.setData('alpha', 1, 'start');
+                            adj.setData('alpha', 0, 'end');
+                            adj._hiding = true;
+                        } else if (adj.data.$direction && adj.data.$direction[0] === nodeFrom.id) {
+                            // only check one direction (from -> to)
+                            if (!nodeFrom.adjacentWithDirectionTo(nodeTo)) {
+                                adj._reversing = true;
+                            }
+                        }
+                    });
+                }); 
+                //preprocessing for adding nodes.
+                var fadeEdges = this.preprocessSum(graph);
+
+                var modes = !fadeEdges? ['node-property:alpha'] : 
+                                        ['node-property:alpha', 
+                                         'edge-property:alpha'];
+                //Append extra node-property animations (if any)
+                modes[0] = modes[0] + (('node-property' in extraModes)? 
+                    (':' + $.splat(extraModes['node-property']).join(':')) : '');
+                //Append extra edge-property animations (if any)
+                modes[1] = (modes[1] || 'edge-property:alpha') + (('edge-property' in extraModes)? 
+                    (':' + $.splat(extraModes['edge-property']).join(':')) : '');
+                //Add label-property animations (if any)
+                if('label-property' in extraModes) {
+                  modes.push('label-property:' + $.splat(extraModes['label-property']).join(':'))
+                }
+                //only use reposition if its implemented.
+                if (viz.reposition) {
+                  viz.reposition();
+                } else {
+                  viz.compute('end');
+                }
+                this._updateDirectedEdges();
+
+                viz.graph.eachNode(function(elem) {
+                    if (elem.id != root && elem.pos.getp().equals(Polar.KER)) {
+                      elem.pos.set(elem.endPos); elem.startPos.set(elem.endPos);
+                    }
+                });
+                viz.fx.animate($.merge(options, {
+                    modes: [extraModes.position || 'polar'].concat(modes),
+                    onComplete: function() {
+                        viz.graph.eachNode(function(elem) {
+                            if(elem.ignore) viz.graph.removeNode(elem.id);
+                        });
+                        viz.graph.eachNode(function(elem) {
+                            elem.eachAdjacency(function(adj) {
+                                if(adj.ignore) viz.graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
+                            });
+                        });
+                        options.onComplete();
+                    }
+                }));
+                break;
+
+            default:;
+        }
+    },
+
+    _updateDirectedEdges: function () {
+        var graph = this.viz.graph;
+        graph.eachNode(function(node) {
+            node.eachAdjacency(function (adj) {
+
+                var isDirectedEdge = adj.data.$direction;
+                if (isDirectedEdge && adj.nodeFrom.id !== adj.data.$direction[0]) {
+                    return;
+                }
+
+                if (adj._hiding) {
+                    graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
+                }
+
+                if (adj._reversing) {
+                    var from = adj.nodeFrom.id;
+                    var to = adj.nodeTo.id;
+//
+//                    // swap instead of adding and removing
+                    var edge1 = graph.edges[from][to];
+                    var edge2 = graph.edges[to][from];
+
+                    edge1.data.$direction = [to, from];
+                    edge2.data.$direction = [to, from];
+
+                    adj._reversing = undefined;
+                }
+            });
+        });
+    },
+    
+  /*
+    Method: contract
+ 
+    Collapses the subtree of the given node. The node will have a _collapsed=true_ property.
+    
+    Parameters:
+ 
+    node - (object) A <Graph.Node>.
+    opt - (object) An object containing options described below
+    type - (string) Whether to 'replot' or 'animate' the contraction.
+   
+    There are also a number of Animation options. For more information see <Options.Fx>.
+
+    Example:
+    (start code js)
+     var viz = new $jit.Viz(options);
+     viz.op.contract(node, {
+       type: 'animate',
+       duration: 1000,
+       hideLabels: true,
+       transition: $jit.Trans.Quart.easeOut
+     });
+   (end code)
+ 
+   */
+    contract: function(node, opt) {
+      var viz = this.viz;
+      if(node.collapsed || !node.anySubnode($.lambda(true))) return;
+      opt = $.merge(this.options, viz.config, opt || {}, {
+        'modes': ['node-property:alpha:span', 'linear']
+      });
+      node.collapsed = true;
+      (function subn(n) {
+        n.eachSubnode(function(ch) {
+          ch.ignore = true;
+          ch.setData('alpha', 0, opt.type == 'animate'? 'end' : 'current');
+          subn(ch);
+        });
+      })(node);
+      if(opt.type == 'animate') {
+        viz.compute('end');
+        if(viz.rotated) {
+          viz.rotate(viz.rotated, 'none', {
+            'property':'end'
+          });
+        }
+        (function subn(n) {
+          n.eachSubnode(function(ch) {
+            ch.setPos(node.getPos('end'), 'end');
+            subn(ch);
+          });
+        })(node);
+        viz.fx.animate(opt);
+      } else if(opt.type == 'replot'){
+        viz.refresh();
+      }
+    },
+    
+    /*
+    Method: expand
+ 
+    Expands the previously contracted subtree. The given node must have the _collapsed=true_ property.
+    
+    Parameters:
+ 
+    node - (object) A <Graph.Node>.
+    opt - (object) An object containing options described below
+    type - (string) Whether to 'replot' or 'animate'.
+     
+    There are also a number of Animation options. For more information see <Options.Fx>.
+
+    Example:
+    (start code js)
+      var viz = new $jit.Viz(options);
+      viz.op.expand(node, {
+        type: 'animate',
+        duration: 1000,
+        hideLabels: true,
+        transition: $jit.Trans.Quart.easeOut
+      });
+    (end code)
+ 
+   */
+    expand: function(node, opt) {
+      if(!('collapsed' in node)) return;
+      var viz = this.viz;
+      opt = $.merge(this.options, viz.config, opt || {}, {
+        'modes': ['node-property:alpha:span', 'linear']
+      });
+      delete node.collapsed;
+      (function subn(n) {
+        n.eachSubnode(function(ch) {
+          delete ch.ignore;
+          ch.setData('alpha', 1, opt.type == 'animate'? 'end' : 'current');
+          subn(ch);
+        });
+      })(node);
+      if(opt.type == 'animate') {
+        viz.compute('end');
+        if(viz.rotated) {
+          viz.rotate(viz.rotated, 'none', {
+            'property':'end'
+          });
+        }
+        viz.fx.animate(opt);
+      } else if(opt.type == 'replot'){
+        viz.refresh();
+      }
+    },
+
+    preprocessSum: function(graph) {
+        var viz = this.viz;
+        graph.eachNode(function(elem) {
+            if(!viz.graph.hasNode(elem.id)) {
+                viz.graph.addNode(elem);
+                var n = viz.graph.getNode(elem.id);
+                n.setData('alpha', 0);
+                n.setData('alpha', 0, 'start');
+                n.setData('alpha', 1, 'end');
+            }
+        }); 
+        var fadeEdges = false;
+        graph.eachNode(function(elem) {
+            elem.eachAdjacency(function(adj) {
+                var nodeFrom = viz.graph.getNode(adj.nodeFrom.id);
+                var nodeTo = viz.graph.getNode(adj.nodeTo.id);
+                if(!nodeFrom.adjacentTo(nodeTo)) {
+                    var adj = viz.graph.addAdjacence(nodeFrom, nodeTo, adj.data);
+                    if(nodeFrom.startAlpha == nodeFrom.endAlpha 
+                    && nodeTo.startAlpha == nodeTo.endAlpha) {
+                        fadeEdges = true;
+                        adj.setData('alpha', 0);
+                        adj.setData('alpha', 0, 'start');
+                        adj.setData('alpha', 1, 'end');
+                    } 
+                }
+            });
+        }); 
+        return fadeEdges;
+    }
+};
+
+
+
+/*
+ File: Helpers.js
+
+ Helpers are objects that contain rendering primitives (like rectangles, ellipses, etc), for plotting nodes and edges.
+ Helpers also contain implementations of the *contains* method, a method returning a boolean indicating whether the mouse
+ position is over the rendered shape.
+
+ Helpers are very useful when implementing new NodeTypes, since you can access them through *this.nodeHelper* and
+ *this.edgeHelper* <Graph.Plot> properties, providing you with simple primitives and mouse-position check functions.
+
+ Example:
+ (start code js)
+ //implement a new node type
+ $jit.Viz.Plot.NodeTypes.implement({
+ 'customNodeType': {
+ 'render': function(node, canvas) {
+ this.nodeHelper.circle.render ...
+ },
+ 'contains': function(node, pos) {
+ this.nodeHelper.circle.contains ...
+ }
+ }
+ });
+ //implement an edge type
+ $jit.Viz.Plot.EdgeTypes.implement({
+ 'customNodeType': {
+ 'render': function(node, canvas) {
+ this.edgeHelper.circle.render ...
+ },
+ //optional
+ 'contains': function(node, pos) {
+ this.edgeHelper.circle.contains ...
+ }
+ }
+ });
+ (end code)
+
+ */
+
+/*
+ Object: NodeHelper
+
+ Contains rendering and other type of primitives for simple shapes.
+ */
+var NodeHelper = {
+    'none': {
+        'render': $.empty,
+        'contains': $.lambda(false)
+    },
+    /*
+     Object: NodeHelper.circle
+     */
+    'circle': {
+        /*
+         Method: render
+
+         Renders a circle into the canvas.
+
+         Parameters:
+
+         type - (string) Possible options are 'fill' or 'stroke'.
+         pos - (object) An *x*, *y* object with the position of the center of the circle.
+         radius - (number) The radius of the circle to be rendered.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         NodeHelper.circle.render('fill', { x: 10, y: 30 }, 30, viz.canvas);
+         (end code)
+         */
+        'render': function(type, pos, radius, canvas){
+            var ctx = canvas.getCtx();
+            ctx.beginPath();
+            ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2, true);
+            ctx.closePath();
+            ctx[type]();
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         npos - (object) An *x*, *y* object with the <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         radius - (number) The radius of the rendered circle.
+
+         Example:
+         (start code js)
+         NodeHelper.circle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30); //true
+         (end code)
+         */
+        'contains': function(npos, pos, radius){
+            var diffx = npos.x - pos.x,
+                diffy = npos.y - pos.y,
+                diff = diffx * diffx + diffy * diffy;
+            return diff <= radius * radius;
+        }
+    },
+    /*
+     Object: NodeHelper.ellipse
+     */
+    'ellipse': {
+        /*
+         Method: render
+
+         Renders an ellipse into the canvas.
+
+         Parameters:
+
+         type - (string) Possible options are 'fill' or 'stroke'.
+         pos - (object) An *x*, *y* object with the position of the center of the ellipse.
+         width - (number) The width of the ellipse.
+         height - (number) The height of the ellipse.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         NodeHelper.ellipse.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas);
+         (end code)
+         */
+        'render': function(type, pos, width, height, canvas){
+            var ctx = canvas.getCtx(),
+                scalex = 1,
+                scaley = 1,
+                scaleposx = 1,
+                scaleposy = 1,
+                radius = 0;
+
+            if (width > height) {
+                radius = width / 2;
+                scaley = height / width;
+                scaleposy = width / height;
+            } else {
+                radius = height / 2;
+                scalex = width / height;
+                scaleposx = height / width;
+            }
+
+            ctx.save();
+            ctx.scale(scalex, scaley);
+            ctx.beginPath();
+            ctx.arc(pos.x * scaleposx, pos.y * scaleposy, radius, 0, Math.PI * 2, true);
+            ctx.closePath();
+            ctx[type]();
+            ctx.restore();
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         npos - (object) An *x*, *y* object with the <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         width - (number) The width of the rendered ellipse.
+         height - (number) The height of the rendered ellipse.
+
+         Example:
+         (start code js)
+         NodeHelper.ellipse.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40);
+         (end code)
+         */
+        'contains': function(npos, pos, width, height){
+            var radius = 0,
+                scalex = 1,
+                scaley = 1,
+                diffx = 0,
+                diffy = 0,
+                diff = 0;
+
+            if (width > height) {
+                radius = width / 2;
+                scaley = height / width;
+            } else {
+                radius = height / 2;
+                scalex = width / height;
+            }
+
+            diffx = (npos.x - pos.x) * (1 / scalex);
+            diffy = (npos.y - pos.y) * (1 / scaley);
+            diff = diffx * diffx + diffy * diffy;
+            return diff <= radius * radius;
+        }
+    },
+    /*
+     Object: NodeHelper.square
+     */
+    'square': {
+        /*
+         Method: render
+
+         Renders a square into the canvas.
+
+         Parameters:
+
+         type - (string) Possible options are 'fill' or 'stroke'.
+         pos - (object) An *x*, *y* object with the position of the center of the square.
+         dim - (number) The radius (or half-diameter) of the square.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         NodeHelper.square.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
+         (end code)
+         */
+        'render': function(type, pos, dim, canvas){
+            canvas.getCtx()[type + "Rect"](pos.x - dim, pos.y - dim, 2*dim, 2*dim);
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         npos - (object) An *x*, *y* object with the <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         dim - (number) The radius (or half-diameter) of the square.
+
+         Example:
+         (start code js)
+         NodeHelper.square.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
+         (end code)
+         */
+        'contains': function(npos, pos, dim){
+            return Math.abs(pos.x - npos.x) <= dim && Math.abs(pos.y - npos.y) <= dim;
+        }
+    },
+    /*
+     Object: NodeHelper.rectangle
+     */
+    'rectangle': {
+        /*
+         Method: render
+
+         Renders a rectangle into the canvas.
+
+         Parameters:
+
+         type - (string) Possible options are 'fill' or 'stroke'.
+         pos - (object) An *x*, *y* object with the position of the center of the rectangle.
+         width - (number) The width of the rectangle.
+         height - (number) The height of the rectangle.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         NodeHelper.rectangle.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas);
+         (end code)
+         */
+        'render': function(type, pos, width, height, canvas){
+            canvas.getCtx()[type + "Rect"](pos.x - width / 2, pos.y - height / 2,
+                width, height);
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         npos - (object) An *x*, *y* object with the <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         width - (number) The width of the rendered rectangle.
+         height - (number) The height of the rendered rectangle.
+
+         Example:
+         (start code js)
+         NodeHelper.rectangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40);
+         (end code)
+         */
+        'contains': function(npos, pos, width, height){
+            return Math.abs(pos.x - npos.x) <= width / 2
+                && Math.abs(pos.y - npos.y) <= height / 2;
+        }
+    },
+    /*
+     Object: NodeHelper.triangle
+     */
+    'triangle': {
+        /*
+         Method: render
+
+         Renders a triangle into the canvas.
+
+         Parameters:
+
+         type - (string) Possible options are 'fill' or 'stroke'.
+         pos - (object) An *x*, *y* object with the position of the center of the triangle.
+         dim - (number) Half the base and half the height of the triangle.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         NodeHelper.triangle.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
+         (end code)
+         */
+        'render': function(type, pos, dim, canvas){
+            var ctx = canvas.getCtx(),
+                c1x = pos.x,
+                c1y = pos.y - dim,
+                c2x = c1x - dim,
+                c2y = pos.y + dim,
+                c3x = c1x + dim,
+                c3y = c2y;
+            ctx.beginPath();
+            ctx.moveTo(c1x, c1y);
+            ctx.lineTo(c2x, c2y);
+            ctx.lineTo(c3x, c3y);
+            ctx.closePath();
+            ctx[type]();
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         npos - (object) An *x*, *y* object with the <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         dim - (number) Half the base and half the height of the triangle.
+
+         Example:
+         (start code js)
+         NodeHelper.triangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
+         (end code)
+         */
+        'contains': function(npos, pos, dim) {
+            return NodeHelper.circle.contains(npos, pos, dim);
+        }
+    },
+    /*
+     Object: NodeHelper.star
+     */
+    'star': {
+        /*
+         Method: render
+
+         Renders a star (concave decagon) into the canvas.
+
+         Parameters:
+
+         type - (string) Possible options are 'fill' or 'stroke'.
+         pos - (object) An *x*, *y* object with the position of the center of the star.
+         dim - (number) The length of a side of a concave decagon.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         NodeHelper.star.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
+         (end code)
+         */
+        'render': function(type, pos, dim, canvas){
+            var ctx = canvas.getCtx(),
+                pi5 = Math.PI / 5;
+            ctx.save();
+            ctx.translate(pos.x, pos.y);
+            ctx.beginPath();
+            ctx.moveTo(dim, 0);
+            for (var i = 0; i < 9; i++) {
+                ctx.rotate(pi5);
+                if (i % 2 == 0) {
+                    ctx.lineTo((dim / 0.525731) * 0.200811, 0);
+                } else {
+                    ctx.lineTo(dim, 0);
+                }
+            }
+            ctx.closePath();
+            ctx[type]();
+            ctx.restore();
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         npos - (object) An *x*, *y* object with the <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         dim - (number) The length of a side of a concave decagon.
+
+         Example:
+         (start code js)
+         NodeHelper.star.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
+         (end code)
+         */
+        'contains': function(npos, pos, dim) {
+            return NodeHelper.circle.contains(npos, pos, dim);
+        }
+    }
+};
+
+/*
+ Object: EdgeHelper
+
+ Contains rendering primitives for simple edge shapes.
+ */
+var EdgeHelper = {
+    /*
+     Object: EdgeHelper.line
+     */
+    'line': {
+        /*
+         Method: render
+
+         Renders a line into the canvas.
+
+         Parameters:
+
+         from - (object) An *x*, *y* object with the starting position of the line.
+         to - (object) An *x*, *y* object with the ending position of the line.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         EdgeHelper.line.render({ x: 10, y: 30 }, { x: 10, y: 50 }, viz.canvas);
+         (end code)
+         */
+        'render': function(from, to, canvas){
+            var ctx = canvas.getCtx();
+            ctx.beginPath();
+            ctx.moveTo(from.x, from.y);
+            ctx.lineTo(to.x, to.y);
+            ctx.stroke();
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         posFrom - (object) An *x*, *y* object with a <Graph.Node> position.
+         posTo - (object) An *x*, *y* object with a <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         epsilon - (number) The dimension of the shape.
+
+         Example:
+         (start code js)
+         EdgeHelper.line.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
+         (end code)
+         */
+        'contains': function(posFrom, posTo, pos, epsilon) {
+            var min = Math.min,
+                max = Math.max,
+                minPosX = min(posFrom.x, posTo.x) - epsilon,
+                maxPosX = max(posFrom.x, posTo.x) + epsilon,
+                minPosY = min(posFrom.y, posTo.y) - epsilon,
+                maxPosY = max(posFrom.y, posTo.y) + epsilon;
+
+            if(pos.x >= minPosX && pos.x <= maxPosX
+                && pos.y >= minPosY && pos.y <= maxPosY) {
+                if(Math.abs(posTo.x - posFrom.x) <= epsilon) {
+                    return true;
+                }
+                var dist = (posTo.y - posFrom.y) / (posTo.x - posFrom.x) * (pos.x - posFrom.x) + posFrom.y;
+                return Math.abs(dist - pos.y) <= epsilon;
+            }
+            return false;
+        }
+    },
+    /*
+     Object: EdgeHelper.arrow
+     */
+    'arrow': {
+        /*
+         Method: render
+
+         Renders an arrow into the canvas.
+
+         Parameters:
+
+         from - (object) An *x*, *y* object with the starting position of the arrow.
+         to - (object) An *x*, *y* object with the ending position of the arrow.
+         dim - (number) The dimension of the arrow.
+         swap - (boolean) Whether to set the arrow pointing to the starting position or the ending position.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         EdgeHelper.arrow.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 13, false, viz.canvas);
+         (end code)
+         */
+        'render': function(from, to, dim, swap, canvas, arrowPosition){
+            var ctx = canvas.getCtx();
+            // invert edge direction
+            if (swap) {
+                var tmp = from;
+                from = to;
+                to = tmp;
+            }
+            var vect = new Complex(to.x - from.x, to.y - from.y);
+            vect.$scale(dim / vect.norm());
+            var posVect;
+            switch (arrowPosition) {
+                case 'end':    posVect = vect; break;
+                case 'center': posVect = new Complex((to.x - from.x)/2, (to.y - from.y)/2); break;
+            }
+            var intermediatePoint = new Complex(to.x - posVect.x, to.y - posVect.y),
+                normal = new Complex(-vect.y / 2, vect.x / 2),
+                endPoint = intermediatePoint.add(vect),
+                v1 = intermediatePoint.add(normal),
+                v2 = intermediatePoint.$add(normal.$scale(-1));
+
+            ctx.beginPath();
+            ctx.moveTo(from.x, from.y);
+            ctx.lineTo(to.x, to.y);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(v1.x, v1.y);
+            ctx.moveTo(v1.x, v1.y);
+            ctx.lineTo(v2.x, v2.y);
+            ctx.lineTo(endPoint.x, endPoint.y);
+            ctx.closePath();
+            ctx.fill();
+        },
+        /*
+         Method: contains
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         posFrom - (object) An *x*, *y* object with a <Graph.Node> position.
+         posTo - (object) An *x*, *y* object with a <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         epsilon - (number) The dimension of the shape.
+
+         Example:
+         (start code js)
+         EdgeHelper.arrow.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
+         (end code)
+         */
+        'contains': function(posFrom, posTo, pos, epsilon) {
+            return EdgeHelper.line.contains(posFrom, posTo, pos, epsilon);
+        }
+    },
+    /*
+     Object: EdgeHelper.hyperline
+     */
+    'hyperline': {
+        /*
+         Method: render
+
+         Renders a hyperline into the canvas. A hyperline are the lines drawn for the <Hypertree> visualization.
+
+         Parameters:
+
+         from - (object) An *x*, *y* object with the starting position of the hyperline. *x* and *y* must belong to [0, 1).
+         to - (object) An *x*, *y* object with the ending position of the hyperline. *x* and *y* must belong to [0, 1).
+         r - (number) The scaling factor.
+         canvas - (object) A <Canvas> instance.
+
+         Example:
+         (start code js)
+         EdgeHelper.hyperline.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 100, viz.canvas);
+         (end code)
+         */
+        'render': function(from, to, r, canvas){
+            var ctx = canvas.getCtx();
+            var centerOfCircle = computeArcThroughTwoPoints(from, to);
+            if (centerOfCircle.a > 1000 || centerOfCircle.b > 1000
+                || centerOfCircle.ratio < 0) {
+                ctx.beginPath();
+                ctx.moveTo(from.x * r, from.y * r);
+                ctx.lineTo(to.x * r, to.y * r);
+                ctx.stroke();
+            } else {
+                var angleBegin = Math.atan2(to.y - centerOfCircle.y, to.x
+                    - centerOfCircle.x);
+                var angleEnd = Math.atan2(from.y - centerOfCircle.y, from.x
+                    - centerOfCircle.x);
+                var sense = sense(angleBegin, angleEnd);
+                ctx.beginPath();
+                ctx.arc(centerOfCircle.x * r, centerOfCircle.y * r, centerOfCircle.ratio
+                    * r, angleBegin, angleEnd, sense);
+                ctx.stroke();
+            }
+            /*
+             Calculates the arc parameters through two points.
+
+             More information in <http://en.wikipedia.org/wiki/Poincar%C3%A9_disc_model#Analytic_geometry_constructions_in_the_hyperbolic_plane>
+
+             Parameters:
+
+             p1 - A <Complex> instance.
+             p2 - A <Complex> instance.
+             scale - The Disk's diameter.
+
+             Returns:
+
+             An object containing some arc properties.
+             */
+            function computeArcThroughTwoPoints(p1, p2){
+                var aDen = (p1.x * p2.y - p1.y * p2.x), bDen = aDen;
+                var sq1 = p1.squaredNorm(), sq2 = p2.squaredNorm();
+                // Fall back to a straight line
+                if (aDen == 0)
+                    return {
+                        x: 0,
+                        y: 0,
+                        ratio: -1
+                    };
+
+                var a = (p1.y * sq2 - p2.y * sq1 + p1.y - p2.y) / aDen;
+                var b = (p2.x * sq1 - p1.x * sq2 + p2.x - p1.x) / bDen;
+                var x = -a / 2;
+                var y = -b / 2;
+                var squaredRatio = (a * a + b * b) / 4 - 1;
+                // Fall back to a straight line
+                if (squaredRatio < 0)
+                    return {
+                        x: 0,
+                        y: 0,
+                        ratio: -1
+                    };
+                var ratio = Math.sqrt(squaredRatio);
+                var out = {
+                    x: x,
+                    y: y,
+                    ratio: ratio > 1000? -1 : ratio,
+                    a: a,
+                    b: b
+                };
+
+                return out;
+            }
+            /*
+             Sets angle direction to clockwise (true) or counterclockwise (false).
+
+             Parameters:
+
+             angleBegin - Starting angle for drawing the arc.
+             angleEnd - The HyperLine will be drawn from angleBegin to angleEnd.
+
+             Returns:
+
+             A Boolean instance describing the sense for drawing the HyperLine.
+             */
+            function sense(angleBegin, angleEnd){
+                return (angleBegin < angleEnd)? ((angleBegin + Math.PI > angleEnd)? false
+                    : true) : ((angleEnd + Math.PI > angleBegin)? true : false);
+            }
+        },
+        /*
+         Method: contains
+
+         Not Implemented
+
+         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
+
+         Parameters:
+
+         posFrom - (object) An *x*, *y* object with a <Graph.Node> position.
+         posTo - (object) An *x*, *y* object with a <Graph.Node> position.
+         pos - (object) An *x*, *y* object with the position to check.
+         epsilon - (number) The dimension of the shape.
+
+         Example:
+         (start code js)
+         EdgeHelper.hyperline.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
+         (end code)
+         */
+        'contains': $.lambda(false)
+    }
+};
+
+
+	/*
+ * File: Graph.Plot.js
+ */
+
+/*
+   Object: Graph.Plot
+
+   <Graph> rendering and animation methods.
+   
+   Properties:
+   
+   nodeHelper - <NodeHelper> object.
+   edgeHelper - <EdgeHelper> object.
+*/
+Graph.Plot = {
+    //Default initializer
+    initialize: function(viz, klass){
+      this.viz = viz;
+      this.config = viz.config;
+      this.node = viz.config.Node;
+      this.edge = viz.config.Edge;
+      this.animation = new Animation;
+      this.nodeTypes = new klass.Plot.NodeTypes;
+      this.edgeTypes = new klass.Plot.EdgeTypes;
+      this.labels = viz.labels;
+   },
+
+    //Add helpers
+    nodeHelper: NodeHelper,
+    edgeHelper: EdgeHelper,
+    
+    Interpolator: {
+        //node/edge property parsers
+        'map': {
+          'border': 'color',
+          'color': 'color',
+          'width': 'number',
+          'height': 'number',
+          'dim': 'number',
+          'alpha': 'number',
+          'lineWidth': 'number',
+          'angularWidth':'number',
+          'span':'number',
+          'valueArray':'array-number',
+          'dimArray':'array-number',
+          'vertices':'polygon'
+          //'colorArray':'array-color'
+        },
+
+        //canvas specific parsers
+        'canvas': {
+          'globalAlpha': 'number',
+          'fillStyle': 'color',
+          'strokeStyle': 'color',
+          'lineWidth': 'number',
+          'shadowBlur': 'number',
+          'shadowColor': 'color',
+          'shadowOffsetX': 'number',
+          'shadowOffsetY': 'number',
+          'miterLimit': 'number'
+        },
+
+        //label parsers
+        'label': {
+          'size': 'number',
+          'color': 'color'
+        },
+
+        //Number interpolator
+        'compute': function(from, to, delta) {
+          return from + (to - from) * delta;
+        },
+
+        //Position interpolators
+        'moebius': function(elem, props, delta, vector) {
+          var v = vector.scale(-delta);
+          if(v.norm() < 1) {
+              var x = v.x, y = v.y;
+              var ans = elem.startPos
+                .getc().moebiusTransformation(v);
+              elem.pos.setc(ans.x, ans.y);
+              v.x = x; v.y = y;
+            }
+        },
+
+        'linear': function(elem, props, delta) {
+            var from = elem.startPos.getc(true);
+            var to = elem.endPos.getc(true);
+            elem.pos.setc(this.compute(from.x, to.x, delta),
+                          this.compute(from.y, to.y, delta));
+        },
+
+        'polar': function(elem, props, delta) {
+          var from = elem.startPos.getp(true);
+          var to = elem.endPos.getp();
+          var ans = to.interpolate(from, delta);
+          elem.pos.setp(ans.theta, ans.rho);
+        },
+
+        //Graph's Node/Edge interpolators
+        'number': function(elem, prop, delta, getter, setter) {
+          var from = elem[getter](prop, 'start');
+          var to = elem[getter](prop, 'end');
+          elem[setter](prop, this.compute(from, to, delta));
+        },
+
+        'color': function(elem, prop, delta, getter, setter) {
+          var from = $.hexToRgb(elem[getter](prop, 'start'));
+          var to = $.hexToRgb(elem[getter](prop, 'end'));
+          var comp = this.compute;
+          var val = $.rgbToHex([parseInt(comp(from[0], to[0], delta)),
+                                parseInt(comp(from[1], to[1], delta)),
+                                parseInt(comp(from[2], to[2], delta))]);
+
+          elem[setter](prop, val);
+        },
+
+        'array-number': function(elem, prop, delta, getter, setter) {
+          var from = elem[getter](prop, 'start'),
+              to = elem[getter](prop, 'end'),
+              cur = [];
+          for(var i=0, l=from.length; i<l; i++) {
+            var fromi = from[i], toi = to[i];
+            if(fromi.length) {
+              for(var j=0, len=fromi.length, curi=[]; j<len; j++) {
+                curi.push(this.compute(fromi[j], toi[j], delta));
+              }
+              cur.push(curi);
+            } else {
+              cur.push(this.compute(fromi, toi, delta));
+            }
+          }
+          elem[setter](prop, cur);
+        },
+
+        'node': function(elem, props, delta, map, getter, setter) {
+          map = this[map];
+          if(props) {
+            var len = props.length;
+            for(var i=0; i<len; i++) {
+              var pi = props[i];
+              this[map[pi]](elem, pi, delta, getter, setter);
+            }
+          } else {
+            for(var pi in map) {
+              this[map[pi]](elem, pi, delta, getter, setter);
+            }
+          }
+        },
+
+        'edge': function(elem, props, delta, mapKey, getter, setter) {
+            var adjs = elem.adjacencies;
+            for(var id in adjs) this['node'](adjs[id], props, delta, mapKey, getter, setter);
+        },
+
+        'node-property': function(elem, props, delta) {
+          this['node'](elem, props, delta, 'map', 'getData', 'setData');
+        },
+
+        'edge-property': function(elem, props, delta) {
+          this['edge'](elem, props, delta, 'map', 'getData', 'setData');
+        },
+
+        'label-property': function(elem, props, delta) {
+          this['node'](elem, props, delta, 'label', 'getLabelData', 'setLabelData');
+        },
+
+        'node-style': function(elem, props, delta) {
+          this['node'](elem, props, delta, 'canvas', 'getCanvasStyle', 'setCanvasStyle');
+        },
+
+        'edge-style': function(elem, props, delta) {
+          this['edge'](elem, props, delta, 'canvas', 'getCanvasStyle', 'setCanvasStyle');
+        },
+
+        'polygon': function(elem, prop, delta, getter, setter) {
+          var from = elem[getter](prop, 'start'),
+              to = elem[getter](prop, 'end'),
+              cur = [];
+          if (typeof from.offset == 'undefined') {
+            if (from === 0) {
+              from = $.map(to, function() {
+                return new $jit.Complex(0, 0);
+              });
+              from.offset = 0;
+            }
+            else {
+              if (from.length == 0) {
+                from.push(new $jit.Complex(0, 0));
+              }
+              while (from.length < to.length) {
+                from.push(from[0]);
+              }
+              while (from.length > to.length) {
+                to.push(to[0] || new $jit.Complex(0, 0));
+              }
+              if (from.length == 0) return;
+              var l = from.length;
+              var minDist = 1e300;
+              for (var offset = 0; offset < l; offset ++) {
+                var d = 0;
+                for (var i = 0; i < l; i++) {
+                  d +=Geometry.dist2(from[(offset + i) % l], to[i]);
+                }
+                if (d < minDist) {
+                  from.offset = offset;
+                  minDist = d;
+                }
+              }
+            }
+          }
+
+          for (var i = 0, l = from.length; i < l; i++) {
+            var fromi = from[(i + from.offset) % l], toi = to[i];
+            cur.push(new $jit.Complex(
+                this.compute(fromi.x, toi.x, delta),
+                this.compute(fromi.y, toi.y, delta)
+            ));
+          }
+          elem[setter](prop, cur);
+        }
+    },
+    
+  
+    /*
+       sequence
+    
+       Iteratively performs an action while refreshing the state of the visualization.
+
+       Parameters:
+
+       options - (object) An object containing some sequence options described below
+       condition - (function) A function returning a boolean instance in order to stop iterations.
+       step - (function) A function to execute on each step of the iteration.
+       onComplete - (function) A function to execute when the sequence finishes.
+       duration - (number) Duration (in milliseconds) of each step.
+
+      Example:
+       (start code js)
+        var rg = new $jit.RGraph(options);
+        var i = 0;
+        rg.fx.sequence({
+          condition: function() {
+           return i == 10;
+          },
+          step: function() {
+            alert(i++);
+          },
+          onComplete: function() {
+           alert('done!');
+          }
+        });
+       (end code)
+
+    */
+    sequence: function(options) {
+        var that = this;
+        options = $.merge({
+          condition: $.lambda(false),
+          step: $.empty,
+          onComplete: $.empty,
+          duration: 200
+        }, options || {});
+
+        var interval = setInterval(function() {
+          if(options.condition()) {
+            options.step();
+          } else {
+            clearInterval(interval);
+            options.onComplete();
+          }
+          that.viz.refresh(true);
+        }, options.duration);
+    },
+    
+    /*
+      prepare
+ 
+      Prepare graph position and other attribute values before performing an Animation. 
+      This method is used internally by the Toolkit.
+      
+      See also:
+       
+       <Animation>, <Graph.Plot.animate>
+
+    */
+    prepare: function(modes) {
+      var graph = this.viz.graph,
+          accessors = {
+            'node-property': {
+              'getter': 'getData',
+              'setter': 'setData'
+            },
+            'edge-property': {
+              'getter': 'getData',
+              'setter': 'setData'
+            },
+            'node-style': {
+              'getter': 'getCanvasStyle',
+              'setter': 'setCanvasStyle'
+            },
+            'edge-style': {
+              'getter': 'getCanvasStyle',
+              'setter': 'setCanvasStyle'
+            }
+          };
+
+      //parse modes
+      var m = {};
+      if($.type(modes) == 'array') {
+        for(var i=0, len=modes.length; i < len; i++) {
+          var elems = modes[i].split(':');
+          m[elems.shift()] = elems;
+        }
+      } else {
+        for(var p in modes) {
+          if(p == 'position') {
+            m[modes.position] = [];
+          } else {
+            m[p] = $.splat(modes[p]);
+          }
+        }
+      }
+      
+      graph.eachNode(function(node) { 
+        node.startPos.set(node.pos);
+        $.each(['node-property', 'node-style'], function(p) {
+          if(p in m) {
+            var prop = m[p];
+            for(var i=0, l=prop.length; i < l; i++) {
+              node[accessors[p].setter](prop[i], node[accessors[p].getter](prop[i]), 'start');
+            }
+          }
+        });
+        $.each(['edge-property', 'edge-style'], function(p) {
+          if(p in m) {
+            var prop = m[p];
+            node.eachAdjacency(function(adj) {
+              for(var i=0, l=prop.length; i < l; i++) {
+                adj[accessors[p].setter](prop[i], adj[accessors[p].getter](prop[i]), 'start');
+              }
+            });
+          }
+        });
+      });
+      return m;
+    },
+    
+    /*
+       Method: animate
+    
+       Animates a <Graph> by interpolating some <Graph.Node>, <Graph.Adjacence> or <Graph.Label> properties.
+
+       Parameters:
+
+       opt - (object) Animation options. The object properties are described below
+       duration - (optional) Described in <Options.Fx>.
+       fps - (optional) Described in <Options.Fx>.
+       hideLabels - (optional|boolean) Whether to hide labels during the animation.
+       modes - (required|object) An object with animation modes (described below).
+
+       Animation modes:
+       
+       Animation modes are strings representing different node/edge and graph properties that you'd like to animate. 
+       They are represented by an object that has as keys main categories of properties to animate and as values a list 
+       of these specific properties. The properties are described below
+       
+       position - Describes the way nodes' positions must be interpolated. Possible values are 'linear', 'polar' or 'moebius'.
+       node-property - Describes which Node properties will be interpolated. These properties can be any of the ones defined in <Options.Node>.
+       edge-property - Describes which Edge properties will be interpolated. These properties can be any the ones defined in <Options.Edge>.
+       label-property - Describes which Label properties will be interpolated. These properties can be any of the ones defined in <Options.Label> like color or size.
+       node-style - Describes which Node Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc.
+       edge-style - Describes which Edge Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc.
+
+       Example:
+       (start code js)
+       var viz = new $jit.Viz(options);
+       //...tweak some Data, CanvasStyles or LabelData properties...
+       viz.fx.animate({
+         modes: {
+           'position': 'linear',
+           'node-property': ['width', 'height'],
+           'node-style': 'shadowColor',
+           'label-property': 'size'
+         },
+         hideLabels: false
+       });
+       //...can also be written like this...
+       viz.fx.animate({
+         modes: ['linear',
+                 'node-property:width:height',
+                 'node-style:shadowColor',
+                 'label-property:size'],
+         hideLabels: false
+       });
+       (end code)
+    */
+    animate: function(opt, versor) {
+      opt = $.merge(this.viz.config, opt || {});
+      var that = this,
+          viz = this.viz,
+          graph  = viz.graph,
+          interp = this.Interpolator,
+          animation =  opt.type === 'nodefx'? this.nodeFxAnimation : this.animation;
+      //prepare graph values
+      var m = this.prepare(opt.modes);
+      
+      //animate
+      if(opt.hideLabels) this.labels.hideLabels(true);
+      animation.setOptions($.extend(opt, {
+        $animating: false,
+        compute: function(delta) {
+          graph.eachNode(function(node) { 
+            for(var p in m) {
+              interp[p](node, m[p], delta, versor);
+            }
+          });
+          that.plot(opt, this.$animating, delta);
+          this.$animating = true;
+        },
+        complete: function() {
+          if(opt.hideLabels) that.labels.hideLabels(false);
+          that.plot(opt);
+          opt.onComplete();
+          //TODO(nico): This shouldn't be here!
+          //opt.onAfterCompute();
+        }       
+      })).start();
+    },
+    
+    /*
+      nodeFx
+   
+      Apply animation to node properties like color, width, height, dim, etc.
+  
+      Parameters:
+  
+      options - Animation options. This object properties is described below
+      elements - The Elements to be transformed. This is an object that has a properties
+      
+      (start code js)
+      'elements': {
+        //can also be an array of ids
+        'id': 'id-of-node-to-transform',
+        //properties to be modified. All properties are optional.
+        'properties': {
+          'color': '#ccc', //some color
+          'width': 10, //some width
+          'height': 10, //some height
+          'dim': 20, //some dim
+          'lineWidth': 10 //some line width
+        } 
+      }
+      (end code)
+      
+      - _reposition_ Whether to recalculate positions and add a motion animation. 
+      This might be used when changing _width_ or _height_ properties in a <Layouts.Tree> like layout. Default's *false*.
+      
+      - _onComplete_ A method that is called when the animation completes.
+      
+      ...and all other <Graph.Plot.animate> options like _duration_, _fps_, _transition_, etc.
+  
+      Example:
+      (start code js)
+       var rg = new RGraph(canvas, config); //can be also Hypertree or ST
+       rg.fx.nodeFx({
+         'elements': {
+           'id':'mynodeid',
+           'properties': {
+             'color':'#ccf'
+           },
+           'transition': Trans.Quart.easeOut
+         }
+       });
+      (end code)    
+   */
+   nodeFx: function(opt) {
+     if (this.nodeFxAnimation == undefined) {
+       this.nodeFxAnimation = new Animation();
+     }
+
+     var viz = this.viz,
+         graph  = viz.graph,
+         animation = this.nodeFxAnimation,
+         options = $.merge(this.viz.config, {
+           'elements': {
+             'id': false,
+             'properties': {}
+           },
+           'reposition': false
+         });
+     opt = $.merge(options, opt || {}, {
+       onBeforeCompute: $.empty,
+       onAfterCompute: $.empty
+     });
+     //check if an animation is running
+     animation.stopTimer();
+     var props = opt.elements.properties;
+     //set end values for nodes
+     if(!opt.elements.id) {
+       graph.eachNode(function(n) {
+         for(var prop in props) {
+           n.setData(prop, props[prop], 'end');
+         }
+       });
+     } else {
+       var ids = $.splat(opt.elements.id);
+       $.each(ids, function(id) {
+         var n = graph.getNode(id);
+         if(n) {
+           for(var prop in props) {
+             n.setData(prop, props[prop], 'end');
+           }
+         }
+       });
+     }
+     //get keys
+     var propnames = [];
+     for(var prop in props) propnames.push(prop);
+     //add node properties modes
+     var modes = ['node-property:' + propnames.join(':')];
+     //set new node positions
+     if(opt.reposition) {
+       modes.push('linear');
+       viz.compute('end');
+     }
+     //animate
+     this.animate($.merge(opt, {
+       modes: modes,
+       type: 'nodefx'
+     }));
+   },
+
+    
+    /*
+       Method: plot
+    
+       Plots a <Graph>.
+
+       Parameters:
+
+       opt - (optional) Plotting options. Most of them are described in <Options.Fx>.
+
+       Example:
+
+       (start code js)
+       var viz = new $jit.Viz(options);
+       viz.fx.plot(); 
+       (end code)
+
+    */
+   plot: function(opt, animating) {
+     var viz = this.viz, 
+         aGraph = viz.graph, 
+         canvas = viz.canvas, 
+         id = viz.root, 
+         that = this, 
+         ctx = canvas.getCtx(), 
+         min = Math.min,
+         opt = opt || this.viz.controller;
+     
+     opt.clearCanvas && canvas.clear();
+       
+     var root = aGraph.getNode(id);
+     if(!root) return;
+     
+     var T = !!root.visited;
+     aGraph.eachNode(function(node) {
+       var nodeAlpha = node.getData('alpha');
+       node.eachAdjacency(function(adj) {
+         var nodeTo = adj.nodeTo;
+         if(!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
+           !animating && opt.onBeforePlotLine(adj);
+           that.plotLine(adj, canvas, animating);
+           !animating && opt.onAfterPlotLine(adj);
+         }
+       });
+       if(node.drawn) {
+         !animating && opt.onBeforePlotNode(node);
+         that.plotNode(node, canvas, animating);
+         !animating && opt.onAfterPlotNode(node);
+       }
+       if(!that.labelsHidden && opt.withLabels) {
+         if(node.drawn && nodeAlpha >= 0.95) {
+           that.labels.plotLabel(canvas, node, opt);
+         } else {
+           that.labels.hideLabel(node, false);
+         }
+       }
+       node.visited = !T;
+     });
+    },
+
+  /*
+      Plots a Subtree.
+   */
+   plotTree: function(node, opt, animating) {
+       var that = this, 
+           viz = this.viz, 
+           canvas = viz.canvas,
+           config = this.config,
+           ctx = canvas.getCtx();
+       var nodeAlpha = node.getData('alpha');
+       node.eachSubnode(function(elem) {
+         if(opt.plotSubtree(node, elem) && elem.exist && elem.drawn) {
+             var adj = node.getAdjacency(elem.id);
+             !animating && opt.onBeforePlotLine(adj);
+             that.plotLine(adj, canvas, animating);
+             !animating && opt.onAfterPlotLine(adj);
+             that.plotTree(elem, opt, animating);
+         }
+       });
+       if(node.drawn) {
+           !animating && opt.onBeforePlotNode(node);
+           this.plotNode(node, canvas, animating);
+           !animating && opt.onAfterPlotNode(node);
+           if(!opt.hideLabels && opt.withLabels && nodeAlpha >= 0.95) 
+               this.labels.plotLabel(canvas, node, opt);
+           else 
+               this.labels.hideLabel(node, false);
+       } else {
+           this.labels.hideLabel(node, true);
+       }
+   },
+
+  /*
+       Method: plotNode
+    
+       Plots a <Graph.Node>.
+
+       Parameters:
+       
+       node - (object) A <Graph.Node>.
+       canvas - (object) A <Canvas> element.
+
+    */
+    plotNode: function(node, canvas, animating) {
+        var f = node.getData('type'), 
+            ctxObj = this.node.CanvasStyles;
+        if(f != 'none') {
+          var width = node.getData('lineWidth'),
+              color = node.getData('color'),
+              alpha = node.getData('alpha'),
+              ctx = canvas.getCtx();
+          ctx.save();
+          ctx.lineWidth = width;
+          ctx.fillStyle = ctx.strokeStyle = color;
+          ctx.globalAlpha = alpha;
+          
+          for(var s in ctxObj) {
+            ctx[s] = node.getCanvasStyle(s);
+          }
+
+          this.nodeTypes[f].render.call(this, node, canvas, animating);
+          ctx.restore();
+        }
+    },
+    
+    /*
+       Method: plotLine
+    
+       Plots a <Graph.Adjacence>.
+
+       Parameters:
+
+       adj - (object) A <Graph.Adjacence>.
+       canvas - (object) A <Canvas> instance.
+
+    */
+    plotLine: function(adj, canvas, animating) {
+      var f = adj.getData('type'),
+          ctxObj = this.edge.CanvasStyles;
+      if(f != 'none') {
+        var width = adj.getData('lineWidth'),
+            color = adj.getData('color'),
+            ctx = canvas.getCtx(),
+            nodeFrom = adj.nodeFrom,
+            nodeTo = adj.nodeTo;
+        
+        ctx.save();
+        ctx.lineWidth = width;
+        ctx.fillStyle = ctx.strokeStyle = color;
+        ctx.globalAlpha = Math.min(nodeFrom.getData('alpha'), 
+            nodeTo.getData('alpha'), 
+            adj.getData('alpha'));
+        
+        for(var s in ctxObj) {
+          ctx[s] = adj.getCanvasStyle(s);
+        }
+
+        this.edgeTypes[f].render.call(this, adj, canvas, animating);
+        ctx.restore();
+      }
+    }    
+  
+};
+
+/*
+  Object: Graph.Plot3D
+  
+  <Graph> 3D rendering and animation methods.
+  
+  Properties:
+  
+  nodeHelper - <NodeHelper> object.
+  edgeHelper - <EdgeHelper> object.
+
+*/
+Graph.Plot3D = $.merge(Graph.Plot, {
+  Interpolator: {
+    'linear': function(elem, props, delta) {
+      var from = elem.startPos.getc(true);
+      var to = elem.endPos.getc(true);
+      elem.pos.setc(this.compute(from.x, to.x, delta), 
+                    this.compute(from.y, to.y, delta),
+                    this.compute(from.z, to.z, delta));
+    }
+  },
+  
+  plotNode: function(node, canvas) {
+    if(node.getData('type') == 'none') return;
+    this.plotElement(node, canvas, {
+      getAlpha: function() {
+        return node.getData('alpha');
+      }
+    });
+  },
+  
+  plotLine: function(adj, canvas) {
+    if(adj.getData('type') == 'none') return;
+    this.plotElement(adj, canvas, {
+      getAlpha: function() {
+        return Math.min(adj.nodeFrom.getData('alpha'),
+                        adj.nodeTo.getData('alpha'),
+                        adj.getData('alpha'));
+      }
+    });
+  },
+  
+  plotElement: function(elem, canvas, opt) {
+    var gl = canvas.getCtx(),
+        viewMatrix = new Matrix4,
+        lighting = canvas.config.Scene.Lighting,
+        wcanvas = canvas.canvases[0],
+        program = wcanvas.program,
+        camera = wcanvas.camera;
+    
+    if(!elem.geometry) {
+      elem.geometry = new O3D[elem.getData('type')];
+    }
+    elem.geometry.update(elem);
+    if(!elem.webGLVertexBuffer) {
+      var vertices = [],
+          faces = [],
+          normals = [],
+          vertexIndex = 0,
+          geom = elem.geometry;
+      
+      for(var i=0, vs=geom.vertices, fs=geom.faces, fsl=fs.length; i<fsl; i++) {
+        var face = fs[i],
+            v1 = vs[face.a],
+            v2 = vs[face.b],
+            v3 = vs[face.c],
+            v4 = face.d? vs[face.d] : false,
+            n = face.normal;
+        
+        vertices.push(v1.x, v1.y, v1.z);
+        vertices.push(v2.x, v2.y, v2.z);
+        vertices.push(v3.x, v3.y, v3.z);
+        if(v4) vertices.push(v4.x, v4.y, v4.z);
+            
+        normals.push(n.x, n.y, n.z);
+        normals.push(n.x, n.y, n.z);
+        normals.push(n.x, n.y, n.z);
+        if(v4) normals.push(n.x, n.y, n.z);
+            
+        faces.push(vertexIndex, vertexIndex +1, vertexIndex +2);
+        if(v4) {
+          faces.push(vertexIndex, vertexIndex +2, vertexIndex +3);
+          vertexIndex += 4;
+        } else {
+          vertexIndex += 3;
+        }
+      }
+      //create and store vertex data
+      elem.webGLVertexBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLVertexBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+      //create and store faces index data
+      elem.webGLFaceBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elem.webGLFaceBuffer);
+      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(faces), gl.STATIC_DRAW);
+      elem.webGLFaceCount = faces.length;
+      //calculate vertex normals and store them
+      elem.webGLNormalBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLNormalBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
+    }
+    viewMatrix.multiply(camera.matrix, elem.geometry.matrix);
+    //send matrix data
+    gl.uniformMatrix4fv(program.viewMatrix, false, viewMatrix.flatten());
+    gl.uniformMatrix4fv(program.projectionMatrix, false, camera.projectionMatrix.flatten());
+    //send normal matrix for lighting
+    var normalMatrix = Matrix4.makeInvert(viewMatrix);
+    normalMatrix.$transpose();
+    gl.uniformMatrix4fv(program.normalMatrix, false, normalMatrix.flatten());
+    //send color data
+    var color = $.hexToRgb(elem.getData('color'));
+    color.push(opt.getAlpha());
+    gl.uniform4f(program.color, color[0] / 255, color[1] / 255, color[2] / 255, color[3]);
+    //send lighting data
+    gl.uniform1i(program.enableLighting, lighting.enable);
+    if(lighting.enable) {
+      //set ambient light color
+      if(lighting.ambient) {
+        var acolor = lighting.ambient;
+        gl.uniform3f(program.ambientColor, acolor[0], acolor[1], acolor[2]);
+      }
+      //set directional light
+      if(lighting.directional) {
+        var dir = lighting.directional,
+            color = dir.color,
+            pos = dir.direction,
+            vd = new Vector3(pos.x, pos.y, pos.z).normalize().$scale(-1);
+        gl.uniform3f(program.lightingDirection, vd.x, vd.y, vd.z);
+        gl.uniform3f(program.directionalColor, color[0], color[1], color[2]);
+      }
+    }
+    //send vertices data
+    gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLVertexBuffer);
+    gl.vertexAttribPointer(program.position, 3, gl.FLOAT, false, 0, 0);
+    //send normals data
+    gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLNormalBuffer);
+    gl.vertexAttribPointer(program.normal, 3, gl.FLOAT, false, 0, 0);
+    //draw!
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elem.webGLFaceBuffer );
+    gl.drawElements(gl.TRIANGLES, elem.webGLFaceCount, gl.UNSIGNED_SHORT, 0);
+  }
+});
+
+
+/*
+ * File: Graph.Label.js
+ *
+*/
+
+/*
+   Object: Graph.Label
+
+   An interface for plotting/hiding/showing labels.
+
+   Description:
+
+   This is a generic interface for plotting/hiding/showing labels.
+   The <Graph.Label> interface is implemented in multiple ways to provide
+   different label types.
+
+   For example, the Graph.Label interface is implemented as <Graph.Label.HTML> to provide
+   HTML label elements. Also we provide the <Graph.Label.SVG> interface for SVG type labels. 
+   The <Graph.Label.Native> interface implements these methods with the native Canvas text rendering functions.
+   
+   All subclasses (<Graph.Label.HTML>, <Graph.Label.SVG> and <Graph.Label.Native>) implement the method plotLabel.
+*/
+
+Graph.Label = {};
+
+/*
+   Class: Graph.Label.Native
+
+   Implements labels natively, using the Canvas text API.
+*/
+Graph.Label.Native = new Class({
+    initialize: function(viz) {
+      this.viz = viz;
+    },
+
+    /*
+       Method: plotLabel
+
+       Plots a label for a given node.
+
+       Parameters:
+
+       canvas - (object) A <Canvas> instance.
+       node - (object) A <Graph.Node>.
+       controller - (object) A configuration object.
+       
+       Example:
+       
+       (start code js)
+       var viz = new $jit.Viz(options);
+       var node = viz.graph.getNode('nodeId');
+       viz.labels.plotLabel(viz.canvas, node, viz.config);
+       (end code)
+    */
+    plotLabel: function(canvas, node, controller) {
+      var ctx = canvas.getCtx();
+      var pos = node.pos.getc(true);
+
+      ctx.font = node.getLabelData('style') + ' ' + node.getLabelData('size') + 'px ' + node.getLabelData('family');
+      ctx.textAlign = node.getLabelData('textAlign');
+      ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color');
+      ctx.textBaseline = node.getLabelData('textBaseline');
+
+      this.renderLabel(canvas, node, controller);
+    },
+
+    /*
+       renderLabel
+
+       Does the actual rendering of the label in the canvas. The default
+       implementation renders the label close to the position of the node, this
+       method should be overriden to position the labels differently.
+
+       Parameters:
+
+       canvas - A <Canvas> instance.
+       node - A <Graph.Node>.
+       controller - A configuration object. See also <Hypertree>, <RGraph>, <ST>.
+    */
+    renderLabel: function(canvas, node, controller) {
+      var ctx = canvas.getCtx();
+      var pos = node.pos.getc(true);
+      ctx.fillText(node.name, pos.x, pos.y + node.getData("height") / 2);
+    },
+
+    /*
+       Method: hideLabel
+   
+       Hides the corresponding <Graph.Node> label.
+    
+       Parameters:
+   
+       node - (object) A <Graph.Node>. Can also be an array of <Graph.Nodes>.
+       show - (boolean) If *true*, nodes will be shown. Otherwise nodes will be hidden.
+   
+       Example:
+       (start code js)
+        var rg = new $jit.Viz(options);
+        viz.labels.hideLabel(viz.graph.getNode('someid'), false);
+       (end code)
+    */
+    hideLabel: function(node, show) {
+      node = $.splat(node);
+      var al = show ? false : true;
+      $.each(node, function(n) {
+        n._hideLabel = al;
+      });
+    },
+    hideLabels: $.empty
+});
+
+/*
+   Class: Graph.Label.DOM
+
+   Abstract Class implementing some DOM label methods.
+
+   Implemented by:
+
+   <Graph.Label.HTML> and <Graph.Label.SVG>.
+
+*/
+Graph.Label.DOM = new Class({
+    //A flag value indicating if node labels are being displayed or not.
+    labelsHidden: false,
+    //Label container
+    labelContainer: false,
+    //Label elements hash.
+    labels: {},
+
+    /*
+       Method: getLabelContainer
+
+       Lazy fetcher for the label container.
+
+       Returns:
+
+       The label container DOM element.
+
+       Example:
+
+      (start code js)
+        var viz = new $jit.Viz(options);
+        var labelContainer = viz.labels.getLabelContainer();
+        alert(labelContainer.innerHTML);
+      (end code)
+    */
+    getLabelContainer: function() {
+      return this.labelContainer ?
+        this.labelContainer :
+        this.labelContainer = document.getElementById(this.viz.config.labelContainer);
+    },
+
+    /*
+       Method: getLabel
+
+       Lazy fetcher for the label element.
+
+       Parameters:
+
+       id - (string) The label id (which is also a <Graph.Node> id).
+
+       Returns:
+
+       The label element.
+
+       Example:
+
+      (start code js)
+        var viz = new $jit.Viz(options);
+        var label = viz.labels.getLabel('someid');
+        alert(label.innerHTML);
+      (end code)
+
+    */
+    getLabel: function(id) {
+      return (id in this.labels && this.labels[id] != null) ?
+        this.labels[id] :
+        this.labels[id] = document.getElementById(id);
+    },
+
+    /*
+       Method: hideLabels
+
+       Hides all labels (by hiding the label container).
+
+       Parameters:
+
+       hide - (boolean) A boolean value indicating if the label container must be hidden or not.
+
+       Example:
+       (start code js)
+        var viz = new $jit.Viz(options);
+        rg.labels.hideLabels(true);
+       (end code)
+
+    */
+    hideLabels: function (hide) {
+      var container = this.getLabelContainer();
+      if(hide)
+        container.style.display = 'none';
+      else
+        container.style.display = '';
+      this.labelsHidden = hide;
+    },
+
+    /*
+       Method: clearLabels
+
+       Clears the label container.
+
+       Useful when using a new visualization with the same canvas element/widget.
+
+       Parameters:
+
+       force - (boolean) Forces deletion of all labels.
+
+       Example:
+       (start code js)
+        var viz = new $jit.Viz(options);
+        viz.labels.clearLabels();
+        (end code)
+    */
+    clearLabels: function(force) {
+      for(var id in this.labels) {
+        if (force || !this.viz.graph.hasNode(id)) {
+          this.disposeLabel(id);
+          delete this.labels[id];
+        }
+      }
+    },
+
+    /*
+       Method: disposeLabel
+
+       Removes a label.
+
+       Parameters:
+
+       id - (string) A label id (which generally is also a <Graph.Node> id).
+
+       Example:
+       (start code js)
+        var viz = new $jit.Viz(options);
+        viz.labels.disposeLabel('labelid');
+       (end code)
+    */
+    disposeLabel: function(id) {
+      var elem = this.getLabel(id);
+      if(elem && elem.parentNode) {
+        elem.parentNode.removeChild(elem);
+      }
+    },
+
+    /*
+       Method: hideLabel
+
+       Hides the corresponding <Graph.Node> label.
+
+       Parameters:
+
+       node - (object) A <Graph.Node>. Can also be an array of <Graph.Nodes>.
+       show - (boolean) If *true*, nodes will be shown. Otherwise nodes will be hidden.
+
+       Example:
+       (start code js)
+        var rg = new $jit.Viz(options);
+        viz.labels.hideLabel(viz.graph.getNode('someid'), false);
+       (end code)
+    */
+    hideLabel: function(node, show) {
+      node = $.splat(node);
+      var st = show ? "" : "none", lab, that = this;
+      $.each(node, function(n) {
+        lab = that.getLabel(n.id);
+        if (lab) {
+          lab.style.display = st;
+        }
+      });
+    },
+
+    /*
+       fitsInCanvas
+
+       Returns _true_ or _false_ if the label for the node is contained in the canvas dom element or not.
+
+       Parameters:
+
+       pos - A <Complex> instance (I'm doing duck typing here so any object with _x_ and _y_ parameters will do).
+       canvas - A <Canvas> instance.
+
+       Returns:
+
+       A boolean value specifying if the label is contained in the <Canvas> DOM element or not.
+
+    */
+    fitsInCanvas: function(pos, canvas) {
+      var size = canvas.getSize();
+      if (pos.w && pos.h) {
+      	if (pos.x >= size.width || pos.x < -pos.w
+         || pos.y >= size.height || pos.y < -pos.h) return false;      	
+      }
+      else {
+      	if (pos.x >= size.width || pos.x < 0
+         || pos.y >= size.height || pos.y < 0) return false;
+      }
+       return true;
+    }
+});
+
+/*
+   Class: Graph.Label.HTML
+
+   Implements HTML labels.
+
+   Extends:
+
+   All <Graph.Label.DOM> methods.
+
+*/
+Graph.Label.HTML = new Class({
+    Implements: Graph.Label.DOM,
+
+    /*
+       Method: plotLabel
+
+       Plots a label for a given node.
+
+       Parameters:
+
+       canvas - (object) A <Canvas> instance.
+       node - (object) A <Graph.Node>.
+       controller - (object) A configuration object.
+       
+      Example:
+       
+       (start code js)
+       var viz = new $jit.Viz(options);
+       var node = viz.graph.getNode('nodeId');
+       viz.labels.plotLabel(viz.canvas, node, viz.config);
+       (end code)
+
+
+    */
+    plotLabel: function(canvas, node, controller) {
+      var id = node.id, tag = this.getLabel(id);
+
+      if(!tag && !(tag = document.getElementById(id))) {
+        tag = document.createElement('div');
+        var container = this.getLabelContainer();
+        tag.id = id;
+        tag.className = 'node';
+        tag.style.position = 'absolute';
+        controller.onCreateLabel(tag, node);
+        container.appendChild(tag);
+        this.labels[node.id] = tag;
+      }
+
+      this.placeLabel(tag, node, controller);
+    }
+});
+
+/*
+   Class: Graph.Label.SVG
+
+   Implements SVG labels.
+
+   Extends:
+
+   All <Graph.Label.DOM> methods.
+*/
+Graph.Label.SVG = new Class({
+    Implements: Graph.Label.DOM,
+
+    /*
+       Method: plotLabel
+
+       Plots a label for a given node.
+
+       Parameters:
+
+       canvas - (object) A <Canvas> instance.
+       node - (object) A <Graph.Node>.
+       controller - (object) A configuration object.
+       
+       Example:
+       
+       (start code js)
+       var viz = new $jit.Viz(options);
+       var node = viz.graph.getNode('nodeId');
+       viz.labels.plotLabel(viz.canvas, node, viz.config);
+       (end code)
+
+
+    */
+    plotLabel: function(canvas, node, controller) {
+      var id = node.id, tag = this.getLabel(id);
+      if(!tag && !(tag = document.getElementById(id))) {
+        var ns = 'http://www.w3.org/2000/svg';
+          tag = document.createElementNS(ns, 'svg:text');
+        var tspan = document.createElementNS(ns, 'svg:tspan');
+        tag.appendChild(tspan);
+        var container = this.getLabelContainer();
+        tag.setAttribute('id', id);
+        tag.setAttribute('class', 'node');
+        container.appendChild(tag);
+        controller.onCreateLabel(tag, node);
+        this.labels[node.id] = tag;
+      }
+      this.placeLabel(tag, node, controller);
+    }
+});
+
+
+
+Graph.Geom = new Class({
+
+  initialize: function(viz) {
+    this.viz = viz;
+    this.config = viz.config;
+    this.node = viz.config.Node;
+    this.edge = viz.config.Edge;
+  },
+  /*
+    Applies a translation to the tree.
+  
+    Parameters:
+  
+    pos - A <Complex> number specifying translation vector.
+    prop - A <Graph.Node> position property ('pos', 'start' or 'end').
+  
+    Example:
+  
+    (start code js)
+      st.geom.translate(new Complex(300, 100), 'end');
+    (end code)
+  */  
+  translate: function(pos, prop) {
+     prop = $.splat(prop);
+     this.viz.graph.eachNode(function(elem) {
+         $.each(prop, function(p) { elem.getPos(p).$add(pos); });
+     });
+  },
+  /*
+    Hides levels of the tree until it properly fits in canvas.
+  */  
+  setRightLevelToShow: function(node, canvas, callback) {
+     var level = this.getRightLevelToShow(node, canvas), 
+         fx = this.viz.labels,
+         opt = $.merge({
+           execShow:true,
+           execHide:true,
+           onHide: $.empty,
+           onShow: $.empty
+         }, callback || {});
+     node.eachLevel(0, this.config.levelsToShow, function(n) {
+         var d = n._depth - node._depth;
+         if(d > level) {
+             opt.onHide(n);
+             if(opt.execHide) {
+               n.drawn = false; 
+               n.exist = false;
+               fx.hideLabel(n, false);
+             }
+         } else {
+             opt.onShow(n);
+             if(opt.execShow) {
+               n.exist = true;
+             }
+         }
+     });
+     node.drawn= true;
+  },
+  /*
+    Returns the right level to show for the current tree in order to fit in canvas.
+  */  
+  getRightLevelToShow: function(node, canvas) {
+     var config = this.config;
+     var level = config.levelsToShow;
+     var constrained = config.constrained;
+     if(!constrained) return level;
+     while(!this.treeFitsInCanvas(node, canvas, level) && level > 1) { level-- ; }
+     return level;
+  }
+});
+
+/*
+ * File: Loader.js
+ * 
+ */
+
+/*
+   Object: Loader
+
+   Provides methods for loading and serving JSON data.
+*/
+var Loader = {
+     construct: function(json) {
+        var isGraph = ($.type(json) == 'array');
+        var ans = new Graph(this.graphOptions, this.config.Node, this.config.Edge, this.config.Label);
+        if(!isGraph) 
+            //make tree
+            (function (ans, json) {
+                ans.addNode(json);
+                if(json.children) {
+                  for(var i=0, ch = json.children; i<ch.length; i++) {
+                    ans.addAdjacence(json, ch[i]);
+                    arguments.callee(ans, ch[i]);
+                  }
+                }
+            })(ans, json);
+        else
+            //make graph
+            (function (ans, json) {
+                var getNode = function(id) {
+                  for(var i=0, l=json.length; i<l; i++) {
+                    if(json[i].id == id) {
+                      return json[i];
+                    }
+                  }
+                  // The node was not defined in the JSON
+                  // Let's create it
+                  var newNode = {
+                		"id" : id,
+                		"name" : id
+                	};
+                  return ans.addNode(newNode);
+                };
+
+                for(var i=0, l=json.length; i<l; i++) {
+                  ans.addNode(json[i]);
+                  var adj = json[i].adjacencies;
+                  if (adj) {
+                    for(var j=0, lj=adj.length; j<lj; j++) {
+                      var node = adj[j], data = {};
+                      if(typeof adj[j] != 'string') {
+                        data = $.merge(node.data, {});
+                        node = node.nodeTo;
+                      }
+                      ans.addAdjacence(json[i], getNode(node), data);
+                    }
+                  }
+                }
+            })(ans, json);
+
+        return ans;
+    },
+
+    /*
+     Method: loadJSON
+    
+     Loads a JSON structure to the visualization. The JSON structure can be a JSON *tree* or *graph* structure.
+     
+      A JSON tree or graph structure consists of nodes, each having as properties
+       
+       id - (string) A unique identifier for the node
+       name - (string) A node's name
+       data - (object) The data optional property contains a hash (i.e {}) 
+       where you can store all the information you want about this node.
+        
+      For JSON *Tree* structures, there's an extra optional property *children* of type Array which contains the node's children.
+      
+      Example:
+
+      (start code js)
+        var json = {  
+          "id": "aUniqueIdentifier",  
+          "name": "usually a nodes name",  
+          "data": {
+            "some key": "some value",
+            "some other key": "some other value"
+           },  
+          "children": [ *other nodes or empty* ]  
+        };  
+      (end code)
+        
+        JSON *Graph* structures consist of an array of nodes, each specifying the nodes to which the current node is connected. 
+        For JSON *Graph* structures, the *children* property is replaced by the *adjacencies* property.
+        
+        There are two types of *Graph* structures, *simple* and *extended* graph structures.
+        
+        For *simple* Graph structures, the adjacencies property contains an array of strings, each specifying the 
+        id of the node connected to the main node.
+        
+        Example:
+        
+        (start code js)
+        var json = [  
+          {  
+            "id": "aUniqueIdentifier",  
+            "name": "usually a nodes name",  
+            "data": {
+              "some key": "some value",
+              "some other key": "some other value"
+             },  
+            "adjacencies": ["anotherUniqueIdentifier", "yetAnotherUniqueIdentifier", 'etc']  
+          },
+
+          'other nodes go here...' 
+        ];          
+        (end code)
+        
+        For *extended Graph structures*, the adjacencies property contains an array of Adjacency objects that have as properties
+        
+        nodeTo - (string) The other node connected by this adjacency.
+        data - (object) A data property, where we can store custom key/value information.
+        
+        Example:
+        
+        (start code js)
+        var json = [  
+          {  
+            "id": "aUniqueIdentifier",  
+            "name": "usually a nodes name",  
+            "data": {
+              "some key": "some value",
+              "some other key": "some other value"
+             },  
+            "adjacencies": [  
+            {  
+              nodeTo:"aNodeId",  
+              data: {} //put whatever you want here  
+            },
+            'other adjacencies go here...'  
+          },
+
+          'other nodes go here...' 
+        ];          
+        (end code)
+       
+       About the data property:
+       
+       As described before, you can store custom data in the *data* property of JSON *nodes* and *adjacencies*. 
+       You can use almost any string as key for the data object. Some keys though are reserved by the toolkit, and 
+       have special meanings. This is the case for keys starting with a dollar sign, for example, *$width*.
+       
+       For JSON *node* objects, adding dollar prefixed properties that match the names of the options defined in 
+       <Options.Node> will override the general value for that option with that particular value. For this to work 
+       however, you do have to set *overridable = true* in <Options.Node>.
+       
+       The same thing is true for JSON adjacencies. Dollar prefixed data properties will alter values set in <Options.Edge> 
+       if <Options.Edge> has *overridable = true*.
+       
+       When loading JSON data into TreeMaps, the *data* property must contain a value for the *$area* key, 
+       since this is the value which will be taken into account when creating the layout. 
+       The same thing goes for the *$color* parameter.
+       
+       In JSON Nodes you can use also *$label-* prefixed properties to refer to <Options.Label> properties. For example, 
+       *$label-size* will refer to <Options.Label> size property. Also, in JSON nodes and adjacencies you can set 
+       canvas specific properties individually by using the *$canvas-* prefix. For example, *$canvas-shadowBlur* will refer 
+       to the *shadowBlur* property.
+       
+       These properties can also be accessed after loading the JSON data from <Graph.Nodes> and <Graph.Adjacences> 
+       by using <Accessors>. For more information take a look at the <Graph> and <Accessors> documentation.
+       
+       Finally, these properties can also be used to create advanced animations like with <Options.NodeStyles>. For more 
+       information about creating animations please take a look at the <Graph.Plot> and <Graph.Plot.animate> documentation.
+       
+       loadJSON Parameters:
+    
+        json - A JSON Tree or Graph structure.
+        i - For Graph structures only. Sets the indexed node as root for the visualization.
+
+    */
+    loadJSON: function(json, i) {
+      this.json = json;
+      //if they're canvas labels erase them.
+      if(this.labels && this.labels.clearLabels) {
+        this.labels.clearLabels(true);
+      }
+      this.graph = this.construct(json);
+      if($.type(json) != 'array'){
+        this.root = json.id;
+      } else {
+        this.root = json[i? i : 0].id;
+      }
+    },
+    
+    /*
+      Method: toJSON
+   
+      Returns a JSON tree/graph structure from the visualization's <Graph>. 
+      See <Loader.loadJSON> for the graph formats available.
+      
+      See also:
+      
+      <Loader.loadJSON>
+      
+      Parameters:
+      
+      type - (string) Default's "tree". The type of the JSON structure to be returned. 
+      Possible options are "tree" or "graph".
+    */    
+    toJSON: function(type) {
+      type = type || "tree";
+      if(type == 'tree') {
+        var ans = {};
+        var rootNode = this.graph.getNode(this.root);
+        var ans = (function recTree(node) {
+          var ans = {};
+          ans.id = node.id;
+          ans.name = node.name;
+          ans.data = node.data;
+          var ch =[];
+          node.eachSubnode(function(n) {
+            ch.push(recTree(n));
+          });
+          ans.children = ch;
+          return ans;
+        })(rootNode);
+        return ans;
+      } else {
+        var ans = [];
+        var T = !!this.graph.getNode(this.root).visited;
+        this.graph.eachNode(function(node) {
+          var ansNode = {};
+          ansNode.id = node.id;
+          ansNode.name = node.name;
+          ansNode.data = node.data;
+          var adjs = [];
+          node.eachAdjacency(function(adj) {
+            var nodeTo = adj.nodeTo;
+            if(!!nodeTo.visited === T) {
+              var ansAdj = {};
+              ansAdj.nodeTo = nodeTo.id;
+              ansAdj.data = adj.data;
+              adjs.push(ansAdj);
+            }
+          });
+          ansNode.adjacencies = adjs;
+          ans.push(ansNode);
+          node.visited = !T;
+        });
+        return ans;
+      }
+    }
+};
+
+
+
+/*
+ * File: Layouts.js
+ * 
+ * Implements base Tree and Graph layouts.
+ *
+ * Description:
+ *
+ * Implements base Tree and Graph layouts like Radial, Tree, etc.
+ * 
+ */
+
+/*
+ * Object: Layouts
+ * 
+ * Parent object for common layouts.
+ *
+ */
+var Layouts = $jit.Layouts = {};
+
+
+//Some util shared layout functions are defined here.
+var NodeDim = {
+  label: null,
+  
+  compute: function(graph, prop, opt) {
+    this.initializeLabel(opt);
+    var label = this.label, style = label.style;
+    graph.eachNode(function(n) {
+      var autoWidth  = n.getData('autoWidth'),
+          autoHeight = n.getData('autoHeight');
+      if(autoWidth || autoHeight) {
+        //delete dimensions since these are
+        //going to be overridden now.
+        delete n.data.$width;
+        delete n.data.$height;
+        delete n.data.$dim;
+        
+        var width  = n.getData('width'),
+            height = n.getData('height');
+        //reset label dimensions
+        style.width  = autoWidth? 'auto' : width + 'px';
+        style.height = autoHeight? 'auto' : height + 'px';
+        
+        //TODO(nico) should let the user choose what to insert here.
+        label.innerHTML = n.name;
+        
+        var offsetWidth  = label.offsetWidth,
+            offsetHeight = label.offsetHeight;
+        var type = n.getData('type');
+        if($.indexOf(['circle', 'square', 'triangle', 'star'], type) === -1) {
+          n.setData('width', offsetWidth);
+          n.setData('height', offsetHeight);
+        } else {
+          var dim = offsetWidth > offsetHeight? offsetWidth : offsetHeight;
+          n.setData('width', dim);
+          n.setData('height', dim);
+          n.setData('dim', dim); 
+        }
+      }
+    });
+  },
+  
+  initializeLabel: function(opt) {
+    if(!this.label) {
+      this.label = document.createElement('div');
+      document.body.appendChild(this.label);
+    }
+    this.setLabelStyles(opt);
+  },
+  
+  setLabelStyles: function(opt) {
+    $.extend(this.label.style, {
+      'visibility': 'hidden',
+      'position': 'absolute',
+      'width': 'auto',
+      'height': 'auto'
+    });
+    this.label.className = 'jit-autoadjust-label';
+  }
+};
+
+
+/*
+ * Class: Layouts.Tree
+ *
+ * Implements a Tree Layout.
+ *
+ * Implemented By:
+ *
+ * <ST>
+ *
+ * Inspired by:
+ *
+ * Drawing Trees (Andrew J. Kennedy) <http://research.microsoft.com/en-us/um/people/akenn/fun/drawingtrees.pdf>
+ *
+ */
+Layouts.Tree = (function() {
+  //Layout functions
+  var slice = Array.prototype.slice;
+
+  /*
+     Calculates the max width and height nodes for a tree level
+  */
+  function getBoundaries(graph, config, level, orn, prop) {
+    var dim = config.Node;
+    var multitree = config.multitree;
+    if (dim.overridable) {
+      var w = -1, h = -1;
+      graph.eachNode(function(n) {
+        if (n._depth == level
+            && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) {
+          var dw = n.getData('width', prop);
+          var dh = n.getData('height', prop);
+          w = (w < dw) ? dw : w;
+          h = (h < dh) ? dh : h;
+        }
+      });
+      return {
+        'width' : w < 0 ? dim.width : w,
+        'height' : h < 0 ? dim.height : h
+      };
+    } else {
+      return dim;
+    }
+  }
+
+
+  function movetree(node, prop, val, orn) {
+    var p = (orn == "left" || orn == "right") ? "y" : "x";
+    node.getPos(prop)[p] += val;
+  }
+
+
+  function moveextent(extent, val) {
+    var ans = [];
+    $.each(extent, function(elem) {
+      elem = slice.call(elem);
+      elem[0] += val;
+      elem[1] += val;
+      ans.push(elem);
+    });
+    return ans;
+  }
+
+
+  function merge(ps, qs) {
+    if (ps.length == 0)
+      return qs;
+    if (qs.length == 0)
+      return ps;
+    var p = ps.shift(), q = qs.shift();
+    return [ [ p[0], q[1] ] ].concat(merge(ps, qs));
+  }
+
+
+  function mergelist(ls, def) {
+    def = def || [];
+    if (ls.length == 0)
+      return def;
+    var ps = ls.pop();
+    return mergelist(ls, merge(ps, def));
+  }
+
+
+  function fit(ext1, ext2, subtreeOffset, siblingOffset, i) {
+    if (ext1.length <= i || ext2.length <= i)
+      return 0;
+
+    var p = ext1[i][1], q = ext2[i][0];
+    return Math.max(fit(ext1, ext2, subtreeOffset, siblingOffset, ++i)
+        + subtreeOffset, p - q + siblingOffset);
+  }
+
+
+  function fitlistl(es, subtreeOffset, siblingOffset) {
+    function $fitlistl(acc, es, i) {
+      if (es.length <= i)
+        return [];
+      var e = es[i], ans = fit(acc, e, subtreeOffset, siblingOffset, 0);
+      return [ ans ].concat($fitlistl(merge(acc, moveextent(e, ans)), es, ++i));
+    }
+    ;
+    return $fitlistl( [], es, 0);
+  }
+
+
+  function fitlistr(es, subtreeOffset, siblingOffset) {
+    function $fitlistr(acc, es, i) {
+      if (es.length <= i)
+        return [];
+      var e = es[i], ans = -fit(e, acc, subtreeOffset, siblingOffset, 0);
+      return [ ans ].concat($fitlistr(merge(moveextent(e, ans), acc), es, ++i));
+    }
+    ;
+    es = slice.call(es);
+    var ans = $fitlistr( [], es.reverse(), 0);
+    return ans.reverse();
+  }
+
+
+  function fitlist(es, subtreeOffset, siblingOffset, align) {
+    var esl = fitlistl(es, subtreeOffset, siblingOffset), esr = fitlistr(es,
+        subtreeOffset, siblingOffset);
+
+    if (align == "left")
+      esr = esl;
+    else if (align == "right")
+      esl = esr;
+
+    for ( var i = 0, ans = []; i < esl.length; i++) {
+      ans[i] = (esl[i] + esr[i]) / 2;
+    }
+    return ans;
+  }
+
+
+  function design(graph, node, prop, config, orn) {
+    var multitree = config.multitree;
+    var auxp = [ 'x', 'y' ], auxs = [ 'width', 'height' ];
+    var ind = +(orn == "left" || orn == "right");
+    var p = auxp[ind], notp = auxp[1 - ind];
+
+    var cnode = config.Node;
+    var s = auxs[ind], nots = auxs[1 - ind];
+
+    var siblingOffset = config.siblingOffset;
+    var subtreeOffset = config.subtreeOffset;
+    var align = config.align;
+
+    function $design(node, maxsize, acum) {
+      var sval = node.getData(s, prop);
+      var notsval = maxsize
+          || (node.getData(nots, prop));
+
+      var trees = [], extents = [], chmaxsize = false;
+      var chacum = notsval + config.levelDistance;
+      node.eachSubnode(function(n) {
+            if (n.exist
+                && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) {
+
+              if (config.levelSpacing == 'even') {
+                if (!chmaxsize) {
+                  chmaxsize = getBoundaries(graph, config, n._depth, orn, prop);
+                }
+              } else {
+                chmaxsize = { width: n.getData('width'), height: n.getData('height') };
+              }
+
+
+              var s = $design(n, chmaxsize[nots], acum + chacum);
+              trees.push(s.tree);
+              extents.push(s.extent);
+            }
+          });
+      var positions = fitlist(extents, subtreeOffset, siblingOffset, align);
+      for ( var i = 0, ptrees = [], pextents = []; i < trees.length; i++) {
+        movetree(trees[i], prop, positions[i], orn);
+        pextents.push(moveextent(extents[i], positions[i]));
+      }
+      var resultextent = [ [ -sval / 2, sval / 2 ] ]
+          .concat(mergelist(pextents));
+      node.getPos(prop)[p] = 0;
+
+      if (orn == "top" || orn == "left") {
+        node.getPos(prop)[notp] = acum;
+      } else {
+        node.getPos(prop)[notp] = -acum;
+      }
+
+      return {
+        tree : node,
+        extent : resultextent
+      };
+    }
+
+    $design(node, false, 0);
+  }
+
+
+  return new Class({
+    /*
+    Method: compute
+
+    Computes nodes' positions.
+
+     */
+    compute : function(property, computeLevels) {
+      var prop = property || 'start';
+      var node = this.graph.getNode(this.root);
+      $.extend(node, {
+        'drawn' : true,
+        'exist' : true,
+        'selected' : true
+      });
+      NodeDim.compute(this.graph, prop, this.config);
+      if (!!computeLevels || !("_depth" in node)) {
+        this.graph.computeLevels(this.root, 0, "ignore");
+      }
+
+      this.computePositions(node, prop);
+    },
+
+    computePositions : function(node, prop) {
+      var config = this.config;
+      var multitree = config.multitree;
+      var align = config.align;
+      var indent = align !== 'center' && config.indent;
+      var orn = config.orientation;
+      var orns = multitree ? [ 'top', 'right', 'bottom', 'left' ] : [ orn ];
+      var that = this;
+      $.each(orns, function(orn) {
+        //calculate layout
+          design(that.graph, node, prop, that.config, orn, prop);
+          var i = [ 'x', 'y' ][+(orn == "left" || orn == "right")];
+          //absolutize
+          (function red(node) {
+            node.eachSubnode(function(n) {
+              if (n.exist
+                  && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) {
+
+                n.getPos(prop)[i] += node.getPos(prop)[i];
+                if (indent) {
+                  n.getPos(prop)[i] += align == 'left' ? indent : -indent;
+                }
+                red(n);
+              }
+            });
+          })(node);
+        });
+    }
+  });
+
+})();
+
+
+/*
+ * File: Spacetree.js
+ */
+
+/*
+   Class: ST
+
+  A Tree layout with advanced contraction and expansion animations.
+
+  Inspired by:
+
+  SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation (Catherine Plaisant, Jesse Grosjean, Benjamin B. Bederson)
+  <http://hcil.cs.umd.edu/trs/2002-05/2002-05.pdf>
+
+  Drawing Trees (Andrew J. Kennedy) <http://research.microsoft.com/en-us/um/people/akenn/fun/drawingtrees.pdf>
+
+  Note:
+
+  This visualization was built and engineered from scratch, taking only the papers as inspiration, and only shares some features with the visualization described in those papers.
+
+  Implements:
+
+  All <Loader> methods
+
+  Constructor Options:
+
+  Inherits options from
+
+  - <Options.Canvas>
+  - <Options.Controller>
+  - <Options.Tree>
+  - <Options.Node>
+  - <Options.Edge>
+  - <Options.Label>
+  - <Options.Events>
+  - <Options.Tips>
+  - <Options.NodeStyles>
+  - <Options.Navigation>
+
+  Additionally, there are other parameters and some default values changed
+
+  constrained - (boolean) Default's *true*. Whether to show the entire tree when loaded or just the number of levels specified by _levelsToShow_.
+  levelsToShow - (number) Default's *2*. The number of levels to show for a subtree. This number is relative to the selected node.
+  levelDistance - (number) Default's *30*. The distance between two consecutive levels of the tree.
+  Node.type - Described in <Options.Node>. Default's set to *rectangle*.
+  offsetX - (number) Default's *0*. The x-offset distance from the selected node to the center of the canvas.
+  offsetY - (number) Default's *0*. The y-offset distance from the selected node to the center of the canvas.
+  duration - Described in <Options.Fx>. It's default value has been changed to *700*.
+
+  Instance Properties:
+
+  canvas - Access a <Canvas> instance.
+  graph - Access a <Graph> instance.
+  op - Access a <ST.Op> instance.
+  fx - Access a <ST.Plot> instance.
+  labels - Access a <ST.Label> interface implementation.
+
+ */
+
+$jit.ST= (function() {
+    // Define some private methods first...
+    // Nodes in path
+    var nodesInPath = [];
+    // Nodes to contract
+    function getNodesToHide(node) {
+      node = node || this.clickedNode;
+      if(!this.config.constrained) {
+        return [];
+      }
+      var Geom = this.geom;
+      var graph = this.graph;
+      var canvas = this.canvas;
+      var level = node._depth, nodeArray = [];
+  	  graph.eachNode(function(n) {
+          if(n.exist && !n.selected) {
+              if(n.isDescendantOf(node.id)) {
+                if(n._depth <= level) nodeArray.push(n);
+              } else {
+                nodeArray.push(n);
+              }
+          }
+  	  });
+  	  var leafLevel = Geom.getRightLevelToShow(node, canvas);
+  	  node.eachLevel(leafLevel, leafLevel, function(n) {
+          if(n.exist && !n.selected) nodeArray.push(n);
+  	  });
+
+  	  for (var i = 0; i < nodesInPath.length; i++) {
+  	    var n = this.graph.getNode(nodesInPath[i]);
+  	    if(!n.isDescendantOf(node.id)) {
+  	      nodeArray.push(n);
+  	    }
+  	  }
+  	  return nodeArray;
+    };
+    // Nodes to expand
+     function getNodesToShow(node) {
+        var nodeArray = [], config = this.config;
+        node = node || this.clickedNode;
+        this.clickedNode.eachLevel(0, config.levelsToShow, function(n) {
+            if(config.multitree && !('$orn' in n.data)
+            		&& n.anySubnode(function(ch){ return ch.exist && !ch.drawn; })) {
+            	nodeArray.push(n);
+            } else if(n.drawn && !n.anySubnode("drawn")) {
+              nodeArray.push(n);
+            }
+        });
+        return nodeArray;
+     };
+    // Now define the actual class.
+    return new Class({
+
+        Implements: [Loader, Extras, Layouts.Tree],
+
+        initialize: function(controller) {
+          var $ST = $jit.ST;
+
+          var config= {
+                levelsToShow: 2,
+                levelDistance: 30,
+                constrained: true,
+                Node: {
+                  type: 'rectangle'
+                },
+                duration: 700,
+                offsetX: 0,
+                offsetY: 0
+            };
+
+            this.controller = this.config = $.merge(
+                Options("Canvas", "Fx", "Tree", "Node", "Edge", "Controller",
+                    "Tips", "NodeStyles", "Events", "Navigation", "Label"), config, controller);
+
+            var canvasConfig = this.config;
+            if(canvasConfig.useCanvas) {
+              this.canvas = canvasConfig.useCanvas;
+              this.config.labelContainer = this.canvas.id + '-label';
+            } else {
+              if(canvasConfig.background) {
+                canvasConfig.background = $.merge({
+                  type: 'Circles'
+                }, canvasConfig.background);
+              }
+              this.canvas = new Canvas(this, canvasConfig);
+              this.config.labelContainer = (typeof canvasConfig.injectInto == 'string'? canvasConfig.injectInto : canvasConfig.injectInto.id) + '-label';
+            }
+
+            this.graphOptions = {
+                'klass': Complex
+            };
+            this.graph = new Graph(this.graphOptions, this.config.Node, this.config.Edge);
+            this.labels = new $ST.Label[canvasConfig.Label.type](this);
+            this.fx = new $ST.Plot(this, $ST);
+            this.op = new $ST.Op(this);
+            this.group = new $ST.Group(this);
+            this.geom = new $ST.Geom(this);
+            this.clickedNode=  null;
+            // initialize extras
+            this.initializeExtras();
+        },
+
+        /*
+         Method: plot
+
+         Plots the <ST>. This is a shortcut to *fx.plot*.
+
+        */
+        plot: function() { this.fx.plot(this.controller); },
+
+
+        /*
+         Method: switchPosition
+
+         Switches the tree orientation.
+
+         Parameters:
+
+        pos - (string) The new tree orientation. Possible values are "top", "left", "right" and "bottom".
+        method - (string) Set this to "animate" if you want to animate the tree when switching its position. You can also set this parameter to "replot" to just replot the subtree.
+        onComplete - (optional|object) This callback is called once the "switching" animation is complete.
+
+         Example:
+
+         (start code js)
+           st.switchPosition("right", "animate", {
+            onComplete: function() {
+              alert('completed!');
+            }
+           });
+         (end code)
+        */
+        switchPosition: function(pos, method, onComplete) {
+          var Geom = this.geom, Plot = this.fx, that = this;
+          if(!Plot.busy) {
+              Plot.busy = true;
+              this.contract({
+                  onComplete: function() {
+                      Geom.switchOrientation(pos);
+                      that.compute('end', false);
+                      Plot.busy = false;
+                      if(method == 'animate') {
+                    	  that.onClick(that.clickedNode.id, onComplete);
+                      } else if(method == 'replot') {
+                    	  that.select(that.clickedNode.id, onComplete);
+                      }
+                  }
+              }, pos);
+          }
+        },
+
+        /*
+        Method: switchAlignment
+
+        Switches the tree alignment.
+
+        Parameters:
+
+       align - (string) The new tree alignment. Possible values are "left", "center" and "right".
+       method - (string) Set this to "animate" if you want to animate the tree after aligning its position. You can also set this parameter to "replot" to just replot the subtree.
+       onComplete - (optional|object) This callback is called once the "switching" animation is complete.
+
+        Example:
+
+        (start code js)
+          st.switchAlignment("right", "animate", {
+           onComplete: function() {
+             alert('completed!');
+           }
+          });
+        (end code)
+       */
+       switchAlignment: function(align, method, onComplete) {
+        this.config.align = align;
+        if(method == 'animate') {
+        	this.select(this.clickedNode.id, onComplete);
+        } else if(method == 'replot') {
+        	this.onClick(this.clickedNode.id, onComplete);
+        }
+       },
+
+       /*
+        Method: addNodeInPath
+
+        Adds a node to the current path as selected node. The selected node will be visible (as in non-collapsed) at all times.
+
+
+        Parameters:
+
+       id - (string) A <Graph.Node> id.
+
+        Example:
+
+        (start code js)
+          st.addNodeInPath("nodeId");
+        (end code)
+       */
+       addNodeInPath: function(id) {
+           nodesInPath.push(id);
+           this.select((this.clickedNode && this.clickedNode.id) || this.root);
+       },
+
+       /*
+       Method: clearNodesInPath
+
+       Removes all nodes tagged as selected by the <ST.addNodeInPath> method.
+
+       See also:
+
+       <ST.addNodeInPath>
+
+       Example:
+
+       (start code js)
+         st.clearNodesInPath();
+       (end code)
+      */
+       clearNodesInPath: function(id) {
+           nodesInPath.length = 0;
+           this.select((this.clickedNode && this.clickedNode.id) || this.root);
+       },
+
+       /*
+         Method: refresh
+
+         Computes positions and plots the tree.
+
+       */
+       refresh: function() {
+           this.reposition();
+           this.select((this.clickedNode && this.clickedNode.id) || this.root);
+       },
+
+       reposition: function() {
+            this.graph.computeLevels(this.root, 0, "ignore");
+            this.geom.setRightLevelToShow(this.clickedNode, this.canvas);
+            this.graph.eachNode(function(n) {
+                if(n.exist) n.drawn = true;
+            });
+            this.compute('end');
+            if (this.clickedNode) {
+              var offset = {
+                  x: this.canvas.translateOffsetX + this.config.offsetX || 0, 
+                  y: this.canvas.translateOffsetY + this.config.offsetY || 0
+              };
+              this.geom.translate(this.clickedNode.endPos.add(offset).$scale(-1), 'end');
+            }
+        },
+
+        requestNodes: function(node, onComplete) {
+          var handler = $.merge(this.controller, onComplete),
+          lev = this.config.levelsToShow;
+          if(handler.request) {
+              var leaves = [], d = node._depth;
+              node.eachLevel(0, lev, function(n) {
+                  if(n.drawn &&
+                   !n.anySubnode()) {
+                   leaves.push(n);
+                   n._level = lev - (n._depth - d);
+                  }
+              });
+              this.group.requestNodes(leaves, handler);
+          }
+            else
+              handler.onComplete();
+        },
+
+        contract: function(onComplete, switched) {
+          var orn  = this.config.orientation;
+          var Geom = this.geom, Group = this.group;
+          if(switched) Geom.switchOrientation(switched);
+          var nodes = getNodesToHide.call(this);
+          if(switched) Geom.switchOrientation(orn);
+          Group.contract(nodes, $.merge(this.controller, onComplete));
+        },
+
+         move: function(node, onComplete) {
+            this.compute('end', false);
+            var move = onComplete.Move, offset = {
+                'x': move.offsetX,
+                'y': move.offsetY
+            };
+            if(move.enable) {
+                this.geom.translate(node.endPos.add(offset).$scale(-1), "end");
+            } else {
+                this.geom.translate($C(offset.x, offset.y).$scale(-1), "end");
+            }
+            this.fx.animate($.merge(this.controller, { modes: ['linear'] }, onComplete));
+         },
+
+        expand: function (node, onComplete) {
+            var nodeArray = getNodesToShow.call(this, node);
+            this.group.expand(nodeArray, $.merge(this.controller, onComplete));
+        },
+
+        selectPath: function(node) {
+          var that = this;
+          this.graph.eachNode(function(n) { n.selected = false; });
+          function path(node) {
+              if(node == null || node.selected) return;
+              node.selected = true;
+              $.each(that.group.getSiblings([node])[node.id],
+              function(n) {
+                   n.exist = true;
+                   n.drawn = true;
+              });
+              var parents = node.getParents();
+              parents = (parents.length > 0)? parents[0] : null;
+              path(parents);
+          };
+          for(var i=0, ns = [node.id].concat(nodesInPath); i < ns.length; i++) {
+              path(this.graph.getNode(ns[i]));
+          }
+        },
+
+        /*
+        Method: setRoot
+
+         Switches the current root node. Changes the topology of the Tree.
+
+        Parameters:
+           id - (string) The id of the node to be set as root.
+           method - (string) Set this to "animate" if you want to animate the tree after adding the subtree. You can also set this parameter to "replot" to just replot the subtree.
+           onComplete - (optional|object) An action to perform after the animation (if any).
+
+        Example:
+
+        (start code js)
+          st.setRoot('nodeId', 'animate', {
+             onComplete: function() {
+               alert('complete!');
+             }
+          });
+        (end code)
+     */
+     setRoot: function(id, method, onComplete) {
+        	if(this.busy) return;
+        	this.busy = true;
+          var that = this, canvas = this.canvas;
+        	var rootNode = this.graph.getNode(this.root);
+        	var clickedNode = this.graph.getNode(id);
+        	function $setRoot() {
+            	if(this.config.multitree && clickedNode.data.$orn) {
+            		var orn = clickedNode.data.$orn;
+            		var opp = {
+            				'left': 'right',
+            				'right': 'left',
+            				'top': 'bottom',
+            				'bottom': 'top'
+            		}[orn];
+            		rootNode.data.$orn = opp;
+            		(function tag(rootNode) {
+                		rootNode.eachSubnode(function(n) {
+                			if(n.id != id) {
+                				n.data.$orn = opp;
+                				tag(n);
+                			}
+                		});
+            		})(rootNode);
+            		delete clickedNode.data.$orn;
+            	}
+            	this.root = id;
+            	this.clickedNode = clickedNode;
+            	this.graph.computeLevels(this.root, 0, "ignore");
+            	this.geom.setRightLevelToShow(clickedNode, canvas, {
+            	  execHide: false,
+            	  onShow: function(node) {
+            	    if(!node.drawn) {
+                    node.drawn = true;
+                    node.setData('alpha', 1, 'end');
+                    node.setData('alpha', 0);
+                    node.pos.setc(clickedNode.pos.x, clickedNode.pos.y);
+            	    }
+            	  }
+            	});
+              this.compute('end');
+              this.busy = true;
+              this.fx.animate({
+                modes: ['linear', 'node-property:alpha'],
+                onComplete: function() {
+                  that.busy = false;
+                  that.onClick(id, {
+                    onComplete: function() {
+                      onComplete && onComplete.onComplete();
+                    }
+                  });
+                }
+              });
+        	}
+
+        	// delete previous orientations (if any)
+        	delete rootNode.data.$orns;
+
+        	if(method == 'animate') {
+        	  $setRoot.call(this);
+        	  that.selectPath(clickedNode);
+        	} else if(method == 'replot') {
+        		$setRoot.call(this);
+        		this.select(this.root);
+        	}
+     },
+
+     /*
+           Method: addSubtree
+
+            Adds a subtree.
+
+           Parameters:
+              subtree - (object) A JSON Tree object. See also <Loader.loadJSON>.
+              method - (string) Set this to "animate" if you want to animate the tree after adding the subtree. You can also set this parameter to "replot" to just replot the subtree.
+              onComplete - (optional|object) An action to perform after the animation (if any).
+
+           Example:
+
+           (start code js)
+             st.addSubtree(json, 'animate', {
+                onComplete: function() {
+                  alert('complete!');
+                }
+             });
+           (end code)
+        */
+        addSubtree: function(subtree, method, onComplete) {
+            if(method == 'replot') {
+                this.op.sum(subtree, $.extend({ type: 'replot' }, onComplete || {}));
+            } else if (method == 'animate') {
+                this.op.sum(subtree, $.extend({ type: 'fade:seq' }, onComplete || {}));
+            }
+        },
+
+        /*
+           Method: removeSubtree
+
+            Removes a subtree.
+
+           Parameters:
+              id - (string) The _id_ of the subtree to be removed.
+              removeRoot - (boolean) Default's *false*. Remove the root of the subtree or only its subnodes.
+              method - (string) Set this to "animate" if you want to animate the tree after removing the subtree. You can also set this parameter to "replot" to just replot the subtree.
+              onComplete - (optional|object) An action to perform after the animation (if any).
+
+          Example:
+
+          (start code js)
+            st.removeSubtree('idOfSubtreeToBeRemoved', false, 'animate', {
+              onComplete: function() {
+                alert('complete!');
+              }
+            });
+          (end code)
+
+        */
+        removeSubtree: function(id, removeRoot, method, onComplete) {
+            var node = this.graph.getNode(id), subids = [];
+            node.eachLevel(+!removeRoot, false, function(n) {
+                subids.push(n.id);
+            });
+            if(method == 'replot') {
+                this.op.removeNode(subids, $.extend({ type: 'replot' }, onComplete || {}));
+            } else if (method == 'animate') {
+                this.op.removeNode(subids, $.extend({ type: 'fade:seq'}, onComplete || {}));
+            }
+        },
+
+        /*
+           Method: select
+
+            Selects a node in the <ST> without performing an animation. Useful when selecting
+            nodes which are currently hidden or deep inside the tree.
+
+          Parameters:
+            id - (string) The id of the node to select.
+            onComplete - (optional|object) an onComplete callback.
+
+          Example:
+          (start code js)
+            st.select('mynodeid', {
+              onComplete: function() {
+                alert('complete!');
+              }
+            });
+          (end code)
+        */
+        select: function(id, onComplete) {
+            var group = this.group, geom = this.geom;
+            var node=  this.graph.getNode(id), canvas = this.canvas;
+            var root  = this.graph.getNode(this.root);
+            var complete = $.merge(this.controller, onComplete);
+            var that = this;
+
+            complete.onBeforeCompute(node);
+            this.selectPath(node);
+            this.clickedNode= node;
+            this.requestNodes(node, {
+                onComplete: function(){
+                    group.hide(group.prepare(getNodesToHide.call(that)), complete);
+                    geom.setRightLevelToShow(node, canvas);
+                    that.compute("current");
+                    that.graph.eachNode(function(n) {
+                        var pos = n.pos.getc(true);
+                        n.startPos.setc(pos.x, pos.y);
+                        n.endPos.setc(pos.x, pos.y);
+                        n.visited = false;
+                    });
+                    var offset = { x: complete.offsetX, y: complete.offsetY };
+                    that.geom.translate(node.endPos.add(offset).$scale(-1), ["start", "current", "end"]);
+                    group.show(getNodesToShow.call(that));
+                    that.plot();
+                    complete.onAfterCompute(that.clickedNode);
+                    complete.onComplete();
+                }
+            });
+        },
+
+      /*
+         Method: onClick
+
+        Animates the <ST> to center the node specified by *id*.
+
+        Parameters:
+
+        id - (string) A node id.
+        options - (optional|object) A group of options and callbacks described below.
+        onComplete - (object) An object callback called when the animation finishes.
+        Move - (object) An object that has as properties _offsetX_ or _offsetY_ for adding some offset position to the centered node.
+
+        Example:
+
+        (start code js)
+          st.onClick('mynodeid', {
+	          Move: {
+	          	enable: true,
+	            offsetX: 30,
+	            offsetY: 5
+	          },
+	          onComplete: function() {
+	              alert('yay!');
+	          }
+          });
+        (end code)
+
+        */
+      onClick: function (id, options) {
+        var canvas = this.canvas, that = this, Geom = this.geom, config = this.config;
+        var innerController = {
+            Move: {
+        	    enable: true,
+              offsetX: canvas.translateOffsetX + config.offsetX || 0,
+              offsetY: canvas.translateOffsetY + config.offsetY || 0
+            },
+            setRightLevelToShowConfig: false,
+            onBeforeRequest: $.empty,
+            onBeforeContract: $.empty,
+            onBeforeMove: $.empty,
+            onBeforeExpand: $.empty
+        };
+        var complete = $.merge(this.controller, innerController, options);
+
+        if(!this.busy) {
+            this.busy = true;
+            var node = this.graph.getNode(id);
+            this.selectPath(node, this.clickedNode);
+           	this.clickedNode = node;
+            complete.onBeforeCompute(node);
+            complete.onBeforeRequest(node);
+            this.requestNodes(node, {
+                onComplete: function() {
+                    complete.onBeforeContract(node);
+                    that.contract({
+                        onComplete: function() {
+                            Geom.setRightLevelToShow(node, canvas, complete.setRightLevelToShowConfig);
+                            complete.onBeforeMove(node);
+                            that.move(node, {
+                                Move: complete.Move,
+                                onComplete: function() {
+                                    complete.onBeforeExpand(node);
+                                    that.expand(node, {
+                                        onComplete: function() {
+                                            that.busy = false;
+                                            complete.onAfterCompute(id);
+                                            complete.onComplete();
+                                        }
+                                    }); // expand
+                                }
+                            }); // move
+                        }
+                    });// contract
+                }
+            });// request
+        }
+      }
+    });
+
+})();
+
+$jit.ST.$extend = true;
+
+/*
+   Class: ST.Op
+
+   Custom extension of <Graph.Op>.
+
+   Extends:
+
+   All <Graph.Op> methods
+
+   See also:
+
+   <Graph.Op>
+
+*/
+$jit.ST.Op = new Class({
+
+  Implements: Graph.Op
+
+});
+
+/*
+
+     Performs operations on group of nodes.
+
+*/
+$jit.ST.Group = new Class({
+
+    initialize: function(viz) {
+        this.viz = viz;
+        this.canvas = viz.canvas;
+        this.config = viz.config;
+        this.animation = new Animation;
+        this.nodes = null;
+    },
+
+    /*
+
+       Calls the request method on the controller to request a subtree for each node.
+    */
+    requestNodes: function(nodes, controller) {
+        var counter = 0, len = nodes.length, nodeSelected = {};
+        var complete = function() { controller.onComplete(); };
+        var viz = this.viz;
+        if(len == 0) complete();
+        for(var i=0; i<len; i++) {
+            nodeSelected[nodes[i].id] = nodes[i];
+            controller.request(nodes[i].id, nodes[i]._level, {
+                onComplete: function(nodeId, data) {
+                    if(data && data.children) {
+                        data.id = nodeId;
+                        viz.op.sum(data, { type: 'nothing' });
+                    }
+                    if(++counter == len) {
+                        viz.graph.computeLevels(viz.root, 0);
+                        complete();
+                    }
+                }
+            });
+        }
+    },
+
+    /*
+
+       Collapses group of nodes.
+    */
+    contract: function(nodes, controller) {
+        var viz = this.viz;
+        var that = this;
+
+        nodes = this.prepare(nodes);
+        this.animation.setOptions($.merge(controller, {
+            $animating: false,
+            compute: function(delta) {
+              if(delta == 1) delta = 0.99;
+              that.plotStep(1 - delta, controller, this.$animating);
+              this.$animating = 'contract';
+            },
+
+            complete: function() {
+                that.hide(nodes, controller);
+            }
+        })).start();
+    },
+
+    hide: function(nodes, controller) {
+        var viz = this.viz;
+        for(var i=0; i<nodes.length; i++) {
+            // TODO nodes are requested on demand, but not
+            // deleted when hidden. Would that be a good feature?
+            // Currently that feature is buggy, so I'll turn it off
+            // Actually this feature is buggy because trimming should take
+            // place onAfterCompute and not right after collapsing nodes.
+            if (true || !controller || !controller.request) {
+                nodes[i].eachLevel(1, false, function(elem){
+                    if (elem.exist) {
+                        $.extend(elem, {
+                            'drawn': false,
+                            'exist': false
+                        });
+                    }
+                });
+            } else {
+                var ids = [];
+                nodes[i].eachLevel(1, false, function(n) {
+                    ids.push(n.id);
+                });
+                viz.op.removeNode(ids, { 'type': 'nothing' });
+                viz.labels.clearLabels();
+            }
+        }
+        controller.onComplete();
+    },
+
+
+    /*
+       Expands group of nodes.
+    */
+    expand: function(nodes, controller) {
+        var that = this;
+        this.show(nodes);
+        this.animation.setOptions($.merge(controller, {
+            $animating: false,
+            compute: function(delta) {
+                that.plotStep(delta, controller, this.$animating);
+                this.$animating = 'expand';
+            },
+
+            complete: function() {
+                that.plotStep(undefined, controller, false);
+                controller.onComplete();
+            }
+        })).start();
+
+    },
+
+    show: function(nodes) {
+        var config = this.config;
+        this.prepare(nodes);
+        $.each(nodes, function(n) {
+        	// check for root nodes if multitree
+        	if(config.multitree && !('$orn' in n.data)) {
+        		delete n.data.$orns;
+        		var orns = ' ';
+        		n.eachSubnode(function(ch) {
+        			if(('$orn' in ch.data)
+        					&& orns.indexOf(ch.data.$orn) < 0
+        					&& ch.exist && !ch.drawn) {
+        				orns += ch.data.$orn + ' ';
+        			}
+        		});
+        		n.data.$orns = orns;
+        	}
+            n.eachLevel(0, config.levelsToShow, function(n) {
+            	if(n.exist) n.drawn = true;
+            });
+        });
+    },
+
+    prepare: function(nodes) {
+        this.nodes = this.getNodesWithChildren(nodes);
+        return this.nodes;
+    },
+
+    /*
+       Filters an array of nodes leaving only nodes with children.
+    */
+    getNodesWithChildren: function(nodes) {
+        var ans = [], config = this.config, root = this.viz.root;
+        nodes.sort(function(a, b) { return (a._depth <= b._depth) - (a._depth >= b._depth); });
+        for(var i=0; i<nodes.length; i++) {
+            if(nodes[i].anySubnode("exist")) {
+            	for (var j = i+1, desc = false; !desc && j < nodes.length; j++) {
+                    if(!config.multitree || '$orn' in nodes[j].data) {
+                		desc = desc || nodes[i].isDescendantOf(nodes[j].id);
+                    }
+                }
+                if(!desc) ans.push(nodes[i]);
+            }
+        }
+        return ans;
+    },
+
+    plotStep: function(delta, controller, animating) {
+        var viz = this.viz,
+        config = this.config,
+        canvas = viz.canvas,
+        ctx = canvas.getCtx(),
+        nodes = this.nodes;
+        var i, node;
+        // hide nodes that are meant to be collapsed/expanded
+        var nds = {};
+        for(i=0; i<nodes.length; i++) {
+          node = nodes[i];
+          nds[node.id] = [];
+          var root = config.multitree && !('$orn' in node.data);
+          var orns = root && node.data.$orns;
+          node.eachSubgraph(function(n) {
+            // TODO(nico): Cleanup
+        	  // special check for root node subnodes when
+        	  // multitree is checked.
+        	  if(root && orns && orns.indexOf(n.data.$orn) > 0
+        			  && n.drawn) {
+        		  n.drawn = false;
+                  nds[node.id].push(n);
+              } else if((!root || !orns) && n.drawn) {
+                n.drawn = false;
+                nds[node.id].push(n);
+              }
+            });
+            node.drawn = true;
+        }
+        // plot the whole (non-scaled) tree
+        if(nodes.length > 0) viz.fx.plot();
+        // show nodes that were previously hidden
+        for(i in nds) {
+          $.each(nds[i], function(n) { n.drawn = true; });
+        }
+        // plot each scaled subtree
+        for(i=0; i<nodes.length; i++) {
+          node = nodes[i];
+          ctx.save();
+          viz.fx.plotSubtree(node, controller, delta, animating);
+          ctx.restore();
+        }
+      },
+
+      getSiblings: function(nodes) {
+        var siblings = {};
+        $.each(nodes, function(n) {
+            var par = n.getParents();
+            if (par.length == 0) {
+                siblings[n.id] = [n];
+            } else {
+                var ans = [];
+                par[0].eachSubnode(function(sn) {
+                    ans.push(sn);
+                });
+                siblings[n.id] = ans;
+            }
+        });
+        return siblings;
+    }
+});
+
+/*
+   ST.Geom
+
+   Performs low level geometrical computations.
+
+   Access:
+
+   This instance can be accessed with the _geom_ parameter of the st instance created.
+
+   Example:
+
+   (start code js)
+    var st = new ST(canvas, config);
+    st.geom.translate //or can also call any other <ST.Geom> method
+   (end code)
+
+*/
+
+$jit.ST.Geom = new Class({
+    Implements: Graph.Geom,
+    /*
+       Changes the tree current orientation to the one specified.
+
+       You should usually use <ST.switchPosition> instead.
+    */
+    switchOrientation: function(orn) {
+    	this.config.orientation = orn;
+    },
+
+    /*
+       Makes a value dispatch according to the current layout
+       Works like a CSS property, either _top-right-bottom-left_ or _top|bottom - left|right_.
+     */
+    dispatch: function() {
+    	  // TODO(nico) should store Array.prototype.slice.call somewhere.
+        var args = Array.prototype.slice.call(arguments);
+        var s = args.shift(), len = args.length;
+        var val = function(a) { return typeof a == 'function'? a() : a; };
+        if(len == 2) {
+            return (s == "top" || s == "bottom")? val(args[0]) : val(args[1]);
+        } else if(len == 4) {
+            switch(s) {
+                case "top": return val(args[0]);
+                case "right": return val(args[1]);
+                case "bottom": return val(args[2]);
+                case "left": return val(args[3]);
+            }
+        }
+        return undefined;
+    },
+
+    /*
+       Returns label height or with, depending on the tree current orientation.
+    */
+    getSize: function(n, invert) {
+        var data = n.data, config = this.config;
+        var siblingOffset = config.siblingOffset;
+        var s = (config.multitree
+        		&& ('$orn' in data)
+        		&& data.$orn) || config.orientation;
+        var w = n.getData('width') + siblingOffset;
+        var h = n.getData('height') + siblingOffset;
+        if(!invert)
+            return this.dispatch(s, h, w);
+        else
+            return this.dispatch(s, w, h);
+    },
+
+    /*
+       Calculates a subtree base size. This is an utility function used by _getBaseSize_
+    */
+    getTreeBaseSize: function(node, level, leaf) {
+        var size = this.getSize(node, true), baseHeight = 0, that = this;
+        if(leaf(level, node)) return size;
+        if(level === 0) return 0;
+        node.eachSubnode(function(elem) {
+            baseHeight += that.getTreeBaseSize(elem, level -1, leaf);
+        });
+        return (size > baseHeight? size : baseHeight) + this.config.subtreeOffset;
+    },
+
+
+    /*
+       getEdge
+
+       Returns a Complex instance with the begin or end position of the edge to be plotted.
+
+       Parameters:
+
+       node - A <Graph.Node> that is connected to this edge.
+       type - Returns the begin or end edge position. Possible values are 'begin' or 'end'.
+
+       Returns:
+
+       A <Complex> number specifying the begin or end position.
+    */
+    getEdge: function(node, type, s) {
+    	var $C = function(a, b) {
+          return function(){
+            return node.pos.add(new Complex(a, b));
+          };
+        };
+        var dim = this.node;
+        var w = node.getData('width');
+        var h = node.getData('height');
+
+        if(type == 'begin') {
+            if(dim.align == "center") {
+                return this.dispatch(s, $C(0, h/2), $C(-w/2, 0),
+                                     $C(0, -h/2),$C(w/2, 0));
+            } else if(dim.align == "left") {
+                return this.dispatch(s, $C(0, h), $C(0, 0),
+                                     $C(0, 0), $C(w, 0));
+            } else if(dim.align == "right") {
+                return this.dispatch(s, $C(0, 0), $C(-w, 0),
+                                     $C(0, -h),$C(0, 0));
+            } else throw "align: not implemented";
+
+
+        } else if(type == 'end') {
+            if(dim.align == "center") {
+                return this.dispatch(s, $C(0, -h/2), $C(w/2, 0),
+                                     $C(0, h/2),  $C(-w/2, 0));
+            } else if(dim.align == "left") {
+                return this.dispatch(s, $C(0, 0), $C(w, 0),
+                                     $C(0, h), $C(0, 0));
+            } else if(dim.align == "right") {
+                return this.dispatch(s, $C(0, -h),$C(0, 0),
+                                     $C(0, 0), $C(-w, 0));
+            } else throw "align: not implemented";
+        }
+    },
+
+    /*
+       Adjusts the tree position due to canvas scaling or translation.
+    */
+    getScaledTreePosition: function(node, scale) {
+        var dim = this.node;
+        var w = node.getData('width');
+        var h = node.getData('height');
+        var s = (this.config.multitree
+        		&& ('$orn' in node.data)
+        		&& node.data.$orn) || this.config.orientation;
+
+        var $C = function(a, b) {
+          return function(){
+            return node.pos.add(new Complex(a, b)).$scale(1 - scale);
+          };
+        };
+        if(dim.align == "left") {
+            return this.dispatch(s, $C(0, h), $C(0, 0),
+                                 $C(0, 0), $C(w, 0));
+        } else if(dim.align == "center") {
+            return this.dispatch(s, $C(0, h / 2), $C(-w / 2, 0),
+                                 $C(0, -h / 2),$C(w / 2, 0));
+        } else if(dim.align == "right") {
+            return this.dispatch(s, $C(0, 0), $C(-w, 0),
+                                 $C(0, -h),$C(0, 0));
+        } else throw "align: not implemented";
+    },
+
+    /*
+       treeFitsInCanvas
+
+       Returns a Boolean if the current subtree fits in canvas.
+
+       Parameters:
+
+       node - A <Graph.Node> which is the current root of the subtree.
+       canvas - The <Canvas> object.
+       level - The depth of the subtree to be considered.
+    */
+    treeFitsInCanvas: function(node, canvas, level) {
+        var csize = canvas.getSize();
+        var s = (this.config.multitree
+        		&& ('$orn' in node.data)
+        		&& node.data.$orn) || this.config.orientation;
+
+        var size = this.dispatch(s, csize.width, csize.height);
+        var baseSize = this.getTreeBaseSize(node, level, function(level, node) {
+          return level === 0 || !node.anySubnode();
+        });
+        return (baseSize < size);
+    }
+});
+
+/*
+  Class: ST.Plot
+
+  Custom extension of <Graph.Plot>.
+
+  Extends:
+
+  All <Graph.Plot> methods
+
+  See also:
+
+  <Graph.Plot>
+
+*/
+$jit.ST.Plot = new Class({
+
+    Implements: Graph.Plot,
+
+    /*
+       Plots a subtree from the spacetree.
+    */
+    plotSubtree: function(node, opt, scale, animating) {
+        var viz = this.viz, canvas = viz.canvas, config = viz.config;
+        scale = Math.min(Math.max(0.001, scale), 1);
+        if(scale >= 0) {
+            node.drawn = false;
+            var ctx = canvas.getCtx();
+            var diff = viz.geom.getScaledTreePosition(node, scale);
+            ctx.translate(diff.x, diff.y);
+            ctx.scale(scale, scale);
+        }
+        this.plotTree(node, $.merge(opt, {
+          'withLabels': true,
+          'hideLabels': !!scale,
+          'plotSubtree': function(n, ch) {
+            var root = config.multitree && !('$orn' in node.data);
+            var orns = root && node.getData('orns');
+            return !root || orns.indexOf(node.getData('orn')) > -1;
+          }
+        }), animating);
+        if(scale >= 0) node.drawn = true;
+    },
+
+    /*
+        Method: getAlignedPos
+
+        Returns a *x, y* object with the position of the top/left corner of a <ST> node.
+
+        Parameters:
+
+        pos - (object) A <Graph.Node> position.
+        width - (number) The width of the node.
+        height - (number) The height of the node.
+
+     */
+    getAlignedPos: function(pos, width, height) {
+        var nconfig = this.node;
+        var square, orn;
+        if(nconfig.align == "center") {
+            square = {
+                x: pos.x - width / 2,
+                y: pos.y - height / 2
+            };
+        } else if (nconfig.align == "left") {
+            orn = this.config.orientation;
+            if(orn == "bottom" || orn == "top") {
+                square = {
+                    x: pos.x - width / 2,
+                    y: pos.y
+                };
+            } else {
+                square = {
+                    x: pos.x,
+                    y: pos.y - height / 2
+                };
+            }
+        } else if(nconfig.align == "right") {
+            orn = this.config.orientation;
+            if(orn == "bottom" || orn == "top") {
+                square = {
+                    x: pos.x - width / 2,
+                    y: pos.y - height
+                };
+            } else {
+                square = {
+                    x: pos.x - width,
+                    y: pos.y - height / 2
+                };
+            }
+        } else throw "align: not implemented";
+
+        return square;
+    },
+
+    getOrientation: function(adj) {
+    	var config = this.config;
+    	var orn = config.orientation;
+
+    	if(config.multitree) {
+        	var nodeFrom = adj.nodeFrom;
+        	var nodeTo = adj.nodeTo;
+    		orn = (('$orn' in nodeFrom.data)
+        		&& nodeFrom.data.$orn)
+        		|| (('$orn' in nodeTo.data)
+        		&& nodeTo.data.$orn);
+    	}
+
+    	return orn;
+    }
+});
+
+/*
+  Class: ST.Label
+
+  Custom extension of <Graph.Label>.
+  Contains custom <Graph.Label.SVG>, <Graph.Label.HTML> and <Graph.Label.Native> extensions.
+
+  Extends:
+
+  All <Graph.Label> methods and subclasses.
+
+  See also:
+
+  <Graph.Label>, <Graph.Label.Native>, <Graph.Label.HTML>, <Graph.Label.SVG>.
+ */
+$jit.ST.Label = {};
+
+/*
+   ST.Label.Native
+
+   Custom extension of <Graph.Label.Native>.
+
+   Extends:
+
+   All <Graph.Label.Native> methods
+
+   See also:
+
+   <Graph.Label.Native>
+*/
+$jit.ST.Label.Native = new Class({
+  Implements: Graph.Label.Native,
+
+  renderLabel: function(canvas, node, controller) {
+    var ctx = canvas.getCtx(),
+        coord = node.pos.getc(true),
+        width = node.getData('width'),
+        height = node.getData('height'),
+        pos = this.viz.fx.getAlignedPos(coord, width, height);
+    ctx.fillText(node.name, pos.x + width / 2, pos.y + height / 2);
+  }
+});
+
+$jit.ST.Label.DOM = new Class({
+  Implements: Graph.Label.DOM,
+
+  /*
+      placeLabel
+
+      Overrides abstract method placeLabel in <Graph.Plot>.
+
+      Parameters:
+
+      tag - A DOM label element.
+      node - A <Graph.Node>.
+      controller - A configuration/controller object passed to the visualization.
+
+    */
+    placeLabel: function(tag, node, controller) {
+        var pos = node.pos.getc(true),
+            config = this.viz.config,
+            dim = config.Node,
+            canvas = this.viz.canvas,
+            w = node.getData('width'),
+            h = node.getData('height'),
+            radius = canvas.getSize(),
+            labelPos, orn;
+
+        var ox = canvas.translateOffsetX,
+            oy = canvas.translateOffsetY,
+            sx = canvas.scaleOffsetX,
+            sy = canvas.scaleOffsetY,
+            posx = pos.x * sx + ox,
+            posy = pos.y * sy + oy;
+
+        if(dim.align == "center") {
+            labelPos= {
+                x: Math.round(posx - w / 2 + radius.width/2),
+                y: Math.round(posy - h / 2 + radius.height/2)
+            };
+        } else if (dim.align == "left") {
+            orn = config.orientation;
+            if(orn == "bottom" || orn == "top") {
+                labelPos= {
+                    x: Math.round(posx - w / 2 + radius.width/2),
+                    y: Math.round(posy + radius.height/2)
+                };
+            } else {
+                labelPos= {
+                    x: Math.round(posx + radius.width/2),
+                    y: Math.round(posy - h / 2 + radius.height/2)
+                };
+            }
+        } else if(dim.align == "right") {
+            orn = config.orientation;
+            if(orn == "bottom" || orn == "top") {
+                labelPos= {
+                    x: Math.round(posx - w / 2 + radius.width/2),
+                    y: Math.round(posy - h + radius.height/2)
+                };
+            } else {
+                labelPos= {
+                    x: Math.round(posx - w + radius.width/2),
+                    y: Math.round(posy - h / 2 + radius.height/2)
+                };
+            }
+        } else throw "align: not implemented";
+
+		labelPos.w=w;
+		labelPos.h=h;
+
+        var style = tag.style;
+        style.left = labelPos.x + 'px';
+        style.top  = labelPos.y + 'px';
+        style.display = this.fitsInCanvas(labelPos, canvas)? '' : 'none';
+        controller.onPlaceLabel(tag, node);
+    }
+});
+
+/*
+  ST.Label.SVG
+
+  Custom extension of <Graph.Label.SVG>.
+
+  Extends:
+
+  All <Graph.Label.SVG> methods
+
+  See also:
+
+  <Graph.Label.SVG>
+*/
+$jit.ST.Label.SVG = new Class({
+  Implements: [$jit.ST.Label.DOM, Graph.Label.SVG],
+
+  initialize: function(viz) {
+    this.viz = viz;
+  }
+});
+
+/*
+   ST.Label.HTML
+
+   Custom extension of <Graph.Label.HTML>.
+
+   Extends:
+
+   All <Graph.Label.HTML> methods.
+
+   See also:
+
+   <Graph.Label.HTML>
+
+*/
+$jit.ST.Label.HTML = new Class({
+  Implements: [$jit.ST.Label.DOM, Graph.Label.HTML],
+
+  initialize: function(viz) {
+    this.viz = viz;
+  }
+});
+
+
+/*
+  Class: ST.Plot.NodeTypes
+
+  This class contains a list of <Graph.Node> built-in types.
+  Node types implemented are 'none', 'circle', 'rectangle', 'ellipse' and 'square'.
+
+  You can add your custom node types, customizing your visualization to the extreme.
+
+  Example:
+
+  (start code js)
+    ST.Plot.NodeTypes.implement({
+      'mySpecialType': {
+        'render': function(node, canvas) {
+          //print your custom node to canvas
+        },
+        //optional
+        'contains': function(node, pos) {
+          //return true if pos is inside the node or false otherwise
+        }
+      }
+    });
+  (end code)
+
+*/
+$jit.ST.Plot.NodeTypes = new Class({
+  'none': {
+    'render': $.empty,
+    'contains': $.lambda(false)
+  },
+  'circle': {
+    'render': function(node, canvas) {
+      var dim  = node.getData('dim'),
+          pos = this.getAlignedPos(node.pos.getc(true), dim, dim),
+          dim2 = dim/2;
+      this.nodeHelper.circle.render('fill', {x:pos.x+dim2, y:pos.y+dim2}, dim2, canvas);
+    },
+    'contains': function(node, pos) {
+      var dim  = node.getData('dim'),
+          npos = this.getAlignedPos(node.pos.getc(true), dim, dim),
+          dim2 = dim/2;
+      return this.nodeHelper.circle.contains({x:npos.x+dim2, y:npos.y+dim2}, pos, dim2);
+    }
+  },
+  'square': {
+    'render': function(node, canvas) {
+      var dim  = node.getData('dim'),
+          dim2 = dim/2,
+          pos = this.getAlignedPos(node.pos.getc(true), dim, dim);
+      this.nodeHelper.square.render('fill', {x:pos.x+dim2, y:pos.y+dim2}, dim2, canvas);
+    },
+    'contains': function(node, pos) {
+      var dim  = node.getData('dim'),
+          npos = this.getAlignedPos(node.pos.getc(true), dim, dim),
+          dim2 = dim/2;
+      return this.nodeHelper.square.contains({x:npos.x+dim2, y:npos.y+dim2}, pos, dim2);
+    }
+  },
+  'ellipse': {
+    'render': function(node, canvas) {
+      var width = node.getData('width'),
+          height = node.getData('height'),
+          pos = this.getAlignedPos(node.pos.getc(true), width, height);
+      this.nodeHelper.ellipse.render('fill', {x:pos.x+width/2, y:pos.y+height/2}, width, height, canvas);
+    },
+    'contains': function(node, pos) {
+      var width = node.getData('width'),
+          height = node.getData('height'),
+          npos = this.getAlignedPos(node.pos.getc(true), width, height);
+      return this.nodeHelper.ellipse.contains({x:npos.x+width/2, y:npos.y+height/2}, pos, width, height);
+    }
+  },
+  'rectangle': {
+    'render': function(node, canvas) {
+      var width = node.getData('width'),
+          height = node.getData('height'),
+          pos = this.getAlignedPos(node.pos.getc(true), width, height);
+      this.nodeHelper.rectangle.render('fill', {x:pos.x+width/2, y:pos.y+height/2}, width, height, canvas);
+    },
+    'contains': function(node, pos) {
+      var width = node.getData('width'),
+          height = node.getData('height'),
+          npos = this.getAlignedPos(node.pos.getc(true), width, height);
+      return this.nodeHelper.rectangle.contains({x:npos.x+width/2, y:npos.y+height/2}, pos, width, height);
+    }
+  }
+});
+
+/*
+  Class: ST.Plot.EdgeTypes
+
+  This class contains a list of <Graph.Adjacence> built-in types.
+  Edge types implemented are 'none', 'line', 'arrow', 'quadratic:begin', 'quadratic:end', 'bezier'.
+
+  You can add your custom edge types, customizing your visualization to the extreme.
+
+  Example:
+
+  (start code js)
+    ST.Plot.EdgeTypes.implement({
+      'mySpecialType': {
+        'render': function(adj, canvas) {
+          //print your custom edge to canvas
+        },
+        //optional
+        'contains': function(adj, pos) {
+          //return true if pos is inside the arc or false otherwise
+        }
+      }
+    });
+  (end code)
+
+*/
+$jit.ST.Plot.EdgeTypes = new Class({
+    'none': $.empty,
+    'line': {
+      'render': function(adj, canvas) {
+        var orn = this.getOrientation(adj),
+            nodeFrom = adj.nodeFrom,
+            nodeTo = adj.nodeTo,
+            rel = nodeFrom._depth < nodeTo._depth,
+            from = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
+            to =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn);
+        this.edgeHelper.line.render(from, to, canvas);
+      },
+      'contains': function(adj, pos) {
+        var orn = this.getOrientation(adj),
+            nodeFrom = adj.nodeFrom,
+            nodeTo = adj.nodeTo,
+            rel = nodeFrom._depth < nodeTo._depth,
+            from = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
+            to =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn);
+        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
+      }
+    },
+     'arrow': {
+       'render': function(adj, canvas) {
+         var orn = this.getOrientation(adj),
+             node = adj.nodeFrom,
+             child = adj.nodeTo,
+             rel = (node._depth < child._depth),
+             dim = adj.getData('dim'),
+             from = this.viz.geom.getEdge((rel?node:child), 'begin', orn),
+             to = this.viz.geom.getEdge((rel?child:node), 'end', orn),
+             direction = adj.data.$direction,
+             inv = (direction && direction.length>1 && direction[0] != node.id);
+         this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
+       },
+       'contains': function(adj, pos) {
+         var orn = this.getOrientation(adj),
+             nodeFrom = adj.nodeFrom,
+             nodeTo = adj.nodeTo,
+             rel = nodeFrom._depth < nodeTo._depth,
+             from = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
+             to =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn);
+         return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
+       }
+     },
+    'quadratic:begin': {
+       'render': function(adj, canvas) {
+          var orn = this.getOrientation(adj);
+          var nodeFrom = adj.nodeFrom,
+              nodeTo = adj.nodeTo,
+              rel = nodeFrom._depth < nodeTo._depth,
+              begin = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
+              end =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn),
+              dim = adj.getData('dim'),
+              ctx = canvas.getCtx();
+          ctx.beginPath();
+          ctx.moveTo(begin.x, begin.y);
+          switch(orn) {
+            case "left":
+              ctx.quadraticCurveTo(begin.x + dim, begin.y, end.x, end.y);
+              break;
+            case "right":
+              ctx.quadraticCurveTo(begin.x - dim, begin.y, end.x, end.y);
+              break;
+            case "top":
+              ctx.quadraticCurveTo(begin.x, begin.y + dim, end.x, end.y);
+              break;
+            case "bottom":
+              ctx.quadraticCurveTo(begin.x, begin.y - dim, end.x, end.y);
+              break;
+          }
+          ctx.stroke();
+        }
+     },
+    'quadratic:end': {
+       'render': function(adj, canvas) {
+          var orn = this.getOrientation(adj);
+          var nodeFrom = adj.nodeFrom,
+              nodeTo = adj.nodeTo,
+              rel = nodeFrom._depth < nodeTo._depth,
+              begin = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
+              end =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn),
+              dim = adj.getData('dim'),
+              ctx = canvas.getCtx();
+          ctx.beginPath();
+          ctx.moveTo(begin.x, begin.y);
+          switch(orn) {
+            case "left":
+              ctx.quadraticCurveTo(end.x - dim, end.y, end.x, end.y);
+              break;
+            case "right":
+              ctx.quadraticCurveTo(end.x + dim, end.y, end.x, end.y);
+              break;
+            case "top":
+              ctx.quadraticCurveTo(end.x, end.y - dim, end.x, end.y);
+              break;
+            case "bottom":
+              ctx.quadraticCurveTo(end.x, end.y + dim, end.x, end.y);
+              break;
+          }
+          ctx.stroke();
+       }
+     },
+    'bezier': {
+       'render': function(adj, canvas) {
+         var orn = this.getOrientation(adj),
+             nodeFrom = adj.nodeFrom,
+             nodeTo = adj.nodeTo,
+             rel = nodeFrom._depth < nodeTo._depth,
+             begin = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
+             end =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn),
+             dim = adj.getData('dim'),
+             ctx = canvas.getCtx();
+         ctx.beginPath();
+         ctx.moveTo(begin.x, begin.y);
+         switch(orn) {
+           case "left":
+             ctx.bezierCurveTo(begin.x + dim, begin.y, end.x - dim, end.y, end.x, end.y);
+             break;
+           case "right":
+             ctx.bezierCurveTo(begin.x - dim, begin.y, end.x + dim, end.y, end.x, end.y);
+             break;
+           case "top":
+             ctx.bezierCurveTo(begin.x, begin.y + dim, end.x, end.y - dim, end.x, end.y);
+             break;
+           case "bottom":
+             ctx.bezierCurveTo(begin.x, begin.y - dim, end.x, end.y + dim, end.x, end.y);
+             break;
+         }
+         ctx.stroke();
+       }
+    }
+});
+
+
+
+
+
+ })();

From f1f607f5479ed962d1348bcba235c9e64d5ce4a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 15 Sep 2013 19:00:24 +1000
Subject: [PATCH 20/33] Update to match specs

---
 js/client-tournament.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 0fd0ef2c0..7f4d34d31 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -234,6 +234,7 @@
 							result = "lost";
 						this.room.$chat.append('<div class="notice tournament-message-battleend">' +
 							Tools.escapeHTML(data[0]) + " has " + result + " the match " + Tools.escapeHTML(data[3].split(',').join(' - ')) + " against " + Tools.escapeHTML(data[1]) +
+							(data[4] ? " but the tournament does not support drawing, so it did not count" : "") +
 							'</div>');
 						break;
 

From 074e7126960dba3f72f66b34567426b9516f2d4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 15 Sep 2013 22:51:31 +1000
Subject: [PATCH 21/33] Fix finding the parent node, and give active edges a
 style change

---
 js/client-tournament.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 7f4d34d31..cd299510a 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -296,6 +296,7 @@
 					node.name = n;
 
 					node.children.forEach(function (child) {
+						child.parentId = node.id;
 						stack.push(child);
 					});
 					++n;
@@ -326,7 +327,7 @@
 
 						onBeforePlotLine: function (edge){
 							if (edge.nodeTo.data.team && edge.nodeTo.data.team === edge.nodeFrom.data.team) {
-								edge.data.$color = '#ee0';
+								edge.data.$color = '#aa0';
 								edge.data.$lineWidth = 3;
 							} else {
 								delete edge.data.$color;
@@ -381,7 +382,10 @@
 
 							var parentNode = null;
 							for (var a in node.adjacencies)
-								if (node.adjacencies[a].nodeFrom === node) {
+								if (node.adjacencies[a].nodeFrom.id === node.data.parentId) {
+									parentNode = node.adjacencies[a].nodeFrom;
+									break;
+								} else if (node.adjacencies[a].nodeTo.id === node.data.parentId) {
 									parentNode = node.adjacencies[a].nodeTo;
 									break;
 								}

From 4c13a800d27e1becb1ec5242a47df7065ac506fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Tue, 17 Sep 2013 20:14:17 +1000
Subject: [PATCH 22/33] Use a different library for rendering the tree and
 implement draggable brackets to support it

---
 js/client-tournament.js           |   311 +-
 js/lib/d3.v3.min.js               |    33 +
 js/lib/infovis-spacetree-2.0.1.js | 10134 ----------------------------
 style/client.css                  |    85 +-
 testclient.html                   |     2 +-
 5 files changed, 270 insertions(+), 10295 deletions(-)
 create mode 100644 js/lib/d3.v3.min.js
 delete mode 100644 js/lib/infovis-spacetree-2.0.1.js

diff --git a/js/client-tournament.js b/js/client-tournament.js
index cd299510a..71bd418c7 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -7,6 +7,51 @@
 		return array.slice(0, -1).join(", ") + " " + finalSeparator + " " + array.slice(-1)[0];
 	}
 
+	function makeDraggable(element, position) {
+		var $element = $(element);
+		position = position || {};
+		var isMouseDown = false;
+		var innerX = 0;
+		var innerY = 0;
+
+		$element.css({
+			'user-select': 'none',
+			cursor: 'default',
+			position: 'absolute'
+		});
+
+		if (!('left' in position) || position.isDefault) {
+			position.left = $element.parent().width() / 2 - $element.width() / 2;
+			position.top = 0;
+			position.isDefault = true;
+		}
+
+		$element.css({
+			left: position.left,
+			top: position.top
+		});
+
+		$element.on('mousedown', function (e) {
+			innerX = e.pageX - this.offsetLeft;
+			innerY = e.pageY - this.offsetTop;
+			isMouseDown = true;
+		}).on('mouseup', function () {
+			isMouseDown = false;
+		});
+
+		$(document).on('mousemove', function (e) {
+			if (isMouseDown) {
+				position.left = e.pageX - innerX;
+				position.top = e.pageY - innerY;
+				delete position.isDefault;
+				$element.css({
+					left: position.left,
+					top: position.top
+				});
+			}
+		});
+	}
+
 	var TournamentBox = this.TournamentBox = (function () {
 		function TournamentBox(room, $wrapper) {
 			this.room = room;
@@ -57,6 +102,7 @@
 			this.info = null;
 			this.isJoined = false;
 			this.bracketData = null;
+			this.savedBracketPosition = {};
 			this.challenges = null;
 			this.challengeBys = null;
 
@@ -147,6 +193,7 @@
 						break;
 
 					case 'update':
+						this.$bracket.removeClass('tournament-bracket-overflowing');
 						this.$tools.find('.active').andSelf().removeClass('active');
 						if (this.info && this.info.isStarted)
 							this.$noMatches.addClass('active');
@@ -178,9 +225,15 @@
 
 						this.bracketData = JSON.parse(data.join('|'));
 						this.$bracket.empty()
-						var bracket = this.generateBracket(this.bracketData);
-						if (bracket)
-							this.$bracket.append(bracket);
+						var $bracket = this.generateBracket(this.bracketData);
+						if ($bracket) {
+							this.$bracket.append($bracket);
+							if (this.$bracket[0].offsetHeight < this.$bracket[0].scrollHeight ||
+								this.$bracket[0].offsetWidth < this.$bracket[0].scrollWidth) {
+								this.$bracket.addClass('tournament-bracket-overflowing');
+								makeDraggable($bracket, this.savedBracketPosition);
+							}
+						}
 						break;
 
 					case 'challenges':
@@ -241,9 +294,16 @@
 					case 'end':
 						var endData = JSON.parse(data[0]);
 
-						var bracket = this.generateBracket(endData.bracketData);
-						if (bracket)
-							this.room.$chat.append($('<div class="notice tournament-message-end-bracket"></div>').append(bracket));
+						var $bracket = this.generateBracket(endData.bracketData);
+						if ($bracket) {
+							var $bracketMessage = $('<div class="notice tournament-message-end-bracket"></div>').append($bracket);
+							this.room.$chat.append($bracketMessage);
+							if ($bracketMessage[0].offsetHeight < $bracketMessage[0].scrollHeight ||
+								$bracketMessage[0].offsetWidth < $bracketMessage[0].scrollWidth) {
+								$bracketMessage.addClass('tournament-message-end-bracket-overflowing');
+								makeDraggable($bracket);
+							}
+						}
 
 						this.room.$chat.append("<div class=\"notice tournament-message-end-winner\">Congratulations to " + Tools.escapeHTML(arrayToPhrase(endData.results[0])) + " for winning the tournament!</div>");
 						if (endData.results[1])
@@ -255,6 +315,7 @@
 						this.isActive = false;
 						this.info = null;
 						this.bracketData = null;
+						this.savedBracketPosition = {};
 
 						this.$box.removeClass("active");
 						this.$box.css('transition', '');
@@ -276,133 +337,135 @@
 				if (!data.rootNode)
 					return;
 
-				var id = 'tournament-bracket-tree-' + Math.floor(Math.random() * 0x100000000);
+				var nodeSize = {
+					width: 150, height: 20,
+					radius: 5,
+					separationX: 30, separationY: 15
+				};
 
-				// Change tree format to infovis-compatible
-				var stack = [data.rootNode];
-				var n = 0;
+				var $div = $('<div class="tournament-bracket-tree"></div>');
+
+				var nodesByDepth = [];
+				var stack = [{node: data.rootNode, depth: 0}];
 				while (stack.length > 0) {
-					var node = stack.pop();
+					var frame = stack.pop();
 
-					node.data = {};
-					for (var key in node)
-						if (key !== 'children' && key !== 'data') {
-							node.data[key] = node[key];
-							delete node[key];
-						}
-					node.data.children = node.children;
+					if (!nodesByDepth[frame.depth])
+						nodesByDepth.push(0);
+					++nodesByDepth[frame.depth];
 
-					node.id = id + "-" + n;
-					node.name = n;
-
-					node.children.forEach(function (child) {
-						child.parentId = node.id;
-						stack.push(child);
+					frame.node.children.forEach(function (child) {
+						stack.push({node: child, depth: frame.depth + 1});
 					});
-					++n;
 				}
+				var maxDepth = nodesByDepth.length;
+				var maxWidth = 0;
+				nodesByDepth.forEach(function (nodes) {
+					if (nodes > maxWidth)
+						maxWidth = nodes;
+				});
 
-				var $div = $('<div class="tournament-bracket-tree" id="' + id + '"></div>');
-				setTimeout(function () {
-					$div.parent().css('overflow', 'hidden');
-					var st = new $jit.ST({
-						injectInto: id,
-						constrained: false,
-						levelsToShow: 999,
-						orientation: 'right',
-						duration: 0,
-						fps: 60,
-						transition: $jit.Trans.linear,
-						Navigation: {enable: true, panning: true},
+				nodeSize.realWidth = nodeSize.width + nodeSize.radius * 2;
+				nodeSize.realHeight = nodeSize.height + nodeSize.radius * 2;
+				nodeSize.smallRealHeight = nodeSize.height / 2 + nodeSize.radius * 2;
+				var size = {
+					width: nodeSize.realWidth * maxDepth + nodeSize.separationX * maxDepth,
+					height: nodeSize.realHeight * (maxWidth + 0.5) + nodeSize.separationY * maxWidth
+				};
 
-						Node: {height: 30, width: 150, type: 'rectangle', CanvasStyles: {fillStyle: 'rgba(0, 0, 0, 0)'}, overridable: true},
-						Edge: {type: "bezier", overridable: true},
-
-						onBeforePlotNode: function (node) {
-							if (node.data.children.length === 0)
-								node.data.$height = 20;
-							else
-								delete node.data.$height;
-						},
-
-						onBeforePlotLine: function (edge){
-							if (edge.nodeTo.data.team && edge.nodeTo.data.team === edge.nodeFrom.data.team) {
-								edge.data.$color = '#aa0';
-								edge.data.$lineWidth = 3;
-							} else {
-								delete edge.data.$color;
-								delete edge.data.$lineWidth;
-							}
-						},
-
-						onCreateLabel: function (label, node) {
-							var $label = $(label);
-
-							if (node.data.children.length === 0) {
-								$label.addClass('tournament-bracket-tree-node-team');
-								$label.text(node.data.team || "Unavailable");
-							} else {
-								$label.addClass('tournament-bracket-tree-node-match');
-								$label.addClass('tournament-bracket-tree-node-match-' + node.data.state);
-								if (node.data.state === 'unavailable')
-									$label.text("Unavailable");
-								else {
-									var $teams = $('<div></div>');
-									$teams.addClass('tournament-bracket-tree-node-match-teams');
-									var $teamA = $('<span></span>');
-									$teamA.addClass('tournament-bracket-tree-node-match-team');
-									var $teamB = $teamA.clone();
-									$teamA.text(node.data.children[0].data.team);
-									$teamB.text(node.data.children[1].data.team);
-									$teams.append($teamA).append(" vs ").append($teamB);
-
-									if (node.data.state === 'available')
-										$label.append("Waiting");
-									else if (node.data.state === 'inprogress')
-										$label.append('<a href="' + app.root + toRoomid(node.data.room).toLowerCase() + '" class="ilink">In-progress</a>');
-									else if (node.data.state === 'finished') {
-										if (node.data.result === 'win') {
-											$teamA.addClass('tournament-bracket-tree-node-match-team-win');
-											$teamB.addClass('tournament-bracket-tree-node-match-team-loss');
-										} else if (node.data.result === 'loss') {
-											$teamA.addClass('tournament-bracket-tree-node-match-team-loss');
-											$teamB.addClass('tournament-bracket-tree-node-match-team-win');
-										} else {
-											$teamA.addClass('tournament-bracket-tree-node-match-team-draw');
-											$teamB.addClass('tournament-bracket-tree-node-match-team-draw');
-										}
-
-										$label.addClass('tournament-bracket-tree-node-match-result-' + node.data.result);
-										$label.append(Tools.escapeHTML(node.data.score.join(" - ")));
-									}
-
-									$label.prepend($teams)
-								}
-							}
-
-							var parentNode = null;
-							for (var a in node.adjacencies)
-								if (node.adjacencies[a].nodeFrom.id === node.data.parentId) {
-									parentNode = node.adjacencies[a].nodeFrom;
-									break;
-								} else if (node.adjacencies[a].nodeTo.id === node.data.parentId) {
-									parentNode = node.adjacencies[a].nodeTo;
-									break;
-								}
-
-							if (parentNode && parentNode.data.state === 'finished')
-								if (parentNode.data.result === 'draw')
-									$label.addClass("tournament-bracket-tree-node-draw");
-								else if (node.data.team === parentNode.data.team)
-									$label.addClass("tournament-bracket-tree-node-win");
-								else
-									$label.addClass("tournament-bracket-tree-node-loss");
-						}
+				var tree = d3.layout.tree()
+					.size([size.height, size.width - nodeSize.realWidth - nodeSize.separationX])
+					.separation(function () { return 1; })
+					.children(function (node) {
+						return node.children.length === 0 ? null : node.children;
 					});
-					st.loadJSON(data.rootNode);
-					st.compute();
-					st.onClick(st.root);
-				}, 0);
+				var nodes = tree.nodes(data.rootNode);
+				var links = tree.links(nodes);
+
+				var layoutRoot = d3.select($div[0])
+					.append('svg:svg').attr('width', size.width).attr('height', size.height)
+					.append('svg:g')
+					.attr('transform', 'translate(' + (-(nodeSize.realWidth + nodeSize.separationX) / 2) + ',0)');
+
+				var link = d3.svg.diagonal()
+					.source(function (link) {
+						return {x: link.source.x, y: link.source.y + nodeSize.realWidth / 2};
+					})
+					.target(function (link) {
+						return {x: link.target.x, y: link.target.y - nodeSize.realWidth / 2};
+					})
+					.projection(function (link) {
+						return [size.width - link.y, link.x];
+					});
+				layoutRoot.selectAll('path.tournament-bracket-tree-link').data(links).enter()
+					.append('svg:path')
+					.attr('d', link)
+					.classed('tournament-bracket-tree-link', true)
+					.classed('tournament-bracket-tree-link-active', function (link) {
+						return link.source.team === link.target.team;
+					});
+
+				var nodeGroup = layoutRoot.selectAll('g.tournament-bracket-tree-node').data(nodes).enter()
+					.append('svg:g').classed('tournament-bracket-tree-node', true).attr('transform', function (node) {
+						return 'translate(' + (size.width - node.y) + ',' + node.x + ')';
+					});
+				nodeGroup.append('svg:rect')
+					.attr('rx', nodeSize.radius)
+					.attr('x', -nodeSize.realWidth / 2).attr('width', nodeSize.realWidth)
+					.each(function (node) {
+						var elem = d3.select(this);
+						if (node.children.length === 0)
+							elem.attr('y', -nodeSize.smallRealHeight / 2).attr('height', nodeSize.smallRealHeight);
+						else
+							elem.attr('y', -nodeSize.realHeight / 2).attr('height', nodeSize.realHeight);
+					});
+				nodeGroup.each(function (node) {
+					var elem = d3.select(this);
+					if (node.children.length === 0) {
+						elem.classed('tournament-bracket-tree-node-team', true);
+						elem.append('svg:text').text(node.team || "Unavailable");
+					} else {
+						elem.classed('tournament-bracket-tree-node-match', true);
+						elem.classed('tournament-bracket-tree-node-match-' + node.state, true);
+						if (node.state === 'unavailable')
+							elem.append('svg:text').text("Unavailable");
+						else {
+							var teams = elem.append('svg:text').attr('y', -nodeSize.realHeight / 5).classed('tournament-bracket-tree-node-match-teams', true);
+							var teamA = teams.append('svg:tspan').classed('tournament-bracket-tree-node-match-team', true).text(node.children[0].team);
+							teams.append('svg:tspan').text(" vs ");
+							var teamB = teams.append('svg:tspan').classed('tournament-bracket-tree-node-match-team', true).text(node.children[1].team);
+
+							var score = elem.append('svg:text').attr('y', nodeSize.realHeight / 5);
+							if (node.state === 'available')
+								score.text("Waiting");
+							else if (node.state === 'inprogress')
+								score.append('svg:a').attr('xlink:href', app.root + toRoomid(node.room).toLowerCase()).classed('ilink', true).text("In-progress");
+							else if (node.state === 'finished') {
+								if (node.result === 'win') {
+									teamA.classed('tournament-bracket-tree-node-match-team-win', true);
+									teamB.classed('tournament-bracket-tree-node-match-team-loss', true);
+								} else if (node.result === 'loss') {
+									teamA.classed('tournament-bracket-tree-node-match-team-loss', true);
+									teamB.classed('tournament-bracket-tree-node-match-team-win', true);
+								} else {
+									teamA.classed('tournament-bracket-tree-node-match-team-draw', true);
+									teamB.classed('tournament-bracket-tree-node-match-team-draw', true);
+								}
+
+								elem.classed('tournament-bracket-tree-node-match-result-' + node.result, true);
+								score.text(node.score.join(" - "));
+							}
+						}
+					}
+
+					if (node.parent && node.parent.state === 'finished')
+						if (node.parent.result === 'draw')
+							elem.classed('tournament-bracket-tree-node-draw', true);
+						else if (node.team === node.parent.team)
+							elem.classed('tournament-bracket-tree-node-win', true);
+						else
+							elem.classed('tournament-bracket-tree-node-loss', true);
+				});
 
 				return $div;
 			} else if (data.type === 'table') {
diff --git a/js/lib/d3.v3.min.js b/js/lib/d3.v3.min.js
new file mode 100644
index 000000000..b1a357c59
--- /dev/null
+++ b/js/lib/d3.v3.min.js
@@ -0,0 +1,33 @@
+/*
+	Copyright (c) 2013, Michael Bostock
+	All rights reserved.
+
+	Redistribution and use in source and binary forms, with or without
+	modification, are permitted provided that the following conditions are met:
+
+	* Redistributions of source code must retain the above copyright notice, this
+	  list of conditions and the following disclaimer.
+
+	* Redistributions in binary form must reproduce the above copyright notice,
+	  this list of conditions and the following disclaimer in the documentation
+	  and/or other materials provided with the distribution.
+
+	* The name Michael Bostock may not be used to endorse or promote products
+	  derived from this software without specific prior written permission.
+
+	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+	AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+	IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+	DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
+	INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+	BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+	DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+	OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+	NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+	EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+d3=function(){function n(n){return null!=n&&!isNaN(n)}function t(n){return n.length}function e(n){for(var t=1;n*t%1;)t*=10;return t}function r(n,t){try{for(var e in t)Object.defineProperty(n.prototype,e,{value:t[e],enumerable:!1})}catch(r){n.prototype=t}}function u(){}function i(){}function o(n,t,e){return function(){var r=e.apply(t,arguments);return r===t?n:r}}function a(n,t){if(t in n)return t;t=t.charAt(0).toUpperCase()+t.substring(1);for(var e=0,r=Do.length;r>e;++e){var u=Do[e]+t;if(u in n)return u}}function c(){}function l(){}function s(n){function t(){for(var t,r=e,u=-1,i=r.length;++u<i;)(t=r[u].on)&&t.apply(this,arguments);return n}var e=[],r=new u;return t.on=function(t,u){var i,o=r.get(t);return arguments.length<2?o&&o.on:(o&&(o.on=null,e=e.slice(0,i=e.indexOf(o)).concat(e.slice(i+1)),r.remove(t)),u&&e.push(r.set(t,{on:u})),n)},t}function f(){mo.event.preventDefault()}function h(){for(var n,t=mo.event;n=t.sourceEvent;)t=n;return t}function g(n){for(var t=new l,e=0,r=arguments.length;++e<r;)t[arguments[e]]=s(t);return t.of=function(e,r){return function(u){try{var i=u.sourceEvent=mo.event;u.target=n,mo.event=u,t[u.type].apply(e,r)}finally{mo.event=i}}},t}function p(n){return Lo(n,Ro),n}function d(n){return"function"==typeof n?n:function(){return Ho(n,this)}}function v(n){return"function"==typeof n?n:function(){return Fo(n,this)}}function m(n,t){function e(){this.removeAttribute(n)}function r(){this.removeAttributeNS(n.space,n.local)}function u(){this.setAttribute(n,t)}function i(){this.setAttributeNS(n.space,n.local,t)}function o(){var e=t.apply(this,arguments);null==e?this.removeAttribute(n):this.setAttribute(n,e)}function a(){var e=t.apply(this,arguments);null==e?this.removeAttributeNS(n.space,n.local):this.setAttributeNS(n.space,n.local,e)}return n=mo.ns.qualify(n),null==t?n.local?r:e:"function"==typeof t?n.local?a:o:n.local?i:u}function y(n){return n.trim().replace(/\s+/g," ")}function M(n){return new RegExp("(?:^|\\s+)"+mo.requote(n)+"(?:\\s+|$)","g")}function x(n,t){function e(){for(var e=-1;++e<u;)n[e](this,t)}function r(){for(var e=-1,r=t.apply(this,arguments);++e<u;)n[e](this,r)}n=n.trim().split(/\s+/).map(b);var u=n.length;return"function"==typeof t?r:e}function b(n){var t=M(n);return function(e,r){if(u=e.classList)return r?u.add(n):u.remove(n);var u=e.getAttribute("class")||"";r?(t.lastIndex=0,t.test(u)||e.setAttribute("class",y(u+" "+n))):e.setAttribute("class",y(u.replace(t," ")))}}function _(n,t,e){function r(){this.style.removeProperty(n)}function u(){this.style.setProperty(n,t,e)}function i(){var r=t.apply(this,arguments);null==r?this.style.removeProperty(n):this.style.setProperty(n,r,e)}return null==t?r:"function"==typeof t?i:u}function w(n,t){function e(){delete this[n]}function r(){this[n]=t}function u(){var e=t.apply(this,arguments);null==e?delete this[n]:this[n]=e}return null==t?e:"function"==typeof t?u:r}function S(n){return"function"==typeof n?n:(n=mo.ns.qualify(n)).local?function(){return xo.createElementNS(n.space,n.local)}:function(){return xo.createElementNS(this.namespaceURI,n)}}function E(n){return{__data__:n}}function k(n){return function(){return Oo(this,n)}}function A(n){return arguments.length||(n=mo.ascending),function(t,e){return t&&e?n(t.__data__,e.__data__):!t-!e}}function N(n,t){for(var e=0,r=n.length;r>e;e++)for(var u,i=n[e],o=0,a=i.length;a>o;o++)(u=i[o])&&t(u,o,e);return n}function T(n){return Lo(n,Io),n}function q(n){var t,e;return function(r,u,i){var o,a=n[i].update,c=a.length;for(i!=e&&(e=i,t=0),u>=t&&(t=u+1);!(o=a[t])&&++t<c;);return o}}function z(){var n=this.__transition__;n&&++n.active}function C(n,t,e){function r(){var t=this[o];t&&(this.removeEventListener(n,t,t.$),delete this[o])}function u(){var u=l(t,Mo(arguments));r.call(this),this.addEventListener(n,this[o]=u,u.$=e),u._=t}function i(){var t,e=new RegExp("^__on([^.]+)"+mo.requote(n)+"$");for(var r in this)if(t=r.match(e)){var u=this[r];this.removeEventListener(t[1],u,u.$),delete this[r]}}var o="__on"+n,a=n.indexOf("."),l=D;a>0&&(n=n.substring(0,a));var s=Zo.get(n);return s&&(n=s,l=j),a?t?u:r:t?c:i}function D(n,t){return function(e){var r=mo.event;mo.event=e,t[0]=this.__data__;try{n.apply(this,t)}finally{mo.event=r}}}function j(n,t){var e=D(n,t);return function(n){var t=this,r=n.relatedTarget;r&&(r===t||8&r.compareDocumentPosition(t))||e.call(t,n)}}function L(){var n=".dragsuppress-"+ ++Xo,t="touchmove"+n,e="selectstart"+n,r="dragstart"+n,u="click"+n,i=mo.select(_o).on(t,f).on(e,f).on(r,f),o=bo.style,a=o[Vo];return o[Vo]="none",function(t){function e(){i.on(u,null)}i.on(n,null),o[Vo]=a,t&&(i.on(u,function(){f(),e()},!0),setTimeout(e,0))}}function H(n,t){t.changedTouches&&(t=t.changedTouches[0]);var e=n.ownerSVGElement||n;if(e.createSVGPoint){var r=e.createSVGPoint();if(0>$o&&(_o.scrollX||_o.scrollY)){e=mo.select("body").append("svg").style({position:"absolute",top:0,left:0,margin:0,padding:0,border:"none"},"important");var u=e[0][0].getScreenCTM();$o=!(u.f||u.e),e.remove()}return $o?(r.x=t.pageX,r.y=t.pageY):(r.x=t.clientX,r.y=t.clientY),r=r.matrixTransform(n.getScreenCTM().inverse()),[r.x,r.y]}var i=n.getBoundingClientRect();return[t.clientX-i.left-n.clientLeft,t.clientY-i.top-n.clientTop]}function F(n){return n>0?1:0>n?-1:0}function P(n){return n>1?0:-1>n?Bo:Math.acos(n)}function O(n){return n>1?Bo/2:-1>n?-Bo/2:Math.asin(n)}function R(n){return(Math.exp(n)-Math.exp(-n))/2}function Y(n){return(Math.exp(n)+Math.exp(-n))/2}function I(n){return R(n)/Y(n)}function U(n){return(n=Math.sin(n/2))*n}function Z(){}function V(n,t,e){return new X(n,t,e)}function X(n,t,e){this.h=n,this.s=t,this.l=e}function $(n,t,e){function r(n){return n>360?n-=360:0>n&&(n+=360),60>n?i+(o-i)*n/60:180>n?o:240>n?i+(o-i)*(240-n)/60:i}function u(n){return Math.round(255*r(n))}var i,o;return n=isNaN(n)?0:(n%=360)<0?n+360:n,t=isNaN(t)?0:0>t?0:t>1?1:t,e=0>e?0:e>1?1:e,o=.5>=e?e*(1+t):e+t-e*t,i=2*e-o,ot(u(n+120),u(n),u(n-120))}function B(n,t,e){return new W(n,t,e)}function W(n,t,e){this.h=n,this.c=t,this.l=e}function J(n,t,e){return isNaN(n)&&(n=0),isNaN(t)&&(t=0),G(e,Math.cos(n*=Go)*t,Math.sin(n)*t)}function G(n,t,e){return new K(n,t,e)}function K(n,t,e){this.l=n,this.a=t,this.b=e}function Q(n,t,e){var r=(n+16)/116,u=r+t/500,i=r-e/200;return u=tt(u)*ca,r=tt(r)*la,i=tt(i)*sa,ot(rt(3.2404542*u-1.5371385*r-.4985314*i),rt(-.969266*u+1.8760108*r+.041556*i),rt(.0556434*u-.2040259*r+1.0572252*i))}function nt(n,t,e){return n>0?B(Math.atan2(e,t)*Ko,Math.sqrt(t*t+e*e),n):B(0/0,0/0,n)}function tt(n){return n>.206893034?n*n*n:(n-4/29)/7.787037}function et(n){return n>.008856?Math.pow(n,1/3):7.787037*n+4/29}function rt(n){return Math.round(255*(.00304>=n?12.92*n:1.055*Math.pow(n,1/2.4)-.055))}function ut(n){return ot(n>>16,255&n>>8,255&n)}function it(n){return ut(n)+""}function ot(n,t,e){return new at(n,t,e)}function at(n,t,e){this.r=n,this.g=t,this.b=e}function ct(n){return 16>n?"0"+Math.max(0,n).toString(16):Math.min(255,n).toString(16)}function lt(n,t,e){var r,u,i,o=0,a=0,c=0;if(r=/([a-z]+)\((.*)\)/i.exec(n))switch(u=r[2].split(","),r[1]){case"hsl":return e(parseFloat(u[0]),parseFloat(u[1])/100,parseFloat(u[2])/100);case"rgb":return t(gt(u[0]),gt(u[1]),gt(u[2]))}return(i=ga.get(n))?t(i.r,i.g,i.b):(null!=n&&"#"===n.charAt(0)&&(4===n.length?(o=n.charAt(1),o+=o,a=n.charAt(2),a+=a,c=n.charAt(3),c+=c):7===n.length&&(o=n.substring(1,3),a=n.substring(3,5),c=n.substring(5,7)),o=parseInt(o,16),a=parseInt(a,16),c=parseInt(c,16)),t(o,a,c))}function st(n,t,e){var r,u,i=Math.min(n/=255,t/=255,e/=255),o=Math.max(n,t,e),a=o-i,c=(o+i)/2;return a?(u=.5>c?a/(o+i):a/(2-o-i),r=n==o?(t-e)/a+(e>t?6:0):t==o?(e-n)/a+2:(n-t)/a+4,r*=60):(r=0/0,u=c>0&&1>c?0:r),V(r,u,c)}function ft(n,t,e){n=ht(n),t=ht(t),e=ht(e);var r=et((.4124564*n+.3575761*t+.1804375*e)/ca),u=et((.2126729*n+.7151522*t+.072175*e)/la),i=et((.0193339*n+.119192*t+.9503041*e)/sa);return G(116*u-16,500*(r-u),200*(u-i))}function ht(n){return(n/=255)<=.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)}function gt(n){var t=parseFloat(n);return"%"===n.charAt(n.length-1)?Math.round(2.55*t):t}function pt(n){return"function"==typeof n?n:function(){return n}}function dt(n){return n}function vt(n){return function(t,e,r){return 2===arguments.length&&"function"==typeof e&&(r=e,e=null),mt(t,e,n,r)}}function mt(n,t,e,r){function u(){var n,t=c.status;if(!t&&c.responseText||t>=200&&300>t||304===t){try{n=e.call(i,c)}catch(r){return o.error.call(i,r),void 0}o.load.call(i,n)}else o.error.call(i,c)}var i={},o=mo.dispatch("beforesend","progress","load","error"),a={},c=new XMLHttpRequest,l=null;return!_o.XDomainRequest||"withCredentials"in c||!/^(http(s)?:)?\/\//.test(n)||(c=new XDomainRequest),"onload"in c?c.onload=c.onerror=u:c.onreadystatechange=function(){c.readyState>3&&u()},c.onprogress=function(n){var t=mo.event;mo.event=n;try{o.progress.call(i,c)}finally{mo.event=t}},i.header=function(n,t){return n=(n+"").toLowerCase(),arguments.length<2?a[n]:(null==t?delete a[n]:a[n]=t+"",i)},i.mimeType=function(n){return arguments.length?(t=null==n?null:n+"",i):t},i.responseType=function(n){return arguments.length?(l=n,i):l},i.response=function(n){return e=n,i},["get","post"].forEach(function(n){i[n]=function(){return i.send.apply(i,[n].concat(Mo(arguments)))}}),i.send=function(e,r,u){if(2===arguments.length&&"function"==typeof r&&(u=r,r=null),c.open(e,n,!0),null==t||"accept"in a||(a.accept=t+",*/*"),c.setRequestHeader)for(var s in a)c.setRequestHeader(s,a[s]);return null!=t&&c.overrideMimeType&&c.overrideMimeType(t),null!=l&&(c.responseType=l),null!=u&&i.on("error",u).on("load",function(n){u(null,n)}),o.beforesend.call(i,c),c.send(null==r?null:r),i},i.abort=function(){return c.abort(),i},mo.rebind(i,o,"on"),null==r?i:i.get(yt(r))}function yt(n){return 1===n.length?function(t,e){n(null==t?e:null)}:n}function Mt(){var n=bt(),t=_t()-n;t>24?(isFinite(t)&&(clearTimeout(ma),ma=setTimeout(Mt,t)),va=0):(va=1,Ma(Mt))}function xt(n,t,e){var r=arguments.length;2>r&&(t=0),3>r&&(e=Date.now()),ya.callback=n,ya.time=e+t}function bt(){var n=Date.now();for(ya=pa;ya;)n>=ya.time&&(ya.flush=ya.callback(n-ya.time)),ya=ya.next;return n}function _t(){for(var n,t=pa,e=1/0;t;)t.flush?t=n?n.next=t.next:pa=t.next:(t.time<e&&(e=t.time),t=(n=t).next);return da=n,e}function wt(n,t){var e=Math.pow(10,3*Math.abs(8-t));return{scale:t>8?function(n){return n/e}:function(n){return n*e},symbol:n}}function St(n,t){return t-(n?Math.ceil(Math.log(n)/Math.LN10):1)}function Et(n){return n+""}function kt(){}function At(n,t,e){var r=e.s=n+t,u=r-n,i=r-u;e.t=n-i+(t-u)}function Nt(n,t){n&&za.hasOwnProperty(n.type)&&za[n.type](n,t)}function Tt(n,t,e){var r,u=-1,i=n.length-e;for(t.lineStart();++u<i;)r=n[u],t.point(r[0],r[1],r[2]);t.lineEnd()}function qt(n,t){var e=-1,r=n.length;for(t.polygonStart();++e<r;)Tt(n[e],t,1);t.polygonEnd()}function zt(){function n(n,t){n*=Go,t=t*Go/2+Bo/4;var e=n-r,o=Math.cos(t),a=Math.sin(t),c=i*a,l=u*o+c*Math.cos(e),s=c*Math.sin(e);Da.add(Math.atan2(s,l)),r=n,u=o,i=a}var t,e,r,u,i;ja.point=function(o,a){ja.point=n,r=(t=o)*Go,u=Math.cos(a=(e=a)*Go/2+Bo/4),i=Math.sin(a)},ja.lineEnd=function(){n(t,e)}}function Ct(n){var t=n[0],e=n[1],r=Math.cos(e);return[r*Math.cos(t),r*Math.sin(t),Math.sin(e)]}function Dt(n,t){return n[0]*t[0]+n[1]*t[1]+n[2]*t[2]}function jt(n,t){return[n[1]*t[2]-n[2]*t[1],n[2]*t[0]-n[0]*t[2],n[0]*t[1]-n[1]*t[0]]}function Lt(n,t){n[0]+=t[0],n[1]+=t[1],n[2]+=t[2]}function Ht(n,t){return[n[0]*t,n[1]*t,n[2]*t]}function Ft(n){var t=Math.sqrt(n[0]*n[0]+n[1]*n[1]+n[2]*n[2]);n[0]/=t,n[1]/=t,n[2]/=t}function Pt(n){return[Math.atan2(n[1],n[0]),O(n[2])]}function Ot(n,t){return Math.abs(n[0]-t[0])<Wo&&Math.abs(n[1]-t[1])<Wo}function Rt(n,t){n*=Go;var e=Math.cos(t*=Go);Yt(e*Math.cos(n),e*Math.sin(n),Math.sin(t))}function Yt(n,t,e){++La,Fa+=(n-Fa)/La,Pa+=(t-Pa)/La,Oa+=(e-Oa)/La}function It(){function n(n,u){n*=Go;var i=Math.cos(u*=Go),o=i*Math.cos(n),a=i*Math.sin(n),c=Math.sin(u),l=Math.atan2(Math.sqrt((l=e*c-r*a)*l+(l=r*o-t*c)*l+(l=t*a-e*o)*l),t*o+e*a+r*c);Ha+=l,Ra+=l*(t+(t=o)),Ya+=l*(e+(e=a)),Ia+=l*(r+(r=c)),Yt(t,e,r)}var t,e,r;Xa.point=function(u,i){u*=Go;var o=Math.cos(i*=Go);t=o*Math.cos(u),e=o*Math.sin(u),r=Math.sin(i),Xa.point=n,Yt(t,e,r)}}function Ut(){Xa.point=Rt}function Zt(){function n(n,t){n*=Go;var e=Math.cos(t*=Go),o=e*Math.cos(n),a=e*Math.sin(n),c=Math.sin(t),l=u*c-i*a,s=i*o-r*c,f=r*a-u*o,h=Math.sqrt(l*l+s*s+f*f),g=r*o+u*a+i*c,p=h&&-P(g)/h,d=Math.atan2(h,g);Ua+=p*l,Za+=p*s,Va+=p*f,Ha+=d,Ra+=d*(r+(r=o)),Ya+=d*(u+(u=a)),Ia+=d*(i+(i=c)),Yt(r,u,i)}var t,e,r,u,i;Xa.point=function(o,a){t=o,e=a,Xa.point=n,o*=Go;var c=Math.cos(a*=Go);r=c*Math.cos(o),u=c*Math.sin(o),i=Math.sin(a),Yt(r,u,i)},Xa.lineEnd=function(){n(t,e),Xa.lineEnd=Ut,Xa.point=Rt}}function Vt(){return!0}function Xt(n,t,e,r,u){var i=[],o=[];if(n.forEach(function(n){if(!((t=n.length-1)<=0)){var t,e=n[0],r=n[t];if(Ot(e,r)){u.lineStart();for(var a=0;t>a;++a)u.point((e=n[a])[0],e[1]);return u.lineEnd(),void 0}var c={point:e,points:n,other:null,visited:!1,entry:!0,subject:!0},l={point:e,points:[e],other:c,visited:!1,entry:!1,subject:!1};c.other=l,i.push(c),o.push(l),c={point:r,points:[r],other:null,visited:!1,entry:!1,subject:!0},l={point:r,points:[r],other:c,visited:!1,entry:!0,subject:!1},c.other=l,i.push(c),o.push(l)}}),o.sort(t),$t(i),$t(o),i.length){if(e)for(var a=1,c=!e(o[0].point),l=o.length;l>a;++a)o[a].entry=c=!c;for(var s,f,h,g=i[0];;){for(s=g;s.visited;)if((s=s.next)===g)return;f=s.points,u.lineStart();do{if(s.visited=s.other.visited=!0,s.entry){if(s.subject)for(var a=0;a<f.length;a++)u.point((h=f[a])[0],h[1]);else r(s.point,s.next.point,1,u);s=s.next}else{if(s.subject){f=s.prev.points;for(var a=f.length;--a>=0;)u.point((h=f[a])[0],h[1])}else r(s.point,s.prev.point,-1,u);s=s.prev}s=s.other,f=s.points}while(!s.visited);u.lineEnd()}}}function $t(n){if(t=n.length){for(var t,e,r=0,u=n[0];++r<t;)u.next=e=n[r],e.prev=u,u=e;u.next=e=n[0],e.prev=u}}function Bt(n,t,e,r){return function(u){function i(t,e){n(t,e)&&u.point(t,e)}function o(n,t){d.point(n,t)}function a(){v.point=o,d.lineStart()}function c(){v.point=i,d.lineEnd()}function l(n,t){y.point(n,t),p.push([n,t])}function s(){y.lineStart(),p=[]}function f(){l(p[0][0],p[0][1]),y.lineEnd();var n,t=y.clean(),e=m.buffer(),r=e.length;if(p.pop(),g.push(p),p=null,r){if(1&t){n=e[0];var i,r=n.length-1,o=-1;for(u.lineStart();++o<r;)u.point((i=n[o])[0],i[1]);return u.lineEnd(),void 0}r>1&&2&t&&e.push(e.pop().concat(e.shift())),h.push(e.filter(Wt))}}var h,g,p,d=t(u),v={point:i,lineStart:a,lineEnd:c,polygonStart:function(){v.point=l,v.lineStart=s,v.lineEnd=f,h=[],g=[],u.polygonStart()},polygonEnd:function(){v.point=i,v.lineStart=a,v.lineEnd=c,h=mo.merge(h),h.length?Xt(h,Gt,null,e,u):r(g)&&(u.lineStart(),e(null,null,1,u),u.lineEnd()),u.polygonEnd(),h=g=null},sphere:function(){u.polygonStart(),u.lineStart(),e(null,null,1,u),u.lineEnd(),u.polygonEnd()}},m=Jt(),y=t(m);return v}}function Wt(n){return n.length>1}function Jt(){var n,t=[];return{lineStart:function(){t.push(n=[])},point:function(t,e){n.push([t,e])},lineEnd:c,buffer:function(){var e=t;return t=[],n=null,e},rejoin:function(){t.length>1&&t.push(t.pop().concat(t.shift()))}}}function Gt(n,t){return((n=n.point)[0]<0?n[1]-Bo/2-Wo:Bo/2-n[1])-((t=t.point)[0]<0?t[1]-Bo/2-Wo:Bo/2-t[1])}function Kt(n,t){var e=n[0],r=n[1],u=[Math.sin(e),-Math.cos(e),0],i=0,o=!1,a=!1,c=0;Da.reset();for(var l=0,s=t.length;s>l;++l){var f=t[l],h=f.length;if(h){for(var g=f[0],p=g[0],d=g[1]/2+Bo/4,v=Math.sin(d),m=Math.cos(d),y=1;;){y===h&&(y=0),n=f[y];var M=n[0],x=n[1]/2+Bo/4,b=Math.sin(x),_=Math.cos(x),w=M-p,S=Math.abs(w)>Bo,E=v*b;if(Da.add(Math.atan2(E*Math.sin(w),m*_+E*Math.cos(w))),Math.abs(x)<Wo&&(a=!0),i+=S?w+(w>=0?2:-2)*Bo:w,S^p>=e^M>=e){var k=jt(Ct(g),Ct(n));Ft(k);var A=jt(u,k);Ft(A);var N=(S^w>=0?-1:1)*O(A[2]);r>N&&(c+=S^w>=0?1:-1)}if(!y++)break;p=M,v=b,m=_,g=n}Math.abs(i)>Wo&&(o=!0)}}return(!a&&!o&&0>Da||-Wo>i)^1&c}function Qt(n){var t,e=0/0,r=0/0,u=0/0;return{lineStart:function(){n.lineStart(),t=1},point:function(i,o){var a=i>0?Bo:-Bo,c=Math.abs(i-e);Math.abs(c-Bo)<Wo?(n.point(e,r=(r+o)/2>0?Bo/2:-Bo/2),n.point(u,r),n.lineEnd(),n.lineStart(),n.point(a,r),n.point(i,r),t=0):u!==a&&c>=Bo&&(Math.abs(e-u)<Wo&&(e-=u*Wo),Math.abs(i-a)<Wo&&(i-=a*Wo),r=ne(e,r,i,o),n.point(u,r),n.lineEnd(),n.lineStart(),n.point(a,r),t=0),n.point(e=i,r=o),u=a},lineEnd:function(){n.lineEnd(),e=r=0/0},clean:function(){return 2-t}}}function ne(n,t,e,r){var u,i,o=Math.sin(n-e);return Math.abs(o)>Wo?Math.atan((Math.sin(t)*(i=Math.cos(r))*Math.sin(e)-Math.sin(r)*(u=Math.cos(t))*Math.sin(n))/(u*i*o)):(t+r)/2}function te(n,t,e,r){var u;if(null==n)u=e*Bo/2,r.point(-Bo,u),r.point(0,u),r.point(Bo,u),r.point(Bo,0),r.point(Bo,-u),r.point(0,-u),r.point(-Bo,-u),r.point(-Bo,0),r.point(-Bo,u);else if(Math.abs(n[0]-t[0])>Wo){var i=(n[0]<t[0]?1:-1)*Bo;u=e*i/2,r.point(-i,u),r.point(0,u),r.point(i,u)}else r.point(t[0],t[1])}function ee(n){return Kt(Ba,n)}function re(n){function t(n,t){return Math.cos(n)*Math.cos(t)>o}function e(n){var e,i,o,c,s;return{lineStart:function(){c=o=!1,s=1},point:function(f,h){var g,p=[f,h],d=t(f,h),v=a?d?0:u(f,h):d?u(f+(0>f?Bo:-Bo),h):0;if(!e&&(c=o=d)&&n.lineStart(),d!==o&&(g=r(e,p),(Ot(e,g)||Ot(p,g))&&(p[0]+=Wo,p[1]+=Wo,d=t(p[0],p[1]))),d!==o)s=0,d?(n.lineStart(),g=r(p,e),n.point(g[0],g[1])):(g=r(e,p),n.point(g[0],g[1]),n.lineEnd()),e=g;else if(l&&e&&a^d){var m;v&i||!(m=r(p,e,!0))||(s=0,a?(n.lineStart(),n.point(m[0][0],m[0][1]),n.point(m[1][0],m[1][1]),n.lineEnd()):(n.point(m[1][0],m[1][1]),n.lineEnd(),n.lineStart(),n.point(m[0][0],m[0][1])))}!d||e&&Ot(e,p)||n.point(p[0],p[1]),e=p,o=d,i=v},lineEnd:function(){o&&n.lineEnd(),e=null},clean:function(){return s|(c&&o)<<1}}}function r(n,t,e){var r=Ct(n),u=Ct(t),i=[1,0,0],a=jt(r,u),c=Dt(a,a),l=a[0],s=c-l*l;if(!s)return!e&&n;var f=o*c/s,h=-o*l/s,g=jt(i,a),p=Ht(i,f),d=Ht(a,h);Lt(p,d);var v=g,m=Dt(p,v),y=Dt(v,v),M=m*m-y*(Dt(p,p)-1);if(!(0>M)){var x=Math.sqrt(M),b=Ht(v,(-m-x)/y);if(Lt(b,p),b=Pt(b),!e)return b;var _,w=n[0],S=t[0],E=n[1],k=t[1];w>S&&(_=w,w=S,S=_);var A=S-w,N=Math.abs(A-Bo)<Wo,T=N||Wo>A;if(!N&&E>k&&(_=E,E=k,k=_),T?N?E+k>0^b[1]<(Math.abs(b[0]-w)<Wo?E:k):E<=b[1]&&b[1]<=k:A>Bo^(w<=b[0]&&b[0]<=S)){var q=Ht(v,(-m+x)/y);return Lt(q,p),[b,Pt(q)]}}}function u(t,e){var r=a?n:Bo-n,u=0;return-r>t?u|=1:t>r&&(u|=2),-r>e?u|=4:e>r&&(u|=8),u}function i(n){return Kt(c,n)}var o=Math.cos(n),a=o>0,c=[n,0],l=Math.abs(o)>Wo,s=Te(n,6*Go);return Bt(t,e,s,i)}function ue(n,t,e,r){function u(r,u){return Math.abs(r[0]-n)<Wo?u>0?0:3:Math.abs(r[0]-e)<Wo?u>0?2:1:Math.abs(r[1]-t)<Wo?u>0?1:0:u>0?3:2}function i(n,t){return o(n.point,t.point)}function o(n,t){var e=u(n,1),r=u(t,1);return e!==r?e-r:0===e?t[1]-n[1]:1===e?n[0]-t[0]:2===e?n[1]-t[1]:t[0]-n[0]}function a(u,i){var o=i[0]-u[0],a=i[1]-u[1],c=[0,1];return Math.abs(o)<Wo&&Math.abs(a)<Wo?n<=u[0]&&u[0]<=e&&t<=u[1]&&u[1]<=r:ie(n-u[0],o,c)&&ie(u[0]-e,-o,c)&&ie(t-u[1],a,c)&&ie(u[1]-r,-a,c)?(c[1]<1&&(i[0]=u[0]+c[1]*o,i[1]=u[1]+c[1]*a),c[0]>0&&(u[0]+=c[0]*o,u[1]+=c[0]*a),!0):!1}return function(c){function l(i){var o=u(i,-1),a=s([0===o||3===o?n:e,o>1?r:t]);return a}function s(n){for(var t=0,e=M.length,r=n[1],u=0;e>u;++u)for(var i,o=1,a=M[u],c=a.length,l=a[0];c>o;++o)i=a[o],l[1]<=r?i[1]>r&&f(l,i,n)>0&&++t:i[1]<=r&&f(l,i,n)<0&&--t,l=i;return 0!==t}function f(n,t,e){return(t[0]-n[0])*(e[1]-n[1])-(e[0]-n[0])*(t[1]-n[1])}function h(i,a,c,l){var s=0,f=0;if(null==i||(s=u(i,c))!==(f=u(a,c))||o(i,a)<0^c>0){do l.point(0===s||3===s?n:e,s>1?r:t);while((s=(s+c+4)%4)!==f)}else l.point(a[0],a[1])}function g(u,i){return u>=n&&e>=u&&i>=t&&r>=i}function p(n,t){g(n,t)&&c.point(n,t)}function d(){q.point=m,M&&M.push(x=[]),A=!0,k=!1,S=E=0/0}function v(){y&&(m(b,_),w&&k&&T.rejoin(),y.push(T.buffer())),q.point=p,k&&c.lineEnd()}function m(n,t){n=Math.max(-Wa,Math.min(Wa,n)),t=Math.max(-Wa,Math.min(Wa,t));var e=g(n,t);if(M&&x.push([n,t]),A)b=n,_=t,w=e,A=!1,e&&(c.lineStart(),c.point(n,t));else if(e&&k)c.point(n,t);else{var r=[S,E],u=[n,t];a(r,u)?(k||(c.lineStart(),c.point(r[0],r[1])),c.point(u[0],u[1]),e||c.lineEnd()):e&&(c.lineStart(),c.point(n,t))}S=n,E=t,k=e}var y,M,x,b,_,w,S,E,k,A,N=c,T=Jt(),q={point:p,lineStart:d,lineEnd:v,polygonStart:function(){c=T,y=[],M=[]},polygonEnd:function(){c=N,(y=mo.merge(y)).length?(c.polygonStart(),Xt(y,i,l,h,c),c.polygonEnd()):s([n,t])&&(c.polygonStart(),c.lineStart(),h(null,null,1,c),c.lineEnd(),c.polygonEnd()),y=M=x=null}};return q}}function ie(n,t,e){if(Math.abs(t)<Wo)return 0>=n;var r=n/t;if(t>0){if(r>e[1])return!1;r>e[0]&&(e[0]=r)}else{if(r<e[0])return!1;r<e[1]&&(e[1]=r)}return!0}function oe(n,t){function e(e,r){return e=n(e,r),t(e[0],e[1])}return n.invert&&t.invert&&(e.invert=function(e,r){return e=t.invert(e,r),e&&n.invert(e[0],e[1])}),e}function ae(n){var t=0,e=Bo/3,r=_e(n),u=r(t,e);return u.parallels=function(n){return arguments.length?r(t=n[0]*Bo/180,e=n[1]*Bo/180):[180*(t/Bo),180*(e/Bo)]},u}function ce(n,t){function e(n,t){var e=Math.sqrt(i-2*u*Math.sin(t))/u;return[e*Math.sin(n*=u),o-e*Math.cos(n)]}var r=Math.sin(n),u=(r+Math.sin(t))/2,i=1+r*(2*u-r),o=Math.sqrt(i)/u;return e.invert=function(n,t){var e=o-t;return[Math.atan2(n,e)/u,O((i-(n*n+e*e)*u*u)/(2*u))]},e}function le(){function n(n,t){Ga+=u*n-r*t,r=n,u=t}var t,e,r,u;ec.point=function(i,o){ec.point=n,t=r=i,e=u=o},ec.lineEnd=function(){n(t,e)}}function se(n,t){Ka>n&&(Ka=n),n>nc&&(nc=n),Qa>t&&(Qa=t),t>tc&&(tc=t)}function fe(){function n(n,t){o.push("M",n,",",t,i)}function t(n,t){o.push("M",n,",",t),a.point=e}function e(n,t){o.push("L",n,",",t)}function r(){a.point=n}function u(){o.push("Z")}var i=he(4.5),o=[],a={point:n,lineStart:function(){a.point=t},lineEnd:r,polygonStart:function(){a.lineEnd=u},polygonEnd:function(){a.lineEnd=r,a.point=n},pointRadius:function(n){return i=he(n),a},result:function(){if(o.length){var n=o.join("");return o=[],n}}};return a}function he(n){return"m0,"+n+"a"+n+","+n+" 0 1,1 0,"+-2*n+"a"+n+","+n+" 0 1,1 0,"+2*n+"z"}function ge(n,t){Fa+=n,Pa+=t,++Oa}function pe(){function n(n,r){var u=n-t,i=r-e,o=Math.sqrt(u*u+i*i);Ra+=o*(t+n)/2,Ya+=o*(e+r)/2,Ia+=o,ge(t=n,e=r)}var t,e;uc.point=function(r,u){uc.point=n,ge(t=r,e=u)}}function de(){uc.point=ge}function ve(){function n(n,t){var e=n-r,i=t-u,o=Math.sqrt(e*e+i*i);Ra+=o*(r+n)/2,Ya+=o*(u+t)/2,Ia+=o,o=u*n-r*t,Ua+=o*(r+n),Za+=o*(u+t),Va+=3*o,ge(r=n,u=t)}var t,e,r,u;uc.point=function(i,o){uc.point=n,ge(t=r=i,e=u=o)},uc.lineEnd=function(){n(t,e)}}function me(n){function t(t,e){n.moveTo(t,e),n.arc(t,e,o,0,2*Bo)}function e(t,e){n.moveTo(t,e),a.point=r}function r(t,e){n.lineTo(t,e)}function u(){a.point=t}function i(){n.closePath()}var o=4.5,a={point:t,lineStart:function(){a.point=e},lineEnd:u,polygonStart:function(){a.lineEnd=i},polygonEnd:function(){a.lineEnd=u,a.point=t},pointRadius:function(n){return o=n,a},result:c};return a}function ye(n){function t(t){function r(e,r){e=n(e,r),t.point(e[0],e[1])}function u(){M=0/0,S.point=o,t.lineStart()}function o(r,u){var o=Ct([r,u]),a=n(r,u);e(M,x,y,b,_,w,M=a[0],x=a[1],y=r,b=o[0],_=o[1],w=o[2],i,t),t.point(M,x)}function a(){S.point=r,t.lineEnd()}function c(){u(),S.point=l,S.lineEnd=s}function l(n,t){o(f=n,h=t),g=M,p=x,d=b,v=_,m=w,S.point=o}function s(){e(M,x,y,b,_,w,g,p,f,d,v,m,i,t),S.lineEnd=a,a()}var f,h,g,p,d,v,m,y,M,x,b,_,w,S={point:r,lineStart:u,lineEnd:a,polygonStart:function(){t.polygonStart(),S.lineStart=c},polygonEnd:function(){t.polygonEnd(),S.lineStart=u}};return S}function e(t,i,o,a,c,l,s,f,h,g,p,d,v,m){var y=s-t,M=f-i,x=y*y+M*M;if(x>4*r&&v--){var b=a+g,_=c+p,w=l+d,S=Math.sqrt(b*b+_*_+w*w),E=Math.asin(w/=S),k=Math.abs(Math.abs(w)-1)<Wo?(o+h)/2:Math.atan2(_,b),A=n(k,E),N=A[0],T=A[1],q=N-t,z=T-i,C=M*q-y*z;(C*C/x>r||Math.abs((y*q+M*z)/x-.5)>.3||u>a*g+c*p+l*d)&&(e(t,i,o,a,c,l,N,T,k,b/=S,_/=S,w,v,m),m.point(N,T),e(N,T,k,b,_,w,s,f,h,g,p,d,v,m))}}var r=.5,u=Math.cos(30*Go),i=16;return t.precision=function(n){return arguments.length?(i=(r=n*n)>0&&16,t):Math.sqrt(r)},t}function Me(n){this.stream=n}function xe(n){var t=ye(function(t,e){return n([t*Ko,e*Ko])});return function(n){var e=new Me(n=t(n));return e.point=function(t,e){n.point(t*Go,e*Go)},e}}function be(n){return _e(function(){return n})()}function _e(n){function t(n){return n=a(n[0]*Go,n[1]*Go),[n[0]*h+c,l-n[1]*h]}function e(n){return n=a.invert((n[0]-c)/h,(l-n[1])/h),n&&[n[0]*Ko,n[1]*Ko]}function r(){a=oe(o=Ee(m,y,M),i);var n=i(d,v);return c=g-n[0]*h,l=p+n[1]*h,u()}function u(){return s&&(s.valid=!1,s=null),t}var i,o,a,c,l,s,f=ye(function(n,t){return n=i(n,t),[n[0]*h+c,l-n[1]*h]}),h=150,g=480,p=250,d=0,v=0,m=0,y=0,M=0,x=$a,b=dt,_=null,w=null;return t.stream=function(n){return s&&(s.valid=!1),s=we(o,x(f(b(n)))),s.valid=!0,s},t.clipAngle=function(n){return arguments.length?(x=null==n?(_=n,$a):re((_=+n)*Go),u()):_},t.clipExtent=function(n){return arguments.length?(w=n,b=n?ue(n[0][0],n[0][1],n[1][0],n[1][1]):dt,u()):w},t.scale=function(n){return arguments.length?(h=+n,r()):h},t.translate=function(n){return arguments.length?(g=+n[0],p=+n[1],r()):[g,p]},t.center=function(n){return arguments.length?(d=n[0]%360*Go,v=n[1]%360*Go,r()):[d*Ko,v*Ko]},t.rotate=function(n){return arguments.length?(m=n[0]%360*Go,y=n[1]%360*Go,M=n.length>2?n[2]%360*Go:0,r()):[m*Ko,y*Ko,M*Ko]},mo.rebind(t,f,"precision"),function(){return i=n.apply(this,arguments),t.invert=i.invert&&e,r()}}function we(n,t){var e=new Me(t);return e.point=function(e,r){r=n(e*Go,r*Go),e=r[0],t.point(e>Bo?e-2*Bo:-Bo>e?e+2*Bo:e,r[1])},e}function Se(n,t){return[n,t]}function Ee(n,t,e){return n?t||e?oe(Ae(n),Ne(t,e)):Ae(n):t||e?Ne(t,e):Se}function ke(n){return function(t,e){return t+=n,[t>Bo?t-2*Bo:-Bo>t?t+2*Bo:t,e]}}function Ae(n){var t=ke(n);return t.invert=ke(-n),t}function Ne(n,t){function e(n,t){var e=Math.cos(t),a=Math.cos(n)*e,c=Math.sin(n)*e,l=Math.sin(t),s=l*r+a*u;return[Math.atan2(c*i-s*o,a*r-l*u),O(s*i+c*o)]}var r=Math.cos(n),u=Math.sin(n),i=Math.cos(t),o=Math.sin(t);return e.invert=function(n,t){var e=Math.cos(t),a=Math.cos(n)*e,c=Math.sin(n)*e,l=Math.sin(t),s=l*i-c*o;return[Math.atan2(c*i+l*o,a*r+s*u),O(s*r-a*u)]},e}function Te(n,t){var e=Math.cos(n),r=Math.sin(n);return function(u,i,o,a){var c=o*t;null!=u?(u=qe(e,u),i=qe(e,i),(o>0?i>u:u>i)&&(u+=2*o*Bo)):(u=n+2*o*Bo,i=n-.5*c);for(var l,s=u;o>0?s>i:i>s;s-=c)a.point((l=Pt([e,-r*Math.cos(s),-r*Math.sin(s)]))[0],l[1])}}function qe(n,t){var e=Ct(t);e[0]-=n,Ft(e);var r=P(-e[1]);return((-e[2]<0?-r:r)+2*Math.PI-Wo)%(2*Math.PI)}function ze(n,t,e){var r=mo.range(n,t-Wo,e).concat(t);return function(n){return r.map(function(t){return[n,t]})}}function Ce(n,t,e){var r=mo.range(n,t-Wo,e).concat(t);return function(n){return r.map(function(t){return[t,n]})}}function De(n){return n.source}function je(n){return n.target}function Le(n,t,e,r){var u=Math.cos(t),i=Math.sin(t),o=Math.cos(r),a=Math.sin(r),c=u*Math.cos(n),l=u*Math.sin(n),s=o*Math.cos(e),f=o*Math.sin(e),h=2*Math.asin(Math.sqrt(U(r-t)+u*o*U(e-n))),g=1/Math.sin(h),p=h?function(n){var t=Math.sin(n*=h)*g,e=Math.sin(h-n)*g,r=e*c+t*s,u=e*l+t*f,o=e*i+t*a;return[Math.atan2(u,r)*Ko,Math.atan2(o,Math.sqrt(r*r+u*u))*Ko]}:function(){return[n*Ko,t*Ko]};return p.distance=h,p}function He(){function n(n,u){var i=Math.sin(u*=Go),o=Math.cos(u),a=Math.abs((n*=Go)-t),c=Math.cos(a);ic+=Math.atan2(Math.sqrt((a=o*Math.sin(a))*a+(a=r*i-e*o*c)*a),e*i+r*o*c),t=n,e=i,r=o}var t,e,r;oc.point=function(u,i){t=u*Go,e=Math.sin(i*=Go),r=Math.cos(i),oc.point=n},oc.lineEnd=function(){oc.point=oc.lineEnd=c}}function Fe(n,t){function e(t,e){var r=Math.cos(t),u=Math.cos(e),i=n(r*u);return[i*u*Math.sin(t),i*Math.sin(e)]}return e.invert=function(n,e){var r=Math.sqrt(n*n+e*e),u=t(r),i=Math.sin(u),o=Math.cos(u);return[Math.atan2(n*i,r*o),Math.asin(r&&e*i/r)]},e}function Pe(n,t){function e(n,t){var e=Math.abs(Math.abs(t)-Bo/2)<Wo?0:o/Math.pow(u(t),i);return[e*Math.sin(i*n),o-e*Math.cos(i*n)]}var r=Math.cos(n),u=function(n){return Math.tan(Bo/4+n/2)},i=n===t?Math.sin(n):Math.log(r/Math.cos(t))/Math.log(u(t)/u(n)),o=r*Math.pow(u(n),i)/i;return i?(e.invert=function(n,t){var e=o-t,r=F(i)*Math.sqrt(n*n+e*e);return[Math.atan2(n,e)/i,2*Math.atan(Math.pow(o/r,1/i))-Bo/2]},e):Re}function Oe(n,t){function e(n,t){var e=i-t;return[e*Math.sin(u*n),i-e*Math.cos(u*n)]}var r=Math.cos(n),u=n===t?Math.sin(n):(r-Math.cos(t))/(t-n),i=r/u+n;return Math.abs(u)<Wo?Se:(e.invert=function(n,t){var e=i-t;return[Math.atan2(n,e)/u,i-F(u)*Math.sqrt(n*n+e*e)]},e)}function Re(n,t){return[n,Math.log(Math.tan(Bo/4+t/2))]}function Ye(n){var t,e=be(n),r=e.scale,u=e.translate,i=e.clipExtent;return e.scale=function(){var n=r.apply(e,arguments);return n===e?t?e.clipExtent(null):e:n},e.translate=function(){var n=u.apply(e,arguments);return n===e?t?e.clipExtent(null):e:n},e.clipExtent=function(n){var o=i.apply(e,arguments);if(o===e){if(t=null==n){var a=Bo*r(),c=u();i([[c[0]-a,c[1]-a],[c[0]+a,c[1]+a]])}}else t&&(o=null);return o},e.clipExtent(null)}function Ie(n,t){var e=Math.cos(t)*Math.sin(n);return[Math.log((1+e)/(1-e))/2,Math.atan2(Math.tan(t),Math.cos(n))]}function Ue(n){function t(t){function o(){l.push("M",i(n(s),a))}for(var c,l=[],s=[],f=-1,h=t.length,g=pt(e),p=pt(r);++f<h;)u.call(this,c=t[f],f)?s.push([+g.call(this,c,f),+p.call(this,c,f)]):s.length&&(o(),s=[]);return s.length&&o(),l.length?l.join(""):null}var e=Ze,r=Ve,u=Vt,i=Xe,o=i.key,a=.7;return t.x=function(n){return arguments.length?(e=n,t):e},t.y=function(n){return arguments.length?(r=n,t):r},t.defined=function(n){return arguments.length?(u=n,t):u},t.interpolate=function(n){return arguments.length?(o="function"==typeof n?i=n:(i=hc.get(n)||Xe).key,t):o},t.tension=function(n){return arguments.length?(a=n,t):a},t}function Ze(n){return n[0]}function Ve(n){return n[1]}function Xe(n){return n.join("L")}function $e(n){return Xe(n)+"Z"}function Be(n){for(var t=0,e=n.length,r=n[0],u=[r[0],",",r[1]];++t<e;)u.push("H",(r[0]+(r=n[t])[0])/2,"V",r[1]);return e>1&&u.push("H",r[0]),u.join("")}function We(n){for(var t=0,e=n.length,r=n[0],u=[r[0],",",r[1]];++t<e;)u.push("V",(r=n[t])[1],"H",r[0]);return u.join("")}function Je(n){for(var t=0,e=n.length,r=n[0],u=[r[0],",",r[1]];++t<e;)u.push("H",(r=n[t])[0],"V",r[1]);return u.join("")}function Ge(n,t){return n.length<4?Xe(n):n[1]+nr(n.slice(1,n.length-1),tr(n,t))}function Ke(n,t){return n.length<3?Xe(n):n[0]+nr((n.push(n[0]),n),tr([n[n.length-2]].concat(n,[n[1]]),t))}function Qe(n,t){return n.length<3?Xe(n):n[0]+nr(n,tr(n,t))}function nr(n,t){if(t.length<1||n.length!=t.length&&n.length!=t.length+2)return Xe(n);var e=n.length!=t.length,r="",u=n[0],i=n[1],o=t[0],a=o,c=1;if(e&&(r+="Q"+(i[0]-2*o[0]/3)+","+(i[1]-2*o[1]/3)+","+i[0]+","+i[1],u=n[1],c=2),t.length>1){a=t[1],i=n[c],c++,r+="C"+(u[0]+o[0])+","+(u[1]+o[1])+","+(i[0]-a[0])+","+(i[1]-a[1])+","+i[0]+","+i[1];for(var l=2;l<t.length;l++,c++)i=n[c],a=t[l],r+="S"+(i[0]-a[0])+","+(i[1]-a[1])+","+i[0]+","+i[1]}if(e){var s=n[c];r+="Q"+(i[0]+2*a[0]/3)+","+(i[1]+2*a[1]/3)+","+s[0]+","+s[1]}return r}function tr(n,t){for(var e,r=[],u=(1-t)/2,i=n[0],o=n[1],a=1,c=n.length;++a<c;)e=i,i=o,o=n[a],r.push([u*(o[0]-e[0]),u*(o[1]-e[1])]);return r}function er(n){if(n.length<3)return Xe(n);var t=1,e=n.length,r=n[0],u=r[0],i=r[1],o=[u,u,u,(r=n[1])[0]],a=[i,i,i,r[1]],c=[u,",",i,"L",or(dc,o),",",or(dc,a)];for(n.push(n[e-1]);++t<=e;)r=n[t],o.shift(),o.push(r[0]),a.shift(),a.push(r[1]),ar(c,o,a);return n.pop(),c.push("L",r),c.join("")}function rr(n){if(n.length<4)return Xe(n);for(var t,e=[],r=-1,u=n.length,i=[0],o=[0];++r<3;)t=n[r],i.push(t[0]),o.push(t[1]);for(e.push(or(dc,i)+","+or(dc,o)),--r;++r<u;)t=n[r],i.shift(),i.push(t[0]),o.shift(),o.push(t[1]),ar(e,i,o);return e.join("")}function ur(n){for(var t,e,r=-1,u=n.length,i=u+4,o=[],a=[];++r<4;)e=n[r%u],o.push(e[0]),a.push(e[1]);for(t=[or(dc,o),",",or(dc,a)],--r;++r<i;)e=n[r%u],o.shift(),o.push(e[0]),a.shift(),a.push(e[1]),ar(t,o,a);return t.join("")}function ir(n,t){var e=n.length-1;if(e)for(var r,u,i=n[0][0],o=n[0][1],a=n[e][0]-i,c=n[e][1]-o,l=-1;++l<=e;)r=n[l],u=l/e,r[0]=t*r[0]+(1-t)*(i+u*a),r[1]=t*r[1]+(1-t)*(o+u*c);return er(n)}function or(n,t){return n[0]*t[0]+n[1]*t[1]+n[2]*t[2]+n[3]*t[3]}function ar(n,t,e){n.push("C",or(gc,t),",",or(gc,e),",",or(pc,t),",",or(pc,e),",",or(dc,t),",",or(dc,e))}function cr(n,t){return(t[1]-n[1])/(t[0]-n[0])}function lr(n){for(var t=0,e=n.length-1,r=[],u=n[0],i=n[1],o=r[0]=cr(u,i);++t<e;)r[t]=(o+(o=cr(u=i,i=n[t+1])))/2;
+return r[t]=o,r}function sr(n){for(var t,e,r,u,i=[],o=lr(n),a=-1,c=n.length-1;++a<c;)t=cr(n[a],n[a+1]),Math.abs(t)<1e-6?o[a]=o[a+1]=0:(e=o[a]/t,r=o[a+1]/t,u=e*e+r*r,u>9&&(u=3*t/Math.sqrt(u),o[a]=u*e,o[a+1]=u*r));for(a=-1;++a<=c;)u=(n[Math.min(c,a+1)][0]-n[Math.max(0,a-1)][0])/(6*(1+o[a]*o[a])),i.push([u||0,o[a]*u||0]);return i}function fr(n){return n.length<3?Xe(n):n[0]+nr(n,sr(n))}function hr(n,t,e,r){var u,i,o,a,c,l,s;return u=r[n],i=u[0],o=u[1],u=r[t],a=u[0],c=u[1],u=r[e],l=u[0],s=u[1],(s-o)*(a-i)-(c-o)*(l-i)>0}function gr(n,t,e){return(e[0]-t[0])*(n[1]-t[1])<(e[1]-t[1])*(n[0]-t[0])}function pr(n,t,e,r){var u=n[0],i=e[0],o=t[0]-u,a=r[0]-i,c=n[1],l=e[1],s=t[1]-c,f=r[1]-l,h=(a*(c-l)-f*(u-i))/(f*o-a*s);return[u+h*o,c+h*s]}function dr(n){var t=n[0],e=n[n.length-1];return!(t[0]-e[0]||t[1]-e[1])}function vr(n,t){var e={list:n.map(function(n,t){return{index:t,x:n[0],y:n[1]}}).sort(function(n,t){return n.y<t.y?-1:n.y>t.y?1:n.x<t.x?-1:n.x>t.x?1:0}),bottomSite:null},r={list:[],leftEnd:null,rightEnd:null,init:function(){r.leftEnd=r.createHalfEdge(null,"l"),r.rightEnd=r.createHalfEdge(null,"l"),r.leftEnd.r=r.rightEnd,r.rightEnd.l=r.leftEnd,r.list.unshift(r.leftEnd,r.rightEnd)},createHalfEdge:function(n,t){return{edge:n,side:t,vertex:null,l:null,r:null}},insert:function(n,t){t.l=n,t.r=n.r,n.r.l=t,n.r=t},leftBound:function(n){var t=r.leftEnd;do t=t.r;while(t!=r.rightEnd&&u.rightOf(t,n));return t=t.l},del:function(n){n.l.r=n.r,n.r.l=n.l,n.edge=null},right:function(n){return n.r},left:function(n){return n.l},leftRegion:function(n){return null==n.edge?e.bottomSite:n.edge.region[n.side]},rightRegion:function(n){return null==n.edge?e.bottomSite:n.edge.region[mc[n.side]]}},u={bisect:function(n,t){var e={region:{l:n,r:t},ep:{l:null,r:null}},r=t.x-n.x,u=t.y-n.y,i=r>0?r:-r,o=u>0?u:-u;return e.c=n.x*r+n.y*u+.5*(r*r+u*u),i>o?(e.a=1,e.b=u/r,e.c/=r):(e.b=1,e.a=r/u,e.c/=u),e},intersect:function(n,t){var e=n.edge,r=t.edge;if(!e||!r||e.region.r==r.region.r)return null;var u=e.a*r.b-e.b*r.a;if(Math.abs(u)<1e-10)return null;var i,o,a=(e.c*r.b-r.c*e.b)/u,c=(r.c*e.a-e.c*r.a)/u,l=e.region.r,s=r.region.r;l.y<s.y||l.y==s.y&&l.x<s.x?(i=n,o=e):(i=t,o=r);var f=a>=o.region.r.x;return f&&"l"===i.side||!f&&"r"===i.side?null:{x:a,y:c}},rightOf:function(n,t){var e=n.edge,r=e.region.r,u=t.x>r.x;if(u&&"l"===n.side)return 1;if(!u&&"r"===n.side)return 0;if(1===e.a){var i=t.y-r.y,o=t.x-r.x,a=0,c=0;if(!u&&e.b<0||u&&e.b>=0?c=a=i>=e.b*o:(c=t.x+t.y*e.b>e.c,e.b<0&&(c=!c),c||(a=1)),!a){var l=r.x-e.region.l.x;c=e.b*(o*o-i*i)<l*i*(1+2*o/l+e.b*e.b),e.b<0&&(c=!c)}}else{var s=e.c-e.a*t.x,f=t.y-s,h=t.x-r.x,g=s-r.y;c=f*f>h*h+g*g}return"l"===n.side?c:!c},endPoint:function(n,e,r){n.ep[e]=r,n.ep[mc[e]]&&t(n)},distance:function(n,t){var e=n.x-t.x,r=n.y-t.y;return Math.sqrt(e*e+r*r)}},i={list:[],insert:function(n,t,e){n.vertex=t,n.ystar=t.y+e;for(var r=0,u=i.list,o=u.length;o>r;r++){var a=u[r];if(!(n.ystar>a.ystar||n.ystar==a.ystar&&t.x>a.vertex.x))break}u.splice(r,0,n)},del:function(n){for(var t=0,e=i.list,r=e.length;r>t&&e[t]!=n;++t);e.splice(t,1)},empty:function(){return 0===i.list.length},nextEvent:function(n){for(var t=0,e=i.list,r=e.length;r>t;++t)if(e[t]==n)return e[t+1];return null},min:function(){var n=i.list[0];return{x:n.vertex.x,y:n.ystar}},extractMin:function(){return i.list.shift()}};r.init(),e.bottomSite=e.list.shift();for(var o,a,c,l,s,f,h,g,p,d,v,m,y,M=e.list.shift();;)if(i.empty()||(o=i.min()),M&&(i.empty()||M.y<o.y||M.y==o.y&&M.x<o.x))a=r.leftBound(M),c=r.right(a),h=r.rightRegion(a),m=u.bisect(h,M),f=r.createHalfEdge(m,"l"),r.insert(a,f),d=u.intersect(a,f),d&&(i.del(a),i.insert(a,d,u.distance(d,M))),a=f,f=r.createHalfEdge(m,"r"),r.insert(a,f),d=u.intersect(f,c),d&&i.insert(f,d,u.distance(d,M)),M=e.list.shift();else{if(i.empty())break;a=i.extractMin(),l=r.left(a),c=r.right(a),s=r.right(c),h=r.leftRegion(a),g=r.rightRegion(c),v=a.vertex,u.endPoint(a.edge,a.side,v),u.endPoint(c.edge,c.side,v),r.del(a),i.del(c),r.del(c),y="l",h.y>g.y&&(p=h,h=g,g=p,y="r"),m=u.bisect(h,g),f=r.createHalfEdge(m,y),r.insert(l,f),u.endPoint(m,mc[y],v),d=u.intersect(l,f),d&&(i.del(l),i.insert(l,d,u.distance(d,h))),d=u.intersect(f,s),d&&i.insert(f,d,u.distance(d,h))}for(a=r.right(r.leftEnd);a!=r.rightEnd;a=r.right(a))t(a.edge)}function mr(n){return n.x}function yr(n){return n.y}function Mr(){return{leaf:!0,nodes:[],point:null,x:null,y:null}}function xr(n,t,e,r,u,i){if(!n(t,e,r,u,i)){var o=.5*(e+u),a=.5*(r+i),c=t.nodes;c[0]&&xr(n,c[0],e,r,o,a),c[1]&&xr(n,c[1],o,r,u,a),c[2]&&xr(n,c[2],e,a,o,i),c[3]&&xr(n,c[3],o,a,u,i)}}function br(n,t){n=mo.rgb(n),t=mo.rgb(t);var e=n.r,r=n.g,u=n.b,i=t.r-e,o=t.g-r,a=t.b-u;return function(n){return"#"+ct(Math.round(e+i*n))+ct(Math.round(r+o*n))+ct(Math.round(u+a*n))}}function _r(n,t){var e,r={},u={};for(e in n)e in t?r[e]=Er(n[e],t[e]):u[e]=n[e];for(e in t)e in n||(u[e]=t[e]);return function(n){for(e in r)u[e]=r[e](n);return u}}function wr(n,t){return t-=n=+n,function(e){return n+t*e}}function Sr(n,t){var e,r,u,i,o,a=0,c=0,l=[],s=[];for(n+="",t+="",yc.lastIndex=0,r=0;e=yc.exec(t);++r)e.index&&l.push(t.substring(a,c=e.index)),s.push({i:l.length,x:e[0]}),l.push(null),a=yc.lastIndex;for(a<t.length&&l.push(t.substring(a)),r=0,i=s.length;(e=yc.exec(n))&&i>r;++r)if(o=s[r],o.x==e[0]){if(o.i)if(null==l[o.i+1])for(l[o.i-1]+=o.x,l.splice(o.i,1),u=r+1;i>u;++u)s[u].i--;else for(l[o.i-1]+=o.x+l[o.i+1],l.splice(o.i,2),u=r+1;i>u;++u)s[u].i-=2;else if(null==l[o.i+1])l[o.i]=o.x;else for(l[o.i]=o.x+l[o.i+1],l.splice(o.i+1,1),u=r+1;i>u;++u)s[u].i--;s.splice(r,1),i--,r--}else o.x=wr(parseFloat(e[0]),parseFloat(o.x));for(;i>r;)o=s.pop(),null==l[o.i+1]?l[o.i]=o.x:(l[o.i]=o.x+l[o.i+1],l.splice(o.i+1,1)),i--;return 1===l.length?null==l[0]?(o=s[0].x,function(n){return o(n)+""}):function(){return t}:function(n){for(r=0;i>r;++r)l[(o=s[r]).i]=o.x(n);return l.join("")}}function Er(n,t){for(var e,r=mo.interpolators.length;--r>=0&&!(e=mo.interpolators[r](n,t)););return e}function kr(n,t){var e,r=[],u=[],i=n.length,o=t.length,a=Math.min(n.length,t.length);for(e=0;a>e;++e)r.push(Er(n[e],t[e]));for(;i>e;++e)u[e]=n[e];for(;o>e;++e)u[e]=t[e];return function(n){for(e=0;a>e;++e)u[e]=r[e](n);return u}}function Ar(n){return function(t){return 0>=t?0:t>=1?1:n(t)}}function Nr(n){return function(t){return 1-n(1-t)}}function Tr(n){return function(t){return.5*(.5>t?n(2*t):2-n(2-2*t))}}function qr(n){return n*n}function zr(n){return n*n*n}function Cr(n){if(0>=n)return 0;if(n>=1)return 1;var t=n*n,e=t*n;return 4*(.5>n?e:3*(n-t)+e-.75)}function Dr(n){return function(t){return Math.pow(t,n)}}function jr(n){return 1-Math.cos(n*Bo/2)}function Lr(n){return Math.pow(2,10*(n-1))}function Hr(n){return 1-Math.sqrt(1-n*n)}function Fr(n,t){var e;return arguments.length<2&&(t=.45),arguments.length?e=t/(2*Bo)*Math.asin(1/n):(n=1,e=t/4),function(r){return 1+n*Math.pow(2,10*-r)*Math.sin(2*(r-e)*Bo/t)}}function Pr(n){return n||(n=1.70158),function(t){return t*t*((n+1)*t-n)}}function Or(n){return 1/2.75>n?7.5625*n*n:2/2.75>n?7.5625*(n-=1.5/2.75)*n+.75:2.5/2.75>n?7.5625*(n-=2.25/2.75)*n+.9375:7.5625*(n-=2.625/2.75)*n+.984375}function Rr(n,t){n=mo.hcl(n),t=mo.hcl(t);var e=n.h,r=n.c,u=n.l,i=t.h-e,o=t.c-r,a=t.l-u;return isNaN(o)&&(o=0,r=isNaN(r)?t.c:r),isNaN(i)?(i=0,e=isNaN(e)?t.h:e):i>180?i-=360:-180>i&&(i+=360),function(n){return J(e+i*n,r+o*n,u+a*n)+""}}function Yr(n,t){n=mo.hsl(n),t=mo.hsl(t);var e=n.h,r=n.s,u=n.l,i=t.h-e,o=t.s-r,a=t.l-u;return isNaN(o)&&(o=0,r=isNaN(r)?t.s:r),isNaN(i)?(i=0,e=isNaN(e)?t.h:e):i>180?i-=360:-180>i&&(i+=360),function(n){return $(e+i*n,r+o*n,u+a*n)+""}}function Ir(n,t){n=mo.lab(n),t=mo.lab(t);var e=n.l,r=n.a,u=n.b,i=t.l-e,o=t.a-r,a=t.b-u;return function(n){return Q(e+i*n,r+o*n,u+a*n)+""}}function Ur(n,t){return t-=n,function(e){return Math.round(n+t*e)}}function Zr(n){var t=[n.a,n.b],e=[n.c,n.d],r=Xr(t),u=Vr(t,e),i=Xr($r(e,t,-u))||0;t[0]*e[1]<e[0]*t[1]&&(t[0]*=-1,t[1]*=-1,r*=-1,u*=-1),this.rotate=(r?Math.atan2(t[1],t[0]):Math.atan2(-e[0],e[1]))*Ko,this.translate=[n.e,n.f],this.scale=[r,i],this.skew=i?Math.atan2(u,i)*Ko:0}function Vr(n,t){return n[0]*t[0]+n[1]*t[1]}function Xr(n){var t=Math.sqrt(Vr(n,n));return t&&(n[0]/=t,n[1]/=t),t}function $r(n,t,e){return n[0]+=e*t[0],n[1]+=e*t[1],n}function Br(n,t){var e,r=[],u=[],i=mo.transform(n),o=mo.transform(t),a=i.translate,c=o.translate,l=i.rotate,s=o.rotate,f=i.skew,h=o.skew,g=i.scale,p=o.scale;return a[0]!=c[0]||a[1]!=c[1]?(r.push("translate(",null,",",null,")"),u.push({i:1,x:wr(a[0],c[0])},{i:3,x:wr(a[1],c[1])})):c[0]||c[1]?r.push("translate("+c+")"):r.push(""),l!=s?(l-s>180?s+=360:s-l>180&&(l+=360),u.push({i:r.push(r.pop()+"rotate(",null,")")-2,x:wr(l,s)})):s&&r.push(r.pop()+"rotate("+s+")"),f!=h?u.push({i:r.push(r.pop()+"skewX(",null,")")-2,x:wr(f,h)}):h&&r.push(r.pop()+"skewX("+h+")"),g[0]!=p[0]||g[1]!=p[1]?(e=r.push(r.pop()+"scale(",null,",",null,")"),u.push({i:e-4,x:wr(g[0],p[0])},{i:e-2,x:wr(g[1],p[1])})):(1!=p[0]||1!=p[1])&&r.push(r.pop()+"scale("+p+")"),e=u.length,function(n){for(var t,i=-1;++i<e;)r[(t=u[i]).i]=t.x(n);return r.join("")}}function Wr(n,t){return t=t-(n=+n)?1/(t-n):0,function(e){return(e-n)*t}}function Jr(n,t){return t=t-(n=+n)?1/(t-n):0,function(e){return Math.max(0,Math.min(1,(e-n)*t))}}function Gr(n){for(var t=n.source,e=n.target,r=Qr(t,e),u=[t];t!==r;)t=t.parent,u.push(t);for(var i=u.length;e!==r;)u.splice(i,0,e),e=e.parent;return u}function Kr(n){for(var t=[],e=n.parent;null!=e;)t.push(n),n=e,e=e.parent;return t.push(n),t}function Qr(n,t){if(n===t)return n;for(var e=Kr(n),r=Kr(t),u=e.pop(),i=r.pop(),o=null;u===i;)o=u,u=e.pop(),i=r.pop();return o}function nu(n){n.fixed|=2}function tu(n){n.fixed&=-7}function eu(n){n.fixed|=4,n.px=n.x,n.py=n.y}function ru(n){n.fixed&=-5}function uu(n,t,e){var r=0,u=0;if(n.charge=0,!n.leaf)for(var i,o=n.nodes,a=o.length,c=-1;++c<a;)i=o[c],null!=i&&(uu(i,t,e),n.charge+=i.charge,r+=i.charge*i.cx,u+=i.charge*i.cy);if(n.point){n.leaf||(n.point.x+=Math.random()-.5,n.point.y+=Math.random()-.5);var l=t*e[n.point.index];n.charge+=n.pointCharge=l,r+=l*n.point.x,u+=l*n.point.y}n.cx=r/n.charge,n.cy=u/n.charge}function iu(n,t){return mo.rebind(n,t,"sort","children","value"),n.nodes=n,n.links=lu,n}function ou(n){return n.children}function au(n){return n.value}function cu(n,t){return t.value-n.value}function lu(n){return mo.merge(n.map(function(n){return(n.children||[]).map(function(t){return{source:n,target:t}})}))}function su(n){return n.x}function fu(n){return n.y}function hu(n,t,e){n.y0=t,n.y=e}function gu(n){return mo.range(n.length)}function pu(n){for(var t=-1,e=n[0].length,r=[];++t<e;)r[t]=0;return r}function du(n){for(var t,e=1,r=0,u=n[0][1],i=n.length;i>e;++e)(t=n[e][1])>u&&(r=e,u=t);return r}function vu(n){return n.reduce(mu,0)}function mu(n,t){return n+t[1]}function yu(n,t){return Mu(n,Math.ceil(Math.log(t.length)/Math.LN2+1))}function Mu(n,t){for(var e=-1,r=+n[0],u=(n[1]-r)/t,i=[];++e<=t;)i[e]=u*e+r;return i}function xu(n){return[mo.min(n),mo.max(n)]}function bu(n,t){return n.parent==t.parent?1:2}function _u(n){var t=n.children;return t&&t.length?t[0]:n._tree.thread}function wu(n){var t,e=n.children;return e&&(t=e.length)?e[t-1]:n._tree.thread}function Su(n,t){var e=n.children;if(e&&(u=e.length))for(var r,u,i=-1;++i<u;)t(r=Su(e[i],t),n)>0&&(n=r);return n}function Eu(n,t){return n.x-t.x}function ku(n,t){return t.x-n.x}function Au(n,t){return n.depth-t.depth}function Nu(n,t){function e(n,r){var u=n.children;if(u&&(o=u.length))for(var i,o,a=null,c=-1;++c<o;)i=u[c],e(i,a),a=i;t(n,r)}e(n,null)}function Tu(n){for(var t,e=0,r=0,u=n.children,i=u.length;--i>=0;)t=u[i]._tree,t.prelim+=e,t.mod+=e,e+=t.shift+(r+=t.change)}function qu(n,t,e){n=n._tree,t=t._tree;var r=e/(t.number-n.number);n.change+=r,t.change-=r,t.shift+=e,t.prelim+=e,t.mod+=e}function zu(n,t,e){return n._tree.ancestor.parent==t.parent?n._tree.ancestor:e}function Cu(n,t){return n.value-t.value}function Du(n,t){var e=n._pack_next;n._pack_next=t,t._pack_prev=n,t._pack_next=e,e._pack_prev=t}function ju(n,t){n._pack_next=t,t._pack_prev=n}function Lu(n,t){var e=t.x-n.x,r=t.y-n.y,u=n.r+t.r;return.999*u*u>e*e+r*r}function Hu(n){function t(n){s=Math.min(n.x-n.r,s),f=Math.max(n.x+n.r,f),h=Math.min(n.y-n.r,h),g=Math.max(n.y+n.r,g)}if((e=n.children)&&(l=e.length)){var e,r,u,i,o,a,c,l,s=1/0,f=-1/0,h=1/0,g=-1/0;if(e.forEach(Fu),r=e[0],r.x=-r.r,r.y=0,t(r),l>1&&(u=e[1],u.x=u.r,u.y=0,t(u),l>2))for(i=e[2],Ru(r,u,i),t(i),Du(r,i),r._pack_prev=i,Du(i,u),u=r._pack_next,o=3;l>o;o++){Ru(r,u,i=e[o]);var p=0,d=1,v=1;for(a=u._pack_next;a!==u;a=a._pack_next,d++)if(Lu(a,i)){p=1;break}if(1==p)for(c=r._pack_prev;c!==a._pack_prev&&!Lu(c,i);c=c._pack_prev,v++);p?(v>d||d==v&&u.r<r.r?ju(r,u=a):ju(r=c,u),o--):(Du(r,i),u=i,t(i))}var m=(s+f)/2,y=(h+g)/2,M=0;for(o=0;l>o;o++)i=e[o],i.x-=m,i.y-=y,M=Math.max(M,i.r+Math.sqrt(i.x*i.x+i.y*i.y));n.r=M,e.forEach(Pu)}}function Fu(n){n._pack_next=n._pack_prev=n}function Pu(n){delete n._pack_next,delete n._pack_prev}function Ou(n,t,e,r){var u=n.children;if(n.x=t+=r*n.x,n.y=e+=r*n.y,n.r*=r,u)for(var i=-1,o=u.length;++i<o;)Ou(u[i],t,e,r)}function Ru(n,t,e){var r=n.r+e.r,u=t.x-n.x,i=t.y-n.y;if(r&&(u||i)){var o=t.r+e.r,a=u*u+i*i;o*=o,r*=r;var c=.5+(r-o)/(2*a),l=Math.sqrt(Math.max(0,2*o*(r+a)-(r-=a)*r-o*o))/(2*a);e.x=n.x+c*u+l*i,e.y=n.y+c*i-l*u}else e.x=n.x+r,e.y=n.y}function Yu(n){return 1+mo.max(n,function(n){return n.y})}function Iu(n){return n.reduce(function(n,t){return n+t.x},0)/n.length}function Uu(n){var t=n.children;return t&&t.length?Uu(t[0]):n}function Zu(n){var t,e=n.children;return e&&(t=e.length)?Zu(e[t-1]):n}function Vu(n){return{x:n.x,y:n.y,dx:n.dx,dy:n.dy}}function Xu(n,t){var e=n.x+t[3],r=n.y+t[0],u=n.dx-t[1]-t[3],i=n.dy-t[0]-t[2];return 0>u&&(e+=u/2,u=0),0>i&&(r+=i/2,i=0),{x:e,y:r,dx:u,dy:i}}function $u(n){var t=n[0],e=n[n.length-1];return e>t?[t,e]:[e,t]}function Bu(n){return n.rangeExtent?n.rangeExtent():$u(n.range())}function Wu(n,t,e,r){var u=e(n[0],n[1]),i=r(t[0],t[1]);return function(n){return i(u(n))}}function Ju(n,t){var e,r=0,u=n.length-1,i=n[r],o=n[u];return i>o&&(e=r,r=u,u=e,e=i,i=o,o=e),n[r]=t.floor(i),n[u]=t.ceil(o),n}function Gu(n){return n?{floor:function(t){return Math.floor(t/n)*n},ceil:function(t){return Math.ceil(t/n)*n}}:Nc}function Ku(n,t,e,r){var u=[],i=[],o=0,a=Math.min(n.length,t.length)-1;for(n[a]<n[0]&&(n=n.slice().reverse(),t=t.slice().reverse());++o<=a;)u.push(e(n[o-1],n[o])),i.push(r(t[o-1],t[o]));return function(t){var e=mo.bisect(n,t,1,a)-1;return i[e](u[e](t))}}function Qu(n,t,e,r){function u(){var u=Math.min(n.length,t.length)>2?Ku:Wu,c=r?Jr:Wr;return o=u(n,t,c,e),a=u(t,n,c,Er),i}function i(n){return o(n)}var o,a;return i.invert=function(n){return a(n)},i.domain=function(t){return arguments.length?(n=t.map(Number),u()):n},i.range=function(n){return arguments.length?(t=n,u()):t},i.rangeRound=function(n){return i.range(n).interpolate(Ur)},i.clamp=function(n){return arguments.length?(r=n,u()):r},i.interpolate=function(n){return arguments.length?(e=n,u()):e},i.ticks=function(t){return ri(n,t)},i.tickFormat=function(t,e){return ui(n,t,e)},i.nice=function(t){return ti(n,t),u()},i.copy=function(){return Qu(n,t,e,r)},u()}function ni(n,t){return mo.rebind(n,t,"range","rangeRound","interpolate","clamp")}function ti(n,t){return Ju(n,Gu(ei(n,t)[2]))}function ei(n,t){null==t&&(t=10);var e=$u(n),r=e[1]-e[0],u=Math.pow(10,Math.floor(Math.log(r/t)/Math.LN10)),i=t/r*u;return.15>=i?u*=10:.35>=i?u*=5:.75>=i&&(u*=2),e[0]=Math.ceil(e[0]/u)*u,e[1]=Math.floor(e[1]/u)*u+.5*u,e[2]=u,e}function ri(n,t){return mo.range.apply(mo,ei(n,t))}function ui(n,t,e){var r=-Math.floor(Math.log(ei(n,t)[2])/Math.LN10+.01);return mo.format(e?e.replace(Ea,function(n,t,e,u,i,o,a,c,l,s){return[t,e,u,i,o,a,c,l||"."+(r-2*("%"===s)),s].join("")}):",."+r+"f")}function ii(n,t,e,r){function u(n){return(e?Math.log(0>n?0:n):-Math.log(n>0?0:-n))/Math.log(t)}function i(n){return e?Math.pow(t,n):-Math.pow(t,-n)}function o(t){return n(u(t))}return o.invert=function(t){return i(n.invert(t))},o.domain=function(t){return arguments.length?(e=t[0]>=0,n.domain((r=t.map(Number)).map(u)),o):r},o.base=function(e){return arguments.length?(t=+e,n.domain(r.map(u)),o):t},o.nice=function(){var t=Ju(r.map(u),e?Math:qc);return n.domain(t),r=t.map(i),o},o.ticks=function(){var n=$u(r),o=[],a=n[0],c=n[1],l=Math.floor(u(a)),s=Math.ceil(u(c)),f=t%1?2:t;if(isFinite(s-l)){if(e){for(;s>l;l++)for(var h=1;f>h;h++)o.push(i(l)*h);o.push(i(l))}else for(o.push(i(l));l++<s;)for(var h=f-1;h>0;h--)o.push(i(l)*h);for(l=0;o[l]<a;l++);for(s=o.length;o[s-1]>c;s--);o=o.slice(l,s)}return o},o.tickFormat=function(n,t){if(!arguments.length)return Tc;arguments.length<2?t=Tc:"function"!=typeof t&&(t=mo.format(t));var r,a=Math.max(.1,n/o.ticks().length),c=e?(r=1e-12,Math.ceil):(r=-1e-12,Math.floor);return function(n){return n/i(c(u(n)+r))<=a?t(n):""}},o.copy=function(){return ii(n.copy(),t,e,r)},ni(o,n)}function oi(n,t,e){function r(t){return n(u(t))}var u=ai(t),i=ai(1/t);return r.invert=function(t){return i(n.invert(t))},r.domain=function(t){return arguments.length?(n.domain((e=t.map(Number)).map(u)),r):e},r.ticks=function(n){return ri(e,n)},r.tickFormat=function(n,t){return ui(e,n,t)},r.nice=function(n){return r.domain(ti(e,n))},r.exponent=function(o){return arguments.length?(u=ai(t=o),i=ai(1/t),n.domain(e.map(u)),r):t},r.copy=function(){return oi(n.copy(),t,e)},ni(r,n)}function ai(n){return function(t){return 0>t?-Math.pow(-t,n):Math.pow(t,n)}}function ci(n,t){function e(t){return o[((i.get(t)||i.set(t,n.push(t)))-1)%o.length]}function r(t,e){return mo.range(n.length).map(function(n){return t+e*n})}var i,o,a;return e.domain=function(r){if(!arguments.length)return n;n=[],i=new u;for(var o,a=-1,c=r.length;++a<c;)i.has(o=r[a])||i.set(o,n.push(o));return e[t.t].apply(e,t.a)},e.range=function(n){return arguments.length?(o=n,a=0,t={t:"range",a:arguments},e):o},e.rangePoints=function(u,i){arguments.length<2&&(i=0);var c=u[0],l=u[1],s=(l-c)/(Math.max(1,n.length-1)+i);return o=r(n.length<2?(c+l)/2:c+s*i/2,s),a=0,t={t:"rangePoints",a:arguments},e},e.rangeBands=function(u,i,c){arguments.length<2&&(i=0),arguments.length<3&&(c=i);var l=u[1]<u[0],s=u[l-0],f=u[1-l],h=(f-s)/(n.length-i+2*c);return o=r(s+h*c,h),l&&o.reverse(),a=h*(1-i),t={t:"rangeBands",a:arguments},e},e.rangeRoundBands=function(u,i,c){arguments.length<2&&(i=0),arguments.length<3&&(c=i);var l=u[1]<u[0],s=u[l-0],f=u[1-l],h=Math.floor((f-s)/(n.length-i+2*c)),g=f-s-(n.length-i)*h;return o=r(s+Math.round(g/2),h),l&&o.reverse(),a=Math.round(h*(1-i)),t={t:"rangeRoundBands",a:arguments},e},e.rangeBand=function(){return a},e.rangeExtent=function(){return $u(t.a[0])},e.copy=function(){return ci(n,t)},e.domain(n)}function li(n,t){function e(){var e=0,i=t.length;for(u=[];++e<i;)u[e-1]=mo.quantile(n,e/i);return r}function r(n){return isNaN(n=+n)?void 0:t[mo.bisect(u,n)]}var u;return r.domain=function(t){return arguments.length?(n=t.filter(function(n){return!isNaN(n)}).sort(mo.ascending),e()):n},r.range=function(n){return arguments.length?(t=n,e()):t},r.quantiles=function(){return u},r.invertExtent=function(e){return e=t.indexOf(e),0>e?[0/0,0/0]:[e>0?u[e-1]:n[0],e<u.length?u[e]:n[n.length-1]]},r.copy=function(){return li(n,t)},e()}function si(n,t,e){function r(t){return e[Math.max(0,Math.min(o,Math.floor(i*(t-n))))]}function u(){return i=e.length/(t-n),o=e.length-1,r}var i,o;return r.domain=function(e){return arguments.length?(n=+e[0],t=+e[e.length-1],u()):[n,t]},r.range=function(n){return arguments.length?(e=n,u()):e},r.invertExtent=function(t){return t=e.indexOf(t),t=0>t?0/0:t/i+n,[t,t+1/i]},r.copy=function(){return si(n,t,e)},u()}function fi(n,t){function e(e){return e>=e?t[mo.bisect(n,e)]:void 0}return e.domain=function(t){return arguments.length?(n=t,e):n},e.range=function(n){return arguments.length?(t=n,e):t},e.invertExtent=function(e){return e=t.indexOf(e),[n[e-1],n[e]]},e.copy=function(){return fi(n,t)},e}function hi(n){function t(n){return+n}return t.invert=t,t.domain=t.range=function(e){return arguments.length?(n=e.map(t),t):n},t.ticks=function(t){return ri(n,t)},t.tickFormat=function(t,e){return ui(n,t,e)},t.copy=function(){return hi(n)},t}function gi(n){return n.innerRadius}function pi(n){return n.outerRadius}function di(n){return n.startAngle}function vi(n){return n.endAngle}function mi(n){for(var t,e,r,u=-1,i=n.length;++u<i;)t=n[u],e=t[0],r=t[1]+Lc,t[0]=e*Math.cos(r),t[1]=e*Math.sin(r);return n}function yi(n){function t(t){function c(){d.push("M",a(n(m),f),s,l(n(v.reverse()),f),"Z")}for(var h,g,p,d=[],v=[],m=[],y=-1,M=t.length,x=pt(e),b=pt(u),_=e===r?function(){return g}:pt(r),w=u===i?function(){return p}:pt(i);++y<M;)o.call(this,h=t[y],y)?(v.push([g=+x.call(this,h,y),p=+b.call(this,h,y)]),m.push([+_.call(this,h,y),+w.call(this,h,y)])):v.length&&(c(),v=[],m=[]);return v.length&&c(),d.length?d.join(""):null}var e=Ze,r=Ze,u=0,i=Ve,o=Vt,a=Xe,c=a.key,l=a,s="L",f=.7;return t.x=function(n){return arguments.length?(e=r=n,t):r},t.x0=function(n){return arguments.length?(e=n,t):e},t.x1=function(n){return arguments.length?(r=n,t):r},t.y=function(n){return arguments.length?(u=i=n,t):i},t.y0=function(n){return arguments.length?(u=n,t):u},t.y1=function(n){return arguments.length?(i=n,t):i},t.defined=function(n){return arguments.length?(o=n,t):o},t.interpolate=function(n){return arguments.length?(c="function"==typeof n?a=n:(a=hc.get(n)||Xe).key,l=a.reverse||a,s=a.closed?"M":"L",t):c},t.tension=function(n){return arguments.length?(f=n,t):f},t}function Mi(n){return n.radius}function xi(n){return[n.x,n.y]}function bi(n){return function(){var t=n.apply(this,arguments),e=t[0],r=t[1]+Lc;return[e*Math.cos(r),e*Math.sin(r)]}}function _i(){return 64}function wi(){return"circle"}function Si(n){var t=Math.sqrt(n/Bo);return"M0,"+t+"A"+t+","+t+" 0 1,1 0,"+-t+"A"+t+","+t+" 0 1,1 0,"+t+"Z"}function Ei(n,t){return Lo(n,Ic),n.id=t,n}function ki(n,t,e,r){var u=n.id;return N(n,"function"==typeof e?function(n,i,o){n.__transition__[u].tween.set(t,r(e.call(n,n.__data__,i,o)))}:(e=r(e),function(n){n.__transition__[u].tween.set(t,e)}))}function Ai(n){return null==n&&(n=""),function(){this.textContent=n}}function Ni(n,t,e,r){var i=n.__transition__||(n.__transition__={active:0,count:0}),o=i[e];if(!o){var a=r.time;o=i[e]={tween:new u,time:a,ease:r.ease,delay:r.delay,duration:r.duration},++i.count,mo.timer(function(r){function u(r){return i.active>e?l():(i.active=e,o.event&&o.event.start.call(n,s,t),o.tween.forEach(function(e,r){(r=r.call(n,s,t))&&p.push(r)}),c(r)?1:(xt(c,0,a),void 0))}function c(r){if(i.active!==e)return l();for(var u=(r-h)/g,a=f(u),c=p.length;c>0;)p[--c].call(n,a);return u>=1?(o.event&&o.event.end.call(n,s,t),l()):void 0}function l(){return--i.count?delete i[e]:delete n.__transition__,1}var s=n.__data__,f=o.ease,h=o.delay,g=o.duration,p=[];return r>=h?u(r):(xt(u,h,a),void 0)},0,a)}}function Ti(n,t){n.attr("transform",function(n){return"translate("+t(n)+",0)"})}function qi(n,t){n.attr("transform",function(n){return"translate(0,"+t(n)+")"})}function zi(){this._=new Date(arguments.length>1?Date.UTC.apply(this,arguments):arguments[0])}function Ci(n,t,e){function r(t){var e=n(t),r=i(e,1);return r-t>t-e?e:r}function u(e){return t(e=n(new Wc(e-1)),1),e}function i(n,e){return t(n=new Wc(+n),e),n}function o(n,r,i){var o=u(n),a=[];if(i>1)for(;r>o;)e(o)%i||a.push(new Date(+o)),t(o,1);else for(;r>o;)a.push(new Date(+o)),t(o,1);return a}function a(n,t,e){try{Wc=zi;var r=new zi;return r._=n,o(r,t,e)}finally{Wc=Date}}n.floor=n,n.round=r,n.ceil=u,n.offset=i,n.range=o;var c=n.utc=Di(n);return c.floor=c,c.round=Di(r),c.ceil=Di(u),c.offset=Di(i),c.range=a,n}function Di(n){return function(t,e){try{Wc=zi;var r=new zi;return r._=t,n(r,e)._}finally{Wc=Date}}}function ji(n){function t(t){for(var r,u,i,o=[],a=-1,c=0;++a<e;)37===n.charCodeAt(a)&&(o.push(n.substring(c,a)),null!=(u=pl[r=n.charAt(++a)])&&(r=n.charAt(++a)),(i=dl[r])&&(r=i(t,null==u?"e"===r?" ":"0":u)),o.push(r),c=a+1);return o.push(n.substring(c,a)),o.join("")}var e=n.length;return t.parse=function(t){var e={y:1900,m:0,d:1,H:0,M:0,S:0,L:0,Z:null},r=Li(e,n,t,0);if(r!=t.length)return null;"p"in e&&(e.H=e.H%12+12*e.p);var u=null!=e.Z&&Wc!==zi,i=new(u?zi:Wc);return"j"in e?i.setFullYear(e.y,0,e.j):"w"in e&&("W"in e||"U"in e)?(i.setFullYear(e.y,0,1),i.setFullYear(e.y,0,"W"in e?(e.w+6)%7+7*e.W-(i.getDay()+5)%7:e.w+7*e.U-(i.getDay()+6)%7)):i.setFullYear(e.y,e.m,e.d),i.setHours(e.H+Math.floor(e.Z/100),e.M+e.Z%100,e.S,e.L),u?i._:i},t.toString=function(){return n},t}function Li(n,t,e,r){for(var u,i,o,a=0,c=t.length,l=e.length;c>a;){if(r>=l)return-1;if(u=t.charCodeAt(a++),37===u){if(o=t.charAt(a++),i=vl[o in pl?t.charAt(a++):o],!i||(r=i(n,e,r))<0)return-1}else if(u!=e.charCodeAt(r++))return-1}return r}function Hi(n){return new RegExp("^(?:"+n.map(mo.requote).join("|")+")","i")}function Fi(n){for(var t=new u,e=-1,r=n.length;++e<r;)t.set(n[e].toLowerCase(),e);return t}function Pi(n,t,e){var r=0>n?"-":"",u=(r?-n:n)+"",i=u.length;return r+(e>i?new Array(e-i+1).join(t)+u:u)}function Oi(n,t,e){al.lastIndex=0;var r=al.exec(t.substring(e));return r?(n.w=cl.get(r[0].toLowerCase()),e+r[0].length):-1}function Ri(n,t,e){il.lastIndex=0;var r=il.exec(t.substring(e));return r?(n.w=ol.get(r[0].toLowerCase()),e+r[0].length):-1}function Yi(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+1));return r?(n.w=+r[0],e+r[0].length):-1}function Ii(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e));return r?(n.U=+r[0],e+r[0].length):-1}function Ui(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e));return r?(n.W=+r[0],e+r[0].length):-1}function Zi(n,t,e){fl.lastIndex=0;var r=fl.exec(t.substring(e));return r?(n.m=hl.get(r[0].toLowerCase()),e+r[0].length):-1}function Vi(n,t,e){ll.lastIndex=0;var r=ll.exec(t.substring(e));return r?(n.m=sl.get(r[0].toLowerCase()),e+r[0].length):-1}function Xi(n,t,e){return Li(n,dl.c.toString(),t,e)}function $i(n,t,e){return Li(n,dl.x.toString(),t,e)}function Bi(n,t,e){return Li(n,dl.X.toString(),t,e)}function Wi(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+4));return r?(n.y=+r[0],e+r[0].length):-1}function Ji(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+2));return r?(n.y=Ki(+r[0]),e+r[0].length):-1}function Gi(n,t,e){return/^[+-]\d{4}$/.test(t=t.substring(e,e+5))?(n.Z=+t,e+5):-1}function Ki(n){return n+(n>68?1900:2e3)}function Qi(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+2));return r?(n.m=r[0]-1,e+r[0].length):-1}function no(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+2));return r?(n.d=+r[0],e+r[0].length):-1}function to(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+3));return r?(n.j=+r[0],e+r[0].length):-1}function eo(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+2));return r?(n.H=+r[0],e+r[0].length):-1}function ro(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+2));return r?(n.M=+r[0],e+r[0].length):-1}function uo(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+2));return r?(n.S=+r[0],e+r[0].length):-1}function io(n,t,e){ml.lastIndex=0;var r=ml.exec(t.substring(e,e+3));return r?(n.L=+r[0],e+r[0].length):-1}function oo(n,t,e){var r=yl.get(t.substring(e,e+=2).toLowerCase());return null==r?-1:(n.p=r,e)}function ao(n){var t=n.getTimezoneOffset(),e=t>0?"-":"+",r=~~(Math.abs(t)/60),u=Math.abs(t)%60;return e+Pi(r,"0",2)+Pi(u,"0",2)}function co(n,t,e){gl.lastIndex=0;var r=gl.exec(t.substring(e,e+1));return r?e+r[0].length:-1}function lo(n){function t(n){try{Wc=zi;var t=new Wc;return t._=n,e(t)}finally{Wc=Date}}var e=ji(n);return t.parse=function(n){try{Wc=zi;var t=e.parse(n);return t&&t._}finally{Wc=Date}},t.toString=e.toString,t}function so(n){return n.toISOString()}function fo(n,t,e){function r(t){return n(t)}function u(n,e){var r=n[1]-n[0],u=r/e,i=mo.bisect(xl,u);return i==xl.length?[t.year,ei(n.map(function(n){return n/31536e6}),e)[2]]:i?t[u/xl[i-1]<xl[i]/u?i-1:i]:[Sl,ei(n,e)[2]]}return r.invert=function(t){return ho(n.invert(t))},r.domain=function(t){return arguments.length?(n.domain(t),r):n.domain().map(ho)},r.nice=function(n,t){function e(e){return!isNaN(e)&&!n.range(e,ho(+e+1),t).length}var i=r.domain(),o=$u(i),a=null==n?u(o,10):"number"==typeof n&&u(o,n);return a&&(n=a[0],t=a[1]),r.domain(Ju(i,t>1?{floor:function(t){for(;e(t=n.floor(t));)t=ho(t-1);return t},ceil:function(t){for(;e(t=n.ceil(t));)t=ho(+t+1);return t}}:n))},r.ticks=function(n,t){var e=$u(r.domain()),i=null==n?u(e,10):"number"==typeof n?u(e,n):!n.range&&[{range:n},t];return i&&(n=i[0],t=i[1]),n.range(e[0],ho(+e[1]+1),t)},r.tickFormat=function(){return e},r.copy=function(){return fo(n.copy(),t,e)},ni(r,n)}function ho(n){return new Date(n)}function go(n){return function(t){for(var e=n.length-1,r=n[e];!r[1](t);)r=n[--e];return r[0](t)}}function po(n){return JSON.parse(n.responseText)}function vo(n){var t=xo.createRange();return t.selectNode(xo.body),t.createContextualFragment(n.responseText)}var mo={version:"3.3.3"};Date.now||(Date.now=function(){return+new Date});var yo=[].slice,Mo=function(n){return yo.call(n)},xo=document,bo=xo.documentElement,_o=window;try{Mo(bo.childNodes)[0].nodeType}catch(wo){Mo=function(n){for(var t=n.length,e=new Array(t);t--;)e[t]=n[t];return e}}try{xo.createElement("div").style.setProperty("opacity",0,"")}catch(So){var Eo=_o.Element.prototype,ko=Eo.setAttribute,Ao=Eo.setAttributeNS,No=_o.CSSStyleDeclaration.prototype,To=No.setProperty;Eo.setAttribute=function(n,t){ko.call(this,n,t+"")},Eo.setAttributeNS=function(n,t,e){Ao.call(this,n,t,e+"")},No.setProperty=function(n,t,e){To.call(this,n,t+"",e)}}mo.ascending=function(n,t){return t>n?-1:n>t?1:n>=t?0:0/0},mo.descending=function(n,t){return n>t?-1:t>n?1:t>=n?0:0/0},mo.min=function(n,t){var e,r,u=-1,i=n.length;if(1===arguments.length){for(;++u<i&&!(null!=(e=n[u])&&e>=e);)e=void 0;for(;++u<i;)null!=(r=n[u])&&e>r&&(e=r)}else{for(;++u<i&&!(null!=(e=t.call(n,n[u],u))&&e>=e);)e=void 0;for(;++u<i;)null!=(r=t.call(n,n[u],u))&&e>r&&(e=r)}return e},mo.max=function(n,t){var e,r,u=-1,i=n.length;if(1===arguments.length){for(;++u<i&&!(null!=(e=n[u])&&e>=e);)e=void 0;for(;++u<i;)null!=(r=n[u])&&r>e&&(e=r)}else{for(;++u<i&&!(null!=(e=t.call(n,n[u],u))&&e>=e);)e=void 0;for(;++u<i;)null!=(r=t.call(n,n[u],u))&&r>e&&(e=r)}return e},mo.extent=function(n,t){var e,r,u,i=-1,o=n.length;if(1===arguments.length){for(;++i<o&&!(null!=(e=u=n[i])&&e>=e);)e=u=void 0;for(;++i<o;)null!=(r=n[i])&&(e>r&&(e=r),r>u&&(u=r))}else{for(;++i<o&&!(null!=(e=u=t.call(n,n[i],i))&&e>=e);)e=void 0;for(;++i<o;)null!=(r=t.call(n,n[i],i))&&(e>r&&(e=r),r>u&&(u=r))}return[e,u]},mo.sum=function(n,t){var e,r=0,u=n.length,i=-1;if(1===arguments.length)for(;++i<u;)isNaN(e=+n[i])||(r+=e);else for(;++i<u;)isNaN(e=+t.call(n,n[i],i))||(r+=e);return r},mo.mean=function(t,e){var r,u=t.length,i=0,o=-1,a=0;if(1===arguments.length)for(;++o<u;)n(r=t[o])&&(i+=(r-i)/++a);else for(;++o<u;)n(r=e.call(t,t[o],o))&&(i+=(r-i)/++a);return a?i:void 0},mo.quantile=function(n,t){var e=(n.length-1)*t+1,r=Math.floor(e),u=+n[r-1],i=e-r;return i?u+i*(n[r]-u):u},mo.median=function(t,e){return arguments.length>1&&(t=t.map(e)),t=t.filter(n),t.length?mo.quantile(t.sort(mo.ascending),.5):void 0},mo.bisector=function(n){return{left:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n.call(t,t[i],i)<e?r=i+1:u=i}return r},right:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;e<n.call(t,t[i],i)?u=i:r=i+1}return r}}};var qo=mo.bisector(function(n){return n});mo.bisectLeft=qo.left,mo.bisect=mo.bisectRight=qo.right,mo.shuffle=function(n){for(var t,e,r=n.length;r;)e=0|Math.random()*r--,t=n[r],n[r]=n[e],n[e]=t;return n},mo.permute=function(n,t){for(var e=t.length,r=new Array(e);e--;)r[e]=n[t[e]];return r},mo.pairs=function(n){for(var t,e=0,r=n.length-1,u=n[0],i=new Array(0>r?0:r);r>e;)i[e]=[t=u,u=n[++e]];return i},mo.zip=function(){if(!(u=arguments.length))return[];for(var n=-1,e=mo.min(arguments,t),r=new Array(e);++n<e;)for(var u,i=-1,o=r[n]=new Array(u);++i<u;)o[i]=arguments[i][n];return r},mo.transpose=function(n){return mo.zip.apply(mo,n)},mo.keys=function(n){var t=[];for(var e in n)t.push(e);return t},mo.values=function(n){var t=[];for(var e in n)t.push(n[e]);return t},mo.entries=function(n){var t=[];
+for(var e in n)t.push({key:e,value:n[e]});return t},mo.merge=function(n){return Array.prototype.concat.apply([],n)},mo.range=function(n,t,r){if(arguments.length<3&&(r=1,arguments.length<2&&(t=n,n=0)),1/0===(t-n)/r)throw new Error("infinite range");var u,i=[],o=e(Math.abs(r)),a=-1;if(n*=o,t*=o,r*=o,0>r)for(;(u=n+r*++a)>t;)i.push(u/o);else for(;(u=n+r*++a)<t;)i.push(u/o);return i},mo.map=function(n){var t=new u;if(n instanceof u)n.forEach(function(n,e){t.set(n,e)});else for(var e in n)t.set(e,n[e]);return t},r(u,{has:function(n){return zo+n in this},get:function(n){return this[zo+n]},set:function(n,t){return this[zo+n]=t},remove:function(n){return n=zo+n,n in this&&delete this[n]},keys:function(){var n=[];return this.forEach(function(t){n.push(t)}),n},values:function(){var n=[];return this.forEach(function(t,e){n.push(e)}),n},entries:function(){var n=[];return this.forEach(function(t,e){n.push({key:t,value:e})}),n},forEach:function(n){for(var t in this)t.charCodeAt(0)===Co&&n.call(this,t.substring(1),this[t])}});var zo="\0",Co=zo.charCodeAt(0);mo.nest=function(){function n(t,a,c){if(c>=o.length)return r?r.call(i,a):e?a.sort(e):a;for(var l,s,f,h,g=-1,p=a.length,d=o[c++],v=new u;++g<p;)(h=v.get(l=d(s=a[g])))?h.push(s):v.set(l,[s]);return t?(s=t(),f=function(e,r){s.set(e,n(t,r,c))}):(s={},f=function(e,r){s[e]=n(t,r,c)}),v.forEach(f),s}function t(n,e){if(e>=o.length)return n;var r=[],u=a[e++];return n.forEach(function(n,u){r.push({key:n,values:t(u,e)})}),u?r.sort(function(n,t){return u(n.key,t.key)}):r}var e,r,i={},o=[],a=[];return i.map=function(t,e){return n(e,t,0)},i.entries=function(e){return t(n(mo.map,e,0),0)},i.key=function(n){return o.push(n),i},i.sortKeys=function(n){return a[o.length-1]=n,i},i.sortValues=function(n){return e=n,i},i.rollup=function(n){return r=n,i},i},mo.set=function(n){var t=new i;if(n)for(var e=0,r=n.length;r>e;++e)t.add(n[e]);return t},r(i,{has:function(n){return zo+n in this},add:function(n){return this[zo+n]=!0,n},remove:function(n){return n=zo+n,n in this&&delete this[n]},values:function(){var n=[];return this.forEach(function(t){n.push(t)}),n},forEach:function(n){for(var t in this)t.charCodeAt(0)===Co&&n.call(this,t.substring(1))}}),mo.behavior={},mo.rebind=function(n,t){for(var e,r=1,u=arguments.length;++r<u;)n[e=arguments[r]]=o(n,t,t[e]);return n};var Do=["webkit","ms","moz","Moz","o","O"];mo.dispatch=function(){for(var n=new l,t=-1,e=arguments.length;++t<e;)n[arguments[t]]=s(n);return n},l.prototype.on=function(n,t){var e=n.indexOf("."),r="";if(e>=0&&(r=n.substring(e+1),n=n.substring(0,e)),n)return arguments.length<2?this[n].on(r):this[n].on(r,t);if(2===arguments.length){if(null==t)for(n in this)this.hasOwnProperty(n)&&this[n].on(r,null);return this}},mo.event=null,mo.requote=function(n){return n.replace(jo,"\\$&")};var jo=/[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g,Lo={}.__proto__?function(n,t){n.__proto__=t}:function(n,t){for(var e in t)n[e]=t[e]},Ho=function(n,t){return t.querySelector(n)},Fo=function(n,t){return t.querySelectorAll(n)},Po=bo[a(bo,"matchesSelector")],Oo=function(n,t){return Po.call(n,t)};"function"==typeof Sizzle&&(Ho=function(n,t){return Sizzle(n,t)[0]||null},Fo=function(n,t){return Sizzle.uniqueSort(Sizzle(n,t))},Oo=Sizzle.matchesSelector),mo.selection=function(){return Uo};var Ro=mo.selection.prototype=[];Ro.select=function(n){var t,e,r,u,i=[];n=d(n);for(var o=-1,a=this.length;++o<a;){i.push(t=[]),t.parentNode=(r=this[o]).parentNode;for(var c=-1,l=r.length;++c<l;)(u=r[c])?(t.push(e=n.call(u,u.__data__,c,o)),e&&"__data__"in u&&(e.__data__=u.__data__)):t.push(null)}return p(i)},Ro.selectAll=function(n){var t,e,r=[];n=v(n);for(var u=-1,i=this.length;++u<i;)for(var o=this[u],a=-1,c=o.length;++a<c;)(e=o[a])&&(r.push(t=Mo(n.call(e,e.__data__,a,u))),t.parentNode=e);return p(r)};var Yo={svg:"http://www.w3.org/2000/svg",xhtml:"http://www.w3.org/1999/xhtml",xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"};mo.ns={prefix:Yo,qualify:function(n){var t=n.indexOf(":"),e=n;return t>=0&&(e=n.substring(0,t),n=n.substring(t+1)),Yo.hasOwnProperty(e)?{space:Yo[e],local:n}:n}},Ro.attr=function(n,t){if(arguments.length<2){if("string"==typeof n){var e=this.node();return n=mo.ns.qualify(n),n.local?e.getAttributeNS(n.space,n.local):e.getAttribute(n)}for(t in n)this.each(m(t,n[t]));return this}return this.each(m(n,t))},Ro.classed=function(n,t){if(arguments.length<2){if("string"==typeof n){var e=this.node(),r=(n=n.trim().split(/^|\s+/g)).length,u=-1;if(t=e.classList){for(;++u<r;)if(!t.contains(n[u]))return!1}else for(t=e.getAttribute("class");++u<r;)if(!M(n[u]).test(t))return!1;return!0}for(t in n)this.each(x(t,n[t]));return this}return this.each(x(n,t))},Ro.style=function(n,t,e){var r=arguments.length;if(3>r){if("string"!=typeof n){2>r&&(t="");for(e in n)this.each(_(e,n[e],t));return this}if(2>r)return _o.getComputedStyle(this.node(),null).getPropertyValue(n);e=""}return this.each(_(n,t,e))},Ro.property=function(n,t){if(arguments.length<2){if("string"==typeof n)return this.node()[n];for(t in n)this.each(w(t,n[t]));return this}return this.each(w(n,t))},Ro.text=function(n){return arguments.length?this.each("function"==typeof n?function(){var t=n.apply(this,arguments);this.textContent=null==t?"":t}:null==n?function(){this.textContent=""}:function(){this.textContent=n}):this.node().textContent},Ro.html=function(n){return arguments.length?this.each("function"==typeof n?function(){var t=n.apply(this,arguments);this.innerHTML=null==t?"":t}:null==n?function(){this.innerHTML=""}:function(){this.innerHTML=n}):this.node().innerHTML},Ro.append=function(n){return n=S(n),this.select(function(){return this.appendChild(n.apply(this,arguments))})},Ro.insert=function(n,t){return n=S(n),t=d(t),this.select(function(){return this.insertBefore(n.apply(this,arguments),t.apply(this,arguments))})},Ro.remove=function(){return this.each(function(){var n=this.parentNode;n&&n.removeChild(this)})},Ro.data=function(n,t){function e(n,e){var r,i,o,a=n.length,f=e.length,h=Math.min(a,f),g=new Array(f),p=new Array(f),d=new Array(a);if(t){var v,m=new u,y=new u,M=[];for(r=-1;++r<a;)v=t.call(i=n[r],i.__data__,r),m.has(v)?d[r]=i:m.set(v,i),M.push(v);for(r=-1;++r<f;)v=t.call(e,o=e[r],r),(i=m.get(v))?(g[r]=i,i.__data__=o):y.has(v)||(p[r]=E(o)),y.set(v,o),m.remove(v);for(r=-1;++r<a;)m.has(M[r])&&(d[r]=n[r])}else{for(r=-1;++r<h;)i=n[r],o=e[r],i?(i.__data__=o,g[r]=i):p[r]=E(o);for(;f>r;++r)p[r]=E(e[r]);for(;a>r;++r)d[r]=n[r]}p.update=g,p.parentNode=g.parentNode=d.parentNode=n.parentNode,c.push(p),l.push(g),s.push(d)}var r,i,o=-1,a=this.length;if(!arguments.length){for(n=new Array(a=(r=this[0]).length);++o<a;)(i=r[o])&&(n[o]=i.__data__);return n}var c=T([]),l=p([]),s=p([]);if("function"==typeof n)for(;++o<a;)e(r=this[o],n.call(r,r.parentNode.__data__,o));else for(;++o<a;)e(r=this[o],n);return l.enter=function(){return c},l.exit=function(){return s},l},Ro.datum=function(n){return arguments.length?this.property("__data__",n):this.property("__data__")},Ro.filter=function(n){var t,e,r,u=[];"function"!=typeof n&&(n=k(n));for(var i=0,o=this.length;o>i;i++){u.push(t=[]),t.parentNode=(e=this[i]).parentNode;for(var a=0,c=e.length;c>a;a++)(r=e[a])&&n.call(r,r.__data__,a)&&t.push(r)}return p(u)},Ro.order=function(){for(var n=-1,t=this.length;++n<t;)for(var e,r=this[n],u=r.length-1,i=r[u];--u>=0;)(e=r[u])&&(i&&i!==e.nextSibling&&i.parentNode.insertBefore(e,i),i=e);return this},Ro.sort=function(n){n=A.apply(this,arguments);for(var t=-1,e=this.length;++t<e;)this[t].sort(n);return this.order()},Ro.each=function(n){return N(this,function(t,e,r){n.call(t,t.__data__,e,r)})},Ro.call=function(n){var t=Mo(arguments);return n.apply(t[0]=this,t),this},Ro.empty=function(){return!this.node()},Ro.node=function(){for(var n=0,t=this.length;t>n;n++)for(var e=this[n],r=0,u=e.length;u>r;r++){var i=e[r];if(i)return i}return null},Ro.size=function(){var n=0;return this.each(function(){++n}),n};var Io=[];mo.selection.enter=T,mo.selection.enter.prototype=Io,Io.append=Ro.append,Io.empty=Ro.empty,Io.node=Ro.node,Io.call=Ro.call,Io.size=Ro.size,Io.select=function(n){for(var t,e,r,u,i,o=[],a=-1,c=this.length;++a<c;){r=(u=this[a]).update,o.push(t=[]),t.parentNode=u.parentNode;for(var l=-1,s=u.length;++l<s;)(i=u[l])?(t.push(r[l]=e=n.call(u.parentNode,i.__data__,l,a)),e.__data__=i.__data__):t.push(null)}return p(o)},Io.insert=function(n,t){return arguments.length<2&&(t=q(this)),Ro.insert.call(this,n,t)},Ro.transition=function(){for(var n,t,e=Pc||++Uc,r=[],u=Oc||{time:Date.now(),ease:Cr,delay:0,duration:250},i=-1,o=this.length;++i<o;){r.push(n=[]);for(var a=this[i],c=-1,l=a.length;++c<l;)(t=a[c])&&Ni(t,c,e,u),n.push(t)}return Ei(r,e)},Ro.interrupt=function(){return this.each(z)},mo.select=function(n){var t=["string"==typeof n?Ho(n,xo):n];return t.parentNode=bo,p([t])},mo.selectAll=function(n){var t=Mo("string"==typeof n?Fo(n,xo):n);return t.parentNode=bo,p([t])};var Uo=mo.select(bo);Ro.on=function(n,t,e){var r=arguments.length;if(3>r){if("string"!=typeof n){2>r&&(t=!1);for(e in n)this.each(C(e,n[e],t));return this}if(2>r)return(r=this.node()["__on"+n])&&r._;e=!1}return this.each(C(n,t,e))};var Zo=mo.map({mouseenter:"mouseover",mouseleave:"mouseout"});Zo.forEach(function(n){"on"+n in xo&&Zo.remove(n)});var Vo=a(bo.style,"userSelect"),Xo=0;mo.mouse=function(n){return H(n,h())};var $o=/WebKit/.test(_o.navigator.userAgent)?-1:0;mo.touches=function(n,t){return arguments.length<2&&(t=h().touches),t?Mo(t).map(function(t){var e=H(n,t);return e.identifier=t.identifier,e}):[]},mo.behavior.drag=function(){function n(){this.on("mousedown.drag",o).on("touchstart.drag",a)}function t(){return mo.event.changedTouches[0].identifier}function e(n,t){return mo.touches(n).filter(function(n){return n.identifier===t})[0]}function r(n,t,e,r){return function(){function o(){if(!s)return a();var n=t(s,g),e=n[0]-d[0],r=n[1]-d[1];v|=e|r,d=n,f({type:"drag",x:n[0]+c[0],y:n[1]+c[1],dx:e,dy:r})}function a(){m.on(e+"."+p,null).on(r+"."+p,null),y(v&&mo.event.target===h),f({type:"dragend"})}var c,l=this,s=l.parentNode,f=u.of(l,arguments),h=mo.event.target,g=n(),p=null==g?"drag":"drag-"+g,d=t(s,g),v=0,m=mo.select(_o).on(e+"."+p,o).on(r+"."+p,a),y=L();i?(c=i.apply(l,arguments),c=[c.x-d[0],c.y-d[1]]):c=[0,0],f({type:"dragstart"})}}var u=g(n,"drag","dragstart","dragend"),i=null,o=r(c,mo.mouse,"mousemove","mouseup"),a=r(t,e,"touchmove","touchend");return n.origin=function(t){return arguments.length?(i=t,n):i},mo.rebind(n,u,"on")};var Bo=Math.PI,Wo=1e-6,Jo=Wo*Wo,Go=Bo/180,Ko=180/Bo,Qo=Math.SQRT2,na=2,ta=4;mo.interpolateZoom=function(n,t){function e(n){var t=n*y;if(m){var e=Y(d),o=i/(na*h)*(e*I(Qo*t+d)-R(d));return[r+o*l,u+o*s,i*e/Y(Qo*t+d)]}return[r+n*l,u+n*s,i*Math.exp(Qo*t)]}var r=n[0],u=n[1],i=n[2],o=t[0],a=t[1],c=t[2],l=o-r,s=a-u,f=l*l+s*s,h=Math.sqrt(f),g=(c*c-i*i+ta*f)/(2*i*na*h),p=(c*c-i*i-ta*f)/(2*c*na*h),d=Math.log(Math.sqrt(g*g+1)-g),v=Math.log(Math.sqrt(p*p+1)-p),m=v-d,y=(m||Math.log(c/i))/Qo;return e.duration=1e3*y,e},mo.behavior.zoom=function(){function n(n){n.on(A,l).on(ua+".zoom",h).on(N,p).on("dblclick.zoom",d).on(q,s)}function t(n){return[(n[0]-S.x)/S.k,(n[1]-S.y)/S.k]}function e(n){return[n[0]*S.k+S.x,n[1]*S.k+S.y]}function r(n){S.k=Math.max(k[0],Math.min(k[1],n))}function u(n,t){t=e(t),S.x+=n[0]-t[0],S.y+=n[1]-t[1]}function i(){b&&b.domain(x.range().map(function(n){return(n-S.x)/S.k}).map(x.invert)),w&&w.domain(_.range().map(function(n){return(n-S.y)/S.k}).map(_.invert))}function o(n){n({type:"zoomstart"})}function a(n){i(),n({type:"zoom",scale:S.k,translate:[S.x,S.y]})}function c(n){n({type:"zoomend"})}function l(){function n(){s=1,u(mo.mouse(r),h),a(i)}function e(){f.on(N,_o===r?p:null).on(T,null),g(s&&mo.event.target===l),c(i)}var r=this,i=C.of(r,arguments),l=mo.event.target,s=0,f=mo.select(_o).on(N,n).on(T,e),h=t(mo.mouse(r)),g=L();z.call(r),o(i)}function s(){function n(){var n=mo.touches(p);return g=S.k,n.forEach(function(n){n.identifier in v&&(v[n.identifier]=t(n))}),n}function e(){for(var t=mo.event.changedTouches,e=0,i=t.length;i>e;++e)v[t[e].identifier]=null;var o=n(),c=Date.now();if(1===o.length){if(500>c-M){var l=o[0],s=v[l.identifier];r(2*S.k),u(l,s),f(),a(d)}M=c}else if(o.length>1){var l=o[0],h=o[1],g=l[0]-h[0],p=l[1]-h[1];m=g*g+p*p}}function i(){for(var n,t,e,i,o=mo.touches(p),c=0,l=o.length;l>c;++c,i=null)if(e=o[c],i=v[e.identifier]){if(t)break;n=e,t=i}if(i){var s=(s=e[0]-n[0])*s+(s=e[1]-n[1])*s,f=m&&Math.sqrt(s/m);n=[(n[0]+e[0])/2,(n[1]+e[1])/2],t=[(t[0]+i[0])/2,(t[1]+i[1])/2],r(f*g)}M=null,u(n,t),a(d)}function h(){if(mo.event.touches.length){for(var t=mo.event.changedTouches,e=0,r=t.length;r>e;++e)delete v[t[e].identifier];for(var u in v)return void n()}_.on(x,null).on(b,null),w.on(A,l).on(q,s),E(),c(d)}var g,p=this,d=C.of(p,arguments),v={},m=0,y=mo.event.changedTouches[0].identifier,x="touchmove.zoom-"+y,b="touchend.zoom-"+y,_=mo.select(_o).on(x,i).on(b,h),w=mo.select(p).on(A,null).on(q,e),E=L();z.call(p),e(),o(d)}function h(){var n=C.of(this,arguments);y?clearTimeout(y):(z.call(this),o(n)),y=setTimeout(function(){y=null,c(n)},50),f();var e=m||mo.mouse(this);v||(v=t(e)),r(Math.pow(2,.002*ea())*S.k),u(e,v),a(n)}function p(){v=null}function d(){var n=C.of(this,arguments),e=mo.mouse(this),i=t(e),l=Math.log(S.k)/Math.LN2;o(n),r(Math.pow(2,mo.event.shiftKey?Math.ceil(l)-1:Math.floor(l)+1)),u(e,i),a(n),c(n)}var v,m,y,M,x,b,_,w,S={x:0,y:0,k:1},E=[960,500],k=ra,A="mousedown.zoom",N="mousemove.zoom",T="mouseup.zoom",q="touchstart.zoom",C=g(n,"zoomstart","zoom","zoomend");return n.event=function(n){n.each(function(){var n=C.of(this,arguments),t=S;Pc?mo.select(this).transition().each("start.zoom",function(){S=this.__chart__||{x:0,y:0,k:1},o(n)}).tween("zoom:zoom",function(){var e=E[0],r=E[1],u=e/2,i=r/2,o=mo.interpolateZoom([(u-S.x)/S.k,(i-S.y)/S.k,e/S.k],[(u-t.x)/t.k,(i-t.y)/t.k,e/t.k]);return function(t){var r=o(t),c=e/r[2];this.__chart__=S={x:u-r[0]*c,y:i-r[1]*c,k:c},a(n)}}).each("end.zoom",function(){c(n)}):(this.__chart__=S,o(n),a(n),c(n))})},n.translate=function(t){return arguments.length?(S={x:+t[0],y:+t[1],k:S.k},i(),n):[S.x,S.y]},n.scale=function(t){return arguments.length?(S={x:S.x,y:S.y,k:+t},i(),n):S.k},n.scaleExtent=function(t){return arguments.length?(k=null==t?ra:[+t[0],+t[1]],n):k},n.center=function(t){return arguments.length?(m=t&&[+t[0],+t[1]],n):m},n.size=function(t){return arguments.length?(E=t&&[+t[0],+t[1]],n):E},n.x=function(t){return arguments.length?(b=t,x=t.copy(),S={x:0,y:0,k:1},n):b},n.y=function(t){return arguments.length?(w=t,_=t.copy(),S={x:0,y:0,k:1},n):w},mo.rebind(n,C,"on")};var ea,ra=[0,1/0],ua="onwheel"in xo?(ea=function(){return-mo.event.deltaY*(mo.event.deltaMode?120:1)},"wheel"):"onmousewheel"in xo?(ea=function(){return mo.event.wheelDelta},"mousewheel"):(ea=function(){return-mo.event.detail},"MozMousePixelScroll");Z.prototype.toString=function(){return this.rgb()+""},mo.hsl=function(n,t,e){return 1===arguments.length?n instanceof X?V(n.h,n.s,n.l):lt(""+n,st,V):V(+n,+t,+e)};var ia=X.prototype=new Z;ia.brighter=function(n){return n=Math.pow(.7,arguments.length?n:1),V(this.h,this.s,this.l/n)},ia.darker=function(n){return n=Math.pow(.7,arguments.length?n:1),V(this.h,this.s,n*this.l)},ia.rgb=function(){return $(this.h,this.s,this.l)},mo.hcl=function(n,t,e){return 1===arguments.length?n instanceof W?B(n.h,n.c,n.l):n instanceof K?nt(n.l,n.a,n.b):nt((n=ft((n=mo.rgb(n)).r,n.g,n.b)).l,n.a,n.b):B(+n,+t,+e)};var oa=W.prototype=new Z;oa.brighter=function(n){return B(this.h,this.c,Math.min(100,this.l+aa*(arguments.length?n:1)))},oa.darker=function(n){return B(this.h,this.c,Math.max(0,this.l-aa*(arguments.length?n:1)))},oa.rgb=function(){return J(this.h,this.c,this.l).rgb()},mo.lab=function(n,t,e){return 1===arguments.length?n instanceof K?G(n.l,n.a,n.b):n instanceof W?J(n.l,n.c,n.h):ft((n=mo.rgb(n)).r,n.g,n.b):G(+n,+t,+e)};var aa=18,ca=.95047,la=1,sa=1.08883,fa=K.prototype=new Z;fa.brighter=function(n){return G(Math.min(100,this.l+aa*(arguments.length?n:1)),this.a,this.b)},fa.darker=function(n){return G(Math.max(0,this.l-aa*(arguments.length?n:1)),this.a,this.b)},fa.rgb=function(){return Q(this.l,this.a,this.b)},mo.rgb=function(n,t,e){return 1===arguments.length?n instanceof at?ot(n.r,n.g,n.b):lt(""+n,ot,$):ot(~~n,~~t,~~e)};var ha=at.prototype=new Z;ha.brighter=function(n){n=Math.pow(.7,arguments.length?n:1);var t=this.r,e=this.g,r=this.b,u=30;return t||e||r?(t&&u>t&&(t=u),e&&u>e&&(e=u),r&&u>r&&(r=u),ot(Math.min(255,~~(t/n)),Math.min(255,~~(e/n)),Math.min(255,~~(r/n)))):ot(u,u,u)},ha.darker=function(n){return n=Math.pow(.7,arguments.length?n:1),ot(~~(n*this.r),~~(n*this.g),~~(n*this.b))},ha.hsl=function(){return st(this.r,this.g,this.b)},ha.toString=function(){return"#"+ct(this.r)+ct(this.g)+ct(this.b)};var ga=mo.map({aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074});ga.forEach(function(n,t){ga.set(n,ut(t))}),mo.functor=pt,mo.xhr=vt(dt),mo.dsv=function(n,t){function e(n,e,i){arguments.length<3&&(i=e,e=null);var o=mo.xhr(n,t,i);return o.row=function(n){return arguments.length?o.response(null==(e=n)?r:u(n)):e},o.row(e)}function r(n){return e.parse(n.responseText)}function u(n){return function(t){return e.parse(t.responseText,n)}}function o(t){return t.map(a).join(n)}function a(n){return c.test(n)?'"'+n.replace(/\"/g,'""')+'"':n}var c=new RegExp('["'+n+"\n]"),l=n.charCodeAt(0);return e.parse=function(n,t){var r;return e.parseRows(n,function(n,e){if(r)return r(n,e-1);var u=new Function("d","return {"+n.map(function(n,t){return JSON.stringify(n)+": d["+t+"]"}).join(",")+"}");r=t?function(n,e){return t(u(n),e)}:u})},e.parseRows=function(n,t){function e(){if(s>=c)return o;if(u)return u=!1,i;var t=s;if(34===n.charCodeAt(t)){for(var e=t;e++<c;)if(34===n.charCodeAt(e)){if(34!==n.charCodeAt(e+1))break;++e}s=e+2;var r=n.charCodeAt(e+1);return 13===r?(u=!0,10===n.charCodeAt(e+2)&&++s):10===r&&(u=!0),n.substring(t+1,e).replace(/""/g,'"')}for(;c>s;){var r=n.charCodeAt(s++),a=1;if(10===r)u=!0;else if(13===r)u=!0,10===n.charCodeAt(s)&&(++s,++a);else if(r!==l)continue;return n.substring(t,s-a)}return n.substring(t)}for(var r,u,i={},o={},a=[],c=n.length,s=0,f=0;(r=e())!==o;){for(var h=[];r!==i&&r!==o;)h.push(r),r=e();(!t||(h=t(h,f++)))&&a.push(h)}return a},e.format=function(t){if(Array.isArray(t[0]))return e.formatRows(t);var r=new i,u=[];return t.forEach(function(n){for(var t in n)r.has(t)||u.push(r.add(t))}),[u.map(a).join(n)].concat(t.map(function(t){return u.map(function(n){return a(t[n])}).join(n)})).join("\n")},e.formatRows=function(n){return n.map(o).join("\n")},e},mo.csv=mo.dsv(",","text/csv"),mo.tsv=mo.dsv("	","text/tab-separated-values");var pa,da,va,ma,ya,Ma=_o[a(_o,"requestAnimationFrame")]||function(n){setTimeout(n,17)};mo.timer=function(n,t,e){var r=arguments.length;2>r&&(t=0),3>r&&(e=Date.now());var u=e+t,i={callback:n,time:u,next:null};da?da.next=i:pa=i,da=i,va||(ma=clearTimeout(ma),va=1,Ma(Mt))},mo.timer.flush=function(){bt(),_t()};var xa=".",ba=",",_a=[3,3],wa="$",Sa=["y","z","a","f","p","n","\xb5","m","","k","M","G","T","P","E","Z","Y"].map(wt);mo.formatPrefix=function(n,t){var e=0;return n&&(0>n&&(n*=-1),t&&(n=mo.round(n,St(n,t))),e=1+Math.floor(1e-12+Math.log(n)/Math.LN10),e=Math.max(-24,Math.min(24,3*Math.floor((0>=e?e+1:e-1)/3)))),Sa[8+e/3]},mo.round=function(n,t){return t?Math.round(n*(t=Math.pow(10,t)))/t:Math.round(n)},mo.format=function(n){var t=Ea.exec(n),e=t[1]||" ",r=t[2]||">",u=t[3]||"",i=t[4]||"",o=t[5],a=+t[6],c=t[7],l=t[8],s=t[9],f=1,h="",g=!1;switch(l&&(l=+l.substring(1)),(o||"0"===e&&"="===r)&&(o=e="0",r="=",c&&(a-=Math.floor((a-1)/4))),s){case"n":c=!0,s="g";break;case"%":f=100,h="%",s="f";break;case"p":f=100,h="%",s="r";break;case"b":case"o":case"x":case"X":"#"===i&&(i="0"+s.toLowerCase());case"c":case"d":g=!0,l=0;break;case"s":f=-1,s="r"}"#"===i?i="":"$"===i&&(i=wa),"r"!=s||l||(s="g"),null!=l&&("g"==s?l=Math.max(1,Math.min(21,l)):("e"==s||"f"==s)&&(l=Math.max(0,Math.min(20,l)))),s=ka.get(s)||Et;var p=o&&c;return function(n){if(g&&n%1)return"";var t=0>n||0===n&&0>1/n?(n=-n,"-"):u;if(0>f){var d=mo.formatPrefix(n,l);n=d.scale(n),h=d.symbol}else n*=f;n=s(n,l);var v=n.lastIndexOf("."),m=0>v?n:n.substring(0,v),y=0>v?"":xa+n.substring(v+1);!o&&c&&(m=Aa(m));var M=i.length+m.length+y.length+(p?0:t.length),x=a>M?new Array(M=a-M+1).join(e):"";return p&&(m=Aa(x+m)),t+=i,n=m+y,("<"===r?t+n+x:">"===r?x+t+n:"^"===r?x.substring(0,M>>=1)+t+n+x.substring(M):t+(p?n:x+n))+h}};var Ea=/(?:([^{])?([<>=^]))?([+\- ])?([$#])?(0)?(\d+)?(,)?(\.-?\d+)?([a-z%])?/i,ka=mo.map({b:function(n){return n.toString(2)},c:function(n){return String.fromCharCode(n)},o:function(n){return n.toString(8)},x:function(n){return n.toString(16)},X:function(n){return n.toString(16).toUpperCase()},g:function(n,t){return n.toPrecision(t)},e:function(n,t){return n.toExponential(t)},f:function(n,t){return n.toFixed(t)},r:function(n,t){return(n=mo.round(n,St(n,t))).toFixed(Math.max(0,Math.min(20,St(n*(1+1e-15),t))))}}),Aa=dt;if(_a){var Na=_a.length;Aa=function(n){for(var t=n.length,e=[],r=0,u=_a[0];t>0&&u>0;)e.push(n.substring(t-=u,t+u)),u=_a[r=(r+1)%Na];return e.reverse().join(ba)}}mo.geo={},kt.prototype={s:0,t:0,add:function(n){At(n,this.t,Ta),At(Ta.s,this.s,this),this.s?this.t+=Ta.t:this.s=Ta.t},reset:function(){this.s=this.t=0},valueOf:function(){return this.s}};var Ta=new kt;mo.geo.stream=function(n,t){n&&qa.hasOwnProperty(n.type)?qa[n.type](n,t):Nt(n,t)};var qa={Feature:function(n,t){Nt(n.geometry,t)},FeatureCollection:function(n,t){for(var e=n.features,r=-1,u=e.length;++r<u;)Nt(e[r].geometry,t)}},za={Sphere:function(n,t){t.sphere()},Point:function(n,t){n=n.coordinates,t.point(n[0],n[1],n[2])},MultiPoint:function(n,t){for(var e=n.coordinates,r=-1,u=e.length;++r<u;)n=e[r],t.point(n[0],n[1],n[2])},LineString:function(n,t){Tt(n.coordinates,t,0)},MultiLineString:function(n,t){for(var e=n.coordinates,r=-1,u=e.length;++r<u;)Tt(e[r],t,0)},Polygon:function(n,t){qt(n.coordinates,t)},MultiPolygon:function(n,t){for(var e=n.coordinates,r=-1,u=e.length;++r<u;)qt(e[r],t)},GeometryCollection:function(n,t){for(var e=n.geometries,r=-1,u=e.length;++r<u;)Nt(e[r],t)}};mo.geo.area=function(n){return Ca=0,mo.geo.stream(n,ja),Ca};var Ca,Da=new kt,ja={sphere:function(){Ca+=4*Bo},point:c,lineStart:c,lineEnd:c,polygonStart:function(){Da.reset(),ja.lineStart=zt},polygonEnd:function(){var n=2*Da;Ca+=0>n?4*Bo+n:n,ja.lineStart=ja.lineEnd=ja.point=c}};mo.geo.bounds=function(){function n(n,t){M.push(x=[s=n,h=n]),f>t&&(f=t),t>g&&(g=t)}function t(t,e){var r=Ct([t*Go,e*Go]);if(m){var u=jt(m,r),i=[u[1],-u[0],0],o=jt(i,u);Ft(o),o=Pt(o);var c=t-p,l=c>0?1:-1,d=o[0]*Ko*l,v=Math.abs(c)>180;if(v^(d>l*p&&l*t>d)){var y=o[1]*Ko;y>g&&(g=y)}else if(d=(d+360)%360-180,v^(d>l*p&&l*t>d)){var y=-o[1]*Ko;f>y&&(f=y)}else f>e&&(f=e),e>g&&(g=e);v?p>t?a(s,t)>a(s,h)&&(h=t):a(t,h)>a(s,h)&&(s=t):h>=s?(s>t&&(s=t),t>h&&(h=t)):t>p?a(s,t)>a(s,h)&&(h=t):a(t,h)>a(s,h)&&(s=t)}else n(t,e);m=r,p=t}function e(){b.point=t}function r(){x[0]=s,x[1]=h,b.point=n,m=null}function u(n,e){if(m){var r=n-p;y+=Math.abs(r)>180?r+(r>0?360:-360):r}else d=n,v=e;ja.point(n,e),t(n,e)}function i(){ja.lineStart()}function o(){u(d,v),ja.lineEnd(),Math.abs(y)>Wo&&(s=-(h=180)),x[0]=s,x[1]=h,m=null}function a(n,t){return(t-=n)<0?t+360:t}function c(n,t){return n[0]-t[0]}function l(n,t){return t[0]<=t[1]?t[0]<=n&&n<=t[1]:n<t[0]||t[1]<n}var s,f,h,g,p,d,v,m,y,M,x,b={point:n,lineStart:e,lineEnd:r,polygonStart:function(){b.point=u,b.lineStart=i,b.lineEnd=o,y=0,ja.polygonStart()},polygonEnd:function(){ja.polygonEnd(),b.point=n,b.lineStart=e,b.lineEnd=r,0>Da?(s=-(h=180),f=-(g=90)):y>Wo?g=90:-Wo>y&&(f=-90),x[0]=s,x[1]=h}};return function(n){g=h=-(s=f=1/0),M=[],mo.geo.stream(n,b);var t=M.length;if(t){M.sort(c);for(var e,r=1,u=M[0],i=[u];t>r;++r)e=M[r],l(e[0],u)||l(e[1],u)?(a(u[0],e[1])>a(u[0],u[1])&&(u[1]=e[1]),a(e[0],u[1])>a(u[0],u[1])&&(u[0]=e[0])):i.push(u=e);for(var o,e,p=-1/0,t=i.length-1,r=0,u=i[t];t>=r;u=e,++r)e=i[r],(o=a(u[1],e[0]))>p&&(p=o,s=e[0],h=u[1])}return M=x=null,1/0===s||1/0===f?[[0/0,0/0],[0/0,0/0]]:[[s,f],[h,g]]}}(),mo.geo.centroid=function(n){La=Ha=Fa=Pa=Oa=Ra=Ya=Ia=Ua=Za=Va=0,mo.geo.stream(n,Xa);var t=Ua,e=Za,r=Va,u=t*t+e*e+r*r;return Jo>u&&(t=Ra,e=Ya,r=Ia,Wo>Ha&&(t=Fa,e=Pa,r=Oa),u=t*t+e*e+r*r,Jo>u)?[0/0,0/0]:[Math.atan2(e,t)*Ko,O(r/Math.sqrt(u))*Ko]};var La,Ha,Fa,Pa,Oa,Ra,Ya,Ia,Ua,Za,Va,Xa={sphere:c,point:Rt,lineStart:It,lineEnd:Ut,polygonStart:function(){Xa.lineStart=Zt},polygonEnd:function(){Xa.lineStart=It}},$a=Bt(Vt,Qt,te,ee),Ba=[-Bo,0],Wa=1e9;mo.geo.clipExtent=function(){var n,t,e,r,u,i,o={stream:function(n){return u&&(u.valid=!1),u=i(n),u.valid=!0,u},extent:function(a){return arguments.length?(i=ue(n=+a[0][0],t=+a[0][1],e=+a[1][0],r=+a[1][1]),u&&(u.valid=!1,u=null),o):[[n,t],[e,r]]}};return o.extent([[0,0],[960,500]])},(mo.geo.conicEqualArea=function(){return ae(ce)}).raw=ce,mo.geo.albers=function(){return mo.geo.conicEqualArea().rotate([96,0]).center([-.6,38.7]).parallels([29.5,45.5]).scale(1070)},mo.geo.albersUsa=function(){function n(n){var i=n[0],o=n[1];return t=null,e(i,o),t||(r(i,o),t)||u(i,o),t}var t,e,r,u,i=mo.geo.albers(),o=mo.geo.conicEqualArea().rotate([154,0]).center([-2,58.5]).parallels([55,65]),a=mo.geo.conicEqualArea().rotate([157,0]).center([-3,19.9]).parallels([8,18]),c={point:function(n,e){t=[n,e]}};return n.invert=function(n){var t=i.scale(),e=i.translate(),r=(n[0]-e[0])/t,u=(n[1]-e[1])/t;return(u>=.12&&.234>u&&r>=-.425&&-.214>r?o:u>=.166&&.234>u&&r>=-.214&&-.115>r?a:i).invert(n)},n.stream=function(n){var t=i.stream(n),e=o.stream(n),r=a.stream(n);return{point:function(n,u){t.point(n,u),e.point(n,u),r.point(n,u)},sphere:function(){t.sphere(),e.sphere(),r.sphere()},lineStart:function(){t.lineStart(),e.lineStart(),r.lineStart()},lineEnd:function(){t.lineEnd(),e.lineEnd(),r.lineEnd()},polygonStart:function(){t.polygonStart(),e.polygonStart(),r.polygonStart()},polygonEnd:function(){t.polygonEnd(),e.polygonEnd(),r.polygonEnd()}}},n.precision=function(t){return arguments.length?(i.precision(t),o.precision(t),a.precision(t),n):i.precision()},n.scale=function(t){return arguments.length?(i.scale(t),o.scale(.35*t),a.scale(t),n.translate(i.translate())):i.scale()},n.translate=function(t){if(!arguments.length)return i.translate();var l=i.scale(),s=+t[0],f=+t[1];return e=i.translate(t).clipExtent([[s-.455*l,f-.238*l],[s+.455*l,f+.238*l]]).stream(c).point,r=o.translate([s-.307*l,f+.201*l]).clipExtent([[s-.425*l+Wo,f+.12*l+Wo],[s-.214*l-Wo,f+.234*l-Wo]]).stream(c).point,u=a.translate([s-.205*l,f+.212*l]).clipExtent([[s-.214*l+Wo,f+.166*l+Wo],[s-.115*l-Wo,f+.234*l-Wo]]).stream(c).point,n},n.scale(1070)};var Ja,Ga,Ka,Qa,nc,tc,ec={point:c,lineStart:c,lineEnd:c,polygonStart:function(){Ga=0,ec.lineStart=le},polygonEnd:function(){ec.lineStart=ec.lineEnd=ec.point=c,Ja+=Math.abs(Ga/2)}},rc={point:se,lineStart:c,lineEnd:c,polygonStart:c,polygonEnd:c},uc={point:ge,lineStart:pe,lineEnd:de,polygonStart:function(){uc.lineStart=ve},polygonEnd:function(){uc.point=ge,uc.lineStart=pe,uc.lineEnd=de}};mo.geo.transform=function(n){return{stream:function(t){var e=new Me(t);for(var r in n)e[r]=n[r];return e}}},Me.prototype={point:function(n,t){this.stream.point(n,t)},sphere:function(){this.stream.sphere()},lineStart:function(){this.stream.lineStart()},lineEnd:function(){this.stream.lineEnd()},polygonStart:function(){this.stream.polygonStart()},polygonEnd:function(){this.stream.polygonEnd()}},mo.geo.path=function(){function n(n){return n&&("function"==typeof a&&i.pointRadius(+a.apply(this,arguments)),o&&o.valid||(o=u(i)),mo.geo.stream(n,o)),i.result()}function t(){return o=null,n}var e,r,u,i,o,a=4.5;return n.area=function(n){return Ja=0,mo.geo.stream(n,u(ec)),Ja},n.centroid=function(n){return Fa=Pa=Oa=Ra=Ya=Ia=Ua=Za=Va=0,mo.geo.stream(n,u(uc)),Va?[Ua/Va,Za/Va]:Ia?[Ra/Ia,Ya/Ia]:Oa?[Fa/Oa,Pa/Oa]:[0/0,0/0]},n.bounds=function(n){return nc=tc=-(Ka=Qa=1/0),mo.geo.stream(n,u(rc)),[[Ka,Qa],[nc,tc]]},n.projection=function(n){return arguments.length?(u=(e=n)?n.stream||xe(n):dt,t()):e},n.context=function(n){return arguments.length?(i=null==(r=n)?new fe:new me(n),"function"!=typeof a&&i.pointRadius(a),t()):r},n.pointRadius=function(t){return arguments.length?(a="function"==typeof t?t:(i.pointRadius(+t),+t),n):a},n.projection(mo.geo.albersUsa()).context(null)},mo.geo.projection=be,mo.geo.projectionMutator=_e,(mo.geo.equirectangular=function(){return be(Se)}).raw=Se.invert=Se,mo.geo.rotation=function(n){function t(t){return t=n(t[0]*Go,t[1]*Go),t[0]*=Ko,t[1]*=Ko,t}return n=Ee(n[0]%360*Go,n[1]*Go,n.length>2?n[2]*Go:0),t.invert=function(t){return t=n.invert(t[0]*Go,t[1]*Go),t[0]*=Ko,t[1]*=Ko,t},t},mo.geo.circle=function(){function n(){var n="function"==typeof r?r.apply(this,arguments):r,t=Ee(-n[0]*Go,-n[1]*Go,0).invert,u=[];return e(null,null,1,{point:function(n,e){u.push(n=t(n,e)),n[0]*=Ko,n[1]*=Ko}}),{type:"Polygon",coordinates:[u]}}var t,e,r=[0,0],u=6;return n.origin=function(t){return arguments.length?(r=t,n):r},n.angle=function(r){return arguments.length?(e=Te((t=+r)*Go,u*Go),n):t},n.precision=function(r){return arguments.length?(e=Te(t*Go,(u=+r)*Go),n):u},n.angle(90)},mo.geo.distance=function(n,t){var e,r=(t[0]-n[0])*Go,u=n[1]*Go,i=t[1]*Go,o=Math.sin(r),a=Math.cos(r),c=Math.sin(u),l=Math.cos(u),s=Math.sin(i),f=Math.cos(i);return Math.atan2(Math.sqrt((e=f*o)*e+(e=l*s-c*f*a)*e),c*s+l*f*a)},mo.geo.graticule=function(){function n(){return{type:"MultiLineString",coordinates:t()}}function t(){return mo.range(Math.ceil(i/v)*v,u,v).map(h).concat(mo.range(Math.ceil(l/m)*m,c,m).map(g)).concat(mo.range(Math.ceil(r/p)*p,e,p).filter(function(n){return Math.abs(n%v)>Wo
+}).map(s)).concat(mo.range(Math.ceil(a/d)*d,o,d).filter(function(n){return Math.abs(n%m)>Wo}).map(f))}var e,r,u,i,o,a,c,l,s,f,h,g,p=10,d=p,v=90,m=360,y=2.5;return n.lines=function(){return t().map(function(n){return{type:"LineString",coordinates:n}})},n.outline=function(){return{type:"Polygon",coordinates:[h(i).concat(g(c).slice(1),h(u).reverse().slice(1),g(l).reverse().slice(1))]}},n.extent=function(t){return arguments.length?n.majorExtent(t).minorExtent(t):n.minorExtent()},n.majorExtent=function(t){return arguments.length?(i=+t[0][0],u=+t[1][0],l=+t[0][1],c=+t[1][1],i>u&&(t=i,i=u,u=t),l>c&&(t=l,l=c,c=t),n.precision(y)):[[i,l],[u,c]]},n.minorExtent=function(t){return arguments.length?(r=+t[0][0],e=+t[1][0],a=+t[0][1],o=+t[1][1],r>e&&(t=r,r=e,e=t),a>o&&(t=a,a=o,o=t),n.precision(y)):[[r,a],[e,o]]},n.step=function(t){return arguments.length?n.majorStep(t).minorStep(t):n.minorStep()},n.majorStep=function(t){return arguments.length?(v=+t[0],m=+t[1],n):[v,m]},n.minorStep=function(t){return arguments.length?(p=+t[0],d=+t[1],n):[p,d]},n.precision=function(t){return arguments.length?(y=+t,s=ze(a,o,90),f=Ce(r,e,y),h=ze(l,c,90),g=Ce(i,u,y),n):y},n.majorExtent([[-180,-90+Wo],[180,90-Wo]]).minorExtent([[-180,-80-Wo],[180,80+Wo]])},mo.geo.greatArc=function(){function n(){return{type:"LineString",coordinates:[t||r.apply(this,arguments),e||u.apply(this,arguments)]}}var t,e,r=De,u=je;return n.distance=function(){return mo.geo.distance(t||r.apply(this,arguments),e||u.apply(this,arguments))},n.source=function(e){return arguments.length?(r=e,t="function"==typeof e?null:e,n):r},n.target=function(t){return arguments.length?(u=t,e="function"==typeof t?null:t,n):u},n.precision=function(){return arguments.length?n:0},n},mo.geo.interpolate=function(n,t){return Le(n[0]*Go,n[1]*Go,t[0]*Go,t[1]*Go)},mo.geo.length=function(n){return ic=0,mo.geo.stream(n,oc),ic};var ic,oc={sphere:c,point:c,lineStart:He,lineEnd:c,polygonStart:c,polygonEnd:c},ac=Fe(function(n){return Math.sqrt(2/(1+n))},function(n){return 2*Math.asin(n/2)});(mo.geo.azimuthalEqualArea=function(){return be(ac)}).raw=ac;var cc=Fe(function(n){var t=Math.acos(n);return t&&t/Math.sin(t)},dt);(mo.geo.azimuthalEquidistant=function(){return be(cc)}).raw=cc,(mo.geo.conicConformal=function(){return ae(Pe)}).raw=Pe,(mo.geo.conicEquidistant=function(){return ae(Oe)}).raw=Oe;var lc=Fe(function(n){return 1/n},Math.atan);(mo.geo.gnomonic=function(){return be(lc)}).raw=lc,Re.invert=function(n,t){return[n,2*Math.atan(Math.exp(t))-Bo/2]},(mo.geo.mercator=function(){return Ye(Re)}).raw=Re;var sc=Fe(function(){return 1},Math.asin);(mo.geo.orthographic=function(){return be(sc)}).raw=sc;var fc=Fe(function(n){return 1/(1+n)},function(n){return 2*Math.atan(n)});(mo.geo.stereographic=function(){return be(fc)}).raw=fc,Ie.invert=function(n,t){return[Math.atan2(R(n),Math.cos(t)),O(Math.sin(t)/Y(n))]},(mo.geo.transverseMercator=function(){return Ye(Ie)}).raw=Ie,mo.geom={},mo.svg={},mo.svg.line=function(){return Ue(dt)};var hc=mo.map({linear:Xe,"linear-closed":$e,step:Be,"step-before":We,"step-after":Je,basis:er,"basis-open":rr,"basis-closed":ur,bundle:ir,cardinal:Qe,"cardinal-open":Ge,"cardinal-closed":Ke,monotone:fr});hc.forEach(function(n,t){t.key=n,t.closed=/-closed$/.test(n)});var gc=[0,2/3,1/3,0],pc=[0,1/3,2/3,0],dc=[0,1/6,2/3,1/6];mo.geom.hull=function(n){function t(n){if(n.length<3)return[];var t,u,i,o,a,c,l,s,f,h,g,p,d=pt(e),v=pt(r),m=n.length,y=m-1,M=[],x=[],b=0;if(d===Ze&&r===Ve)t=n;else for(i=0,t=[];m>i;++i)t.push([+d.call(this,u=n[i],i),+v.call(this,u,i)]);for(i=1;m>i;++i)(t[i][1]<t[b][1]||t[i][1]==t[b][1]&&t[i][0]<t[b][0])&&(b=i);for(i=0;m>i;++i)i!==b&&(c=t[i][1]-t[b][1],a=t[i][0]-t[b][0],M.push({angle:Math.atan2(c,a),index:i}));for(M.sort(function(n,t){return n.angle-t.angle}),g=M[0].angle,h=M[0].index,f=0,i=1;y>i;++i){if(o=M[i].index,g==M[i].angle){if(a=t[h][0]-t[b][0],c=t[h][1]-t[b][1],l=t[o][0]-t[b][0],s=t[o][1]-t[b][1],a*a+c*c>=l*l+s*s){M[i].index=-1;continue}M[f].index=-1}g=M[i].angle,f=i,h=o}for(x.push(b),i=0,o=0;2>i;++o)M[o].index>-1&&(x.push(M[o].index),i++);for(p=x.length;y>o;++o)if(!(M[o].index<0)){for(;!hr(x[p-2],x[p-1],M[o].index,t);)--p;x[p++]=M[o].index}var _=[];for(i=p-1;i>=0;--i)_.push(n[x[i]]);return _}var e=Ze,r=Ve;return arguments.length?t(n):(t.x=function(n){return arguments.length?(e=n,t):e},t.y=function(n){return arguments.length?(r=n,t):r},t)},mo.geom.polygon=function(n){return Lo(n,vc),n};var vc=mo.geom.polygon.prototype=[];vc.area=function(){for(var n,t=-1,e=this.length,r=this[e-1],u=0;++t<e;)n=r,r=this[t],u+=n[1]*r[0]-n[0]*r[1];return.5*u},vc.centroid=function(n){var t,e,r=-1,u=this.length,i=0,o=0,a=this[u-1];for(arguments.length||(n=-1/(6*this.area()));++r<u;)t=a,a=this[r],e=t[0]*a[1]-a[0]*t[1],i+=(t[0]+a[0])*e,o+=(t[1]+a[1])*e;return[i*n,o*n]},vc.clip=function(n){for(var t,e,r,u,i,o,a=dr(n),c=-1,l=this.length-dr(this),s=this[l-1];++c<l;){for(t=n.slice(),n.length=0,u=this[c],i=t[(r=t.length-a)-1],e=-1;++e<r;)o=t[e],gr(o,s,u)?(gr(i,s,u)||n.push(pr(i,o,s,u)),n.push(o)):gr(i,s,u)&&n.push(pr(i,o,s,u)),i=o;a&&n.push(n[0]),s=u}return n},mo.geom.delaunay=function(n){var t=n.map(function(){return[]}),e=[];return vr(n,function(e){t[e.region.l.index].push(n[e.region.r.index])}),t.forEach(function(t,r){var u=n[r],i=u[0],o=u[1];t.forEach(function(n){n.angle=Math.atan2(n[0]-i,n[1]-o)}),t.sort(function(n,t){return n.angle-t.angle});for(var a=0,c=t.length-1;c>a;a++)e.push([u,t[a],t[a+1]])}),e},mo.geom.voronoi=function(n){function t(n){var t,i,o,a=n.map(function(){return[]}),c=pt(e),l=pt(r),s=n.length,f=1e6;if(c===Ze&&l===Ve)t=n;else for(t=new Array(s),o=0;s>o;++o)t[o]=[+c.call(this,i=n[o],o),+l.call(this,i,o)];if(vr(t,function(n){var t,e,r,u,i,o;1===n.a&&n.b>=0?(t=n.ep.r,e=n.ep.l):(t=n.ep.l,e=n.ep.r),1===n.a?(i=t?t.y:-f,r=n.c-n.b*i,o=e?e.y:f,u=n.c-n.b*o):(r=t?t.x:-f,i=n.c-n.a*r,u=e?e.x:f,o=n.c-n.a*u);var c=[r,i],l=[u,o];a[n.region.l.index].push(c,l),a[n.region.r.index].push(c,l)}),a=a.map(function(n,e){var r=t[e][0],u=t[e][1],i=n.map(function(n){return Math.atan2(n[0]-r,n[1]-u)}),o=mo.range(n.length).sort(function(n,t){return i[n]-i[t]});return o.filter(function(n,t){return!t||i[n]-i[o[t-1]]>Wo}).map(function(t){return n[t]})}),a.forEach(function(n,e){var r=n.length;if(!r)return n.push([-f,-f],[-f,f],[f,f],[f,-f]);if(!(r>2)){var u=t[e],i=n[0],o=n[1],a=u[0],c=u[1],l=i[0],s=i[1],h=o[0],g=o[1],p=Math.abs(h-l),d=g-s;if(Math.abs(d)<Wo){var v=s>c?-f:f;n.push([-f,v],[f,v])}else if(Wo>p){var m=l>a?-f:f;n.push([m,-f],[m,f])}else{var v=(l-a)*(g-s)>(h-l)*(s-c)?f:-f,y=Math.abs(d)-p;Math.abs(y)<Wo?n.push([0>d?v:-v,v]):(y>0&&(v*=-1),n.push([-f,v],[f,v]))}}}),u)for(o=0;s>o;++o)u.clip(a[o]);for(o=0;s>o;++o)a[o].point=n[o];return a}var e=Ze,r=Ve,u=null;return arguments.length?t(n):(t.x=function(n){return arguments.length?(e=n,t):e},t.y=function(n){return arguments.length?(r=n,t):r},t.clipExtent=function(n){if(!arguments.length)return u&&[u[0],u[2]];if(null==n)u=null;else{var e=+n[0][0],r=+n[0][1],i=+n[1][0],o=+n[1][1];u=mo.geom.polygon([[e,r],[e,o],[i,o],[i,r]])}return t},t.size=function(n){return arguments.length?t.clipExtent(n&&[[0,0],n]):u&&u[2]},t.links=function(n){var t,u,i,o=n.map(function(){return[]}),a=[],c=pt(e),l=pt(r),s=n.length;if(c===Ze&&l===Ve)t=n;else for(t=new Array(s),i=0;s>i;++i)t[i]=[+c.call(this,u=n[i],i),+l.call(this,u,i)];return vr(t,function(t){var e=t.region.l.index,r=t.region.r.index;o[e][r]||(o[e][r]=o[r][e]=!0,a.push({source:n[e],target:n[r]}))}),a},t.triangles=function(n){if(e===Ze&&r===Ve)return mo.geom.delaunay(n);for(var t,u=new Array(c),i=pt(e),o=pt(r),a=-1,c=n.length;++a<c;)(u[a]=[+i.call(this,t=n[a],a),+o.call(this,t,a)]).data=t;return mo.geom.delaunay(u).map(function(n){return n.map(function(n){return n.data})})},t)};var mc={l:"r",r:"l"};mo.geom.quadtree=function(n,t,e,r,u){function i(n){function i(n,t,e,r,u,i,o,a){if(!isNaN(e)&&!isNaN(r))if(n.leaf){var c=n.x,s=n.y;if(null!=c)if(Math.abs(c-e)+Math.abs(s-r)<.01)l(n,t,e,r,u,i,o,a);else{var f=n.point;n.x=n.y=n.point=null,l(n,f,c,s,u,i,o,a),l(n,t,e,r,u,i,o,a)}else n.x=e,n.y=r,n.point=t}else l(n,t,e,r,u,i,o,a)}function l(n,t,e,r,u,o,a,c){var l=.5*(u+a),s=.5*(o+c),f=e>=l,h=r>=s,g=(h<<1)+f;n.leaf=!1,n=n.nodes[g]||(n.nodes[g]=Mr()),f?u=l:a=l,h?o=s:c=s,i(n,t,e,r,u,o,a,c)}var s,f,h,g,p,d,v,m,y,M=pt(a),x=pt(c);if(null!=t)d=t,v=e,m=r,y=u;else if(m=y=-(d=v=1/0),f=[],h=[],p=n.length,o)for(g=0;p>g;++g)s=n[g],s.x<d&&(d=s.x),s.y<v&&(v=s.y),s.x>m&&(m=s.x),s.y>y&&(y=s.y),f.push(s.x),h.push(s.y);else for(g=0;p>g;++g){var b=+M(s=n[g],g),_=+x(s,g);d>b&&(d=b),v>_&&(v=_),b>m&&(m=b),_>y&&(y=_),f.push(b),h.push(_)}var w=m-d,S=y-v;w>S?y=v+w:m=d+S;var E=Mr();if(E.add=function(n){i(E,n,+M(n,++g),+x(n,g),d,v,m,y)},E.visit=function(n){xr(n,E,d,v,m,y)},g=-1,null==t){for(;++g<p;)i(E,n[g],f[g],h[g],d,v,m,y);--g}else n.forEach(E.add);return f=h=n=s=null,E}var o,a=Ze,c=Ve;return(o=arguments.length)?(a=mr,c=yr,3===o&&(u=e,r=t,e=t=0),i(n)):(i.x=function(n){return arguments.length?(a=n,i):a},i.y=function(n){return arguments.length?(c=n,i):c},i.extent=function(n){return arguments.length?(null==n?t=e=r=u=null:(t=+n[0][0],e=+n[0][1],r=+n[1][0],u=+n[1][1]),i):null==t?null:[[t,e],[r,u]]},i.size=function(n){return arguments.length?(null==n?t=e=r=u=null:(t=e=0,r=+n[0],u=+n[1]),i):null==t?null:[r-t,u-e]},i)},mo.interpolateRgb=br,mo.interpolateObject=_r,mo.interpolateNumber=wr,mo.interpolateString=Sr;var yc=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g;mo.interpolate=Er,mo.interpolators=[function(n,t){var e=typeof t;return("string"===e?ga.has(t)||/^(#|rgb\(|hsl\()/.test(t)?br:Sr:t instanceof Z?br:"object"===e?Array.isArray(t)?kr:_r:wr)(n,t)}],mo.interpolateArray=kr;var Mc=function(){return dt},xc=mo.map({linear:Mc,poly:Dr,quad:function(){return qr},cubic:function(){return zr},sin:function(){return jr},exp:function(){return Lr},circle:function(){return Hr},elastic:Fr,back:Pr,bounce:function(){return Or}}),bc=mo.map({"in":dt,out:Nr,"in-out":Tr,"out-in":function(n){return Tr(Nr(n))}});mo.ease=function(n){var t=n.indexOf("-"),e=t>=0?n.substring(0,t):n,r=t>=0?n.substring(t+1):"in";return e=xc.get(e)||Mc,r=bc.get(r)||dt,Ar(r(e.apply(null,Array.prototype.slice.call(arguments,1))))},mo.interpolateHcl=Rr,mo.interpolateHsl=Yr,mo.interpolateLab=Ir,mo.interpolateRound=Ur,mo.transform=function(n){var t=xo.createElementNS(mo.ns.prefix.svg,"g");return(mo.transform=function(n){if(null!=n){t.setAttribute("transform",n);var e=t.transform.baseVal.consolidate()}return new Zr(e?e.matrix:_c)})(n)},Zr.prototype.toString=function(){return"translate("+this.translate+")rotate("+this.rotate+")skewX("+this.skew+")scale("+this.scale+")"};var _c={a:1,b:0,c:0,d:1,e:0,f:0};mo.interpolateTransform=Br,mo.layout={},mo.layout.bundle=function(){return function(n){for(var t=[],e=-1,r=n.length;++e<r;)t.push(Gr(n[e]));return t}},mo.layout.chord=function(){function n(){var n,l,f,h,g,p={},d=[],v=mo.range(i),m=[];for(e=[],r=[],n=0,h=-1;++h<i;){for(l=0,g=-1;++g<i;)l+=u[h][g];d.push(l),m.push(mo.range(i)),n+=l}for(o&&v.sort(function(n,t){return o(d[n],d[t])}),a&&m.forEach(function(n,t){n.sort(function(n,e){return a(u[t][n],u[t][e])})}),n=(2*Bo-s*i)/n,l=0,h=-1;++h<i;){for(f=l,g=-1;++g<i;){var y=v[h],M=m[y][g],x=u[y][M],b=l,_=l+=x*n;p[y+"-"+M]={index:y,subindex:M,startAngle:b,endAngle:_,value:x}}r[y]={index:y,startAngle:f,endAngle:l,value:(l-f)/n},l+=s}for(h=-1;++h<i;)for(g=h-1;++g<i;){var w=p[h+"-"+g],S=p[g+"-"+h];(w.value||S.value)&&e.push(w.value<S.value?{source:S,target:w}:{source:w,target:S})}c&&t()}function t(){e.sort(function(n,t){return c((n.source.value+n.target.value)/2,(t.source.value+t.target.value)/2)})}var e,r,u,i,o,a,c,l={},s=0;return l.matrix=function(n){return arguments.length?(i=(u=n)&&u.length,e=r=null,l):u},l.padding=function(n){return arguments.length?(s=n,e=r=null,l):s},l.sortGroups=function(n){return arguments.length?(o=n,e=r=null,l):o},l.sortSubgroups=function(n){return arguments.length?(a=n,e=null,l):a},l.sortChords=function(n){return arguments.length?(c=n,e&&t(),l):c},l.chords=function(){return e||n(),e},l.groups=function(){return r||n(),r},l},mo.layout.force=function(){function n(n){return function(t,e,r,u){if(t.point!==n){var i=t.cx-n.x,o=t.cy-n.y,a=1/Math.sqrt(i*i+o*o);if(d>(u-e)*a){var c=t.charge*a*a;return n.px-=i*c,n.py-=o*c,!0}if(t.point&&isFinite(a)){var c=t.pointCharge*a*a;n.px-=i*c,n.py-=o*c}}return!t.charge}}function t(n){n.px=mo.event.x,n.py=mo.event.y,a.resume()}var e,r,u,i,o,a={},c=mo.dispatch("start","tick","end"),l=[1,1],s=.9,f=wc,h=Sc,g=-30,p=.1,d=.8,v=[],m=[];return a.tick=function(){if((r*=.99)<.005)return c.end({type:"end",alpha:r=0}),!0;var t,e,a,f,h,d,y,M,x,b=v.length,_=m.length;for(e=0;_>e;++e)a=m[e],f=a.source,h=a.target,M=h.x-f.x,x=h.y-f.y,(d=M*M+x*x)&&(d=r*i[e]*((d=Math.sqrt(d))-u[e])/d,M*=d,x*=d,h.x-=M*(y=f.weight/(h.weight+f.weight)),h.y-=x*y,f.x+=M*(y=1-y),f.y+=x*y);if((y=r*p)&&(M=l[0]/2,x=l[1]/2,e=-1,y))for(;++e<b;)a=v[e],a.x+=(M-a.x)*y,a.y+=(x-a.y)*y;if(g)for(uu(t=mo.geom.quadtree(v),r,o),e=-1;++e<b;)(a=v[e]).fixed||t.visit(n(a));for(e=-1;++e<b;)a=v[e],a.fixed?(a.x=a.px,a.y=a.py):(a.x-=(a.px-(a.px=a.x))*s,a.y-=(a.py-(a.py=a.y))*s);c.tick({type:"tick",alpha:r})},a.nodes=function(n){return arguments.length?(v=n,a):v},a.links=function(n){return arguments.length?(m=n,a):m},a.size=function(n){return arguments.length?(l=n,a):l},a.linkDistance=function(n){return arguments.length?(f="function"==typeof n?n:+n,a):f},a.distance=a.linkDistance,a.linkStrength=function(n){return arguments.length?(h="function"==typeof n?n:+n,a):h},a.friction=function(n){return arguments.length?(s=+n,a):s},a.charge=function(n){return arguments.length?(g="function"==typeof n?n:+n,a):g},a.gravity=function(n){return arguments.length?(p=+n,a):p},a.theta=function(n){return arguments.length?(d=+n,a):d},a.alpha=function(n){return arguments.length?(n=+n,r?r=n>0?n:0:n>0&&(c.start({type:"start",alpha:r=n}),mo.timer(a.tick)),a):r},a.start=function(){function n(n,r){for(var u,i=t(e),o=-1,a=i.length;++o<a;)if(!isNaN(u=i[o][n]))return u;return Math.random()*r}function t(){if(!c){for(c=[],r=0;p>r;++r)c[r]=[];for(r=0;d>r;++r){var n=m[r];c[n.source.index].push(n.target),c[n.target.index].push(n.source)}}return c[e]}var e,r,c,s,p=v.length,d=m.length,y=l[0],M=l[1];for(e=0;p>e;++e)(s=v[e]).index=e,s.weight=0;for(e=0;d>e;++e)s=m[e],"number"==typeof s.source&&(s.source=v[s.source]),"number"==typeof s.target&&(s.target=v[s.target]),++s.source.weight,++s.target.weight;for(e=0;p>e;++e)s=v[e],isNaN(s.x)&&(s.x=n("x",y)),isNaN(s.y)&&(s.y=n("y",M)),isNaN(s.px)&&(s.px=s.x),isNaN(s.py)&&(s.py=s.y);if(u=[],"function"==typeof f)for(e=0;d>e;++e)u[e]=+f.call(this,m[e],e);else for(e=0;d>e;++e)u[e]=f;if(i=[],"function"==typeof h)for(e=0;d>e;++e)i[e]=+h.call(this,m[e],e);else for(e=0;d>e;++e)i[e]=h;if(o=[],"function"==typeof g)for(e=0;p>e;++e)o[e]=+g.call(this,v[e],e);else for(e=0;p>e;++e)o[e]=g;return a.resume()},a.resume=function(){return a.alpha(.1)},a.stop=function(){return a.alpha(0)},a.drag=function(){return e||(e=mo.behavior.drag().origin(dt).on("dragstart.force",nu).on("drag.force",t).on("dragend.force",tu)),arguments.length?(this.on("mouseover.force",eu).on("mouseout.force",ru).call(e),void 0):e},mo.rebind(a,c,"on")};var wc=20,Sc=1;mo.layout.hierarchy=function(){function n(t,o,a){var c=u.call(e,t,o);if(t.depth=o,a.push(t),c&&(l=c.length)){for(var l,s,f=-1,h=t.children=[],g=0,p=o+1;++f<l;)s=n(c[f],p,a),s.parent=t,h.push(s),g+=s.value;r&&h.sort(r),i&&(t.value=g)}else i&&(t.value=+i.call(e,t,o)||0);return t}function t(n,r){var u=n.children,o=0;if(u&&(a=u.length))for(var a,c=-1,l=r+1;++c<a;)o+=t(u[c],l);else i&&(o=+i.call(e,n,r)||0);return i&&(n.value=o),o}function e(t){var e=[];return n(t,0,e),e}var r=cu,u=ou,i=au;return e.sort=function(n){return arguments.length?(r=n,e):r},e.children=function(n){return arguments.length?(u=n,e):u},e.value=function(n){return arguments.length?(i=n,e):i},e.revalue=function(n){return t(n,0),n},e},mo.layout.partition=function(){function n(t,e,r,u){var i=t.children;if(t.x=e,t.y=t.depth*u,t.dx=r,t.dy=u,i&&(o=i.length)){var o,a,c,l=-1;for(r=t.value?r/t.value:0;++l<o;)n(a=i[l],e,c=a.value*r,u),e+=c}}function t(n){var e=n.children,r=0;if(e&&(u=e.length))for(var u,i=-1;++i<u;)r=Math.max(r,t(e[i]));return 1+r}function e(e,i){var o=r.call(this,e,i);return n(o[0],0,u[0],u[1]/t(o[0])),o}var r=mo.layout.hierarchy(),u=[1,1];return e.size=function(n){return arguments.length?(u=n,e):u},iu(e,r)},mo.layout.pie=function(){function n(i){var o=i.map(function(e,r){return+t.call(n,e,r)}),a=+("function"==typeof r?r.apply(this,arguments):r),c=(("function"==typeof u?u.apply(this,arguments):u)-a)/mo.sum(o),l=mo.range(i.length);null!=e&&l.sort(e===Ec?function(n,t){return o[t]-o[n]}:function(n,t){return e(i[n],i[t])});var s=[];return l.forEach(function(n){var t;s[n]={data:i[n],value:t=o[n],startAngle:a,endAngle:a+=t*c}}),s}var t=Number,e=Ec,r=0,u=2*Bo;return n.value=function(e){return arguments.length?(t=e,n):t},n.sort=function(t){return arguments.length?(e=t,n):e},n.startAngle=function(t){return arguments.length?(r=t,n):r},n.endAngle=function(t){return arguments.length?(u=t,n):u},n};var Ec={};mo.layout.stack=function(){function n(a,c){var l=a.map(function(e,r){return t.call(n,e,r)}),s=l.map(function(t){return t.map(function(t,e){return[i.call(n,t,e),o.call(n,t,e)]})}),f=e.call(n,s,c);l=mo.permute(l,f),s=mo.permute(s,f);var h,g,p,d=r.call(n,s,c),v=l.length,m=l[0].length;for(g=0;m>g;++g)for(u.call(n,l[0][g],p=d[g],s[0][g][1]),h=1;v>h;++h)u.call(n,l[h][g],p+=s[h-1][g][1],s[h][g][1]);return a}var t=dt,e=gu,r=pu,u=hu,i=su,o=fu;return n.values=function(e){return arguments.length?(t=e,n):t},n.order=function(t){return arguments.length?(e="function"==typeof t?t:kc.get(t)||gu,n):e},n.offset=function(t){return arguments.length?(r="function"==typeof t?t:Ac.get(t)||pu,n):r},n.x=function(t){return arguments.length?(i=t,n):i},n.y=function(t){return arguments.length?(o=t,n):o},n.out=function(t){return arguments.length?(u=t,n):u},n};var kc=mo.map({"inside-out":function(n){var t,e,r=n.length,u=n.map(du),i=n.map(vu),o=mo.range(r).sort(function(n,t){return u[n]-u[t]}),a=0,c=0,l=[],s=[];for(t=0;r>t;++t)e=o[t],c>a?(a+=i[e],l.push(e)):(c+=i[e],s.push(e));return s.reverse().concat(l)},reverse:function(n){return mo.range(n.length).reverse()},"default":gu}),Ac=mo.map({silhouette:function(n){var t,e,r,u=n.length,i=n[0].length,o=[],a=0,c=[];for(e=0;i>e;++e){for(t=0,r=0;u>t;t++)r+=n[t][e][1];r>a&&(a=r),o.push(r)}for(e=0;i>e;++e)c[e]=(a-o[e])/2;return c},wiggle:function(n){var t,e,r,u,i,o,a,c,l,s=n.length,f=n[0],h=f.length,g=[];for(g[0]=c=l=0,e=1;h>e;++e){for(t=0,u=0;s>t;++t)u+=n[t][e][1];for(t=0,i=0,a=f[e][0]-f[e-1][0];s>t;++t){for(r=0,o=(n[t][e][1]-n[t][e-1][1])/(2*a);t>r;++r)o+=(n[r][e][1]-n[r][e-1][1])/a;i+=o*n[t][e][1]}g[e]=c-=u?i/u*a:0,l>c&&(l=c)}for(e=0;h>e;++e)g[e]-=l;return g},expand:function(n){var t,e,r,u=n.length,i=n[0].length,o=1/u,a=[];for(e=0;i>e;++e){for(t=0,r=0;u>t;t++)r+=n[t][e][1];if(r)for(t=0;u>t;t++)n[t][e][1]/=r;else for(t=0;u>t;t++)n[t][e][1]=o}for(e=0;i>e;++e)a[e]=0;return a},zero:pu});mo.layout.histogram=function(){function n(n,i){for(var o,a,c=[],l=n.map(e,this),s=r.call(this,l,i),f=u.call(this,s,l,i),i=-1,h=l.length,g=f.length-1,p=t?1:1/h;++i<g;)o=c[i]=[],o.dx=f[i+1]-(o.x=f[i]),o.y=0;if(g>0)for(i=-1;++i<h;)a=l[i],a>=s[0]&&a<=s[1]&&(o=c[mo.bisect(f,a,1,g)-1],o.y+=p,o.push(n[i]));return c}var t=!0,e=Number,r=xu,u=yu;return n.value=function(t){return arguments.length?(e=t,n):e},n.range=function(t){return arguments.length?(r=pt(t),n):r},n.bins=function(t){return arguments.length?(u="number"==typeof t?function(n){return Mu(n,t)}:pt(t),n):u},n.frequency=function(e){return arguments.length?(t=!!e,n):t},n},mo.layout.tree=function(){function n(n,i){function o(n,t){var r=n.children,u=n._tree;if(r&&(i=r.length)){for(var i,a,l,s=r[0],f=s,h=-1;++h<i;)l=r[h],o(l,a),f=c(l,a,f),a=l;Tu(n);var g=.5*(s._tree.prelim+l._tree.prelim);t?(u.prelim=t._tree.prelim+e(n,t),u.mod=u.prelim-g):u.prelim=g}else t&&(u.prelim=t._tree.prelim+e(n,t))}function a(n,t){n.x=n._tree.prelim+t;var e=n.children;if(e&&(r=e.length)){var r,u=-1;for(t+=n._tree.mod;++u<r;)a(e[u],t)}}function c(n,t,r){if(t){for(var u,i=n,o=n,a=t,c=n.parent.children[0],l=i._tree.mod,s=o._tree.mod,f=a._tree.mod,h=c._tree.mod;a=wu(a),i=_u(i),a&&i;)c=_u(c),o=wu(o),o._tree.ancestor=n,u=a._tree.prelim+f-i._tree.prelim-l+e(a,i),u>0&&(qu(zu(a,n,r),n,u),l+=u,s+=u),f+=a._tree.mod,l+=i._tree.mod,h+=c._tree.mod,s+=o._tree.mod;a&&!wu(o)&&(o._tree.thread=a,o._tree.mod+=f-s),i&&!_u(c)&&(c._tree.thread=i,c._tree.mod+=l-h,r=n)}return r}var l=t.call(this,n,i),s=l[0];Nu(s,function(n,t){n._tree={ancestor:n,prelim:0,mod:0,change:0,shift:0,number:t?t._tree.number+1:0}}),o(s),a(s,-s._tree.prelim);var f=Su(s,ku),h=Su(s,Eu),g=Su(s,Au),p=f.x-e(f,h)/2,d=h.x+e(h,f)/2,v=g.depth||1;return Nu(s,u?function(n){n.x*=r[0],n.y=n.depth*r[1],delete n._tree}:function(n){n.x=(n.x-p)/(d-p)*r[0],n.y=n.depth/v*r[1],delete n._tree}),l}var t=mo.layout.hierarchy().sort(null).value(null),e=bu,r=[1,1],u=!1;return n.separation=function(t){return arguments.length?(e=t,n):e},n.size=function(t){return arguments.length?(u=null==(r=t),n):u?null:r},n.nodeSize=function(t){return arguments.length?(u=null!=(r=t),n):u?r:null},iu(n,t)},mo.layout.pack=function(){function n(n,i){var o=e.call(this,n,i),a=o[0],c=u[0],l=u[1],s=null==t?Math.sqrt:"function"==typeof t?t:function(){return t};if(a.x=a.y=0,Nu(a,function(n){n.r=+s(n.value)}),Nu(a,Hu),r){var f=r*(t?1:Math.max(2*a.r/c,2*a.r/l))/2;Nu(a,function(n){n.r+=f}),Nu(a,Hu),Nu(a,function(n){n.r-=f})}return Ou(a,c/2,l/2,t?1:1/Math.max(2*a.r/c,2*a.r/l)),o}var t,e=mo.layout.hierarchy().sort(Cu),r=0,u=[1,1];return n.size=function(t){return arguments.length?(u=t,n):u},n.radius=function(e){return arguments.length?(t=null==e||"function"==typeof e?e:+e,n):t},n.padding=function(t){return arguments.length?(r=+t,n):r},iu(n,e)},mo.layout.cluster=function(){function n(n,i){var o,a=t.call(this,n,i),c=a[0],l=0;Nu(c,function(n){var t=n.children;t&&t.length?(n.x=Iu(t),n.y=Yu(t)):(n.x=o?l+=e(n,o):0,n.y=0,o=n)});var s=Uu(c),f=Zu(c),h=s.x-e(s,f)/2,g=f.x+e(f,s)/2;return Nu(c,u?function(n){n.x=(n.x-c.x)*r[0],n.y=(c.y-n.y)*r[1]}:function(n){n.x=(n.x-h)/(g-h)*r[0],n.y=(1-(c.y?n.y/c.y:1))*r[1]}),a}var t=mo.layout.hierarchy().sort(null).value(null),e=bu,r=[1,1],u=!1;return n.separation=function(t){return arguments.length?(e=t,n):e},n.size=function(t){return arguments.length?(u=null==(r=t),n):u?null:r},n.nodeSize=function(t){return arguments.length?(u=null!=(r=t),n):u?r:null},iu(n,t)},mo.layout.treemap=function(){function n(n,t){for(var e,r,u=-1,i=n.length;++u<i;)r=(e=n[u]).value*(0>t?0:t),e.area=isNaN(r)||0>=r?0:r}function t(e){var i=e.children;if(i&&i.length){var o,a,c,l=f(e),s=[],h=i.slice(),p=1/0,d="slice"===g?l.dx:"dice"===g?l.dy:"slice-dice"===g?1&e.depth?l.dy:l.dx:Math.min(l.dx,l.dy);for(n(h,l.dx*l.dy/e.value),s.area=0;(c=h.length)>0;)s.push(o=h[c-1]),s.area+=o.area,"squarify"!==g||(a=r(s,d))<=p?(h.pop(),p=a):(s.area-=s.pop().area,u(s,d,l,!1),d=Math.min(l.dx,l.dy),s.length=s.area=0,p=1/0);s.length&&(u(s,d,l,!0),s.length=s.area=0),i.forEach(t)}}function e(t){var r=t.children;if(r&&r.length){var i,o=f(t),a=r.slice(),c=[];for(n(a,o.dx*o.dy/t.value),c.area=0;i=a.pop();)c.push(i),c.area+=i.area,null!=i.z&&(u(c,i.z?o.dx:o.dy,o,!a.length),c.length=c.area=0);r.forEach(e)}}function r(n,t){for(var e,r=n.area,u=0,i=1/0,o=-1,a=n.length;++o<a;)(e=n[o].area)&&(i>e&&(i=e),e>u&&(u=e));return r*=r,t*=t,r?Math.max(t*u*p/r,r/(t*i*p)):1/0}function u(n,t,e,r){var u,i=-1,o=n.length,a=e.x,l=e.y,s=t?c(n.area/t):0;if(t==e.dx){for((r||s>e.dy)&&(s=e.dy);++i<o;)u=n[i],u.x=a,u.y=l,u.dy=s,a+=u.dx=Math.min(e.x+e.dx-a,s?c(u.area/s):0);u.z=!0,u.dx+=e.x+e.dx-a,e.y+=s,e.dy-=s}else{for((r||s>e.dx)&&(s=e.dx);++i<o;)u=n[i],u.x=a,u.y=l,u.dx=s,l+=u.dy=Math.min(e.y+e.dy-l,s?c(u.area/s):0);u.z=!1,u.dy+=e.y+e.dy-l,e.x+=s,e.dx-=s}}function i(r){var u=o||a(r),i=u[0];return i.x=0,i.y=0,i.dx=l[0],i.dy=l[1],o&&a.revalue(i),n([i],i.dx*i.dy/i.value),(o?e:t)(i),h&&(o=u),u}var o,a=mo.layout.hierarchy(),c=Math.round,l=[1,1],s=null,f=Vu,h=!1,g="squarify",p=.5*(1+Math.sqrt(5));return i.size=function(n){return arguments.length?(l=n,i):l},i.padding=function(n){function t(t){var e=n.call(i,t,t.depth);return null==e?Vu(t):Xu(t,"number"==typeof e?[e,e,e,e]:e)}function e(t){return Xu(t,n)}if(!arguments.length)return s;var r;return f=null==(s=n)?Vu:"function"==(r=typeof n)?t:"number"===r?(n=[n,n,n,n],e):e,i},i.round=function(n){return arguments.length?(c=n?Math.round:Number,i):c!=Number},i.sticky=function(n){return arguments.length?(h=n,o=null,i):h},i.ratio=function(n){return arguments.length?(p=n,i):p},i.mode=function(n){return arguments.length?(g=n+"",i):g},iu(i,a)},mo.random={normal:function(n,t){var e=arguments.length;return 2>e&&(t=1),1>e&&(n=0),function(){var e,r,u;do e=2*Math.random()-1,r=2*Math.random()-1,u=e*e+r*r;while(!u||u>1);return n+t*e*Math.sqrt(-2*Math.log(u)/u)}},logNormal:function(){var n=mo.random.normal.apply(mo,arguments);return function(){return Math.exp(n())}},irwinHall:function(n){return function(){for(var t=0,e=0;n>e;e++)t+=Math.random();return t/n}}},mo.scale={};var Nc={floor:dt,ceil:dt};mo.scale.linear=function(){return Qu([0,1],[0,1],Er,!1)},mo.scale.log=function(){return ii(mo.scale.linear().domain([0,1]),10,!0,[1,10])};var Tc=mo.format(".0e"),qc={floor:function(n){return-Math.ceil(-n)},ceil:function(n){return-Math.floor(-n)}};mo.scale.pow=function(){return oi(mo.scale.linear(),1,[0,1])},mo.scale.sqrt=function(){return mo.scale.pow().exponent(.5)},mo.scale.ordinal=function(){return ci([],{t:"range",a:[[]]})},mo.scale.category10=function(){return mo.scale.ordinal().range(zc)},mo.scale.category20=function(){return mo.scale.ordinal().range(Cc)},mo.scale.category20b=function(){return mo.scale.ordinal().range(Dc)},mo.scale.category20c=function(){return mo.scale.ordinal().range(jc)};var zc=[2062260,16744206,2924588,14034728,9725885,9197131,14907330,8355711,12369186,1556175].map(it),Cc=[2062260,11454440,16744206,16759672,2924588,10018698,14034728,16750742,9725885,12955861,9197131,12885140,14907330,16234194,8355711,13092807,12369186,14408589,1556175,10410725].map(it),Dc=[3750777,5395619,7040719,10264286,6519097,9216594,11915115,13556636,9202993,12426809,15186514,15190932,8666169,11356490,14049643,15177372,8077683,10834324,13528509,14589654].map(it),jc=[3244733,7057110,10406625,13032431,15095053,16616764,16625259,16634018,3253076,7652470,10607003,13101504,7695281,10394312,12369372,14342891,6513507,9868950,12434877,14277081].map(it);mo.scale.quantile=function(){return li([],[])},mo.scale.quantize=function(){return si(0,1,[0,1])},mo.scale.threshold=function(){return fi([.5],[0,1])},mo.scale.identity=function(){return hi([0,1])},mo.svg.arc=function(){function n(){var n=t.apply(this,arguments),i=e.apply(this,arguments),o=r.apply(this,arguments)+Lc,a=u.apply(this,arguments)+Lc,c=(o>a&&(c=o,o=a,a=c),a-o),l=Bo>c?"0":"1",s=Math.cos(o),f=Math.sin(o),h=Math.cos(a),g=Math.sin(a);return c>=Hc?n?"M0,"+i+"A"+i+","+i+" 0 1,1 0,"+-i+"A"+i+","+i+" 0 1,1 0,"+i+"M0,"+n+"A"+n+","+n+" 0 1,0 0,"+-n+"A"+n+","+n+" 0 1,0 0,"+n+"Z":"M0,"+i+"A"+i+","+i+" 0 1,1 0,"+-i+"A"+i+","+i+" 0 1,1 0,"+i+"Z":n?"M"+i*s+","+i*f+"A"+i+","+i+" 0 "+l+",1 "+i*h+","+i*g+"L"+n*h+","+n*g+"A"+n+","+n+" 0 "+l+",0 "+n*s+","+n*f+"Z":"M"+i*s+","+i*f+"A"+i+","+i+" 0 "+l+",1 "+i*h+","+i*g+"L0,0"+"Z"}var t=gi,e=pi,r=di,u=vi;return n.innerRadius=function(e){return arguments.length?(t=pt(e),n):t},n.outerRadius=function(t){return arguments.length?(e=pt(t),n):e},n.startAngle=function(t){return arguments.length?(r=pt(t),n):r},n.endAngle=function(t){return arguments.length?(u=pt(t),n):u},n.centroid=function(){var n=(t.apply(this,arguments)+e.apply(this,arguments))/2,i=(r.apply(this,arguments)+u.apply(this,arguments))/2+Lc;return[Math.cos(i)*n,Math.sin(i)*n]},n};var Lc=-Bo/2,Hc=2*Bo-1e-6;mo.svg.line.radial=function(){var n=Ue(mi);return n.radius=n.x,delete n.x,n.angle=n.y,delete n.y,n},We.reverse=Je,Je.reverse=We,mo.svg.area=function(){return yi(dt)},mo.svg.area.radial=function(){var n=yi(mi);return n.radius=n.x,delete n.x,n.innerRadius=n.x0,delete n.x0,n.outerRadius=n.x1,delete n.x1,n.angle=n.y,delete n.y,n.startAngle=n.y0,delete n.y0,n.endAngle=n.y1,delete n.y1,n},mo.svg.chord=function(){function n(n,a){var c=t(this,i,n,a),l=t(this,o,n,a);return"M"+c.p0+r(c.r,c.p1,c.a1-c.a0)+(e(c,l)?u(c.r,c.p1,c.r,c.p0):u(c.r,c.p1,l.r,l.p0)+r(l.r,l.p1,l.a1-l.a0)+u(l.r,l.p1,c.r,c.p0))+"Z"}function t(n,t,e,r){var u=t.call(n,e,r),i=a.call(n,u,r),o=c.call(n,u,r)+Lc,s=l.call(n,u,r)+Lc;return{r:i,a0:o,a1:s,p0:[i*Math.cos(o),i*Math.sin(o)],p1:[i*Math.cos(s),i*Math.sin(s)]}}function e(n,t){return n.a0==t.a0&&n.a1==t.a1}function r(n,t,e){return"A"+n+","+n+" 0 "+ +(e>Bo)+",1 "+t}function u(n,t,e,r){return"Q 0,0 "+r}var i=De,o=je,a=Mi,c=di,l=vi;return n.radius=function(t){return arguments.length?(a=pt(t),n):a},n.source=function(t){return arguments.length?(i=pt(t),n):i},n.target=function(t){return arguments.length?(o=pt(t),n):o},n.startAngle=function(t){return arguments.length?(c=pt(t),n):c},n.endAngle=function(t){return arguments.length?(l=pt(t),n):l},n},mo.svg.diagonal=function(){function n(n,u){var i=t.call(this,n,u),o=e.call(this,n,u),a=(i.y+o.y)/2,c=[i,{x:i.x,y:a},{x:o.x,y:a},o];return c=c.map(r),"M"+c[0]+"C"+c[1]+" "+c[2]+" "+c[3]}var t=De,e=je,r=xi;return n.source=function(e){return arguments.length?(t=pt(e),n):t},n.target=function(t){return arguments.length?(e=pt(t),n):e},n.projection=function(t){return arguments.length?(r=t,n):r},n},mo.svg.diagonal.radial=function(){var n=mo.svg.diagonal(),t=xi,e=n.projection;return n.projection=function(n){return arguments.length?e(bi(t=n)):t},n},mo.svg.symbol=function(){function n(n,r){return(Fc.get(t.call(this,n,r))||Si)(e.call(this,n,r))}var t=wi,e=_i;return n.type=function(e){return arguments.length?(t=pt(e),n):t},n.size=function(t){return arguments.length?(e=pt(t),n):e},n};var Fc=mo.map({circle:Si,cross:function(n){var t=Math.sqrt(n/5)/2;return"M"+-3*t+","+-t+"H"+-t+"V"+-3*t+"H"+t+"V"+-t+"H"+3*t+"V"+t+"H"+t+"V"+3*t+"H"+-t+"V"+t+"H"+-3*t+"Z"},diamond:function(n){var t=Math.sqrt(n/(2*Yc)),e=t*Yc;return"M0,"+-t+"L"+e+",0"+" 0,"+t+" "+-e+",0"+"Z"},square:function(n){var t=Math.sqrt(n)/2;return"M"+-t+","+-t+"L"+t+","+-t+" "+t+","+t+" "+-t+","+t+"Z"},"triangle-down":function(n){var t=Math.sqrt(n/Rc),e=t*Rc/2;return"M0,"+e+"L"+t+","+-e+" "+-t+","+-e+"Z"},"triangle-up":function(n){var t=Math.sqrt(n/Rc),e=t*Rc/2;return"M0,"+-e+"L"+t+","+e+" "+-t+","+e+"Z"}});mo.svg.symbolTypes=Fc.keys();var Pc,Oc,Rc=Math.sqrt(3),Yc=Math.tan(30*Go),Ic=[],Uc=0;Ic.call=Ro.call,Ic.empty=Ro.empty,Ic.node=Ro.node,Ic.size=Ro.size,mo.transition=function(n){return arguments.length?Pc?n.transition():n:Uo.transition()},mo.transition.prototype=Ic,Ic.select=function(n){var t,e,r,u=this.id,i=[];n=d(n);for(var o=-1,a=this.length;++o<a;){i.push(t=[]);for(var c=this[o],l=-1,s=c.length;++l<s;)(r=c[l])&&(e=n.call(r,r.__data__,l,o))?("__data__"in r&&(e.__data__=r.__data__),Ni(e,l,u,r.__transition__[u]),t.push(e)):t.push(null)}return Ei(i,u)},Ic.selectAll=function(n){var t,e,r,u,i,o=this.id,a=[];n=v(n);for(var c=-1,l=this.length;++c<l;)for(var s=this[c],f=-1,h=s.length;++f<h;)if(r=s[f]){i=r.__transition__[o],e=n.call(r,r.__data__,f,c),a.push(t=[]);for(var g=-1,p=e.length;++g<p;)(u=e[g])&&Ni(u,g,o,i),t.push(u)}return Ei(a,o)},Ic.filter=function(n){var t,e,r,u=[];"function"!=typeof n&&(n=k(n));for(var i=0,o=this.length;o>i;i++){u.push(t=[]);for(var e=this[i],a=0,c=e.length;c>a;a++)(r=e[a])&&n.call(r,r.__data__,a)&&t.push(r)}return Ei(u,this.id)},Ic.tween=function(n,t){var e=this.id;return arguments.length<2?this.node().__transition__[e].tween.get(n):N(this,null==t?function(t){t.__transition__[e].tween.remove(n)}:function(r){r.__transition__[e].tween.set(n,t)})},Ic.attr=function(n,t){function e(){this.removeAttribute(a)}function r(){this.removeAttributeNS(a.space,a.local)}function u(n){return null==n?e:(n+="",function(){var t,e=this.getAttribute(a);return e!==n&&(t=o(e,n),function(n){this.setAttribute(a,t(n))})})}function i(n){return null==n?r:(n+="",function(){var t,e=this.getAttributeNS(a.space,a.local);return e!==n&&(t=o(e,n),function(n){this.setAttributeNS(a.space,a.local,t(n))
+})})}if(arguments.length<2){for(t in n)this.attr(t,n[t]);return this}var o="transform"==n?Br:Er,a=mo.ns.qualify(n);return ki(this,"attr."+n,t,a.local?i:u)},Ic.attrTween=function(n,t){function e(n,e){var r=t.call(this,n,e,this.getAttribute(u));return r&&function(n){this.setAttribute(u,r(n))}}function r(n,e){var r=t.call(this,n,e,this.getAttributeNS(u.space,u.local));return r&&function(n){this.setAttributeNS(u.space,u.local,r(n))}}var u=mo.ns.qualify(n);return this.tween("attr."+n,u.local?r:e)},Ic.style=function(n,t,e){function r(){this.style.removeProperty(n)}function u(t){return null==t?r:(t+="",function(){var r,u=_o.getComputedStyle(this,null).getPropertyValue(n);return u!==t&&(r=Er(u,t),function(t){this.style.setProperty(n,r(t),e)})})}var i=arguments.length;if(3>i){if("string"!=typeof n){2>i&&(t="");for(e in n)this.style(e,n[e],t);return this}e=""}return ki(this,"style."+n,t,u)},Ic.styleTween=function(n,t,e){function r(r,u){var i=t.call(this,r,u,_o.getComputedStyle(this,null).getPropertyValue(n));return i&&function(t){this.style.setProperty(n,i(t),e)}}return arguments.length<3&&(e=""),this.tween("style."+n,r)},Ic.text=function(n){return ki(this,"text",n,Ai)},Ic.remove=function(){return this.each("end.transition",function(){var n;this.__transition__.count<2&&(n=this.parentNode)&&n.removeChild(this)})},Ic.ease=function(n){var t=this.id;return arguments.length<1?this.node().__transition__[t].ease:("function"!=typeof n&&(n=mo.ease.apply(mo,arguments)),N(this,function(e){e.__transition__[t].ease=n}))},Ic.delay=function(n){var t=this.id;return N(this,"function"==typeof n?function(e,r,u){e.__transition__[t].delay=+n.call(e,e.__data__,r,u)}:(n=+n,function(e){e.__transition__[t].delay=n}))},Ic.duration=function(n){var t=this.id;return N(this,"function"==typeof n?function(e,r,u){e.__transition__[t].duration=Math.max(1,n.call(e,e.__data__,r,u))}:(n=Math.max(1,n),function(e){e.__transition__[t].duration=n}))},Ic.each=function(n,t){var e=this.id;if(arguments.length<2){var r=Oc,u=Pc;Pc=e,N(this,function(t,r,u){Oc=t.__transition__[e],n.call(t,t.__data__,r,u)}),Oc=r,Pc=u}else N(this,function(r){var u=r.__transition__[e];(u.event||(u.event=mo.dispatch("start","end"))).on(n,t)});return this},Ic.transition=function(){for(var n,t,e,r,u=this.id,i=++Uc,o=[],a=0,c=this.length;c>a;a++){o.push(n=[]);for(var t=this[a],l=0,s=t.length;s>l;l++)(e=t[l])&&(r=Object.create(e.__transition__[u]),r.delay+=r.duration,Ni(e,l,i,r)),n.push(e)}return Ei(o,i)},mo.svg.axis=function(){function n(n){n.each(function(){var n,l=mo.select(this),s=null==c?e.ticks?e.ticks.apply(e,a):e.domain():c,f=null==t?e.tickFormat?e.tickFormat.apply(e,a):dt:t,h=l.selectAll(".tick").data(s,dt),g=h.enter().insert("g",".domain").attr("class","tick").style("opacity",1e-6),p=mo.transition(h.exit()).style("opacity",1e-6).remove(),d=mo.transition(h).style("opacity",1),v=Bu(e),m=l.selectAll(".domain").data([0]),y=(m.enter().append("path").attr("class","domain"),mo.transition(m)),M=e.copy(),x=this.__chart__||M;this.__chart__=M,g.append("line"),g.append("text");var b=g.select("line"),_=d.select("line"),w=h.select("text").text(f),S=g.select("text"),E=d.select("text");switch(r){case"bottom":n=Ti,b.attr("y2",u),S.attr("y",Math.max(u,0)+o),_.attr("x2",0).attr("y2",u),E.attr("x",0).attr("y",Math.max(u,0)+o),w.attr("dy",".71em").style("text-anchor","middle"),y.attr("d","M"+v[0]+","+i+"V0H"+v[1]+"V"+i);break;case"top":n=Ti,b.attr("y2",-u),S.attr("y",-(Math.max(u,0)+o)),_.attr("x2",0).attr("y2",-u),E.attr("x",0).attr("y",-(Math.max(u,0)+o)),w.attr("dy","0em").style("text-anchor","middle"),y.attr("d","M"+v[0]+","+-i+"V0H"+v[1]+"V"+-i);break;case"left":n=qi,b.attr("x2",-u),S.attr("x",-(Math.max(u,0)+o)),_.attr("x2",-u).attr("y2",0),E.attr("x",-(Math.max(u,0)+o)).attr("y",0),w.attr("dy",".32em").style("text-anchor","end"),y.attr("d","M"+-i+","+v[0]+"H0V"+v[1]+"H"+-i);break;case"right":n=qi,b.attr("x2",u),S.attr("x",Math.max(u,0)+o),_.attr("x2",u).attr("y2",0),E.attr("x",Math.max(u,0)+o).attr("y",0),w.attr("dy",".32em").style("text-anchor","start"),y.attr("d","M"+i+","+v[0]+"H0V"+v[1]+"H"+i)}if(e.rangeBand){var k=M.rangeBand()/2,A=function(n){return M(n)+k};g.call(n,A),d.call(n,A)}else g.call(n,x),d.call(n,M),p.call(n,M)})}var t,e=mo.scale.linear(),r=Zc,u=6,i=6,o=3,a=[10],c=null;return n.scale=function(t){return arguments.length?(e=t,n):e},n.orient=function(t){return arguments.length?(r=t in Vc?t+"":Zc,n):r},n.ticks=function(){return arguments.length?(a=arguments,n):a},n.tickValues=function(t){return arguments.length?(c=t,n):c},n.tickFormat=function(e){return arguments.length?(t=e,n):t},n.tickSize=function(t){var e=arguments.length;return e?(u=+t,i=+arguments[e-1],n):u},n.innerTickSize=function(t){return arguments.length?(u=+t,n):u},n.outerTickSize=function(t){return arguments.length?(i=+t,n):i},n.tickPadding=function(t){return arguments.length?(o=+t,n):o},n.tickSubdivide=function(){return arguments.length&&n},n};var Zc="bottom",Vc={top:1,right:1,bottom:1,left:1};mo.svg.brush=function(){function n(i){i.each(function(){var i=mo.select(this).style("pointer-events","all").style("-webkit-tap-highlight-color","rgba(0,0,0,0)").on("mousedown.brush",u).on("touchstart.brush",u),o=i.selectAll(".background").data([0]);o.enter().append("rect").attr("class","background").style("visibility","hidden").style("cursor","crosshair"),i.selectAll(".extent").data([0]).enter().append("rect").attr("class","extent").style("cursor","move");var a=i.selectAll(".resize").data(v,dt);a.exit().remove(),a.enter().append("g").attr("class",function(n){return"resize "+n}).style("cursor",function(n){return Xc[n]}).append("rect").attr("x",function(n){return/[ew]$/.test(n)?-3:null}).attr("y",function(n){return/^[ns]/.test(n)?-3:null}).attr("width",6).attr("height",6).style("visibility","hidden"),a.style("display",n.empty()?"none":null);var s,f=mo.transition(i),h=mo.transition(o);c&&(s=Bu(c),h.attr("x",s[0]).attr("width",s[1]-s[0]),e(f)),l&&(s=Bu(l),h.attr("y",s[0]).attr("height",s[1]-s[0]),r(f)),t(f)})}function t(n){n.selectAll(".resize").attr("transform",function(n){return"translate("+s[+/e$/.test(n)]+","+h[+/^s/.test(n)]+")"})}function e(n){n.select(".extent").attr("x",s[0]),n.selectAll(".extent,.n>rect,.s>rect").attr("width",s[1]-s[0])}function r(n){n.select(".extent").attr("y",h[0]),n.selectAll(".extent,.e>rect,.w>rect").attr("height",h[1]-h[0])}function u(){function u(){32==mo.event.keyCode&&(N||(M=null,q[0]-=s[1],q[1]-=h[1],N=2),f())}function g(){32==mo.event.keyCode&&2==N&&(q[0]+=s[1],q[1]+=h[1],N=0,f())}function v(){var n=mo.mouse(b),u=!1;x&&(n[0]+=x[0],n[1]+=x[1]),N||(mo.event.altKey?(M||(M=[(s[0]+s[1])/2,(h[0]+h[1])/2]),q[0]=s[+(n[0]<M[0])],q[1]=h[+(n[1]<M[1])]):M=null),k&&m(n,c,0)&&(e(S),u=!0),A&&m(n,l,1)&&(r(S),u=!0),u&&(t(S),w({type:"brush",mode:N?"move":"resize"}))}function m(n,t,e){var r,u,a=Bu(t),c=a[0],l=a[1],f=q[e],g=e?h:s,v=g[1]-g[0];return N&&(c-=f,l-=v+f),r=(e?d:p)?Math.max(c,Math.min(l,n[e])):n[e],N?u=(r+=f)+v:(M&&(f=Math.max(c,Math.min(l,2*M[e]-r))),r>f?(u=r,r=f):u=f),g[0]!=r||g[1]!=u?(e?o=null:i=null,g[0]=r,g[1]=u,!0):void 0}function y(){v(),S.style("pointer-events","all").selectAll(".resize").style("display",n.empty()?"none":null),mo.select("body").style("cursor",null),z.on("mousemove.brush",null).on("mouseup.brush",null).on("touchmove.brush",null).on("touchend.brush",null).on("keydown.brush",null).on("keyup.brush",null),T(),w({type:"brushend"})}var M,x,b=this,_=mo.select(mo.event.target),w=a.of(b,arguments),S=mo.select(b),E=_.datum(),k=!/^(n|s)$/.test(E)&&c,A=!/^(e|w)$/.test(E)&&l,N=_.classed("extent"),T=L(),q=mo.mouse(b),z=mo.select(_o).on("keydown.brush",u).on("keyup.brush",g);if(mo.event.changedTouches?z.on("touchmove.brush",v).on("touchend.brush",y):z.on("mousemove.brush",v).on("mouseup.brush",y),S.interrupt().selectAll("*").interrupt(),N)q[0]=s[0]-q[0],q[1]=h[0]-q[1];else if(E){var C=+/w$/.test(E),D=+/^n/.test(E);x=[s[1-C]-q[0],h[1-D]-q[1]],q[0]=s[C],q[1]=h[D]}else mo.event.altKey&&(M=q.slice());S.style("pointer-events","none").selectAll(".resize").style("display",null),mo.select("body").style("cursor",_.style("cursor")),w({type:"brushstart"}),v()}var i,o,a=g(n,"brushstart","brush","brushend"),c=null,l=null,s=[0,0],h=[0,0],p=!0,d=!0,v=$c[0];return n.event=function(n){n.each(function(){var n=a.of(this,arguments),t={x:s,y:h,i:i,j:o},e=this.__chart__||t;this.__chart__=t,Pc?mo.select(this).transition().each("start.brush",function(){i=e.i,o=e.j,s=e.x,h=e.y,n({type:"brushstart"})}).tween("brush:brush",function(){var e=kr(s,t.x),r=kr(h,t.y);return i=o=null,function(u){s=t.x=e(u),h=t.y=r(u),n({type:"brush",mode:"resize"})}}).each("end.brush",function(){i=t.i,o=t.j,n({type:"brush",mode:"resize"}),n({type:"brushend"})}):(n({type:"brushstart"}),n({type:"brush",mode:"resize"}),n({type:"brushend"}))})},n.x=function(t){return arguments.length?(c=t,v=$c[!c<<1|!l],n):c},n.y=function(t){return arguments.length?(l=t,v=$c[!c<<1|!l],n):l},n.clamp=function(t){return arguments.length?(c&&l?(p=!!t[0],d=!!t[1]):c?p=!!t:l&&(d=!!t),n):c&&l?[p,d]:c?p:l?d:null},n.extent=function(t){var e,r,u,a,f;return arguments.length?(c&&(e=t[0],r=t[1],l&&(e=e[0],r=r[0]),i=[e,r],c.invert&&(e=c(e),r=c(r)),e>r&&(f=e,e=r,r=f),(e!=s[0]||r!=s[1])&&(s=[e,r])),l&&(u=t[0],a=t[1],c&&(u=u[1],a=a[1]),o=[u,a],l.invert&&(u=l(u),a=l(a)),u>a&&(f=u,u=a,a=f),(u!=h[0]||a!=h[1])&&(h=[u,a])),n):(c&&(i?(e=i[0],r=i[1]):(e=s[0],r=s[1],c.invert&&(e=c.invert(e),r=c.invert(r)),e>r&&(f=e,e=r,r=f))),l&&(o?(u=o[0],a=o[1]):(u=h[0],a=h[1],l.invert&&(u=l.invert(u),a=l.invert(a)),u>a&&(f=u,u=a,a=f))),c&&l?[[e,u],[r,a]]:c?[e,r]:l&&[u,a])},n.clear=function(){return n.empty()||(s=[0,0],h=[0,0],i=o=null),n},n.empty=function(){return!!c&&s[0]==s[1]||!!l&&h[0]==h[1]},mo.rebind(n,a,"on")};var Xc={n:"ns-resize",e:"ew-resize",s:"ns-resize",w:"ew-resize",nw:"nwse-resize",ne:"nesw-resize",se:"nwse-resize",sw:"nesw-resize"},$c=[["n","e","s","w","nw","ne","se","sw"],["e","w"],["n","s"],[]],Bc=mo.time={},Wc=Date,Jc=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];zi.prototype={getDate:function(){return this._.getUTCDate()},getDay:function(){return this._.getUTCDay()},getFullYear:function(){return this._.getUTCFullYear()},getHours:function(){return this._.getUTCHours()},getMilliseconds:function(){return this._.getUTCMilliseconds()},getMinutes:function(){return this._.getUTCMinutes()},getMonth:function(){return this._.getUTCMonth()},getSeconds:function(){return this._.getUTCSeconds()},getTime:function(){return this._.getTime()},getTimezoneOffset:function(){return 0},valueOf:function(){return this._.valueOf()},setDate:function(){Gc.setUTCDate.apply(this._,arguments)},setDay:function(){Gc.setUTCDay.apply(this._,arguments)},setFullYear:function(){Gc.setUTCFullYear.apply(this._,arguments)},setHours:function(){Gc.setUTCHours.apply(this._,arguments)},setMilliseconds:function(){Gc.setUTCMilliseconds.apply(this._,arguments)},setMinutes:function(){Gc.setUTCMinutes.apply(this._,arguments)},setMonth:function(){Gc.setUTCMonth.apply(this._,arguments)},setSeconds:function(){Gc.setUTCSeconds.apply(this._,arguments)},setTime:function(){Gc.setTime.apply(this._,arguments)}};var Gc=Date.prototype,Kc="%a %b %e %X %Y",Qc="%m/%d/%Y",nl="%H:%M:%S",tl=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],el=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],rl=["January","February","March","April","May","June","July","August","September","October","November","December"],ul=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];Bc.year=Ci(function(n){return n=Bc.day(n),n.setMonth(0,1),n},function(n,t){n.setFullYear(n.getFullYear()+t)},function(n){return n.getFullYear()}),Bc.years=Bc.year.range,Bc.years.utc=Bc.year.utc.range,Bc.day=Ci(function(n){var t=new Wc(2e3,0);return t.setFullYear(n.getFullYear(),n.getMonth(),n.getDate()),t},function(n,t){n.setDate(n.getDate()+t)},function(n){return n.getDate()-1}),Bc.days=Bc.day.range,Bc.days.utc=Bc.day.utc.range,Bc.dayOfYear=function(n){var t=Bc.year(n);return Math.floor((n-t-6e4*(n.getTimezoneOffset()-t.getTimezoneOffset()))/864e5)},Jc.forEach(function(n,t){n=n.toLowerCase(),t=7-t;var e=Bc[n]=Ci(function(n){return(n=Bc.day(n)).setDate(n.getDate()-(n.getDay()+t)%7),n},function(n,t){n.setDate(n.getDate()+7*Math.floor(t))},function(n){var e=Bc.year(n).getDay();return Math.floor((Bc.dayOfYear(n)+(e+t)%7)/7)-(e!==t)});Bc[n+"s"]=e.range,Bc[n+"s"].utc=e.utc.range,Bc[n+"OfYear"]=function(n){var e=Bc.year(n).getDay();return Math.floor((Bc.dayOfYear(n)+(e+t)%7)/7)}}),Bc.week=Bc.sunday,Bc.weeks=Bc.sunday.range,Bc.weeks.utc=Bc.sunday.utc.range,Bc.weekOfYear=Bc.sundayOfYear,Bc.format=ji;var il=Hi(tl),ol=Fi(tl),al=Hi(el),cl=Fi(el),ll=Hi(rl),sl=Fi(rl),fl=Hi(ul),hl=Fi(ul),gl=/^%/,pl={"-":"",_:" ",0:"0"},dl={a:function(n){return el[n.getDay()]},A:function(n){return tl[n.getDay()]},b:function(n){return ul[n.getMonth()]},B:function(n){return rl[n.getMonth()]},c:ji(Kc),d:function(n,t){return Pi(n.getDate(),t,2)},e:function(n,t){return Pi(n.getDate(),t,2)},H:function(n,t){return Pi(n.getHours(),t,2)},I:function(n,t){return Pi(n.getHours()%12||12,t,2)},j:function(n,t){return Pi(1+Bc.dayOfYear(n),t,3)},L:function(n,t){return Pi(n.getMilliseconds(),t,3)},m:function(n,t){return Pi(n.getMonth()+1,t,2)},M:function(n,t){return Pi(n.getMinutes(),t,2)},p:function(n){return n.getHours()>=12?"PM":"AM"},S:function(n,t){return Pi(n.getSeconds(),t,2)},U:function(n,t){return Pi(Bc.sundayOfYear(n),t,2)},w:function(n){return n.getDay()},W:function(n,t){return Pi(Bc.mondayOfYear(n),t,2)},x:ji(Qc),X:ji(nl),y:function(n,t){return Pi(n.getFullYear()%100,t,2)},Y:function(n,t){return Pi(n.getFullYear()%1e4,t,4)},Z:ao,"%":function(){return"%"}},vl={a:Oi,A:Ri,b:Zi,B:Vi,c:Xi,d:no,e:no,H:eo,I:eo,j:to,L:io,m:Qi,M:ro,p:oo,S:uo,U:Ii,w:Yi,W:Ui,x:$i,X:Bi,y:Ji,Y:Wi,Z:Gi,"%":co},ml=/^\s*\d+/,yl=mo.map({am:0,pm:1});ji.utc=lo;var Ml=lo("%Y-%m-%dT%H:%M:%S.%LZ");ji.iso=Date.prototype.toISOString&&+new Date("2000-01-01T00:00:00.000Z")?so:Ml,so.parse=function(n){var t=new Date(n);return isNaN(t)?null:t},so.toString=Ml.toString,Bc.second=Ci(function(n){return new Wc(1e3*Math.floor(n/1e3))},function(n,t){n.setTime(n.getTime()+1e3*Math.floor(t))},function(n){return n.getSeconds()}),Bc.seconds=Bc.second.range,Bc.seconds.utc=Bc.second.utc.range,Bc.minute=Ci(function(n){return new Wc(6e4*Math.floor(n/6e4))},function(n,t){n.setTime(n.getTime()+6e4*Math.floor(t))},function(n){return n.getMinutes()}),Bc.minutes=Bc.minute.range,Bc.minutes.utc=Bc.minute.utc.range,Bc.hour=Ci(function(n){var t=n.getTimezoneOffset()/60;return new Wc(36e5*(Math.floor(n/36e5-t)+t))},function(n,t){n.setTime(n.getTime()+36e5*Math.floor(t))},function(n){return n.getHours()}),Bc.hours=Bc.hour.range,Bc.hours.utc=Bc.hour.utc.range,Bc.month=Ci(function(n){return n=Bc.day(n),n.setDate(1),n},function(n,t){n.setMonth(n.getMonth()+t)},function(n){return n.getMonth()}),Bc.months=Bc.month.range,Bc.months.utc=Bc.month.utc.range;var xl=[1e3,5e3,15e3,3e4,6e4,3e5,9e5,18e5,36e5,108e5,216e5,432e5,864e5,1728e5,6048e5,2592e6,7776e6,31536e6],bl=[[Bc.second,1],[Bc.second,5],[Bc.second,15],[Bc.second,30],[Bc.minute,1],[Bc.minute,5],[Bc.minute,15],[Bc.minute,30],[Bc.hour,1],[Bc.hour,3],[Bc.hour,6],[Bc.hour,12],[Bc.day,1],[Bc.day,2],[Bc.week,1],[Bc.month,1],[Bc.month,3],[Bc.year,1]],_l=[[ji("%Y"),Vt],[ji("%B"),function(n){return n.getMonth()}],[ji("%b %d"),function(n){return 1!=n.getDate()}],[ji("%a %d"),function(n){return n.getDay()&&1!=n.getDate()}],[ji("%I %p"),function(n){return n.getHours()}],[ji("%I:%M"),function(n){return n.getMinutes()}],[ji(":%S"),function(n){return n.getSeconds()}],[ji(".%L"),function(n){return n.getMilliseconds()}]],wl=go(_l);bl.year=Bc.year,Bc.scale=function(){return fo(mo.scale.linear(),bl,wl)};var Sl={range:function(n,t,e){return mo.range(+n,+t,e).map(ho)}},El=bl.map(function(n){return[n[0].utc,n[1]]}),kl=[[lo("%Y"),Vt],[lo("%B"),function(n){return n.getUTCMonth()}],[lo("%b %d"),function(n){return 1!=n.getUTCDate()}],[lo("%a %d"),function(n){return n.getUTCDay()&&1!=n.getUTCDate()}],[lo("%I %p"),function(n){return n.getUTCHours()}],[lo("%I:%M"),function(n){return n.getUTCMinutes()}],[lo(":%S"),function(n){return n.getUTCSeconds()}],[lo(".%L"),function(n){return n.getUTCMilliseconds()}]],Al=go(kl);return El.year=Bc.year.utc,Bc.scale.utc=function(){return fo(mo.scale.linear(),El,Al)},mo.text=vt(function(n){return n.responseText}),mo.json=function(n,t){return mt(n,"application/json",po,t)},mo.html=function(n,t){return mt(n,"text/html",vo,t)},mo.xml=vt(function(n){return n.responseXML}),mo}();
diff --git a/js/lib/infovis-spacetree-2.0.1.js b/js/lib/infovis-spacetree-2.0.1.js
deleted file mode 100644
index 217bdb152..000000000
--- a/js/lib/infovis-spacetree-2.0.1.js
+++ /dev/null
@@ -1,10134 +0,0 @@
-/*
-Copyright (c) 2013 Sencha Inc. - Author: Nicolas Garcia Belmonte (http://philogb.github.com/)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
- */
- 
-(function () { 
-
-/*
-  File: Core.js
-
- */
-
-/*
- Object: $jit
-
- Defines the namespace for all library Classes and Objects.
- This variable is the *only* global variable defined in the Toolkit.
- There are also other interesting properties attached to this variable described below.
- */
-this.$jit = function(w) {
-  w = w || window;
-  for(var k in $jit) {
-    if($jit[k].$extend) {
-      w[k] = $jit[k];
-    }
-  }
-};
-
-$jit.version = '2.0.1';
-/*
-  Object: $jit.id
-
-  Works just like *document.getElementById*
-
-  Example:
-  (start code js)
-  var element = $jit.id('elementId');
-  (end code)
-
-*/
-
-/*
- Object: $jit.util
-
- Contains utility functions.
-
- Some of the utility functions and the Class system were based in the MooTools Framework
- <http://mootools.net>. Copyright (c) 2006-2010 Valerio Proietti, <http://mad4milk.net/>.
- MIT license <http://mootools.net/license.txt>.
-
- These methods are generally also implemented in DOM manipulation frameworks like JQuery, MooTools and Prototype.
- I'd suggest you to use the functions from those libraries instead of using these, since their functions
- are widely used and tested in many different platforms/browsers. Use these functions only if you have to.
-
- */
-var $ = function(d) {
-  return document.getElementById(d);
-};
-
-$.empty = function() {
-};
-
-/*
-  Method: extend
-
-  Augment an object by appending another object's properties.
-
-  Parameters:
-
-  original - (object) The object to be extended.
-  extended - (object) An object which properties are going to be appended to the original object.
-
-  Example:
-  (start code js)
-  $jit.util.extend({ 'a': 1, 'b': 2 }, { 'b': 3, 'c': 4 }); //{ 'a':1, 'b': 3, 'c': 4 }
-  (end code)
-*/
-$.extend = function(original, extended) {
-  for ( var key in (extended || {}))
-    original[key] = extended[key];
-  return original;
-};
-
-$.lambda = function(value) {
-  return (typeof value == 'function') ? value : function() {
-    return value;
-  };
-};
-
-$.time = Date.now || function() {
-  return +new Date;
-};
-
-/*
-  Method: splat
-
-  Returns an array wrapping *obj* if *obj* is not an array. Returns *obj* otherwise.
-
-  Parameters:
-
-  obj - (mixed) The object to be wrapped in an array.
-
-  Example:
-  (start code js)
-  $jit.util.splat(3);   //[3]
-  $jit.util.splat([3]); //[3]
-  (end code)
-*/
-$.splat = function(obj) {
-  var type = $.type(obj);
-  return type ? ((type != 'array') ? [ obj ] : obj) : [];
-};
-
-$.type = function(elem) {
-  var type = $.type.s.call(elem).match(/^\[object\s(.*)\]$/)[1].toLowerCase();
-  if(type != 'object') return type;
-  if(elem && elem.$$family) return elem.$$family;
-  if(elem && elem.nodeType == 9) return 'htmldocument';
-  return (elem && elem.nodeName && elem.nodeType == 1)? 'element' : type;
-};
-$.type.s = Object.prototype.toString;
-
-/*
-  Method: each
-
-  Iterates through an iterable applying *f*.
-
-  Parameters:
-
-  iterable - (array) The original array.
-  fn - (function) The function to apply to the array elements.
-
-  Example:
-  (start code js)
-  $jit.util.each([3, 4, 5], function(n) { alert('number ' + n); });
-  (end code)
-*/
-$.each = function(iterable, fn) {
-  var type = $.type(iterable);
-  if (type == 'object') {
-    for ( var key in iterable)
-      fn(iterable[key], key);
-  } else {
-    for ( var i = 0, l = iterable.length; i < l; i++)
-      fn(iterable[i], i);
-  }
-};
-
-$.indexOf = function(array, item) {
-  if(array.indexOf) return array.indexOf(item);
-  for(var i=0,l=array.length; i<l; i++) {
-    if(array[i] === item) return i;
-  }
-  return -1;
-};
-
-/*
-  Method: map
-
-  Maps or collects an array by applying *f*.
-
-  Parameters:
-
-  array - (array) The original array.
-  f - (function) The function to apply to the array elements.
-
-  Example:
-  (start code js)
-  $jit.util.map([3, 4, 5], function(n) { return n*n; }); //[9, 16, 25]
-  (end code)
-*/
-$.map = function(array, f) {
-  var ans = [];
-  $.each(array, function(elem, i) {
-    ans.push(f(elem, i));
-  });
-  return ans;
-};
-
-/*
-  Method: reduce
-
-  Iteratively applies the binary function *f* storing the result in an accumulator.
-
-  Parameters:
-
-  array - (array) The original array.
-  f - (function) The function to apply to the array elements.
-  opt - (optional|mixed) The starting value for the acumulator.
-
-  Example:
-  (start code js)
-  $jit.util.reduce([3, 4, 5], function(x, y) { return x + y; }, 0); //12
-  (end code)
-*/
-$.reduce = function(array, f, opt) {
-  var l = array.length;
-  if(l==0) return opt;
-  var acum = arguments.length == 3? opt : array[--l];
-  while(l--) {
-    acum = f(acum, array[l]);
-  }
-  return acum;
-};
-
-/*
-  Method: merge
-
-  Merges n-objects and their sub-objects creating a new, fresh object.
-
-  Parameters:
-
-  An arbitrary number of objects.
-
-  Example:
-  (start code js)
-  $jit.util.merge({ 'a': 1, 'b': 2 }, { 'b': 3, 'c': 4 }); //{ 'a':1, 'b': 3, 'c': 4 }
-  (end code)
-*/
-$.merge = function() {
-  var mix = {};
-  for ( var i = 0, l = arguments.length; i < l; i++) {
-    var object = arguments[i];
-    if ($.type(object) != 'object')
-      continue;
-    for ( var key in object) {
-      var op = object[key], mp = mix[key];
-      mix[key] = (mp && $.type(op) == 'object' && $.type(mp) == 'object') ? $
-          .merge(mp, op) : $.unlink(op);
-    }
-  }
-  return mix;
-};
-
-$.unlink = function(object) {
-  var unlinked;
-  switch ($.type(object)) {
-  case 'object':
-    unlinked = {};
-    for ( var p in object)
-      unlinked[p] = $.unlink(object[p]);
-    break;
-  case 'array':
-    unlinked = [];
-    for ( var i = 0, l = object.length; i < l; i++)
-      unlinked[i] = $.unlink(object[i]);
-    break;
-  default:
-    return object;
-  }
-  return unlinked;
-};
-
-$.zip = function() {
-  if(arguments.length === 0) return [];
-  for(var j=0, ans=[], l=arguments.length, ml=arguments[0].length; j<ml; j++) {
-    for(var i=0, row=[]; i<l; i++) {
-      row.push(arguments[i][j]);
-    }
-    ans.push(row);
-  }
-  return ans;
-};
-
-/*
-  Method: rgbToHex
-
-  Converts an RGB array into a Hex string.
-
-  Parameters:
-
-  srcArray - (array) An array with R, G and B values
-
-  Example:
-  (start code js)
-  $jit.util.rgbToHex([255, 255, 255]); //'#ffffff'
-  (end code)
-*/
-$.rgbToHex = function(srcArray, array) {
-  if (srcArray.length < 3)
-    return null;
-  if (srcArray.length == 4 && srcArray[3] == 0 && !array)
-    return 'transparent';
-  var hex = [];
-  for ( var i = 0; i < 3; i++) {
-    var bit = (srcArray[i] - 0).toString(16);
-    hex.push(bit.length == 1 ? '0' + bit : bit);
-  }
-  return array ? hex : '#' + hex.join('');
-};
-
-/*
-  Method: hexToRgb
-
-  Converts an Hex color string into an RGB array.
-
-  Parameters:
-
-  hex - (string) A color hex string.
-
-  Example:
-  (start code js)
-  $jit.util.hexToRgb('#fff'); //[255, 255, 255]
-  (end code)
-*/
-$.hexToRgb = function(hex) {
-  if (hex.length != 7) {
-    hex = hex.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
-    hex.shift();
-    if (hex.length != 3)
-      return null;
-    var rgb = [];
-    for ( var i = 0; i < 3; i++) {
-      var value = hex[i];
-      if (value.length == 1)
-        value += value;
-      rgb.push(parseInt(value, 16));
-    }
-    return rgb;
-  } else {
-    hex = parseInt(hex.slice(1), 16);
-    return [ hex >> 16, hex >> 8 & 0xff, hex & 0xff ];
-  }
-};
-
-$.destroy = function(elem) {
-  $.clean(elem);
-  if (elem.parentNode)
-    elem.parentNode.removeChild(elem);
-  if (elem.clearAttributes)
-    elem.clearAttributes();
-};
-
-$.clean = function(elem) {
-  for (var ch = elem.childNodes, i = 0, l = ch.length; i < l; i++) {
-    $.destroy(ch[i]);
-  }
-};
-
-/*
-  Method: addEvent
-
-  Cross-browser add event listener.
-
-  Parameters:
-
-  obj - (obj) The Element to attach the listener to.
-  type - (string) The listener type. For example 'click', or 'mousemove'.
-  fn - (function) The callback function to be used when the event is fired.
-
-  Example:
-  (start code js)
-  $jit.util.addEvent(elem, 'click', function(){ alert('hello'); });
-  (end code)
-*/
-$.addEvent = function(obj, type, fn) {
-  if (obj.addEventListener)
-    obj.addEventListener(type, fn, false);
-  else
-    obj.attachEvent('on' + type, fn);
-};
-
-$.addEvents = function(obj, typeObj) {
-  for(var type in typeObj) {
-    $.addEvent(obj, type, typeObj[type]);
-  }
-};
-
-$.hasClass = function(obj, klass) {
-  return (' ' + obj.className + ' ').indexOf(' ' + klass + ' ') > -1;
-};
-
-$.addClass = function(obj, klass) {
-  if (!$.hasClass(obj, klass))
-    obj.className = (obj.className + " " + klass);
-};
-
-$.removeClass = function(obj, klass) {
-  obj.className = obj.className.replace(new RegExp(
-      '(^|\\s)' + klass + '(?:\\s|$)'), '$1');
-};
-
-$.getPos = function(elem) {
-  var offset = getOffsets(elem);
-  var scroll = getScrolls(elem);
-  return {
-    x: offset.x - scroll.x,
-    y: offset.y - scroll.y
-  };
-
-  function getOffsets(elem) {
-    var position = {
-      x: 0,
-      y: 0
-    };
-    while (elem && !isBody(elem)) {
-      position.x += elem.offsetLeft;
-      position.y += elem.offsetTop;
-      elem = elem.offsetParent;
-    }
-    return position;
-  }
-
-  function getScrolls(elem) {
-    var position = {
-      x: 0,
-      y: 0
-    };
-    while (elem && !isBody(elem)) {
-      position.x += elem.scrollLeft;
-      position.y += elem.scrollTop;
-      elem = elem.parentNode;
-    }
-    return position;
-  }
-
-  function isBody(element) {
-    return (/^(?:body|html)$/i).test(element.tagName);
-  }
-};
-
-$.event = {
-  get: function(e, win) {
-    win = win || window;
-    return e || win.event;
-  },
-  getWheel: function(e) {
-    return e.wheelDelta? e.wheelDelta / 120 : -(e.detail || 0) / 3;
-  },
-  isRightClick: function(e) {
-    return (e.which == 3 || e.button == 2);
-  },
-  getPos: function(e, win) {
-    // get mouse position
-    win = win || window;
-    e = e || win.event;
-    var doc = win.document;
-    doc = doc.documentElement || doc.body;
-    //TODO(nico): make touch event handling better
-    if(e.touches && e.touches.length) {
-      e = e.touches[0];
-    }
-    var page = {
-      x: e.pageX || (e.clientX + doc.scrollLeft),
-      y: e.pageY || (e.clientY + doc.scrollTop)
-    };
-    return page;
-  },
-  stop: function(e) {
-    if (e.stopPropagation) e.stopPropagation();
-    e.cancelBubble = true;
-    if (e.preventDefault) e.preventDefault();
-    else e.returnValue = false;
-  }
-};
-
-$jit.util = $jit.id = $;
-
-var Class = function(properties) {
-  properties = properties || {};
-  var klass = function() {
-    for ( var key in this) {
-      if (typeof this[key] != 'function')
-        this[key] = $.unlink(this[key]);
-    }
-    this.constructor = klass;
-    if (Class.prototyping)
-      return this;
-    var instance = this.initialize ? this.initialize.apply(this, arguments)
-        : this;
-    //typize
-    this.$$family = 'class';
-    return instance;
-  };
-
-  for ( var mutator in Class.Mutators) {
-    if (!properties[mutator])
-      continue;
-    properties = Class.Mutators[mutator](properties, properties[mutator]);
-    delete properties[mutator];
-  }
-
-  $.extend(klass, this);
-  klass.constructor = Class;
-  klass.prototype = properties;
-  return klass;
-};
-
-Class.Mutators = {
-
-  Implements: function(self, klasses) {
-    $.each($.splat(klasses), function(klass) {
-      Class.prototyping = klass;
-      var instance = (typeof klass == 'function') ? new klass : klass;
-      for ( var prop in instance) {
-        if (!(prop in self)) {
-          self[prop] = instance[prop];
-        }
-      }
-      delete Class.prototyping;
-    });
-    return self;
-  }
-
-};
-
-$.extend(Class, {
-
-  inherit: function(object, properties) {
-    for ( var key in properties) {
-      var override = properties[key];
-      var previous = object[key];
-      var type = $.type(override);
-      if (previous && type == 'function') {
-        if (override != previous) {
-          Class.override(object, key, override);
-        }
-      } else if (type == 'object') {
-        object[key] = $.merge(previous, override);
-      } else {
-        object[key] = override;
-      }
-    }
-    return object;
-  },
-
-  override: function(object, name, method) {
-    var parent = Class.prototyping;
-    if (parent && object[name] != parent[name])
-      parent = null;
-    var override = function() {
-      var previous = this.parent;
-      this.parent = parent ? parent[name] : object[name];
-      var value = method.apply(this, arguments);
-      this.parent = previous;
-      return value;
-    };
-    object[name] = override;
-  }
-
-});
-
-Class.prototype.implement = function() {
-  var proto = this.prototype;
-  $.each(Array.prototype.slice.call(arguments || []), function(properties) {
-    Class.inherit(proto, properties);
-  });
-  return this;
-};
-
-$jit.Class = Class;
-
-/*
-  Object: $jit.json
-
-  Provides JSON utility functions.
-
-  Most of these functions are JSON-tree traversal and manipulation functions.
-*/
-$jit.json = {
-  /*
-     Method: prune
-
-     Clears all tree nodes having depth greater than maxLevel.
-
-     Parameters:
-
-        tree - (object) A JSON tree object. For more information please see <Loader.loadJSON>.
-        maxLevel - (number) An integer specifying the maximum level allowed for this tree. All nodes having depth greater than max level will be deleted.
-
-  */
-  prune: function(tree, maxLevel) {
-    this.each(tree, function(elem, i) {
-      if (i == maxLevel && elem.children) {
-        delete elem.children;
-        elem.children = [];
-      }
-    });
-  },
-  /*
-     Method: getParent
-
-     Returns the parent node of the node having _id_ as id.
-
-     Parameters:
-
-        tree - (object) A JSON tree object. See also <Loader.loadJSON>.
-        id - (string) The _id_ of the child node whose parent will be returned.
-
-    Returns:
-
-        A tree JSON node if any, or false otherwise.
-
-  */
-  getParent: function(tree, id) {
-    if (tree.id == id)
-      return false;
-    var ch = tree.children;
-    if (ch && ch.length > 0) {
-      for ( var i = 0; i < ch.length; i++) {
-        if (ch[i].id == id)
-          return tree;
-        else {
-          var ans = this.getParent(ch[i], id);
-          if (ans)
-            return ans;
-        }
-      }
-    }
-    return false;
-  },
-  /*
-     Method: getSubtree
-
-     Returns the subtree that matches the given id.
-
-     Parameters:
-
-        tree - (object) A JSON tree object. See also <Loader.loadJSON>.
-        id - (string) A node *unique* identifier.
-
-     Returns:
-
-        A subtree having a root node matching the given id. Returns null if no subtree matching the id is found.
-
-  */
-  getSubtree: function(tree, id) {
-    if (tree.id == id)
-      return tree;
-    for ( var i = 0, ch = tree.children; ch && i < ch.length; i++) {
-      var t = this.getSubtree(ch[i], id);
-      if (t != null)
-        return t;
-    }
-    return null;
-  },
-  /*
-     Method: eachLevel
-
-      Iterates on tree nodes with relative depth less or equal than a specified level.
-
-     Parameters:
-
-        tree - (object) A JSON tree or subtree. See also <Loader.loadJSON>.
-        initLevel - (number) An integer specifying the initial relative level. Usually zero.
-        toLevel - (number) An integer specifying a top level. This method will iterate only through nodes with depth less than or equal this number.
-        action - (function) A function that receives a node and an integer specifying the actual level of the node.
-
-    Example:
-   (start code js)
-     $jit.json.eachLevel(tree, 0, 3, function(node, depth) {
-        alert(node.name + ' ' + depth);
-     });
-   (end code)
-  */
-  eachLevel: function(tree, initLevel, toLevel, action) {
-    if (initLevel <= toLevel) {
-      action(tree, initLevel);
-      if(!tree.children) return;
-      for ( var i = 0, ch = tree.children; i < ch.length; i++) {
-        this.eachLevel(ch[i], initLevel + 1, toLevel, action);
-      }
-    }
-  },
-  /*
-     Method: each
-
-      A JSON tree iterator.
-
-     Parameters:
-
-        tree - (object) A JSON tree or subtree. See also <Loader.loadJSON>.
-        action - (function) A function that receives a node.
-
-    Example:
-    (start code js)
-      $jit.json.each(tree, function(node) {
-        alert(node.name);
-      });
-    (end code)
-
-  */
-  each: function(tree, action) {
-    this.eachLevel(tree, 0, Number.MAX_VALUE, action);
-  }
-};
-
-
-/*
-     An object containing multiple type of transformations. 
-*/
-
-$jit.Trans = {
-  $extend: true,
-  
-  linear: function(p){
-    return p;
-  }
-};
-
-var Trans = $jit.Trans;
-
-(function(){
-
-  var makeTrans = function(transition, params){
-    params = $.splat(params);
-    return $.extend(transition, {
-      easeIn: function(pos){
-        return transition(pos, params);
-      },
-      easeOut: function(pos){
-        return 1 - transition(1 - pos, params);
-      },
-      easeInOut: function(pos){
-        return (pos <= 0.5)? transition(2 * pos, params) / 2 : (2 - transition(
-            2 * (1 - pos), params)) / 2;
-      }
-    });
-  };
-
-  var transitions = {
-
-    Pow: function(p, x){
-      return Math.pow(p, x[0] || 6);
-    },
-
-    Expo: function(p){
-      return Math.pow(2, 8 * (p - 1));
-    },
-
-    Circ: function(p){
-      return 1 - Math.sin(Math.acos(p));
-    },
-
-    Sine: function(p){
-      return 1 - Math.sin((1 - p) * Math.PI / 2);
-    },
-
-    Back: function(p, x){
-      x = x[0] || 1.618;
-      return Math.pow(p, 2) * ((x + 1) * p - x);
-    },
-
-    Bounce: function(p){
-      var value;
-      for ( var a = 0, b = 1; 1; a += b, b /= 2) {
-        if (p >= (7 - 4 * a) / 11) {
-          value = b * b - Math.pow((11 - 6 * a - 11 * p) / 4, 2);
-          break;
-        }
-      }
-      return value;
-    },
-
-    Elastic: function(p, x){
-      return Math.pow(2, 10 * --p)
-          * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
-    }
-
-  };
-
-  $.each(transitions, function(val, key){
-    Trans[key] = makeTrans(val);
-  });
-
-  $.each( [
-      'Quad', 'Cubic', 'Quart', 'Quint'
-  ], function(elem, i){
-    Trans[elem] = makeTrans(function(p){
-      return Math.pow(p, [
-        i + 2
-      ]);
-    });
-  });
-
-})();
-
-/*
-   A Class that can perform animations for generic objects.
-
-   If you are looking for animation transitions please take a look at the <Trans> object.
-
-   Used by:
-
-   <Graph.Plot>
-   
-   Based on:
-   
-   The Animation class is based in the MooTools Framework <http://mootools.net>. Copyright (c) 2006-2009 Valerio Proietti, <http://mad4milk.net/>. MIT license <http://mootools.net/license.txt>.
-
-*/
-
-var Animation = new Class( {
-
-  initialize: function(options){
-    this.setOptions(options);
-  },
-
-  setOptions: function(options){
-    var opt = {
-      duration: 2500,
-      fps: 40,
-      transition: Trans.Quart.easeInOut,
-      compute: $.empty,
-      complete: $.empty,
-      link: 'ignore'
-    };
-    this.opt = $.merge(opt, options || {});
-    return this;
-  },
-
-  step: function(){
-    var time = $.time(), opt = this.opt;
-    if (time < this.time + opt.duration) {
-      var delta = opt.transition((time - this.time) / opt.duration);
-      opt.compute(delta);
-    } else {
-      this.timer = clearInterval(this.timer);
-      opt.compute(1);
-      opt.complete();
-    }
-  },
-
-  start: function(){
-    if (!this.check())
-      return this;
-    this.time = 0;
-    this.startTimer();
-    return this;
-  },
-
-  startTimer: function(){
-    var that = this, fps = this.opt.fps;
-    if (this.timer)
-      return false;
-    this.time = $.time() - this.time;
-    this.timer = setInterval((function(){
-      that.step();
-    }), Math.round(1000 / fps));
-    return true;
-  },
-
-  pause: function(){
-    this.stopTimer();
-    return this;
-  },
-
-  resume: function(){
-    this.startTimer();
-    return this;
-  },
-
-  stopTimer: function(){
-    if (!this.timer)
-      return false;
-    this.time = $.time() - this.time;
-    this.timer = clearInterval(this.timer);
-    return true;
-  },
-
-  check: function(){
-    if (!this.timer)
-      return true;
-    if (this.opt.link == 'cancel') {
-      this.stopTimer();
-      return true;
-    }
-    return false;
-  }
-});
-
-
-var Options = function() {
-  var args = arguments;
-  for(var i=0, l=args.length, ans={}; i<l; i++) {
-    var opt = Options[args[i]];
-    if(opt.$extend) {
-      $.extend(ans, opt);
-    } else {
-      ans[args[i]] = opt;  
-    }
-  }
-  return ans;
-};
-
-/*
- * File: Options.Canvas.js
- *
-*/
-
-/*
-  Object: Options.Canvas
-  
-  These are Canvas general options, like where to append it in the DOM, its dimensions, background, 
-  and other more advanced options.
-  
-  Syntax:
-  
-  (start code js)
-
-  Options.Canvas = {
-    injectInto: 'id',
-    type: '2D', //'3D'
-    width: false,
-    height: false,
-    useCanvas: false,
-    withLabels: true,
-    background: false
-  };  
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    injectInto: 'someContainerId',
-    width: 500,
-    height: 700
-  });
-  (end code)
-  
-  Parameters:
-  
-  injectInto - *required* (string|element) The id of the DOM container for the visualization. It can also be an Element provided that it has an id.
-  type - (string) Context type. Default's 2D but can be 3D for webGL enabled browsers.
-  width - (number) Default's to the *container's offsetWidth*. The width of the canvas.
-  height - (number) Default's to the *container's offsetHeight*. The height of the canvas.
-  useCanvas - (boolean|object) Default's *false*. You can pass another <Canvas> instance to be used by the visualization.
-  withLabels - (boolean) Default's *true*. Whether to use a label container for the visualization.
-  background - (boolean|object) Default's *false*. An object containing information about the rendering of a background canvas.
-*/
-
-Options.Canvas = {
-    $extend: true,
-    
-    injectInto: 'id',
-    type: '2D',
-    width: false,
-    height: false,
-    useCanvas: false,
-    withLabels: true,
-    background: false,
-    
-    Scene: {
-      Lighting: {
-        enable: false,
-        ambient: [1, 1, 1],
-        directional: {
-          direction: { x: -100, y: -100, z: -100 },
-          color: [0.5, 0.3, 0.1]
-        }
-      }
-    }
-};
-
-/*
- * File: Options.Tree.js
- *
-*/
-
-/*
-  Object: Options.Tree
-
-  Options related to (strict) Tree layout algorithms. These options are used by the <ST> visualization.
-
-  Syntax:
-
-  (start code js)
-  Options.Tree = {
-    orientation: "left",
-    subtreeOffset: 8,
-    siblingOffset: 5,
-    indent:10,
-    multitree: false,
-    align:"center"
-  };
-  (end code)
-
-  Example:
-
-  (start code js)
-  var st = new $jit.ST({
-    orientation: 'left',
-    subtreeOffset: 1,
-    siblingOFfset: 5,
-    multitree: true
-  });
-  (end code)
-
-  Parameters:
-
-  subtreeOffset - (number) Default's 8. Separation offset between subtrees.
-  siblingOffset - (number) Default's 5. Separation offset between siblings.
-  orientation - (string) Default's 'left'. Tree orientation layout. Possible values are 'left', 'top', 'right', 'bottom'.
-  align - (string) Default's *center*. Whether the tree alignment is 'left', 'center' or 'right'.
-  indent - (number) Default's 10. Used when *align* is left or right and shows an indentation between parent and children.
-  multitree - (boolean) Default's *false*. Used with the node $orn data property for creating multitrees.
-  levelSpacing - (string) Whether each level is evenly spaced or level spacing is relative tothe size of the parent node. The former (which is the default) is 'even', the latter is 'parent'.
-
-*/
-Options.Tree = {
-    $extend: true,
-
-    orientation: "left",
-    subtreeOffset: 8,
-    siblingOffset: 5,
-    indent:10,
-    multitree: false,
-    align:"center",
-    levelSpacing: "even"
-};
-
-
-/*
- * File: Options.Node.js
- *
-*/
-
-/*
-  Object: Options.Node
-
-  Provides Node rendering options for Tree and Graph based visualizations.
-
-  Syntax:
-    
-  (start code js)
-  Options.Node = {
-    overridable: false,
-    type: 'circle',
-    color: '#ccb',
-    alpha: 1,
-    dim: 3,
-    height: 20,
-    width: 90,
-    autoHeight: false,
-    autoWidth: false,
-    lineWidth: 1,
-    transform: true,
-    align: "center",
-    angularWidth:1,
-    span:1,
-    CanvasStyles: {}
-  };
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    Node: {
-      overridable: true,
-      width: 30,
-      autoHeight: true,
-      type: 'rectangle'
-    }
-  });
-  (end code)
-  
-  Parameters:
-
-  overridable - (boolean) Default's *false*. Determine whether or not general node properties can be overridden by a particular <Graph.Node>.
-  type - (string) Default's *circle*. Node's shape. Node built-in types include 'circle', 'rectangle', 'square', 'ellipse', 'triangle', 'star'. The default Node type might vary in each visualization. You can also implement (non built-in) custom Node types into your visualizations.
-  color - (string) Default's *#ccb*. Node color.
-  alpha - (number) Default's *1*. The Node's alpha value. *1* is for full opacity.
-  dim - (number) Default's *3*. An extra parameter used by 'circle', 'square', 'triangle' and 'star' node types. Depending on each shape, this parameter can set the radius of a circle, half the length of the side of a square, half the base and half the height of a triangle or the length of a side of a star (concave decagon).
-  height - (number) Default's *20*. Used by 'rectangle' and 'ellipse' node types. The height of the node shape.
-  width - (number) Default's *90*. Used by 'rectangle' and 'ellipse' node types. The width of the node shape.
-  autoHeight - (boolean) Default's *false*. Whether to set an auto height for the node depending on the content of the Node's label.
-  autoWidth - (boolean) Default's *false*. Whether to set an auto width for the node depending on the content of the Node's label.
-  lineWidth - (number) Default's *1*. Used only by some Node shapes. The line width of the strokes of a node.
-  transform - (boolean) Default's *true*. Only used by the <Hypertree> visualization. Whether to scale the nodes according to the moebius transformation.
-  align - (string) Default's *center*. Possible values are 'center', 'left' or 'right'. Used only by the <ST> visualization, these parameters are used for aligning nodes when some of they dimensions vary.
-  angularWidth - (number) Default's *1*. Used in radial layouts (like <RGraph> or <Sunburst> visualizations). The amount of relative 'space' set for a node.
-  span - (number) Default's *1*. Used in radial layouts (like <RGraph> or <Sunburst> visualizations). The angle span amount set for a node.
-  CanvasStyles - (object) Default's an empty object (i.e. {}). Attach any other canvas specific property that you'd set to the canvas context before plotting a Node.
-
-*/
-Options.Node = {
-  $extend: false,
-  
-  overridable: false,
-  type: 'circle',
-  color: '#ccb',
-  alpha: 1,
-  dim: 3,
-  height: 20,
-  width: 90,
-  autoHeight: false,
-  autoWidth: false,
-  lineWidth: 1,
-  transform: true,
-  align: "center",
-  angularWidth:1,
-  span:1,
-  //Raw canvas styles to be
-  //applied to the context instance
-  //before plotting a node
-  CanvasStyles: {}
-};
-
-
-/*
- * File: Options.Edge.js
- *
-*/
-
-/*
-  Object: Options.Edge
-
-  Provides Edge rendering options for Tree and Graph based visualizations.
-
-  Syntax:
-    
-  (start code js)
-  Options.Edge = {
-    overridable: false,
-    type: 'line',
-    color: '#ccb',
-    lineWidth: 1,
-    dim:15,
-    alpha: 1,
-    CanvasStyles: {}
-  };
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    Edge: {
-      overridable: true,
-      type: 'line',
-      color: '#fff',
-      CanvasStyles: {
-        shadowColor: '#ccc',
-        shadowBlur: 10
-      }
-    }
-  });
-  (end code)
-  
-  Parameters:
-    
-   overridable - (boolean) Default's *false*. Determine whether or not general edges properties can be overridden by a particular <Graph.Adjacence>.
-   type - (string) Default's 'line'. Edge styles include 'line', 'hyperline', 'arrow'. The default Edge type might vary in each visualization. You can also implement custom Edge types.
-   color - (string) Default's '#ccb'. Edge color.
-   lineWidth - (number) Default's *1*. Line/Edge width.
-   alpha - (number) Default's *1*. The Edge's alpha value. *1* is for full opacity.
-   dim - (number) Default's *15*. An extra parameter used by other complex shapes such as quadratic, bezier or arrow, to determine the shape's diameter.
-   epsilon - (number) Default's *7*. Only used when using *enableForEdges* in <Options.Events>. This dimension is used to create an area for the line where the contains method for the edge returns *true*.
-   CanvasStyles - (object) Default's an empty object (i.e. {}). Attach any other canvas specific property that you'd set to the canvas context before plotting an Edge.
-
-  See also:
-   
-   If you want to know more about how to customize Node/Edge data per element, in the JSON or programmatically, take a look at this article.
-*/
-Options.Edge = {
-  $extend: false,
-  
-  overridable: false,
-  type: 'line',
-  color: '#ccb',
-  lineWidth: 1,
-  dim:15,
-  alpha: 1,
-  epsilon: 7,
-
-  //Raw canvas styles to be
-  //applied to the context instance
-  //before plotting an edge
-  CanvasStyles: {}
-};
-
-
-/*
- * File: Options.Fx.js
- *
-*/
-
-/*
-  Object: Options.Fx
-
-  Provides animation options like duration of the animations, frames per second and animation transitions.  
-
-  Syntax:
-  
-  (start code js)
-    Options.Fx = {
-      fps:40,
-      duration: 2500,
-      transition: $jit.Trans.Quart.easeInOut,
-      clearCanvas: true
-    };
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    duration: 1000,
-    fps: 35,
-    transition: $jit.Trans.linear
-  });
-  (end code)
-  
-  Parameters:
-  
-  clearCanvas - (boolean) Default's *true*. Whether to clear the frame/canvas when the viz is plotted or animated.
-  duration - (number) Default's *2500*. Duration of the animation in milliseconds.
-  fps - (number) Default's *40*. Frames per second.
-  transition - (object) Default's *$jit.Trans.Quart.easeInOut*. The transition used for the animations. See below for a more detailed explanation.
-  
-  Object: $jit.Trans
-  
-  This object is used for specifying different animation transitions in all visualizations.
-
-  There are many different type of animation transitions.
-
-  linear:
-
-  Displays a linear transition
-
-  >Trans.linear
-  
-  (see Linear.png)
-
-  Quad:
-
-  Displays a Quadratic transition.
-
-  >Trans.Quad.easeIn
-  >Trans.Quad.easeOut
-  >Trans.Quad.easeInOut
-  
- (see Quad.png)
-
- Cubic:
-
- Displays a Cubic transition.
-
- >Trans.Cubic.easeIn
- >Trans.Cubic.easeOut
- >Trans.Cubic.easeInOut
-
- (see Cubic.png)
-
- Quart:
-
- Displays a Quartetic transition.
-
- >Trans.Quart.easeIn
- >Trans.Quart.easeOut
- >Trans.Quart.easeInOut
-
- (see Quart.png)
-
- Quint:
-
- Displays a Quintic transition.
-
- >Trans.Quint.easeIn
- >Trans.Quint.easeOut
- >Trans.Quint.easeInOut
-
- (see Quint.png)
-
- Expo:
-
- Displays an Exponential transition.
-
- >Trans.Expo.easeIn
- >Trans.Expo.easeOut
- >Trans.Expo.easeInOut
-
- (see Expo.png)
-
- Circ:
-
- Displays a Circular transition.
-
- >Trans.Circ.easeIn
- >Trans.Circ.easeOut
- >Trans.Circ.easeInOut
-
- (see Circ.png)
-
- Sine:
-
- Displays a Sineousidal transition.
-
- >Trans.Sine.easeIn
- >Trans.Sine.easeOut
- >Trans.Sine.easeInOut
-
- (see Sine.png)
-
- Back:
-
- >Trans.Back.easeIn
- >Trans.Back.easeOut
- >Trans.Back.easeInOut
-
- (see Back.png)
-
- Bounce:
-
- Bouncy transition.
-
- >Trans.Bounce.easeIn
- >Trans.Bounce.easeOut
- >Trans.Bounce.easeInOut
-
- (see Bounce.png)
-
- Elastic:
-
- Elastic curve.
-
- >Trans.Elastic.easeIn
- >Trans.Elastic.easeOut
- >Trans.Elastic.easeInOut
-
- (see Elastic.png)
- 
- Based on:
-     
- Easing and Transition animation methods are based in the MooTools Framework <http://mootools.net>. Copyright (c) 2006-2010 Valerio Proietti, <http://mad4milk.net/>. MIT license <http://mootools.net/license.txt>.
-
-
-*/
-Options.Fx = {
-  $extend: true,
-  
-  fps:40,
-  duration: 2500,
-  transition: $jit.Trans.Quart.easeInOut,
-  clearCanvas: true
-};
-
-/*
- * File: Options.Label.js
- *
-*/
-/*
-  Object: Options.Label
-
-  Provides styling for Labels such as font size, family, etc. Also sets Node labels as HTML, SVG or Native canvas elements.  
-
-  Syntax:
-  
-  (start code js)
-    Options.Label = {
-      overridable: false,
-      type: 'HTML', //'SVG', 'Native'
-      style: ' ',
-      size: 10,
-      family: 'sans-serif',
-      textAlign: 'center',
-      textBaseline: 'alphabetic',
-      color: '#fff'
-    };
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    Label: {
-      type: 'Native',
-      size: 11,
-      color: '#ccc'
-    }
-  });
-  (end code)
-  
-  Parameters:
-    
-  overridable - (boolean) Default's *false*. Determine whether or not general label properties can be overridden by a particular <Graph.Node>.
-  type - (string) Default's *HTML*. The type for the labels. Can be 'HTML', 'SVG' or 'Native' canvas labels.
-  style - (string) Default's *empty string*. Can be 'italic' or 'bold'. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
-  size - (number) Default's *10*. The font's size. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
-  family - (string) Default's *sans-serif*. The font's family. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
-  color - (string) Default's *#fff*. The font's color. This parameter is only taken into account when using 'Native' canvas labels. For DOM based labels the className *node* is added to the DOM element for styling via CSS. You can also use <Options.Controller> methods to style individual labels.
-*/
-Options.Label = {
-  $extend: false,
-  
-  overridable: false,
-  type: 'HTML', //'SVG', 'Native'
-  style: ' ',
-  size: 10,
-  family: 'sans-serif',
-  textAlign: 'center',
-  textBaseline: 'alphabetic',
-  color: '#fff'
-};
-
-
-/*
- * File: Options.Tips.js
- *
- */
-
-/*
-  Object: Options.Tips
-  
-  Tips options
-  
-  Syntax:
-    
-  (start code js)
-  Options.Tips = {
-    enable: false,
-    type: 'auto',
-    offsetX: 20,
-    offsetY: 20,
-    onShow: $.empty,
-    onHide: $.empty
-  };
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    Tips: {
-      enable: true,
-      type: 'Native',
-      offsetX: 10,
-      offsetY: 10,
-      onShow: function(tip, node) {
-        tip.innerHTML = node.name;
-      }
-    }
-  });
-  (end code)
-
-  Parameters:
-
-  enable - (boolean) Default's *false*. If *true*, a tooltip will be shown when a node is hovered. The tooltip is a div DOM element having "tip" as CSS class. 
-  type - (string) Default's *auto*. Defines where to attach the MouseEnter/Leave tooltip events. Possible values are 'Native' to attach them to the canvas or 'HTML' to attach them to DOM label elements (if defined). 'auto' sets this property to the value of <Options.Label>'s *type* property.
-  offsetX - (number) Default's *20*. An offset added to the current tooltip x-position (which is the same as the current mouse position). Default's 20.
-  offsetY - (number) Default's *20*. An offset added to the current tooltip y-position (which is the same as the current mouse position). Default's 20.
-  onShow(tip, node) - This callack is used right before displaying a tooltip. The first formal parameter is the tip itself (which is a DivElement). The second parameter may be a <Graph.Node> for graph based visualizations or an object with label, value properties for charts.
-  onHide() - This callack is used when hiding a tooltip.
-
-*/
-Options.Tips = {
-  $extend: false,
-  
-  enable: false,
-  type: 'auto',
-  offsetX: 20,
-  offsetY: 20,
-  force: false,
-  onShow: $.empty,
-  onHide: $.empty
-};
-
-
-/*
- * File: Options.NodeStyles.js
- *
- */
-
-/*
-  Object: Options.NodeStyles
-  
-  Apply different styles when a node is hovered or selected.
-  
-  Syntax:
-    
-  (start code js)
-  Options.NodeStyles = {
-    enable: false,
-    type: 'auto',
-    stylesHover: false,
-    stylesClick: false
-  };
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    NodeStyles: {
-      enable: true,
-      type: 'Native',
-      stylesHover: {
-        dim: 30,
-        color: '#fcc'
-      },
-      duration: 600
-    }
-  });
-  (end code)
-
-  Parameters:
-  
-  enable - (boolean) Default's *false*. Whether to enable this option.
-  type - (string) Default's *auto*. Use this to attach the hover/click events in the nodes or the nodes labels (if they have been defined as DOM elements: 'HTML' or 'SVG', see <Options.Label> for more details). The default 'auto' value will set NodeStyles to the same type defined for <Options.Label>.
-  stylesHover - (boolean|object) Default's *false*. An object with node styles just like the ones defined for <Options.Node> or *false* otherwise.
-  stylesClick - (boolean|object) Default's *false*. An object with node styles just like the ones defined for <Options.Node> or *false* otherwise.
-*/
-
-Options.NodeStyles = {
-  $extend: false,
-  
-  enable: false,
-  type: 'auto',
-  stylesHover: false,
-  stylesClick: false
-};
-
-
-/*
- * File: Options.Events.js
- *
-*/
-
-/*
-  Object: Options.Events
-  
-  Configuration for adding mouse/touch event handlers to Nodes.
-  
-  Syntax:
-  
-  (start code js)
-  Options.Events = {
-    enable: false,
-    enableForEdges: false,
-    type: 'auto',
-    onClick: $.empty,
-    onRightClick: $.empty,
-    onMouseMove: $.empty,
-    onMouseEnter: $.empty,
-    onMouseLeave: $.empty,
-    onDragStart: $.empty,
-    onDragMove: $.empty,
-    onDragCancel: $.empty,
-    onDragEnd: $.empty,
-    onTouchStart: $.empty,
-    onTouchMove: $.empty,
-    onTouchEnd: $.empty,
-    onTouchCancel: $.empty,
-    onMouseWheel: $.empty
-  };
-  (end code)
-  
-  Example:
-  
-  (start code js)
-  var viz = new $jit.Viz({
-    Events: {
-      enable: true,
-      onClick: function(node, eventInfo, e) {
-        viz.doSomething();
-      },
-      onMouseEnter: function(node, eventInfo, e) {
-        viz.canvas.getElement().style.cursor = 'pointer';
-      },
-      onMouseLeave: function(node, eventInfo, e) {
-        viz.canvas.getElement().style.cursor = '';
-      }
-    }
-  });
-  (end code)
-  
-  Parameters:
-  
-  enable - (boolean) Default's *false*. Whether to enable the Event system.
-  enableForEdges - (boolean) Default's *false*. Whether to track events also in arcs. If *true* the same callbacks -described below- are used for nodes *and* edges. A simple duck type check for edges is to check for *node.nodeFrom*.
-  type - (string) Default's 'auto'. Whether to attach the events onto the HTML labels (via event delegation) or to use the custom 'Native' canvas Event System of the library. 'auto' is set when you let the <Options.Label> *type* parameter decide this.
-  onClick(node, eventInfo, e) - Triggered when a user performs a click in the canvas. *node* is the <Graph.Node> clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onRightClick(node, eventInfo, e) - Triggered when a user performs a right click in the canvas. *node* is the <Graph.Node> right clicked or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onMouseMove(node, eventInfo, e) - Triggered when the user moves the mouse. *node* is the <Graph.Node> under the cursor as it's moving over the canvas or false if no node has been clicked. *e* is the grabbed event (should return the native event in a cross-browser manner).  *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas.
-  onMouseEnter(node, eventInfo, e) - Triggered when a user moves the mouse over a node. *node* is the <Graph.Node> that the mouse just entered. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onMouseLeave(node, eventInfo, e) - Triggered when the user mouse-outs a node. *node* is the <Graph.Node> 'mouse-outed'. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onDragStart(node, eventInfo, e) - Triggered when the user mouse-downs over a node. *node* is the <Graph.Node> being pressed. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onDragMove(node, eventInfo, e) - Triggered when a user, after pressing the mouse button over a node, moves the mouse around. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onDragEnd(node, eventInfo, e) - Triggered when a user finished dragging a node. *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onDragCancel(node, eventInfo, e) - Triggered when the user releases the mouse button over a <Graph.Node> that wasn't dragged (i.e. the user didn't perform any mouse movement after pressing the mouse button). *node* is the <Graph.Node> being dragged. *e* is the grabbed event (should return the native event in a cross-browser manner). *eventInfo* is an object containing useful methods like *getPos* to get the mouse position relative to the canvas. 
-  onTouchStart(node, eventInfo, e) - Behaves just like onDragStart. 
-  onTouchMove(node, eventInfo, e) - Behaves just like onDragMove. 
-  onTouchEnd(node, eventInfo, e) - Behaves just like onDragEnd. 
-  onTouchCancel(node, eventInfo, e) - Behaves just like onDragCancel.
-  onMouseWheel(delta, e) - Triggered when the user uses the mouse scroll over the canvas. *delta* is 1 or -1 depending on the sense of the mouse scroll.
-*/
-
-Options.Events = {
-  $extend: false,
-  
-  enable: false,
-  enableForEdges: false,
-  type: 'auto',
-  onClick: $.empty,
-  onRightClick: $.empty,
-  onMouseMove: $.empty,
-  onMouseEnter: $.empty,
-  onMouseLeave: $.empty,
-  onDragStart: $.empty,
-  onDragMove: $.empty,
-  onDragCancel: $.empty,
-  onDragEnd: $.empty,
-  onTouchStart: $.empty,
-  onTouchMove: $.empty,
-  onTouchEnd: $.empty,
-  onTouchCancel: $.empty,
-  onMouseWheel: $.empty
-};
-
-
-/*
- * File: Options.Navigation.js
- *
-*/
-
-/*
-  Object: Options.Navigation
-  
-  Panning and zooming options for Graph/Tree based visualizations. These options are implemented 
-  by all visualizations except charts (<AreaChart>, <BarChart> and <PieChart>).
-  
-  Syntax:
-  
-  (start code js)
-
-  Options.Navigation = {
-    enable: false,
-    type: 'auto',
-    panning: false, //true, 'avoid nodes'
-    zooming: false
-  };
-  
-  (end code)
-  
-  Example:
-    
-  (start code js)
-  var viz = new $jit.Viz({
-    Navigation: {
-      enable: true,
-      panning: 'avoid nodes',
-      zooming: 20
-    }
-  });
-  (end code)
-  
-  Parameters:
-  
-  enable - (boolean) Default's *false*. Whether to enable Navigation capabilities.
-  type - (string) Default's 'auto'. Whether to attach the navigation events onto the HTML labels (via event delegation) or to use the custom 'Native' canvas Event System of the library. When 'auto' set when you let the <Options.Label> *type* parameter decide this.
-  panning - (boolean|string) Default's *false*. Set this property to *true* if you want to add Drag and Drop panning support to the visualization. You can also set this parameter to 'avoid nodes' to enable DnD panning but disable it if the DnD is taking place over a node. This is useful when some other events like Drag & Drop for nodes are added to <Graph.Nodes>.
-  zooming - (boolean|number) Default's *false*. Set this property to a numeric value to turn mouse-scroll zooming on. The number will be proportional to the mouse-scroll sensitivity.
-  
-*/
-
-Options.Navigation = {
-  $extend: false,
-  
-  enable: false,
-  type: 'auto',
-  panning: false, //true | 'avoid nodes'
-  zooming: false
-};
-
-/*
- * File: Options.Controller.js
- *
-*/
-
-/*
-  Object: Options.Controller
-  
-  Provides controller methods. Controller methods are callback functions that get called at different stages 
-  of the animation, computing or plotting of the visualization.
-  
-  Implemented by:
-    
-  All visualizations except charts (<AreaChart>, <BarChart> and <PieChart>).
-  
-  Syntax:
-  
-  (start code js)
-
-  Options.Controller = {
-    onBeforeCompute: $.empty,
-    onAfterCompute:  $.empty,
-    onCreateLabel:   $.empty,
-    onPlaceLabel:    $.empty,
-    onComplete:      $.empty,
-    onBeforePlotLine:$.empty,
-    onAfterPlotLine: $.empty,
-    onBeforePlotNode:$.empty,
-    onAfterPlotNode: $.empty,
-    request:         false
-  };
-  
-  (end code)
-  
-  Example:
-    
-  (start code js)
-  var viz = new $jit.Viz({
-    onBeforePlotNode: function(node) {
-      if(node.selected) {
-        node.setData('color', '#ffc');
-      } else {
-        node.removeData('color');
-      }
-    },
-    onBeforePlotLine: function(adj) {
-      if(adj.nodeFrom.selected && adj.nodeTo.selected) {
-        adj.setData('color', '#ffc');
-      } else {
-        adj.removeData('color');
-      }
-    },
-    onAfterCompute: function() {
-      alert("computed!");
-    }
-  });
-  (end code)
-  
-  Parameters:
-
-   onBeforeCompute(node) - This method is called right before performing all computations and animations. The selected <Graph.Node> is passed as parameter.
-   onAfterCompute() - This method is triggered after all animations or computations ended.
-   onCreateLabel(domElement, node) - This method receives a new label DIV element as first parameter, and the corresponding <Graph.Node> as second parameter. This method will only be called once for each label. This method is useful when adding events or styles to the labels used by the JIT.
-   onPlaceLabel(domElement, node) - This method receives a label DIV element as first parameter and the corresponding <Graph.Node> as second parameter. This method is called each time a label has been placed in the visualization, for example at each step of an animation, and thus it allows you to update the labels properties, such as size or position. Note that onPlaceLabel will be triggered after updating the labels positions. That means that, for example, the left and top css properties are already updated to match the nodes positions. Width and height properties are not set however.
-   onBeforePlotNode(node) - This method is triggered right before plotting each <Graph.Node>. This method is useful for changing a node style right before plotting it.
-   onAfterPlotNode(node) - This method is triggered right after plotting each <Graph.Node>.
-   onBeforePlotLine(adj) - This method is triggered right before plotting a <Graph.Adjacence>. This method is useful for adding some styles to a particular edge before being plotted.
-   onAfterPlotLine(adj) - This method is triggered right after plotting a <Graph.Adjacence>.
-   onBeforeRemoveNode(node) - This method is triggered right before removing each <Graph.Node>.
-   
-    *Used in <ST>, <TM.Base> and <Icicle> visualizations*
-    
-    request(nodeId, level, onComplete) - This method is used for buffering information into the visualization. When clicking on an empty node, the visualization will make a request for this node's subtrees, specifying a given level for this subtree (defined by _levelsToShow_). Once the request is completed, the onComplete callback should be called with the given result. This is useful to provide on-demand information into the visualizations withought having to load the entire information from start. The parameters used by this method are _nodeId_, which is the id of the root of the subtree to request, _level_ which is the depth of the subtree to be requested (0 would mean just the root node). _onComplete_ is an object having the callback method _onComplete.onComplete(json)_ that should be called once the json has been retrieved.  
- 
- */
-Options.Controller = {
-  $extend: true,
-  
-  onBeforeCompute:   $.empty,
-  onAfterCompute:    $.empty,
-  onCreateLabel:     $.empty,
-  onPlaceLabel:      $.empty,
-  onComplete:        $.empty,
-  onBeforePlotLine:  $.empty,
-  onAfterPlotLine:   $.empty,
-  onBeforePlotNode:  $.empty,
-  onAfterPlotNode:   $.empty,
-  onBeforeRemoveNode:$.empty,
-  request:         false
-};
-
-
-/*
- * File: Extras.js
- * 
- * Provides Extras such as Tips and Style Effects.
- * 
- * Description:
- * 
- * Provides the <Tips> and <NodeStyles> classes and functions.
- *
- */
-
-/*
- * Manager for mouse events (clicking and mouse moving).
- * 
- * This class is used for registering objects implementing onClick
- * and onMousemove methods. These methods are called when clicking or
- * moving the mouse around  the Canvas.
- * For now, <Tips> and <NodeStyles> are classes implementing these methods.
- * 
- */
-var ExtrasInitializer = {
-  initialize: function(className, viz) {
-    this.viz = viz;
-    this.canvas = viz.canvas;
-    this.config = viz.config[className];
-    this.nodeTypes = viz.fx.nodeTypes;
-    var type = this.config.type;
-    this.dom = type == 'auto'? (viz.config.Label.type != 'Native') : (type != 'Native');
-    this.labelContainer = this.dom && viz.labels.getLabelContainer();
-    this.isEnabled() && this.initializePost();
-  },
-  initializePost: $.empty,
-  setAsProperty: $.lambda(false),
-  isEnabled: function() {
-    return this.config.enable;
-  },
-  isLabel: function(e, win, group) {
-    e = $.event.get(e, win);
-    var labelContainer = this.labelContainer,
-        target = e.target || e.srcElement,
-        related = e.relatedTarget;
-    if(group) {
-      return related && related == this.viz.canvas.getCtx().canvas 
-          && !!target && this.isDescendantOf(target, labelContainer);
-    } else {
-      return this.isDescendantOf(target, labelContainer);
-    }
-  },
-  isDescendantOf: function(elem, par) {
-    while(elem && elem.parentNode) {
-      if(elem.parentNode == par)
-        return elem;
-      elem = elem.parentNode;
-    }
-    return false;
-  }
-};
-
-var EventsInterface = {
-  onMouseUp: $.empty,
-  onMouseDown: $.empty,
-  onMouseMove: $.empty,
-  onMouseOver: $.empty,
-  onMouseOut: $.empty,
-  onMouseWheel: $.empty,
-  onTouchStart: $.empty,
-  onTouchMove: $.empty,
-  onTouchEnd: $.empty,
-  onTouchCancel: $.empty
-};
-
-var MouseEventsManager = new Class({
-  initialize: function(viz) {
-    this.viz = viz;
-    this.canvas = viz.canvas;
-    this.node = false;
-    this.edge = false;
-    this.registeredObjects = [];
-    this.attachEvents();
-  },
-  
-  attachEvents: function() {
-    var htmlCanvas = this.canvas.getElement(), 
-        that = this;
-    htmlCanvas.oncontextmenu = $.lambda(false);
-    $.addEvents(htmlCanvas, {
-      'mouseup': function(e, win) {
-        var event = $.event.get(e, win);
-        that.handleEvent('MouseUp', e, win, 
-            that.makeEventObject(e, win), 
-            $.event.isRightClick(event));
-      },
-      'mousedown': function(e, win) {
-        var event = $.event.get(e, win);
-        that.handleEvent('MouseDown', e, win, that.makeEventObject(e, win), 
-            $.event.isRightClick(event));
-      },
-      'mousemove': function(e, win) {
-        that.handleEvent('MouseMove', e, win, that.makeEventObject(e, win));
-      },
-      'mouseover': function(e, win) {
-        that.handleEvent('MouseOver', e, win, that.makeEventObject(e, win));
-      },
-      'mouseout': function(e, win) {
-        that.handleEvent('MouseOut', e, win, that.makeEventObject(e, win));
-      },
-      'touchstart': function(e, win) {
-        that.handleEvent('TouchStart', e, win, that.makeEventObject(e, win));
-      },
-      'touchmove': function(e, win) {
-        that.handleEvent('TouchMove', e, win, that.makeEventObject(e, win));
-      },
-      'touchend': function(e, win) {
-        that.handleEvent('TouchEnd', e, win, that.makeEventObject(e, win));
-      }
-    });
-    //attach mousewheel event
-    var handleMouseWheel = function(e, win) {
-      var event = $.event.get(e, win);
-      var wheel = $.event.getWheel(event);
-      that.handleEvent('MouseWheel', e, win, wheel);
-    };
-    //TODO(nico): this is a horrible check for non-gecko browsers!
-    if(!document.getBoxObjectFor && window.mozInnerScreenX == null) {
-      $.addEvent(htmlCanvas, 'mousewheel', handleMouseWheel);
-    } else {
-      htmlCanvas.addEventListener('DOMMouseScroll', handleMouseWheel, false);
-    }
-  },
-  
-  register: function(obj) {
-    this.registeredObjects.push(obj);
-  },
-  
-  handleEvent: function() {
-    var args = Array.prototype.slice.call(arguments),
-        type = args.shift();
-    for(var i=0, regs=this.registeredObjects, l=regs.length; i<l; i++) {
-      regs[i]['on' + type].apply(regs[i], args);
-    }
-  },
-  
-  makeEventObject: function(e, win) {
-    var that = this,
-        graph = this.viz.graph,
-        fx = this.viz.fx,
-        ntypes = fx.nodeTypes,
-        etypes = fx.edgeTypes;
-    return {
-      pos: false,
-      node: false,
-      edge: false,
-      contains: false,
-      getNodeCalled: false,
-      getEdgeCalled: false,
-      getPos: function() {
-        //TODO(nico): check why this can't be cache anymore when using edge detection
-        //if(this.pos) return this.pos;
-        var canvas = that.viz.canvas,
-            s = canvas.getSize(),
-            p = canvas.getPos(),
-            ox = canvas.translateOffsetX,
-            oy = canvas.translateOffsetY,
-            sx = canvas.scaleOffsetX,
-            sy = canvas.scaleOffsetY,
-            pos = $.event.getPos(e, win);
-        this.pos = {
-          x: (pos.x - p.x - s.width/2 - ox) * 1/sx,
-          y: (pos.y - p.y - s.height/2 - oy) * 1/sy
-        };
-        return this.pos;
-      },
-      getNode: function() {
-        if(this.getNodeCalled) return this.node;
-        this.getNodeCalled = true;
-        for(var id in graph.nodes) {
-          var n = graph.nodes[id],
-              geom = n && ntypes[n.getData('type')],
-              contains = geom && geom.contains && geom.contains.call(fx, n, this.getPos());
-          if(contains) {
-            this.contains = contains;
-            return that.node = this.node = n;
-          }
-        }
-        return that.node = this.node = false;
-      },
-      getEdge: function() {
-        if(this.getEdgeCalled) return this.edge;
-        this.getEdgeCalled = true;
-        var hashset = {};
-        for(var id in graph.edges) {
-          var edgeFrom = graph.edges[id];
-          hashset[id] = true;
-          for(var edgeId in edgeFrom) {
-            if(edgeId in hashset) continue;
-            var e = edgeFrom[edgeId],
-                geom = e && etypes[e.getData('type')],
-                contains = geom && geom.contains && geom.contains.call(fx, e, this.getPos());
-            if(contains) {
-              this.contains = contains;
-              return that.edge = this.edge = e;
-            }
-          }
-        }
-        return that.edge = this.edge = false;
-      },
-      getContains: function() {
-        if(this.getNodeCalled) return this.contains;
-        this.getNode();
-        return this.contains;
-      }
-    };
-  }
-});
-
-/* 
- * Provides the initialization function for <NodeStyles> and <Tips> implemented 
- * by all main visualizations.
- *
- */
-var Extras = {
-  initializeExtras: function() {
-    var mem = new MouseEventsManager(this), that = this;
-    $.each(['NodeStyles', 'Tips', 'Navigation', 'Events'], function(k) {
-      var obj = new Extras.Classes[k](k, that);
-      if(obj.isEnabled()) {
-        mem.register(obj);
-      }
-      if(obj.setAsProperty()) {
-        that[k.toLowerCase()] = obj;
-      }
-    });
-  }   
-};
-
-Extras.Classes = {};
-/*
-  Class: Events
-   
-  This class defines an Event API to be accessed by the user.
-  The methods implemented are the ones defined in the <Options.Events> object.
-*/
-
-Extras.Classes.Events = new Class({
-  Implements: [ExtrasInitializer, EventsInterface],
-  
-  initializePost: function() {
-    this.fx = this.viz.fx;
-    this.ntypes = this.viz.fx.nodeTypes;
-    this.etypes = this.viz.fx.edgeTypes;
-    
-    this.hovered = false;
-    this.pressed = false;
-    this.touched = false;
-
-    this.touchMoved = false;
-    this.moved = false;
-    
-  },
-  
-  setAsProperty: $.lambda(true),
-  
-  onMouseUp: function(e, win, event, isRightClick) {
-    var evt = $.event.get(e, win);
-    if(!this.moved) {
-      if(isRightClick) {
-        this.config.onRightClick(this.hovered, event, evt);
-      } else {
-        this.config.onClick(this.pressed, event, evt);
-      }
-    }
-    if(this.pressed) {
-      if(this.moved) {
-        this.config.onDragEnd(this.pressed, event, evt);
-      } else {
-        this.config.onDragCancel(this.pressed, event, evt);
-      }
-      this.pressed = this.moved = false;
-    }
-  },
-
-  onMouseOut: function(e, win, event) {
-   //mouseout a label
-   var evt = $.event.get(e, win), label;
-   if(this.dom && (label = this.isLabel(e, win, true))) {
-     this.config.onMouseLeave(this.viz.graph.getNode(label.id),
-                              event, evt);
-     this.hovered = false;
-     return;
-   }
-   //mouseout canvas
-   var rt = evt.relatedTarget,
-       canvasWidget = this.canvas.getElement();
-   while(rt && rt.parentNode) {
-     if(canvasWidget == rt.parentNode) return;
-     rt = rt.parentNode;
-   }
-   if(this.hovered) {
-     this.config.onMouseLeave(this.hovered,
-         event, evt);
-     this.hovered = false;
-   }
-  },
-  
-  onMouseOver: function(e, win, event) {
-    //mouseover a label
-    var evt = $.event.get(e, win), label;
-    if(this.dom && (label = this.isLabel(e, win, true))) {
-      this.hovered = this.viz.graph.getNode(label.id);
-      this.config.onMouseEnter(this.hovered,
-                               event, evt);
-    }
-  },
-  
-  onMouseMove: function(e, win, event) {
-   var label, evt = $.event.get(e, win);
-   if(this.pressed) {
-     this.moved = true;
-     this.config.onDragMove(this.pressed, event, evt);
-     return;
-   }
-   if(this.dom) {
-     this.config.onMouseMove(this.hovered,
-         event, evt);
-   } else {
-     if(this.hovered) {
-       var hn = this.hovered;
-       var geom = hn.nodeFrom? this.etypes[hn.getData('type')] : this.ntypes[hn.getData('type')];
-       var contains = geom && geom.contains 
-         && geom.contains.call(this.fx, hn, event.getPos());
-       if(contains) {
-         this.config.onMouseMove(hn, event, evt);
-         return;
-       } else {
-         this.config.onMouseLeave(hn, event, evt);
-         this.hovered = false;
-       }
-     }
-     if(this.hovered = (event.getNode() || (this.config.enableForEdges && event.getEdge()))) {
-       this.config.onMouseEnter(this.hovered, event, evt);
-     } else {
-       this.config.onMouseMove(false, event, evt);
-     }
-   }
-  },
-  
-  onMouseWheel: function(e, win, delta) {
-    this.config.onMouseWheel(delta, $.event.get(e, win));
-  },
-  
-  onMouseDown: function(e, win, event) {
-    var evt = $.event.get(e, win), label;
-    if(this.dom) {
-      if(label = this.isLabel(e, win)) {
-        this.pressed = this.viz.graph.getNode(label.id);
-      }
-    } else {
-      this.pressed = event.getNode() || (this.config.enableForEdges && event.getEdge());
-    }
-    this.pressed && this.config.onDragStart(this.pressed, event, evt);
-  },
-  
-  onTouchStart: function(e, win, event) {
-    var evt = $.event.get(e, win), label;
-    if(this.dom && (label = this.isLabel(e, win))) {
-      this.touched = this.viz.graph.getNode(label.id);
-    } else {
-      this.touched = event.getNode() || (this.config.enableForEdges && event.getEdge());
-    }
-    this.touched && this.config.onTouchStart(this.touched, event, evt);
-  },
-  
-  onTouchMove: function(e, win, event) {
-    var evt = $.event.get(e, win);
-    if(this.touched) {
-      this.touchMoved = true;
-      this.config.onTouchMove(this.touched, event, evt);
-    }
-  },
-  
-  onTouchEnd: function(e, win, event) {
-    var evt = $.event.get(e, win);
-    if(this.touched) {
-      if(this.touchMoved) {
-        this.config.onTouchEnd(this.touched, event, evt);
-      } else {
-        this.config.onTouchCancel(this.touched, event, evt);
-      }
-      this.touched = this.touchMoved = false;
-    }
-  }
-});
-
-/*
-   Class: Tips
-    
-   A class containing tip related functions. This class is used internally.
-   
-   Used by:
-   
-   <ST>, <Sunburst>, <Hypertree>, <RGraph>, <TM>, <ForceDirected>, <Icicle>
-   
-   See also:
-   
-   <Options.Tips>
-*/
-
-Extras.Classes.Tips = new Class({
-  Implements: [ExtrasInitializer, EventsInterface],
-  
-  initializePost: function() {
-    //add DOM tooltip
-    if(document.body) {
-      var tip = $('_tooltip') || document.createElement('div');
-      tip.id = '_tooltip';
-      tip.className = 'tip';
-      $.extend(tip.style, {
-        position: 'absolute',
-        display: 'none',
-        zIndex: 13000
-      });
-      document.body.appendChild(tip);
-      this.tip = tip;
-      this.node = false;
-    }
-  },
-  
-  setAsProperty: $.lambda(true),
-  
-  onMouseOut: function(e, win) {
-    //mouseout a label
-    var evt = $.event.get(e, win);
-    if(this.dom && this.isLabel(e, win, true)) {
-      this.hide(true);
-      return;
-    }
-    //mouseout canvas
-    var rt = e.relatedTarget,
-        canvasWidget = this.canvas.getElement();
-    while(rt && rt.parentNode) {
-      if(canvasWidget == rt.parentNode) return;
-      rt = rt.parentNode;
-    }
-    this.hide(false);
-  },
-  
-  onMouseOver: function(e, win) {
-    //mouseover a label
-    var label;
-    if(this.dom && (label = this.isLabel(e, win, false))) {
-      this.node = this.viz.graph.getNode(label.id);
-      this.config.onShow(this.tip, this.node, label);
-    }
-  },
-  
-  onMouseMove: function(e, win, opt) {
-    if(this.dom && this.isLabel(e, win)) {
-      this.setTooltipPosition($.event.getPos(e, win));
-    }
-    if(!this.dom) {
-      var node = opt.getNode();
-      if(!node) {
-        this.hide(true);
-        return;
-      }
-      if(this.config.force || !this.node || this.node.id != node.id) {
-        this.node = node;
-        this.config.onShow(this.tip, node, opt.getContains());
-      }
-      this.setTooltipPosition($.event.getPos(e, win));
-    }
-  },
-  
-  setTooltipPosition: function(pos) {
-    var tip = this.tip, 
-        style = tip.style, 
-        cont = this.config;
-    style.display = '';
-    //get viewport dimensions
-    var elem = document.compatMode === "CSS1Compat" && document.documentElement ||
-               document.body ||
-               document.documentElement;
-    var view = {
-      'width': elem.clientWidth,
-      'height': elem.clientHeight,
-      'x': window.pageXOffset ||
-           document.documentElement && document.documentElement.scrollLeft ||
-           document.body && document.body.scrollLeft ||
-           0,
-      'y': window.pageYOffset ||
-           document.documentElement && document.documentElement.scrollTop ||
-           document.body && document.body.scrollTop ||
-           0
-    };
-    //get tooltip dimensions
-    var obj = {
-      'width': tip.offsetWidth,
-      'height': tip.offsetHeight  
-    };
-    //set tooltip position
-    var x = cont.offsetX, y = cont.offsetY;
-    style.top = ((pos.y + obj.height + y > view.height + view.y)?
-        (pos.y - obj.height - y) : pos.y + y) + 'px';
-    style.left = ((pos.x + obj.width + x > view.width + view.x)?
-        (pos.x - obj.width - x) : pos.x + x) + 'px';
-  },
-  
-  hide: function(triggerCallback) {
-    this.tip.style.display = 'none';
-    triggerCallback && this.config.onHide();
-  }
-});
-
-/*
-  Class: NodeStyles
-   
-  Change node styles when clicking or hovering a node. This class is used internally.
-  
-  Used by:
-  
-  <ST>, <Sunburst>, <Hypertree>, <RGraph>, <TM>, <ForceDirected>, <Icicle>
-  
-  See also:
-  
-  <Options.NodeStyles>
-*/
-Extras.Classes.NodeStyles = new Class({
-  Implements: [ExtrasInitializer, EventsInterface],
-  
-  initializePost: function() {
-    this.fx = this.viz.fx;
-    this.types = this.viz.fx.nodeTypes;
-    this.nStyles = this.config;
-    this.nodeStylesOnHover = this.nStyles.stylesHover;
-    this.nodeStylesOnClick = this.nStyles.stylesClick;
-    this.hoveredNode = false;
-    this.fx.nodeFxAnimation = new Animation();
-    
-    this.down = false;
-    this.move = false;
-  },
-  
-  onMouseOut: function(e, win) {
-    this.down = this.move = false;
-    if(!this.hoveredNode) return;
-    //mouseout a label
-    if(this.dom && this.isLabel(e, win, true)) {
-      this.toggleStylesOnHover(this.hoveredNode, false);
-    }
-    //mouseout canvas
-    var rt = e.relatedTarget,
-        canvasWidget = this.canvas.getElement();
-    while(rt && rt.parentNode) {
-      if(canvasWidget == rt.parentNode) return;
-      rt = rt.parentNode;
-    }
-    this.toggleStylesOnHover(this.hoveredNode, false);
-    this.hoveredNode = false;
-  },
-  
-  onMouseOver: function(e, win) {
-    //mouseover a label
-    var label;
-    if(this.dom && (label = this.isLabel(e, win, true))) {
-      var node = this.viz.graph.getNode(label.id);
-      if(node.selected) return;
-      this.hoveredNode = node;
-      this.toggleStylesOnHover(this.hoveredNode, true);
-    }
-  },
-  
-  onMouseDown: function(e, win, event, isRightClick) {
-    if(isRightClick) return;
-    var label;
-    if(this.dom && (label = this.isLabel(e, win))) {
-      this.down = this.viz.graph.getNode(label.id);
-    } else if(!this.dom) {
-      this.down = event.getNode();
-    }
-    this.move = false;
-  },
-  
-  onMouseUp: function(e, win, event, isRightClick) {
-    if(isRightClick) return;
-    if(!this.move) {
-      this.onClick(event.getNode());
-    }
-    this.down = this.move = false;
-  },
-  
-  getRestoredStyles: function(node, type) {
-    var restoredStyles = {}, 
-        nStyles = this['nodeStylesOn' + type];
-    for(var prop in nStyles) {
-      restoredStyles[prop] = node.styles['$' + prop];
-    }
-    return restoredStyles;
-  },
-  
-  toggleStylesOnHover: function(node, set) {
-    if(this.nodeStylesOnHover) {
-      this.toggleStylesOn('Hover', node, set);
-    }
-  },
-
-  toggleStylesOnClick: function(node, set) {
-    if(this.nodeStylesOnClick) {
-      this.toggleStylesOn('Click', node, set);
-    }
-  },
-  
-  toggleStylesOn: function(type, node, set) {
-    var viz = this.viz;
-    var nStyles = this.nStyles;
-    if(set) {
-      var that = this;
-      if(!node.styles) {
-        node.styles = $.merge(node.data, {});
-      }
-      for(var s in this['nodeStylesOn' + type]) {
-        var $s = '$' + s;
-        if(!($s in node.styles)) {
-            node.styles[$s] = node.getData(s); 
-        }
-      }
-      viz.fx.nodeFx($.extend({
-        'elements': {
-          'id': node.id,
-          'properties': that['nodeStylesOn' + type]
-         },
-         transition: Trans.Quart.easeOut,
-         duration:300,
-         fps:40
-      }, this.config));
-    } else {
-      var restoredStyles = this.getRestoredStyles(node, type);
-      viz.fx.nodeFx($.extend({
-        'elements': {
-          'id': node.id,
-          'properties': restoredStyles
-         },
-         transition: Trans.Quart.easeOut,
-         duration:300,
-         fps:40
-      }, this.config));
-    }
-  },
-
-  onClick: function(node) {
-    if(!node) return;
-    var nStyles = this.nodeStylesOnClick;
-    if(!nStyles) return;
-    //if the node is selected then unselect it
-    if(node.selected) {
-      this.toggleStylesOnClick(node, false);
-      delete node.selected;
-    } else {
-      //unselect all selected nodes...
-      this.viz.graph.eachNode(function(n) {
-        if(n.selected) {
-          for(var s in nStyles) {
-            n.setData(s, n.styles['$' + s], 'end');
-          }
-          delete n.selected;
-        }
-      });
-      //select clicked node
-      this.toggleStylesOnClick(node, true);
-      node.selected = true;
-      delete node.hovered;
-      this.hoveredNode = false;
-    }
-  },
-  
-  onMouseMove: function(e, win, event) {
-    //if mouse button is down and moving set move=true
-    if(this.down) this.move = true;
-    //already handled by mouseover/out
-    if(this.dom && this.isLabel(e, win)) return;
-    var nStyles = this.nodeStylesOnHover;
-    if(!nStyles) return;
-    
-    if(!this.dom) {
-      if(this.hoveredNode) {
-        var geom = this.types[this.hoveredNode.getData('type')];
-        var contains = geom && geom.contains && geom.contains.call(this.fx, 
-            this.hoveredNode, event.getPos());
-        if(contains) return;
-      }
-      var node = event.getNode();
-      //if no node is being hovered then just exit
-      if(!this.hoveredNode && !node) return;
-      //if the node is hovered then exit
-      if(node.hovered) return;
-      //select hovered node
-      if(node && !node.selected) {
-        //check if an animation is running and exit it
-        this.fx.nodeFxAnimation.stopTimer();
-        //unselect all hovered nodes...
-        this.viz.graph.eachNode(function(n) {
-          if(n.hovered && !n.selected) {
-            for(var s in nStyles) {
-              n.setData(s, n.styles['$' + s], 'end');
-            }
-            delete n.hovered;
-          }
-        });
-        //select hovered node
-        node.hovered = true;
-        this.hoveredNode = node;
-        this.toggleStylesOnHover(node, true);
-      } else if(this.hoveredNode && !this.hoveredNode.selected) {
-        //check if an animation is running and exit it
-        this.fx.nodeFxAnimation.stopTimer();
-        //unselect hovered node
-        this.toggleStylesOnHover(this.hoveredNode, false);
-        delete this.hoveredNode.hovered;
-        this.hoveredNode = false;
-      }
-    }
-  }
-});
-
-Extras.Classes.Navigation = new Class({
-  Implements: [ExtrasInitializer, EventsInterface],
-  
-  initializePost: function() {
-    this.pos = false;
-    this.pressed = false;
-  },
-  
-  onMouseWheel: function(e, win, scroll) {
-    if(!this.config.zooming) return;
-    $.event.stop($.event.get(e, win));
-    var val = this.config.zooming / 1000,
-        ans = 1 + scroll * val;
-    this.canvas.scale(ans, ans);
-  },
-  
-  onMouseDown: function(e, win, eventInfo) {
-    if(!this.config.panning) return;
-    e.preventDefault ? e.preventDefault() : e.returnValue = false;
-    $.addClass(this.canvas.getElement(), 'grabbing');
-    if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : (eventInfo.getNode() || eventInfo.getEdge()))) return;
-    this.pressed = true;
-    this.pos = eventInfo.getPos();
-    var canvas = this.canvas,
-        ox = canvas.translateOffsetX,
-        oy = canvas.translateOffsetY,
-        sx = canvas.scaleOffsetX,
-        sy = canvas.scaleOffsetY;
-    this.pos.x *= sx;
-    this.pos.x += ox;
-    this.pos.y *= sy;
-    this.pos.y += oy;
-  },
-  
-  onMouseMove: function(e, win, eventInfo) {
-    if(!this.config.panning) return;
-    if(!this.pressed) return;
-    if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return;
-    var thispos = this.pos, 
-        currentPos = eventInfo.getPos(),
-        canvas = this.canvas,
-        ox = canvas.translateOffsetX,
-        oy = canvas.translateOffsetY,
-        sx = canvas.scaleOffsetX,
-        sy = canvas.scaleOffsetY;
-    currentPos.x *= sx;
-    currentPos.y *= sy;
-    currentPos.x += ox;
-    currentPos.y += oy;
-    var x = currentPos.x - thispos.x,
-        y = currentPos.y - thispos.y;
-    this.pos = currentPos;
-    this.canvas.translate(x * 1/sx, y * 1/sy);
-  },
-  
-  onMouseUp: function(e, win, eventInfo, isRightClick) {
-    if(!this.config.panning) return;
-    $.removeClass(this.canvas.getElement(), 'grabbing');
-    this.pressed = false;
-  }
-});
-
-
-/*
- * File: Canvas.js
- *
- */
-
-/*
- Class: Canvas
- 
- 	A canvas widget used by all visualizations. The canvas object can be accessed by doing *viz.canvas*. If you want to 
- 	know more about <Canvas> options take a look at <Options.Canvas>.
- 
- A canvas widget is a set of DOM elements that wrap the native canvas DOM Element providing a consistent API and behavior 
- across all browsers. It can also include Elements to add DOM (SVG or HTML) label support to all visualizations.
- 
- Example:
- 
- Suppose we have this HTML
- 
- (start code xml)
- 	<div id="infovis"></div>
- (end code)
- 
- Now we create a new Visualization
- 
- (start code js)
- 	var viz = new $jit.Viz({
- 		//Where to inject the canvas. Any div container will do.
- 		'injectInto':'infovis',
-		 //width and height for canvas. 
-		 //Default's to the container offsetWidth and Height.
-		 'width': 900,
-		 'height':500
-	 });
- (end code)
-
- The generated HTML will look like this
- 
- (start code xml)
- <div id="infovis">
- 	<div id="infovis-canvaswidget" style="position:relative;">
- 	<canvas id="infovis-canvas" width=900 height=500
- 	style="position:absolute; top:0; left:0; width:900px; height:500px;" />
- 	<div id="infovis-label"
- 	style="overflow:visible; position:absolute; top:0; left:0; width:900px; height:0px">
- 	</div>
- 	</div>
- </div>
- (end code)
- 
- As you can see, the generated HTML consists of a canvas DOM Element of id *infovis-canvas* and a div label container
- of id *infovis-label*, wrapped in a main div container of id *infovis-canvaswidget*.
- */
-
-var Canvas;
-(function() {
-  //check for native canvas support
-  var canvasType = typeof HTMLCanvasElement,
-      supportsCanvas = (canvasType == 'object' || canvasType == 'function');
-  //create element function
-  function $E(tag, props) {
-    var elem = document.createElement(tag);
-    for(var p in props) {
-      if(typeof props[p] == "object") {
-        $.extend(elem[p], props[p]);
-      } else {
-        elem[p] = props[p];
-      }
-    }
-    if (tag == "canvas" && !supportsCanvas && G_vmlCanvasManager) {
-      elem = G_vmlCanvasManager.initElement(document.body.appendChild(elem));
-    }
-    return elem;
-  }
-  //canvas widget which we will call just Canvas
-  $jit.Canvas = Canvas = new Class({
-    canvases: [],
-    pos: false,
-    element: false,
-    labelContainer: false,
-    translateOffsetX: 0,
-    translateOffsetY: 0,
-    scaleOffsetX: 1,
-    scaleOffsetY: 1,
-    
-    initialize: function(viz, opt) {
-      this.viz = viz;
-      this.opt = this.config = opt;
-      var id = $.type(opt.injectInto) == 'string'? 
-          opt.injectInto:opt.injectInto.id,
-          type = opt.type,
-          idLabel = id + "-label", 
-          wrapper = $(id),
-          width = opt.width || wrapper.offsetWidth,
-          height = opt.height || wrapper.offsetHeight;
-      this.id = id;
-      //canvas options
-      var canvasOptions = {
-        injectInto: id,
-        width: width,
-        height: height
-      };
-      //create main wrapper
-      this.element = $E('div', {
-        'id': id + '-canvaswidget',
-        'style': {
-          'position': 'relative',
-          'width': width + 'px',
-          'height': height + 'px'
-        }
-      });
-      //create label container
-      this.labelContainer = this.createLabelContainer(opt.Label.type, 
-          idLabel, canvasOptions);
-      //create primary canvas
-      this.canvases.push(new Canvas.Base[type]({
-        config: $.extend({idSuffix: '-canvas'}, canvasOptions),
-        plot: function(base) {
-          viz.fx.plot();
-        },
-        resize: function() {
-          viz.refresh();
-        }
-      }));
-      //create secondary canvas
-      var back = opt.background;
-      if(back) {
-        var backCanvas = new Canvas.Background[back.type](viz, $.extend(back, canvasOptions));
-        this.canvases.push(new Canvas.Base[type](backCanvas));
-      }
-      //insert canvases
-      var len = this.canvases.length;
-      while(len--) {
-        this.element.appendChild(this.canvases[len].canvas);
-        if(len > 0) {
-          this.canvases[len].plot();
-        }
-      }
-      this.element.appendChild(this.labelContainer);
-      wrapper.appendChild(this.element);
-      //Update canvas position when the page is scrolled.
-      var timer = null, that = this;
-      $.addEvent(window, 'scroll', function() {
-        clearTimeout(timer);
-        timer = setTimeout(function() {
-          that.getPos(true); //update canvas position
-        }, 500);
-      });
-    },
-    /*
-      Method: getCtx
-      
-      Returns the main canvas context object
-      
-      Example:
-      
-      (start code js)
-       var ctx = canvas.getCtx();
-       //Now I can use the native canvas context
-       //and for example change some canvas styles
-       ctx.globalAlpha = 1;
-      (end code)
-    */
-    getCtx: function(i) {
-      return this.canvases[i || 0].getCtx();
-    },
-    /*
-      Method: getConfig
-      
-      Returns the current Configuration for this Canvas Widget.
-      
-      Example:
-      
-      (start code js)
-       var config = canvas.getConfig();
-      (end code)
-    */
-    getConfig: function() {
-      return this.opt;
-    },
-    /*
-      Method: getElement
-
-      Returns the main Canvas DOM wrapper
-      
-      Example:
-      
-      (start code js)
-       var wrapper = canvas.getElement();
-       //Returns <div id="infovis-canvaswidget" ... >...</div> as element
-      (end code)
-    */
-    getElement: function() {
-      return this.element;
-    },
-    /*
-      Method: getSize
-      
-      Returns canvas dimensions.
-      
-      Returns:
-      
-      An object with *width* and *height* properties.
-      
-      Example:
-      (start code js)
-      canvas.getSize(); //returns { width: 900, height: 500 }
-      (end code)
-    */
-    getSize: function(i) {
-      return this.canvases[i || 0].getSize();
-    },
-    /*
-      Method: resize
-      
-      Resizes the canvas.
-      
-      Parameters:
-      
-      width - New canvas width.
-      height - New canvas height.
-      
-      Example:
-      
-      (start code js)
-       canvas.resize(width, height);
-      (end code)
-    
-    */
-    resize: function(width, height) {
-      this.getPos(true);
-      this.translateOffsetX = this.translateOffsetY = 0;
-      this.scaleOffsetX = this.scaleOffsetY = 1;
-      for(var i=0, l=this.canvases.length; i<l; i++) {
-        this.canvases[i].resize(width, height);
-      }
-      var style = this.element.style;
-      style.width = width + 'px';
-      style.height = height + 'px';
-      if(this.labelContainer)
-        this.labelContainer.style.width = width + 'px';
-    },
-    /*
-      Method: translate
-      
-      Applies a translation to the canvas.
-      
-      Parameters:
-      
-      x - (number) x offset.
-      y - (number) y offset.
-      disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
-      
-      Example:
-      
-      (start code js)
-       canvas.translate(30, 30);
-      (end code)
-    
-    */
-    translate: function(x, y, disablePlot) {
-      this.translateOffsetX += x*this.scaleOffsetX;
-      this.translateOffsetY += y*this.scaleOffsetY;
-      for(var i=0, l=this.canvases.length; i<l; i++) {
-        this.canvases[i].translate(x, y, disablePlot);
-      }
-    },
-    /*
-      Method: scale
-      
-      Scales the canvas.
-      
-      Parameters:
-      
-      x - (number) scale value.
-      y - (number) scale value.
-      disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
-      
-      Example:
-      
-      (start code js)
-       canvas.scale(0.5, 0.5);
-      (end code)
-    
-    */
-    scale: function(x, y, disablePlot) {
-      var px = this.scaleOffsetX * x,
-          py = this.scaleOffsetY * y;
-      var dx = this.translateOffsetX * (x -1) / px,
-          dy = this.translateOffsetY * (y -1) / py;
-      this.scaleOffsetX = px;
-      this.scaleOffsetY = py;
-      for(var i=0, l=this.canvases.length; i<l; i++) {
-        this.canvases[i].scale(x, y, true);
-      }
-      this.translate(dx, dy, false);
-    },
-    /*
-      Method: getZoom
-
-      Returns canvas zooming factors. *1* means initial zoom.
-
-      Returns:
-
-      An object with *x* and *y* properties.
-    */
-    getZoom: function() {
-      return new Complex(this.scaleOffsetX, this.scaleOffsetY);
-    },
-    /*
-      Method: setZoom
-
-      Sets the zoom to given factors. *1* means initial zoom.
-
-      Parameters:
-
-      x - (number) zooming factor
-      y - (number) zooming factor
-      disablePlot - (boolean) Default's *false*. Set this to *true* if you don't want to refresh the visualization.
-
-      Example:
-      (start code js)
-      canvas.setZoom(2, 2); //sets 2x zoom
-      (end code)
-    */
-    setZoom: function(x, y, disablePlot) {
-      var cur = this.getZoom(),
-          px = x / cur.x,
-          py = y / cur.y;
-      this.scale(px, py, disablePlot);
-    },
-    /*
-      Method: getPos
-      
-      Returns the canvas position as an *x, y* object.
-      
-      Parameters:
-      
-      force - (boolean) Default's *false*. Set this to *true* if you want to recalculate the position without using any cache information.
-      
-      Returns:
-      
-      An object with *x* and *y* properties.
-      
-      Example:
-      (start code js)
-      canvas.getPos(true); //returns { x: 900, y: 500 }
-      (end code)
-    */
-    getPos: function(force){
-      if(force || !this.pos) {
-        return this.pos = $.getPos(this.getElement());
-      }
-      return this.pos;
-    },
-    /*
-       Method: clear
-       
-       Clears the canvas.
-    */
-    clear: function(i){
-      this.canvases[i||0].clear();
-    },
-    
-    path: function(type, action){
-      var ctx = this.canvases[0].getCtx();
-      ctx.beginPath();
-      action(ctx);
-      ctx[type]();
-      ctx.closePath();
-    },
-    
-    createLabelContainer: function(type, idLabel, dim) {
-      var NS = 'http://www.w3.org/2000/svg';
-      if(type == 'HTML' || type == 'Native') {
-        return $E('div', {
-          'id': idLabel,
-          'style': {
-            'overflow': 'visible',
-            'position': 'absolute',
-            'top': 0,
-            'left': 0,
-            'width': dim.width + 'px',
-            'height': 0
-          }
-        });
-      } else if(type == 'SVG') {
-        var svgContainer = document.createElementNS(NS, 'svg:svg');
-        svgContainer.setAttribute("width", dim.width);
-        svgContainer.setAttribute('height', dim.height);
-        var style = svgContainer.style;
-        style.position = 'absolute';
-        style.left = style.top = '0px';
-        var labelContainer = document.createElementNS(NS, 'svg:g');
-        labelContainer.setAttribute('width', dim.width);
-        labelContainer.setAttribute('height', dim.height);
-        labelContainer.setAttribute('x', 0);
-        labelContainer.setAttribute('y', 0);
-        labelContainer.setAttribute('id', idLabel);
-        svgContainer.appendChild(labelContainer);
-        return svgContainer;
-      }
-    }
-  });
-  //base canvas wrapper
-  Canvas.Base = {};
-  Canvas.Base['2D'] = new Class({
-    translateOffsetX: 0,
-    translateOffsetY: 0,
-    scaleOffsetX: 1,
-    scaleOffsetY: 1,
-
-    initialize: function(viz) {
-      this.viz = viz;
-      this.opt = viz.config;
-      this.size = false;
-      this.createCanvas();
-      this.translateToCenter();
-    },
-    createCanvas: function() {
-      var opt = this.opt,
-          width = opt.width,
-          height = opt.height;
-      this.canvas = $E('canvas', {
-        'id': opt.injectInto + opt.idSuffix,
-        'width': width,
-        'height': height,
-        'style': {
-          'position': 'absolute',
-          'top': 0,
-          'left': 0,
-          'width': width + 'px',
-          'height': height + 'px'
-        }
-      });
-    },
-    getCtx: function() {
-      if(!this.ctx) 
-        return this.ctx = this.canvas.getContext('2d');
-      return this.ctx;
-    },
-    getSize: function() {
-      if(this.size) return this.size;
-      var canvas = this.canvas;
-      return this.size = {
-        width: canvas.width,
-        height: canvas.height
-      };
-    },
-    translateToCenter: function(ps) {
-      var size = this.getSize(),
-          width = ps? (size.width - ps.width - this.translateOffsetX*2) : size.width;
-          height = ps? (size.height - ps.height - this.translateOffsetY*2) : size.height;
-      var ctx = this.getCtx();
-      ps && ctx.scale(1/this.scaleOffsetX, 1/this.scaleOffsetY);
-      ctx.translate(width/2, height/2);
-    },
-    resize: function(width, height) {
-      var size = this.getSize(),
-          canvas = this.canvas,
-          styles = canvas.style;
-      this.size = false;
-      canvas.width = width;
-      canvas.height = height;
-      styles.width = width + "px";
-      styles.height = height + "px";
-      //small ExCanvas fix
-      if(!supportsCanvas) {
-        this.translateToCenter(size);
-      } else {
-        this.translateToCenter();
-      }
-      this.translateOffsetX =
-        this.translateOffsetY = 0;
-      this.scaleOffsetX = 
-        this.scaleOffsetY = 1;
-      this.clear();
-      this.viz.resize(width, height, this);
-    },
-    translate: function(x, y, disablePlot) {
-      var sx = this.scaleOffsetX,
-          sy = this.scaleOffsetY;
-      this.translateOffsetX += x*sx;
-      this.translateOffsetY += y*sy;
-      this.getCtx().translate(x, y);
-      !disablePlot && this.plot();
-    },
-    scale: function(x, y, disablePlot) {
-      this.scaleOffsetX *= x;
-      this.scaleOffsetY *= y;
-      this.getCtx().scale(x, y);
-      !disablePlot && this.plot();
-    },
-    clear: function(){
-      var size = this.getSize(),
-          ox = this.translateOffsetX,
-          oy = this.translateOffsetY,
-          sx = this.scaleOffsetX,
-          sy = this.scaleOffsetY;
-      this.getCtx().clearRect((-size.width / 2 - ox) * 1/sx, 
-                              (-size.height / 2 - oy) * 1/sy, 
-                              size.width * 1/sx, size.height * 1/sy);
-    },
-    plot: function() {
-      this.clear();
-      this.viz.plot(this);
-    }
-  });
-  //background canvases
-  //TODO(nico): document this!
-  Canvas.Background = {};
-  Canvas.Background.Circles = new Class({
-    initialize: function(viz, options) {
-      this.viz = viz;
-      this.config = $.merge({
-        idSuffix: '-bkcanvas',
-        levelDistance: 100,
-        numberOfCircles: 6,
-        CanvasStyles: {},
-        offset: 0
-      }, options);
-    },
-    resize: function(width, height, base) {
-      this.plot(base);
-    },
-    plot: function(base) {
-      var canvas = base.canvas,
-          ctx = base.getCtx(),
-          conf = this.config,
-          styles = conf.CanvasStyles;
-      //set canvas styles
-      for(var s in styles) ctx[s] = styles[s];
-      var n = conf.numberOfCircles,
-          rho = conf.levelDistance;
-      for(var i=1; i<=n; i++) {
-        ctx.beginPath();
-        ctx.arc(0, 0, rho * i, 0, 2 * Math.PI, false);
-        ctx.stroke();
-        ctx.closePath();
-      }
-      //TODO(nico): print labels too!
-    }
-  });
-})();
-
-
-/*
- * File: Polar.js
- * 
- * Defines the <Polar> class.
- *
- * Description:
- *
- * The <Polar> class, just like the <Complex> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
- *
- * See also:
- *
- * <http://en.wikipedia.org/wiki/Polar_coordinates>
- *
-*/
-
-/*
-   Class: Polar
-
-   A multi purpose polar representation.
-
-   Description:
- 
-   The <Polar> class, just like the <Complex> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
- 
-   See also:
- 
-   <http://en.wikipedia.org/wiki/Polar_coordinates>
- 
-   Parameters:
-
-      theta - An angle.
-      rho - The norm.
-*/
-
-var Polar = function(theta, rho) {
-  this.theta = theta || 0;
-  this.rho = rho || 0;
-};
-
-$jit.Polar = Polar;
-
-Polar.prototype = {
-    /*
-       Method: getc
-    
-       Returns a complex number.
-    
-       Parameters:
-
-       simple - _optional_ If *true*, this method will return only an object holding x and y properties and not a <Complex> instance. Default's *false*.
-
-      Returns:
-    
-          A complex number.
-    */
-    getc: function(simple) {
-        return this.toComplex(simple);
-    },
-
-    /*
-       Method: getp
-    
-       Returns a <Polar> representation.
-    
-       Returns:
-    
-          A variable in polar coordinates.
-    */
-    getp: function() {
-        return this;
-    },
-
-
-    /*
-       Method: set
-    
-       Sets a number.
-
-       Parameters:
-
-       v - A <Complex> or <Polar> instance.
-    
-    */
-    set: function(v) {
-        v = v.getp();
-        this.theta = v.theta; this.rho = v.rho;
-    },
-
-    /*
-       Method: setc
-    
-       Sets a <Complex> number.
-
-       Parameters:
-
-       x - A <Complex> number real part.
-       y - A <Complex> number imaginary part.
-    
-    */
-    setc: function(x, y) {
-        this.rho = Math.sqrt(x * x + y * y);
-        this.theta = Math.atan2(y, x);
-        if(this.theta < 0) this.theta += Math.PI * 2;
-    },
-
-    /*
-       Method: setp
-    
-       Sets a polar number.
-
-       Parameters:
-
-       theta - A <Polar> number angle property.
-       rho - A <Polar> number rho property.
-    
-    */
-    setp: function(theta, rho) {
-        this.theta = theta; 
-        this.rho = rho;
-    },
-
-    /*
-       Method: clone
-    
-       Returns a copy of the current object.
-    
-       Returns:
-    
-          A copy of the real object.
-    */
-    clone: function() {
-        return new Polar(this.theta, this.rho);
-    },
-
-    /*
-       Method: toComplex
-    
-        Translates from polar to cartesian coordinates and returns a new <Complex> instance.
-    
-        Parameters:
-
-        simple - _optional_ If *true* this method will only return an object with x and y properties (and not the whole <Complex> instance). Default's *false*.
- 
-        Returns:
-    
-          A new <Complex> instance.
-    */
-    toComplex: function(simple) {
-        var x = Math.cos(this.theta) * this.rho;
-        var y = Math.sin(this.theta) * this.rho;
-        if(simple) return { 'x': x, 'y': y};
-        return new Complex(x, y);
-    },
-
-    /*
-       Method: add
-    
-        Adds two <Polar> instances.
-    
-       Parameters:
-
-       polar - A <Polar> number.
-
-       Returns:
-    
-          A new Polar instance.
-    */
-    add: function(polar) {
-        return new Polar(this.theta + polar.theta, this.rho + polar.rho);
-    },
-    
-    /*
-       Method: scale
-    
-        Scales a polar norm.
-    
-        Parameters:
-
-        number - A scale factor.
-        
-        Returns:
-    
-          A new Polar instance.
-    */
-    scale: function(number) {
-        return new Polar(this.theta, this.rho * number);
-    },
-    
-    /*
-       Method: equals
-    
-       Comparison method.
-
-       Returns *true* if the theta and rho properties are equal.
-
-       Parameters:
-
-       c - A <Polar> number.
-
-       Returns:
-
-       *true* if the theta and rho parameters for these objects are equal. *false* otherwise.
-    */
-    equals: function(c) {
-        return this.theta == c.theta && this.rho == c.rho;
-    },
-    
-    /*
-       Method: $add
-    
-        Adds two <Polar> instances affecting the current object.
-    
-       Paramters:
-
-       polar - A <Polar> instance.
-
-       Returns:
-    
-          The changed object.
-    */
-    $add: function(polar) {
-        this.theta = this.theta + polar.theta; this.rho += polar.rho;
-        return this;
-    },
-
-    /*
-       Method: $madd
-    
-        Adds two <Polar> instances affecting the current object. The resulting theta angle is modulo 2pi.
-    
-       Parameters:
-
-       polar - A <Polar> instance.
-
-       Returns:
-    
-          The changed object.
-    */
-    $madd: function(polar) {
-        this.theta = (this.theta + polar.theta) % (Math.PI * 2); this.rho += polar.rho;
-        return this;
-    },
-
-    
-    /*
-       Method: $scale
-    
-        Scales a polar instance affecting the object.
-    
-      Parameters:
-
-      number - A scaling factor.
-
-      Returns:
-    
-          The changed object.
-    */
-    $scale: function(number) {
-        this.rho *= number;
-        return this;
-    },
-    
-    /*
-      Method: isZero
-   
-      Returns *true* if the number is zero.
-   
-   */
-    isZero: function () {
-      var almostZero = 0.0001, abs = Math.abs;
-      return abs(this.theta) < almostZero && abs(this.rho) < almostZero;
-    },
-
-    /*
-       Method: interpolate
-    
-        Calculates a polar interpolation between two points at a given delta moment.
-
-        Parameters:
-      
-        elem - A <Polar> instance.
-        delta - A delta factor ranging [0, 1].
-    
-       Returns:
-    
-          A new <Polar> instance representing an interpolation between _this_ and _elem_
-    */
-    interpolate: function(elem, delta) {
-        var pi = Math.PI, pi2 = pi * 2;
-        var ch = function(t) {
-            var a =  (t < 0)? (t % pi2) + pi2 : t % pi2;
-            return a;
-        };
-        var tt = this.theta, et = elem.theta;
-        var sum, diff = Math.abs(tt - et);
-        if(diff == pi) {
-          if(tt > et) {
-            sum = ch((et + ((tt - pi2) - et) * delta)) ;
-          } else {
-            sum = ch((et - pi2 + (tt - (et)) * delta));
-          }
-        } else if(diff >= pi) {
-          if(tt > et) {
-            sum = ch((et + ((tt - pi2) - et) * delta)) ;
-          } else {
-            sum = ch((et - pi2 + (tt - (et - pi2)) * delta));
-          }
-        } else {  
-          sum = ch((et + (tt - et) * delta)) ;
-        }
-        var r = (this.rho - elem.rho) * delta + elem.rho;
-        return {
-          'theta': sum,
-          'rho': r
-        };
-    }
-};
-
-
-var $P = function(a, b) { return new Polar(a, b); };
-
-Polar.KER = $P(0, 0);
-
-
-
-/*
- * File: Complex.js
- * 
- * Defines the <Complex> class.
- *
- * Description:
- *
- * The <Complex> class, just like the <Polar> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
- *
- * See also:
- *
- * <http://en.wikipedia.org/wiki/Complex_number>
- *
-*/
-
-/*
-   Class: Complex
-    
-   A multi-purpose Complex Class with common methods.
- 
-   Description:
- 
-   The <Complex> class, just like the <Polar> class, is used by the <Hypertree>, <ST> and <RGraph> as a 2D point representation.
- 
-   See also:
- 
-   <http://en.wikipedia.org/wiki/Complex_number>
-
-   Parameters:
-
-   x - _optional_ A Complex number real part.
-   y - _optional_ A Complex number imaginary part.
- 
-*/
-
-var Complex = function(x, y) {
-  this.x = x || 0;
-  this.y = y || 0;
-};
-
-$jit.Complex = Complex;
-
-Complex.prototype = {
-    /*
-       Method: getc
-    
-       Returns a complex number.
-    
-       Returns:
-    
-          A complex number.
-    */
-    getc: function() {
-        return this;
-    },
-
-    /*
-       Method: getp
-    
-       Returns a <Polar> representation of this number.
-    
-       Parameters:
-
-       simple - _optional_ If *true*, this method will return only an object holding theta and rho properties and not a <Polar> instance. Default's *false*.
-
-       Returns:
-    
-          A variable in <Polar> coordinates.
-    */
-    getp: function(simple) {
-        return this.toPolar(simple);
-    },
-
-
-    /*
-       Method: set
-    
-       Sets a number.
-
-       Parameters:
-
-       c - A <Complex> or <Polar> instance.
-    
-    */
-    set: function(c) {
-      c = c.getc(true);
-      this.x = c.x; 
-      this.y = c.y;
-    },
-
-    /*
-       Method: setc
-    
-       Sets a complex number.
-
-       Parameters:
-
-       x - A <Complex> number Real part.
-       y - A <Complex> number Imaginary part.
-    
-    */
-    setc: function(x, y) {
-        this.x = x; 
-        this.y = y;
-    },
-
-    /*
-       Method: setp
-    
-       Sets a polar number.
-
-       Parameters:
-
-       theta - A <Polar> number theta property.
-       rho - A <Polar> number rho property.
-    
-    */
-    setp: function(theta, rho) {
-        this.x = Math.cos(theta) * rho;
-        this.y = Math.sin(theta) * rho;
-    },
-
-    /*
-       Method: clone
-    
-       Returns a copy of the current object.
-    
-       Returns:
-    
-          A copy of the real object.
-    */
-    clone: function() {
-        return new Complex(this.x, this.y);
-    },
-
-    /*
-       Method: toPolar
-    
-       Transforms cartesian to polar coordinates.
-    
-       Parameters:
-
-       simple - _optional_ If *true* this method will only return an object with theta and rho properties (and not the whole <Polar> instance). Default's *false*.
-       
-       Returns:
-    
-          A new <Polar> instance.
-    */
-    
-    toPolar: function(simple) {
-        var rho = this.norm();
-        var atan = Math.atan2(this.y, this.x);
-        if(atan < 0) atan += Math.PI * 2;
-        if(simple) return { 'theta': atan, 'rho': rho };
-        return new Polar(atan, rho);
-    },
-    /*
-       Method: norm
-    
-       Calculates a <Complex> number norm.
-    
-       Returns:
-    
-          A real number representing the complex norm.
-    */
-    norm: function () {
-        return Math.sqrt(this.squaredNorm());
-    },
-    
-    /*
-       Method: squaredNorm
-    
-       Calculates a <Complex> number squared norm.
-    
-       Returns:
-    
-          A real number representing the complex squared norm.
-    */
-    squaredNorm: function () {
-        return this.x*this.x + this.y*this.y;
-    },
-
-    /*
-       Method: add
-    
-       Returns the result of adding two complex numbers.
-       
-       Does not alter the original object.
-
-       Parameters:
-    
-          pos - A <Complex> instance.
-    
-       Returns:
-    
-         The result of adding two complex numbers.
-    */
-    add: function(pos) {
-        return new Complex(this.x + pos.x, this.y + pos.y);
-    },
-
-    /*
-       Method: prod
-    
-       Returns the result of multiplying two <Complex> numbers.
-       
-       Does not alter the original object.
-
-       Parameters:
-    
-          pos - A <Complex> instance.
-    
-       Returns:
-    
-         The result of multiplying two complex numbers.
-    */
-    prod: function(pos) {
-        return new Complex(this.x*pos.x - this.y*pos.y, this.y*pos.x + this.x*pos.y);
-    },
-
-    /*
-       Method: conjugate
-    
-       Returns the conjugate of this <Complex> number.
-
-       Does not alter the original object.
-
-       Returns:
-    
-         The conjugate of this <Complex> number.
-    */
-    conjugate: function() {
-        return new Complex(this.x, -this.y);
-    },
-
-
-    /*
-       Method: scale
-    
-       Returns the result of scaling a <Complex> instance.
-       
-       Does not alter the original object.
-
-       Parameters:
-    
-          factor - A scale factor.
-    
-       Returns:
-    
-         The result of scaling this complex to a factor.
-    */
-    scale: function(factor) {
-        return new Complex(this.x * factor, this.y * factor);
-    },
-
-    /*
-       Method: equals
-    
-       Comparison method.
-
-       Returns *true* if both real and imaginary parts are equal.
-
-       Parameters:
-
-       c - A <Complex> instance.
-
-       Returns:
-
-       A boolean instance indicating if both <Complex> numbers are equal.
-    */
-    equals: function(c) {
-        return this.x == c.x && this.y == c.y;
-    },
-
-    /*
-       Method: $add
-    
-       Returns the result of adding two <Complex> numbers.
-       
-       Alters the original object.
-
-       Parameters:
-    
-          pos - A <Complex> instance.
-    
-       Returns:
-    
-         The result of adding two complex numbers.
-    */
-    $add: function(pos) {
-        this.x += pos.x; this.y += pos.y;
-        return this;    
-    },
-    
-    /*
-       Method: $prod
-    
-       Returns the result of multiplying two <Complex> numbers.
-       
-       Alters the original object.
-
-       Parameters:
-    
-          pos - A <Complex> instance.
-    
-       Returns:
-    
-         The result of multiplying two complex numbers.
-    */
-    $prod:function(pos) {
-        var x = this.x, y = this.y;
-        this.x = x*pos.x - y*pos.y;
-        this.y = y*pos.x + x*pos.y;
-        return this;
-    },
-    
-    /*
-       Method: $conjugate
-    
-       Returns the conjugate for this <Complex>.
-       
-       Alters the original object.
-
-       Returns:
-    
-         The conjugate for this complex.
-    */
-    $conjugate: function() {
-        this.y = -this.y;
-        return this;
-    },
-    
-    /*
-       Method: $scale
-    
-       Returns the result of scaling a <Complex> instance.
-       
-       Alters the original object.
-
-       Parameters:
-    
-          factor - A scale factor.
-    
-       Returns:
-    
-         The result of scaling this complex to a factor.
-    */
-    $scale: function(factor) {
-        this.x *= factor; this.y *= factor;
-        return this;
-    },
-    
-    /*
-       Method: $div
-    
-       Returns the division of two <Complex> numbers.
-       
-       Alters the original object.
-
-       Parameters:
-    
-          pos - A <Complex> number.
-    
-       Returns:
-    
-         The result of scaling this complex to a factor.
-    */
-    $div: function(pos) {
-        var x = this.x, y = this.y;
-        var sq = pos.squaredNorm();
-        this.x = x * pos.x + y * pos.y; this.y = y * pos.x - x * pos.y;
-        return this.$scale(1 / sq);
-    },
-
-    /*
-      Method: isZero
-   
-      Returns *true* if the number is zero.
-   
-   */
-    isZero: function () {
-      var almostZero = 0.0001, abs = Math.abs;
-      return abs(this.x) < almostZero && abs(this.y) < almostZero;
-    }
-};
-
-var $C = function(a, b) { return new Complex(a, b); };
-
-Complex.KER = $C(0, 0);
-Complex.IM = $C(0, 1);
-
-
-
-/*
- * File: Graph.js
- *
-*/
-
-/*
- Class: Graph
-
- A Graph Class that provides useful manipulation functions. You can find more manipulation methods in the <Graph.Util> object.
-
- An instance of this class can be accessed by using the *graph* parameter of any tree or graph visualization.
- 
- Example:
-
- (start code js)
-   //create new visualization
-   var viz = new $jit.Viz(options);
-   //load JSON data
-   viz.loadJSON(json);
-   //access model
-   viz.graph; //<Graph> instance
- (end code)
- 
- Implements:
- 
- The following <Graph.Util> methods are implemented in <Graph>
- 
-  - <Graph.Util.getNode>
-  - <Graph.Util.eachNode>
-  - <Graph.Util.computeLevels>
-  - <Graph.Util.eachBFS>
-  - <Graph.Util.clean>
-  - <Graph.Util.getClosestNodeToPos>
-  - <Graph.Util.getClosestNodeToOrigin>
- 
-*/  
-
-$jit.Graph = new Class({
-
-  initialize: function(opt, Node, Edge, Label) {
-    var innerOptions = {
-    'klass': Complex,
-    'Node': {}
-    };
-    this.Node = Node;
-    this.Edge = Edge;
-    this.Label = Label;
-    this.opt = $.merge(innerOptions, opt || {});
-    this.nodes = {};
-    this.edges = {};
-    
-    //add nodeList methods
-    var that = this;
-    this.nodeList = {};
-    for(var p in Accessors) {
-      that.nodeList[p] = (function(p) {
-        return function() {
-          var args = Array.prototype.slice.call(arguments);
-          that.eachNode(function(n) {
-            n[p].apply(n, args);
-          });
-        };
-      })(p);
-    }
-
- },
-
-/*
-     Method: getNode
-    
-     Returns a <Graph.Node> by *id*.
-
-     Parameters:
-
-     id - (string) A <Graph.Node> id.
-
-     Example:
-
-     (start code js)
-       var node = graph.getNode('nodeId');
-     (end code)
-*/  
- getNode: function(id) {
-    if(this.hasNode(id)) return this.nodes[id];
-    return false;
- },
-
- /*
-     Method: get
-    
-     An alias for <Graph.Util.getNode>. Returns a node by *id*.
-    
-     Parameters:
-    
-     id - (string) A <Graph.Node> id.
-    
-     Example:
-    
-     (start code js)
-       var node = graph.get('nodeId');
-     (end code)
-*/  
-  get: function(id) {
-    return this.getNode(id);
-  },
-
- /*
-   Method: getByName
-  
-   Returns a <Graph.Node> by *name*.
-  
-   Parameters:
-  
-   name - (string) A <Graph.Node> name.
-  
-   Example:
-  
-   (start code js)
-     var node = graph.getByName('someName');
-   (end code)
-  */  
-  getByName: function(name) {
-    for(var id in this.nodes) {
-      var n = this.nodes[id];
-      if(n.name == name) return n;
-    }
-    return false;
-  },
-
-/*
-   Method: getAdjacence
-  
-   Returns a <Graph.Adjacence> object connecting nodes with ids *id* and *id2*.
-
-   Parameters:
-
-   id - (string) A <Graph.Node> id.
-   id2 - (string) A <Graph.Node> id.
-*/  
-  getAdjacence: function (id, id2) {
-    if(id in this.edges) {
-      return this.edges[id][id2];
-    }
-    return false;
- },
-
-    /*
-     Method: addNode
-    
-     Adds a node.
-     
-     Parameters:
-    
-      obj - An object with the properties described below
-
-      id - (string) A node id
-      name - (string) A node's name
-      data - (object) A node's data hash
-
-    See also:
-    <Graph.Node>
-
-  */  
-  addNode: function(obj) { 
-   if(!this.nodes[obj.id]) {  
-     var edges = this.edges[obj.id] = {};
-     this.nodes[obj.id] = new Graph.Node($.extend({
-        'id': obj.id,
-        'name': obj.name,
-        'data': $.merge(obj.data || {}, {}),
-        'adjacencies': edges 
-      }, this.opt.Node), 
-      this.opt.klass, 
-      this.Node, 
-      this.Edge,
-      this.Label);
-    }
-    return this.nodes[obj.id];
-  },
-  
-    /*
-     Method: addAdjacence
-    
-     Connects nodes specified by *obj* and *obj2*. If not found, nodes are created.
-     
-     Parameters:
-    
-      obj - (object) A <Graph.Node> object.
-      obj2 - (object) Another <Graph.Node> object.
-      data - (object) A data object. Used to store some extra information in the <Graph.Adjacence> object created.
-
-    See also:
-
-    <Graph.Node>, <Graph.Adjacence>
-    */  
-  addAdjacence: function (obj, obj2, data) {
-    if(!this.hasNode(obj.id)) { this.addNode(obj); }
-    if(!this.hasNode(obj2.id)) { this.addNode(obj2); }
-    obj = this.nodes[obj.id]; obj2 = this.nodes[obj2.id];
-    if(!obj.adjacentTo(obj2)) {
-      var adjsObj = this.edges[obj.id] = this.edges[obj.id] || {};
-      var adjsObj2 = this.edges[obj2.id] = this.edges[obj2.id] || {};
-      adjsObj[obj2.id] = adjsObj2[obj.id] = new Graph.Adjacence(obj, obj2, data, this.Edge, this.Label);
-      return adjsObj[obj2.id];
-    }
-    return this.edges[obj.id][obj2.id];
- },
-
-    /*
-     Method: removeNode
-    
-     Removes a <Graph.Node> matching the specified *id*.
-
-     Parameters:
-
-     id - (string) A node's id.
-
-    */  
-  removeNode: function(id) {
-    if(this.hasNode(id)) {
-      delete this.nodes[id];
-      var adjs = this.edges[id];
-      for(var to in adjs) {
-        delete this.edges[to][id];
-      }
-      delete this.edges[id];
-    }
-  },
-  
-/*
-     Method: removeAdjacence
-    
-     Removes a <Graph.Adjacence> matching *id1* and *id2*.
-
-     Parameters:
-
-     id1 - (string) A <Graph.Node> id.
-     id2 - (string) A <Graph.Node> id.
-*/  
-  removeAdjacence: function(id1, id2) {
-    delete this.edges[id1][id2];
-    delete this.edges[id2][id1];
-  },
-
-   /*
-     Method: hasNode
-    
-     Returns a boolean indicating if the node belongs to the <Graph> or not.
-     
-     Parameters:
-    
-        id - (string) Node id.
-   */  
-  hasNode: function(id) {
-    return id in this.nodes;
-  },
-  
-  /*
-    Method: empty
-
-    Empties the Graph
-
-  */
-  empty: function() { this.nodes = {}; this.edges = {};}
-
-});
-
-var Graph = $jit.Graph;
-
-/*
- Object: Accessors
- 
- Defines a set of methods for data, canvas and label styles manipulation implemented by <Graph.Node> and <Graph.Adjacence> instances.
- 
- */
-var Accessors;
-
-(function () {
-  var getDataInternal = function(prefix, prop, type, force, prefixConfig) {
-    var data;
-    type = type || 'current';
-    prefix = "$" + (prefix ? prefix + "-" : "");
-
-    if(type == 'current') {
-      data = this.data;
-    } else if(type == 'start') {
-      data = this.startData;
-    } else if(type == 'end') {
-      data = this.endData;
-    }
-
-    var dollar = prefix + prop;
-
-    if(force) {
-      return data[dollar];
-    }
-
-    if(!this.Config.overridable)
-      return prefixConfig[prop] || 0;
-
-    return (dollar in data) ?
-      data[dollar] : ((dollar in this.data) ? this.data[dollar] : (prefixConfig[prop] || 0));
-  }
-
-  var setDataInternal = function(prefix, prop, value, type) {
-    type = type || 'current';
-    prefix = '$' + (prefix ? prefix + '-' : '');
-
-    var data;
-
-    if(type == 'current') {
-      data = this.data;
-    } else if(type == 'start') {
-      data = this.startData;
-    } else if(type == 'end') {
-      data = this.endData;
-    }
-
-    data[prefix + prop] = value;
-  }
-
-  var removeDataInternal = function(prefix, properties) {
-    prefix = '$' + (prefix ? prefix + '-' : '');
-    var that = this;
-    $.each(properties, function(prop) {
-      var pref = prefix + prop;
-      delete that.data[pref];
-      delete that.endData[pref];
-      delete that.startData[pref];
-    });
-  }
-
-  Accessors = {
-    /*
-    Method: getData
-
-    Returns the specified data value property.
-    This is useful for querying special/reserved <Graph.Node> data properties
-    (i.e dollar prefixed properties).
-
-    Parameters:
-
-      prop  - (string) The name of the property. The dollar sign is not needed. For
-              example *getData(width)* will return *data.$width*.
-      type  - (string) The type of the data property queried. Default's "current". You can access *start* and *end* 
-              data properties also. These properties are used when making animations.
-      force - (boolean) Whether to obtain the true value of the property (equivalent to
-              *data.$prop*) or to check for *node.overridable = true* first.
-
-    Returns:
-
-      The value of the dollar prefixed property or the global Node/Edge property
-      value if *overridable=false*
-
-    Example:
-    (start code js)
-     node.getData('width'); //will return node.data.$width if Node.overridable=true;
-    (end code)
-    */
-    getData: function(prop, type, force) {
-      return getDataInternal.call(this, "", prop, type, force, this.Config);
-    },
-
-
-    /*
-    Method: setData
-
-    Sets the current data property with some specific value.
-    This method is only useful for reserved (dollar prefixed) properties.
-
-    Parameters:
-
-      prop  - (string) The name of the property. The dollar sign is not necessary. For
-              example *setData(width)* will set *data.$width*.
-      value - (mixed) The value to store.
-      type  - (string) The type of the data property to store. Default's "current" but
-              can also be "start" or "end".
-
-    Example:
-    
-    (start code js)
-     node.setData('width', 30);
-    (end code)
-    
-    If we were to make an animation of a node/edge width then we could do
-    
-    (start code js)
-      var node = viz.getNode('nodeId');
-      //set start and end values
-      node.setData('width', 10, 'start');
-      node.setData('width', 30, 'end');
-      //will animate nodes width property
-      viz.fx.animate({
-        modes: ['node-property:width'],
-        duration: 1000
-      });
-    (end code)
-    */
-    setData: function(prop, value, type) {
-      setDataInternal.call(this, "", prop, value, type);
-    },
-
-    /*
-    Method: setDataset
-
-    Convenience method to set multiple data values at once.
-    
-    Parameters:
-    
-    types - (array|string) A set of 'current', 'end' or 'start' values.
-    obj - (object) A hash containing the names and values of the properties to be altered.
-
-    Example:
-    (start code js)
-      node.setDataset(['current', 'end'], {
-        'width': [100, 5],
-        'color': ['#fff', '#ccc']
-      });
-      //...or also
-      node.setDataset('end', {
-        'width': 5,
-        'color': '#ccc'
-      });
-    (end code)
-    
-    See also: 
-    
-    <Accessors.setData>
-    
-    */
-    setDataset: function(types, obj) {
-      types = $.splat(types);
-      for(var attr in obj) {
-        for(var i=0, val = $.splat(obj[attr]), l=types.length; i<l; i++) {
-          this.setData(attr, val[i], types[i]);
-        }
-      }
-    },
-    
-    /*
-    Method: removeData
-
-    Remove data properties.
-
-    Parameters:
-
-    One or more property names as arguments. The dollar sign is not needed.
-
-    Example:
-    (start code js)
-    node.removeData('width'); //now the default width value is returned
-    (end code)
-    */
-    removeData: function() {
-      removeDataInternal.call(this, "", Array.prototype.slice.call(arguments));
-    },
-
-    /*
-    Method: getCanvasStyle
-
-    Returns the specified canvas style data value property. This is useful for
-    querying special/reserved <Graph.Node> canvas style data properties (i.e.
-    dollar prefixed properties that match with $canvas-<name of canvas style>).
-
-    Parameters:
-
-      prop  - (string) The name of the property. The dollar sign is not needed. For
-              example *getCanvasStyle(shadowBlur)* will return *data[$canvas-shadowBlur]*.
-      type  - (string) The type of the data property queried. Default's *current*. You can access *start* and *end* 
-              data properties also.
-              
-    Example:
-    (start code js)
-      node.getCanvasStyle('shadowBlur');
-    (end code)
-    
-    See also:
-    
-    <Accessors.getData>
-    */
-    getCanvasStyle: function(prop, type, force) {
-      return getDataInternal.call(
-          this, 'canvas', prop, type, force, this.Config.CanvasStyles);
-    },
-
-    /*
-    Method: setCanvasStyle
-
-    Sets the canvas style data property with some specific value.
-    This method is only useful for reserved (dollar prefixed) properties.
-    
-    Parameters:
-    
-    prop - (string) Name of the property. Can be any canvas property like 'shadowBlur', 'shadowColor', 'strokeStyle', etc.
-    value - (mixed) The value to set to the property.
-    type - (string) Default's *current*. Whether to set *start*, *current* or *end* type properties.
-    
-    Example:
-    
-    (start code js)
-     node.setCanvasStyle('shadowBlur', 30);
-    (end code)
-    
-    If we were to make an animation of a node/edge shadowBlur canvas style then we could do
-    
-    (start code js)
-      var node = viz.getNode('nodeId');
-      //set start and end values
-      node.setCanvasStyle('shadowBlur', 10, 'start');
-      node.setCanvasStyle('shadowBlur', 30, 'end');
-      //will animate nodes canvas style property for nodes
-      viz.fx.animate({
-        modes: ['node-style:shadowBlur'],
-        duration: 1000
-      });
-    (end code)
-    
-    See also:
-    
-    <Accessors.setData>.
-    */
-    setCanvasStyle: function(prop, value, type) {
-      setDataInternal.call(this, 'canvas', prop, value, type);
-    },
-
-    /*
-    Method: setCanvasStyles
-
-    Convenience method to set multiple styles at once.
-
-    Parameters:
-    
-    types - (array|string) A set of 'current', 'end' or 'start' values.
-    obj - (object) A hash containing the names and values of the properties to be altered.
-
-    See also:
-    
-    <Accessors.setDataset>.
-    */
-    setCanvasStyles: function(types, obj) {
-      types = $.splat(types);
-      for(var attr in obj) {
-        for(var i=0, val = $.splat(obj[attr]), l=types.length; i<l; i++) {
-          this.setCanvasStyle(attr, val[i], types[i]);
-        }
-      }
-    },
-
-    /*
-    Method: removeCanvasStyle
-
-    Remove canvas style properties from data.
-
-    Parameters:
-    
-    A variable number of canvas style strings.
-
-    See also:
-    
-    <Accessors.removeData>.
-    */
-    removeCanvasStyle: function() {
-      removeDataInternal.call(this, 'canvas', Array.prototype.slice.call(arguments));
-    },
-
-    /*
-    Method: getLabelData
-
-    Returns the specified label data value property. This is useful for
-    querying special/reserved <Graph.Node> label options (i.e.
-    dollar prefixed properties that match with $label-<name of label style>).
-
-    Parameters:
-
-      prop  - (string) The name of the property. The dollar sign prefix is not needed. For
-              example *getLabelData(size)* will return *data[$label-size]*.
-      type  - (string) The type of the data property queried. Default's *current*. You can access *start* and *end* 
-              data properties also.
-              
-    See also:
-    
-    <Accessors.getData>.
-    */
-    getLabelData: function(prop, type, force) {
-      return getDataInternal.call(
-          this, 'label', prop, type, force, this.Label);
-    },
-
-    /*
-    Method: setLabelData
-
-    Sets the current label data with some specific value.
-    This method is only useful for reserved (dollar prefixed) properties.
-
-    Parameters:
-    
-    prop - (string) Name of the property. Can be any canvas property like 'shadowBlur', 'shadowColor', 'strokeStyle', etc.
-    value - (mixed) The value to set to the property.
-    type - (string) Default's *current*. Whether to set *start*, *current* or *end* type properties.
-    
-    Example:
-    
-    (start code js)
-     node.setLabelData('size', 30);
-    (end code)
-    
-    If we were to make an animation of a node label size then we could do
-    
-    (start code js)
-      var node = viz.getNode('nodeId');
-      //set start and end values
-      node.setLabelData('size', 10, 'start');
-      node.setLabelData('size', 30, 'end');
-      //will animate nodes label size
-      viz.fx.animate({
-        modes: ['label-property:size'],
-        duration: 1000
-      });
-    (end code)
-    
-    See also:
-    
-    <Accessors.setData>.
-    */
-    setLabelData: function(prop, value, type) {
-      setDataInternal.call(this, 'label', prop, value, type);
-    },
-
-    /*
-    Method: setLabelDataset
-
-    Convenience function to set multiple label data at once.
-
-    Parameters:
-    
-    types - (array|string) A set of 'current', 'end' or 'start' values.
-    obj - (object) A hash containing the names and values of the properties to be altered.
-
-    See also:
-    
-    <Accessors.setDataset>.
-    */
-    setLabelDataset: function(types, obj) {
-      types = $.splat(types);
-      for(var attr in obj) {
-        for(var i=0, val = $.splat(obj[attr]), l=types.length; i<l; i++) {
-          this.setLabelData(attr, val[i], types[i]);
-        }
-      }
-    },
-
-    /*
-    Method: removeLabelData
-
-    Remove label properties from data.
-    
-    Parameters:
-    
-    A variable number of label property strings.
-
-    See also:
-    
-    <Accessors.removeData>.
-    */
-    removeLabelData: function() {
-      removeDataInternal.call(this, 'label', Array.prototype.slice.call(arguments));
-    }
-  };
-})();
-
-/*
-     Class: Graph.Node
-
-     A <Graph> node.
-     
-     Implements:
-     
-     <Accessors> methods.
-     
-     The following <Graph.Util> methods are implemented by <Graph.Node>
-     
-    - <Graph.Util.eachAdjacency>
-    - <Graph.Util.eachLevel>
-    - <Graph.Util.eachSubgraph>
-    - <Graph.Util.eachSubnode>
-    - <Graph.Util.anySubnode>
-    - <Graph.Util.getSubnodes>
-    - <Graph.Util.getParents>
-    - <Graph.Util.isDescendantOf>     
-*/
-Graph.Node = new Class({
-    
-  initialize: function(opt, klass, Node, Edge, Label) {
-    var innerOptions = {
-      'id': '',
-      'name': '',
-      'data': {},
-      'startData': {},
-      'endData': {},
-      'adjacencies': {},
-
-      'selected': false,
-      'drawn': false,
-      'exist': false,
-
-      'angleSpan': {
-        'begin': 0,
-        'end' : 0
-      },
-
-      'pos': new klass,
-      'startPos': new klass,
-      'endPos': new klass
-    };
-    
-    $.extend(this, $.extend(innerOptions, opt));
-    this.Config = this.Node = Node;
-    this.Edge = Edge;
-    this.Label = Label;
-  },
-
-    /*
-       Method: adjacentTo
-    
-       Indicates if the node is adjacent to the node specified by id
-
-       Parameters:
-    
-          id - (string) A node id.
-    
-       Example:
-       (start code js)
-        node.adjacentTo('nodeId') == true;
-       (end code)
-    */
-    adjacentTo: function(node) {
-        return node.id in this.adjacencies;
-    },
-
-    /*
-     Method: adjacentWithDirectionTo
-
-     Indicates if the node has a directed edge to the node specified by id
-
-     Parameters:
-
-     id - (string) A node id.
-
-     Example:
-     (start code js)
-     node.adjacentWithDirectionTo('nodeId') == true;
-     (end code)
-     */
-    adjacentWithDirectionTo: function(node) {
-        var areNeighbors = node.id in this.adjacencies;
-        if (!areNeighbors) {
-            return false;
-        }
-
-        var direction = this.adjacencies[node.id].data.$direction;
-        return direction[0] === this.id ;
-    },
-
-    /*
-       Method: getAdjacency
-    
-       Returns a <Graph.Adjacence> object connecting the current <Graph.Node> and the node having *id* as id.
-
-       Parameters:
-    
-          id - (string) A node id.
-    */  
-    getAdjacency: function(id) {
-        return this.adjacencies[id];
-    },
-
-    /*
-      Method: getPos
-   
-      Returns the position of the node.
-  
-      Parameters:
-   
-         type - (string) Default's *current*. Possible values are "start", "end" or "current".
-   
-      Returns:
-   
-        A <Complex> or <Polar> instance.
-  
-      Example:
-      (start code js)
-       var pos = node.getPos('end');
-      (end code)
-   */
-   getPos: function(type) {
-       type = type || "current";
-       if(type == "current") {
-         return this.pos;
-       } else if(type == "end") {
-         return this.endPos;
-       } else if(type == "start") {
-         return this.startPos;
-       }
-   },
-   /*
-     Method: setPos
-  
-     Sets the node's position.
-  
-     Parameters:
-  
-        value - (object) A <Complex> or <Polar> instance.
-        type - (string) Default's *current*. Possible values are "start", "end" or "current".
-  
-     Example:
-     (start code js)
-      node.setPos(new $jit.Complex(0, 0), 'end');
-     (end code)
-  */
-  setPos: function(value, type) {
-      type = type || "current";
-      var pos;
-      if(type == "current") {
-        pos = this.pos;
-      } else if(type == "end") {
-        pos = this.endPos;
-      } else if(type == "start") {
-        pos = this.startPos;
-      }
-      pos.set(value);
-  }
-});
-
-Graph.Node.implement(Accessors);
-
-/*
-     Class: Graph.Adjacence
-
-     A <Graph> adjacence (or edge) connecting two <Graph.Nodes>.
-     
-     Implements:
-     
-     <Accessors> methods.
-
-     See also:
-
-     <Graph>, <Graph.Node>
-
-     Properties:
-     
-      nodeFrom - A <Graph.Node> connected by this edge.
-      nodeTo - Another  <Graph.Node> connected by this edge.
-      data - Node data property containing a hash (i.e {}) with custom options.
-*/
-Graph.Adjacence = new Class({
-  
-  initialize: function(nodeFrom, nodeTo, data, Edge, Label) {
-    this.nodeFrom = nodeFrom;
-    this.nodeTo = nodeTo;
-    this.data = data || {};
-    this.startData = {};
-    this.endData = {};
-    this.Config = this.Edge = Edge;
-    this.Label = Label;
-  }
-});
-
-Graph.Adjacence.implement(Accessors);
-
-/*
-   Object: Graph.Util
-
-   <Graph> traversal and processing utility object.
-   
-   Note:
-   
-   For your convenience some of these methods have also been appended to <Graph> and <Graph.Node> classes.
-*/
-Graph.Util = {
-    /*
-       filter
-    
-       For internal use only. Provides a filtering function based on flags.
-    */
-    filter: function(param) {
-        if(!param || !($.type(param) == 'string')) return function() { return true; };
-        var props = param.split(" ");
-        return function(elem) {
-            for(var i=0; i<props.length; i++) { 
-              if(elem[props[i]]) { 
-                return false; 
-              }
-            }
-            return true;
-        };
-    },
-    /*
-       Method: getNode
-    
-       Returns a <Graph.Node> by *id*.
-       
-       Also implemented by:
-       
-       <Graph>
-
-       Parameters:
-
-       graph - (object) A <Graph> instance.
-       id - (string) A <Graph.Node> id.
-
-       Example:
-
-       (start code js)
-         $jit.Graph.Util.getNode(graph, 'nodeid');
-         //or...
-         graph.getNode('nodeid');
-       (end code)
-    */
-    getNode: function(graph, id) {
-        return graph.nodes[id];
-    },
-    
-    /*
-       Method: eachNode
-    
-       Iterates over <Graph> nodes performing an *action*.
-       
-       Also implemented by:
-       
-       <Graph>.
-
-       Parameters:
-
-       graph - (object) A <Graph> instance.
-       action - (function) A callback function having a <Graph.Node> as first formal parameter.
-
-       Example:
-       (start code js)
-         $jit.Graph.Util.eachNode(graph, function(node) {
-          alert(node.name);
-         });
-         //or...
-         graph.eachNode(function(node) {
-           alert(node.name);
-         });
-       (end code)
-    */
-    eachNode: function(graph, action, flags) {
-        var filter = this.filter(flags);
-        for(var i in graph.nodes) {
-          if(filter(graph.nodes[i])) action(graph.nodes[i]);
-        } 
-    },
-    
-    /*
-      Method: each
-   
-      Iterates over <Graph> nodes performing an *action*. It's an alias for <Graph.Util.eachNode>.
-      
-      Also implemented by:
-      
-      <Graph>.
-  
-      Parameters:
-  
-      graph - (object) A <Graph> instance.
-      action - (function) A callback function having a <Graph.Node> as first formal parameter.
-  
-      Example:
-      (start code js)
-        $jit.Graph.Util.each(graph, function(node) {
-         alert(node.name);
-        });
-        //or...
-        graph.each(function(node) {
-          alert(node.name);
-        });
-      (end code)
-   */
-   each: function(graph, action, flags) {
-      this.eachNode(graph, action, flags); 
-   },
-
- /*
-       Method: eachAdjacency
-    
-       Iterates over <Graph.Node> adjacencies applying the *action* function.
-       
-       Also implemented by:
-       
-       <Graph.Node>.
-
-       Parameters:
-
-       node - (object) A <Graph.Node>.
-       action - (function) A callback function having <Graph.Adjacence> as first formal parameter.
-
-       Example:
-       (start code js)
-         $jit.Graph.Util.eachAdjacency(node, function(adj) {
-          alert(adj.nodeTo.name);
-         });
-         //or...
-         node.eachAdjacency(function(adj) {
-           alert(adj.nodeTo.name);
-         });
-       (end code)
-    */
-    eachAdjacency: function(node, action, flags) {
-        var adj = node.adjacencies, filter = this.filter(flags);
-        for(var id in adj) {
-          var a = adj[id];
-          if(filter(a)) {
-            if(a.nodeFrom != node) {
-              var tmp = a.nodeFrom;
-              a.nodeFrom = a.nodeTo;
-              a.nodeTo = tmp;
-            }
-            action(a, id);
-          }
-        }
-    },
-
-     /*
-       Method: computeLevels
-    
-       Performs a BFS traversal setting the correct depth for each node.
-        
-       Also implemented by:
-       
-       <Graph>.
-       
-       Note:
-       
-       The depth of each node can then be accessed by 
-       >node._depth
-
-       Parameters:
-
-       graph - (object) A <Graph>.
-       id - (string) A starting node id for the BFS traversal.
-       startDepth - (optional|number) A minimum depth value. Default's 0.
-
-    */
-    computeLevels: function(graph, id, startDepth, flags) {
-        startDepth = startDepth || 0;
-        var filter = this.filter(flags);
-        this.eachNode(graph, function(elem) {
-            elem._flag = false;
-            elem._depth = -1;
-        }, flags);
-        var root = graph.getNode(id);
-        root._depth = startDepth;
-        var queue = [root];
-        while(queue.length != 0) {
-            var node = queue.pop();
-            node._flag = true;
-            this.eachAdjacency(node, function(adj) {
-                var n = adj.nodeTo;
-                if(n._flag == false && filter(n) && !adj._hiding) {
-                    if(n._depth < 0) n._depth = node._depth + 1 + startDepth;
-                    queue.unshift(n);
-                }
-            }, flags);
-        }
-    },
-
-    /*
-       Method: eachBFS
-    
-       Performs a BFS traversal applying *action* to each <Graph.Node>.
-       
-       Also implemented by:
-       
-       <Graph>.
-
-       Parameters:
-
-       graph - (object) A <Graph>.
-       id - (string) A starting node id for the BFS traversal.
-       action - (function) A callback function having a <Graph.Node> as first formal parameter.
-
-       Example:
-       (start code js)
-         $jit.Graph.Util.eachBFS(graph, 'mynodeid', function(node) {
-          alert(node.name);
-         });
-         //or...
-         graph.eachBFS('mynodeid', function(node) {
-           alert(node.name);
-         });
-       (end code)
-    */
-    eachBFS: function(graph, id, action, flags) {
-        var filter = this.filter(flags);
-        this.clean(graph);
-        var queue = [graph.getNode(id)];
-        while(queue.length != 0) {
-            var node = queue.pop();
-            if (!node) return;
-            node._flag = true;
-            action(node, node._depth);
-            this.eachAdjacency(node, function(adj) {
-                var n = adj.nodeTo;
-                if(n._flag == false && filter(n) && !adj._hiding) {
-                    n._flag = true;
-                    queue.unshift(n);
-                }
-            }, flags);
-        }
-    },
-    
-    /*
-       Method: eachLevel
-    
-       Iterates over a node's subgraph applying *action* to the nodes of relative depth between *levelBegin* and *levelEnd*.
-       In case you need to break the iteration, *action* should return false.
-       
-       Also implemented by:
-       
-       <Graph.Node>.
-
-       Parameters:
-       
-       node - (object) A <Graph.Node>.
-       levelBegin - (number) A relative level value.
-       levelEnd - (number) A relative level value.
-       action - (function) A callback function having a <Graph.Node> as first formal parameter.
-
-    */
-    eachLevel: function(node, levelBegin, levelEnd, action, flags) {
-        var d = node._depth, filter = this.filter(flags), that = this, shouldContinue = true;
-        levelEnd = levelEnd === false? Number.MAX_VALUE -d : levelEnd;
-        (function loopLevel(node, levelBegin, levelEnd) {
-            if(!shouldContinue) return;
-            var d = node._depth, ret;
-            if(d >= levelBegin && d <= levelEnd && filter(node)) ret = action(node, d);
-            if(typeof ret !== "undefined") shouldContinue = ret;
-            if(shouldContinue && d < levelEnd) {
-                that.eachAdjacency(node, function(adj) {
-                    var n = adj.nodeTo;
-                    if(n._depth > d) loopLevel(n, levelBegin, levelEnd);
-                });
-            }
-        })(node, levelBegin + d, levelEnd + d);
-    },
-
-    /*
-       Method: eachSubgraph
-    
-       Iterates over a node's children recursively.
-       
-       Also implemented by:
-       
-       <Graph.Node>.
-
-       Parameters:
-       node - (object) A <Graph.Node>.
-       action - (function) A callback function having a <Graph.Node> as first formal parameter.
-
-       Example:
-       (start code js)
-         $jit.Graph.Util.eachSubgraph(node, function(node) {
-           alert(node.name);
-         });
-         //or...
-         node.eachSubgraph(function(node) {
-           alert(node.name);
-         });
-       (end code)
-    */
-    eachSubgraph: function(node, action, flags) {
-      this.eachLevel(node, 0, false, action, flags);
-    },
-
-    /*
-       Method: eachSubnode
-    
-       Iterates over a node's children (without deeper recursion).
-       
-       Also implemented by:
-       
-       <Graph.Node>.
-       
-       Parameters:
-       node - (object) A <Graph.Node>.
-       action - (function) A callback function having a <Graph.Node> as first formal parameter.
-
-       Example:
-       (start code js)
-         $jit.Graph.Util.eachSubnode(node, function(node) {
-          alert(node.name);
-         });
-         //or...
-         node.eachSubnode(function(node) {
-           alert(node.name);
-         });
-       (end code)
-    */
-    eachSubnode: function(node, action, flags) {
-        this.eachLevel(node, 1, 1, action, flags);
-    },
-
-    /*
-       Method: anySubnode
-    
-       Returns *true* if any subnode matches the given condition.
-       
-       Also implemented by:
-       
-       <Graph.Node>.
-
-       Parameters:
-       node - (object) A <Graph.Node>.
-       cond - (function) A callback function returning a Boolean instance. This function has as first formal parameter a <Graph.Node>.
-
-       Example:
-       (start code js)
-         $jit.Graph.Util.anySubnode(node, function(node) { return node.name == "mynodename"; });
-         //or...
-         node.anySubnode(function(node) { return node.name == 'mynodename'; });
-       (end code)
-    */
-    anySubnode: function(node, cond, flags) {
-      var flag = false;
-      cond = cond || $.lambda(true);
-      var c = $.type(cond) == 'string'? function(n) { return n[cond]; } : cond;
-      this.eachSubnode(node, function(elem) {
-        if(c(elem)) flag = true;
-      }, flags);
-      return flag;
-    },
-  
-    /*
-       Method: getSubnodes
-    
-       Collects all subnodes for a specified node. 
-       The *level* parameter filters nodes having relative depth of *level* from the root node. 
-       
-       Also implemented by:
-       
-       <Graph.Node>.
-
-       Parameters:
-       node - (object) A <Graph.Node>.
-       level - (optional|number) Default's *0*. A starting relative depth for collecting nodes.
-
-       Returns:
-       An array of nodes.
-
-    */
-    getSubnodes: function(node, level, flags) {
-        var ans = [], that = this;
-        level = level || 0;
-        var levelStart, levelEnd;
-        if($.type(level) == 'array') {
-            levelStart = level[0];
-            levelEnd = level[1];
-        } else {
-            levelStart = level;
-            levelEnd = Number.MAX_VALUE - node._depth;
-        }
-        this.eachLevel(node, levelStart, levelEnd, function(n) {
-            ans.push(n);
-        }, flags);
-        return ans;
-    },
-  
-  
-    /*
-       Method: getParents
-    
-       Returns an Array of <Graph.Nodes> which are parents of the given node.
-       
-       Also implemented by:
-       
-       <Graph.Node>.
-
-       Parameters:
-       node - (object) A <Graph.Node>.
-
-       Returns:
-       An Array of <Graph.Nodes>.
-
-       Example:
-       (start code js)
-         var pars = $jit.Graph.Util.getParents(node);
-         //or...
-         var pars = node.getParents();
-         
-         if(pars.length > 0) {
-           //do stuff with parents
-         }
-       (end code)
-    */
-    getParents: function(node) {
-        var ans = [];
-        this.eachAdjacency(node, function(adj) {
-            var n = adj.nodeTo;
-            if(n._depth < node._depth) ans.push(n);
-        });
-        return ans;
-    },
-    
-    /*
-    Method: isDescendantOf
- 
-    Returns a boolean indicating if some node is descendant of the node with the given id. 
-
-    Also implemented by:
-    
-    <Graph.Node>.
-    
-    
-    Parameters:
-    node - (object) A <Graph.Node>.
-    id - (string) A <Graph.Node> id.
-
-    Example:
-    (start code js)
-      $jit.Graph.Util.isDescendantOf(node, "nodeid"); //true|false
-      //or...
-      node.isDescendantOf('nodeid');//true|false
-    (end code)
- */
- isDescendantOf: function(node, id) {
-    if(node.id == id) return true;
-    var pars = this.getParents(node), ans = false;
-    for ( var i = 0; !ans && i < pars.length; i++) {
-    ans = ans || this.isDescendantOf(pars[i], id);
-  }
-    return ans;
- },
-
- /*
-     Method: clean
-  
-     Cleans flags from nodes.
-
-     Also implemented by:
-     
-     <Graph>.
-     
-     Parameters:
-     graph - A <Graph> instance.
-  */
-  clean: function(graph) { this.eachNode(graph, function(elem) { elem._flag = false; }); },
-  
-  /* 
-    Method: getClosestNodeToOrigin 
-  
-    Returns the closest node to the center of canvas.
-  
-    Also implemented by:
-    
-    <Graph>.
-    
-    Parameters:
-   
-     graph - (object) A <Graph> instance.
-     prop - (optional|string) Default's 'current'. A <Graph.Node> position property. Possible properties are 'start', 'current' or 'end'.
-  
-  */
-  getClosestNodeToOrigin: function(graph, prop, flags) {
-   return this.getClosestNodeToPos(graph, Polar.KER, prop, flags);
-  },
-  
-  /* 
-    Method: getClosestNodeToPos
-  
-    Returns the closest node to the given position.
-  
-    Also implemented by:
-    
-    <Graph>.
-    
-    Parameters:
-   
-     graph - (object) A <Graph> instance.
-     pos - (object) A <Complex> or <Polar> instance.
-     prop - (optional|string) Default's *current*. A <Graph.Node> position property. Possible properties are 'start', 'current' or 'end'.
-  
-  */
-  getClosestNodeToPos: function(graph, pos, prop, flags) {
-   var node = null;
-   prop = prop || 'current';
-   pos = pos && pos.getc(true) || Complex.KER;
-   var distance = function(a, b) {
-     var d1 = a.x - b.x, d2 = a.y - b.y;
-     return d1 * d1 + d2 * d2;
-   };
-   this.eachNode(graph, function(elem) {
-     node = (node == null || distance(elem.getPos(prop).getc(true), pos) < distance(
-         node.getPos(prop).getc(true), pos)) ? elem : node;
-   }, flags);
-   return node;
-  } 
-};
-
-//Append graph methods to <Graph>
-$.each(['get', 'getNode', 'each', 'eachNode', 'computeLevels', 'eachBFS', 'clean', 'getClosestNodeToPos', 'getClosestNodeToOrigin'], function(m) {
-  Graph.prototype[m] = function() {
-    return Graph.Util[m].apply(Graph.Util, [this].concat(Array.prototype.slice.call(arguments)));
-  };
-});
-
-//Append node methods to <Graph.Node>
-$.each(['eachAdjacency', 'eachLevel', 'eachSubgraph', 'eachSubnode', 'anySubnode', 'getSubnodes', 'getParents', 'isDescendantOf'], function(m) {
-  Graph.Node.prototype[m] = function() {
-    return Graph.Util[m].apply(Graph.Util, [this].concat(Array.prototype.slice.call(arguments)));
-  };
-});
-
-/*
- * File: Graph.Op.js
- *
-*/
-
-/*
-   Object: Graph.Op
-
-   Perform <Graph> operations like adding/removing <Graph.Nodes> or <Graph.Adjacences>, 
-   morphing a <Graph> into another <Graph>, contracting or expanding subtrees, etc.
-
-*/
-Graph.Op = {
-
-    options: {
-      type: 'nothing',
-      duration: 2000,
-      hideLabels: true,
-      fps:30
-    },
-    
-    initialize: function(viz) {
-      this.viz = viz;
-    },
-
-    /*
-       Method: removeNode
-    
-       Removes one or more <Graph.Nodes> from the visualization. 
-       It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.
-
-       Parameters:
-    
-        node - (string|array) The node's id. Can also be an array having many ids.
-        opt - (object) Animation options. It's an object with optional properties described below
-        type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq",  "fade:con" or "iter".
-        duration - Described in <Options.Fx>.
-        fps - Described in <Options.Fx>.
-        transition - Described in <Options.Fx>.
-        hideLabels - (boolean) Default's *true*. Hide labels during the animation.
-   
-      Example:
-      (start code js)
-        var viz = new $jit.Viz(options);
-        viz.op.removeNode('nodeId', {
-          type: 'fade:seq',
-          duration: 1000,
-          hideLabels: false,
-          transition: $jit.Trans.Quart.easeOut
-        });
-        //or also
-        viz.op.removeNode(['someId', 'otherId'], {
-          type: 'fade:con',
-          duration: 1500
-        });
-      (end code)
-    */
-  
-    removeNode: function(node, opt) {
-        var viz = this.viz;
-        var options = $.merge(this.options, viz.controller, opt);
-        var n = $.splat(node);
-        var i, that, nodeObj;
-        switch(options.type) {
-            case 'nothing':
-                for(i=0; i<n.length; i++) {
-                    options.onBeforeRemoveNode(viz.graph.getNode(n[i]));
-                    viz.graph.removeNode(n[i]);
-                }
-                break;
-            
-            case 'replot':
-                this.removeNode(n, { type: 'nothing' });
-                viz.labels.clearLabels();
-                viz.refresh(true);
-                break;
-            
-            case 'fade:seq': case 'fade':
-                that = this;
-                //set alpha to 0 for nodes to remove.
-                for(i=0; i<n.length; i++) {
-                    nodeObj = viz.graph.getNode(n[i]);
-                    nodeObj.setData('alpha', 0, 'end');
-                }
-                viz.fx.animate($.merge(options, {
-                    modes: ['node-property:alpha'],
-                    onComplete: function() {
-                        that.removeNode(n, { type: 'nothing' });
-                        viz.labels.clearLabels();
-                        viz.reposition();
-                        viz.fx.animate($.merge(options, {
-                            modes: ['linear']
-                        }));
-                    }
-                }));
-                break;
-            
-            case 'fade:con':
-                that = this;
-                //set alpha to 0 for nodes to remove. Tag them for being ignored on computing positions.
-                for(i=0; i<n.length; i++) {
-                    nodeObj = viz.graph.getNode(n[i]);
-                    nodeObj.setData('alpha', 0, 'end');
-                    nodeObj.ignore = true;
-                }
-                viz.reposition();
-                viz.fx.animate($.merge(options, {
-                    modes: ['node-property:alpha', 'linear'],
-                    onComplete: function() {
-                        that.removeNode(n, { type: 'nothing' });
-                        options.onComplete && options.onComplete();
-                    }
-                }));
-                break;
-            
-            case 'iter':
-                that = this;
-                viz.fx.sequence({
-                    condition: function() { return n.length != 0; },
-                    step: function() { that.removeNode(n.shift(), { type: 'nothing' });  viz.labels.clearLabels(); },
-                    onComplete: function() { options.onComplete && options.onComplete(); },
-                    duration: Math.ceil(options.duration / n.length)
-                });
-                break;
-                
-            default: this.doError();
-        }
-    },
-    
-    /*
-       Method: removeEdge
-    
-       Removes one or more <Graph.Adjacences> from the visualization. 
-       It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.
-
-       Parameters:
-    
-       vertex - (array) An array having two strings which are the ids of the nodes connected by this edge (i.e ['id1', 'id2']). Can also be a two dimensional array holding many edges (i.e [['id1', 'id2'], ['id3', 'id4'], ...]).
-       opt - (object) Animation options. It's an object with optional properties described below
-       type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq",  "fade:con" or "iter".
-       duration - Described in <Options.Fx>.
-       fps - Described in <Options.Fx>.
-       transition - Described in <Options.Fx>.
-       hideLabels - (boolean) Default's *true*. Hide labels during the animation.
-   
-      Example:
-      (start code js)
-        var viz = new $jit.Viz(options);
-        viz.op.removeEdge(['nodeId', 'otherId'], {
-          type: 'fade:seq',
-          duration: 1000,
-          hideLabels: false,
-          transition: $jit.Trans.Quart.easeOut
-        });
-        //or also
-        viz.op.removeEdge([['someId', 'otherId'], ['id3', 'id4']], {
-          type: 'fade:con',
-          duration: 1500
-        });
-      (end code)
-    
-    */
-    removeEdge: function(vertex, opt) {
-        var viz = this.viz;
-        var options = $.merge(this.options, viz.controller, opt);
-        var v = ($.type(vertex[0]) == 'string')? [vertex] : vertex;
-        var i, that, adj;
-        switch(options.type) {
-            case 'nothing':
-                for(i=0; i<v.length; i++)   viz.graph.removeAdjacence(v[i][0], v[i][1]);
-                break;
-            
-            case 'replot':
-                this.removeEdge(v, { type: 'nothing' });
-                viz.refresh(true);
-                break;
-            
-            case 'fade:seq': case 'fade':
-                that = this;
-                //set alpha to 0 for edges to remove.
-                for(i=0; i<v.length; i++) {
-                    adj = viz.graph.getAdjacence(v[i][0], v[i][1]);
-                    if(adj) {
-                        adj.setData('alpha', 0,'end');
-                    }
-                }
-                viz.fx.animate($.merge(options, {
-                    modes: ['edge-property:alpha'],
-                    onComplete: function() {
-                        that.removeEdge(v, { type: 'nothing' });
-                        viz.reposition();
-                        viz.fx.animate($.merge(options, {
-                            modes: ['linear']
-                        }));
-                    }
-                }));
-                break;
-            
-            case 'fade:con':
-                that = this;
-                //set alpha to 0 for nodes to remove. Tag them for being ignored when computing positions.
-                for(i=0; i<v.length; i++) {
-                    adj = viz.graph.getAdjacence(v[i][0], v[i][1]);
-                    if(adj) {
-                        adj.setData('alpha',0 ,'end');
-                        adj.ignore = true;
-                    }
-                }
-                viz.reposition();
-                viz.fx.animate($.merge(options, {
-                    modes: ['edge-property:alpha', 'linear'],
-                    onComplete: function() {
-                        that.removeEdge(v, { type: 'nothing' });
-                        options.onComplete && options.onComplete();
-                    }
-                }));
-                break;
-            
-            case 'iter':
-                that = this;
-                viz.fx.sequence({
-                    condition: function() { return v.length != 0; },
-                    step: function() { that.removeEdge(v.shift(), { type: 'nothing' }); viz.labels.clearLabels(); },
-                    onComplete: function() { options.onComplete(); },
-                    duration: Math.ceil(options.duration / v.length)
-                });
-                break;
-                
-            default: this.doError();
-        }
-    },
-    
-    /*
-       Method: sum
-    
-       Adds a new graph to the visualization. 
-       The JSON graph (or tree) must at least have a common node with the current graph plotted by the visualization. 
-       The resulting graph can be defined as follows <http://mathworld.wolfram.com/GraphSum.html>
-
-       Parameters:
-    
-       json - (object) A json tree or graph structure. See also <Loader.loadJSON>.
-       opt - (object) Animation options. It's an object with optional properties described below
-       type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:seq",  "fade:con".
-       duration - Described in <Options.Fx>.
-       fps - Described in <Options.Fx>.
-       transition - Described in <Options.Fx>.
-       hideLabels - (boolean) Default's *true*. Hide labels during the animation.
-   
-      Example:
-      (start code js)
-        //...json contains a tree or graph structure...
-
-        var viz = new $jit.Viz(options);
-        viz.op.sum(json, {
-          type: 'fade:seq',
-          duration: 1000,
-          hideLabels: false,
-          transition: $jit.Trans.Quart.easeOut
-        });
-        //or also
-        viz.op.sum(json, {
-          type: 'fade:con',
-          duration: 1500
-        });
-      (end code)
-    
-    */
-    sum: function(json, opt) {
-        var viz = this.viz;
-        var options = $.merge(this.options, viz.controller, opt), root = viz.root;
-        var graph;
-        viz.root = opt.id || viz.root;
-        switch(options.type) {
-            case 'nothing':
-                graph = viz.construct(json);
-                graph.eachNode(function(elem) {
-                    elem.eachAdjacency(function(adj) {
-                        viz.graph.addAdjacence(adj.nodeFrom, adj.nodeTo, adj.data);
-                    });
-                });
-                break;
-            
-            case 'replot':
-                viz.refresh(true);
-                this.sum(json, { type: 'nothing' });
-                viz.refresh(true);
-                break;
-            
-            case 'fade:seq': case 'fade': case 'fade:con':
-                that = this;
-                graph = viz.construct(json);
-
-                //set alpha to 0 for nodes to add.
-                var fadeEdges = this.preprocessSum(graph);
-                var modes = !fadeEdges? ['node-property:alpha'] : ['node-property:alpha', 'edge-property:alpha'];
-                viz.reposition();
-                if(options.type != 'fade:con') {
-                    viz.fx.animate($.merge(options, {
-                        modes: ['linear'],
-                        onComplete: function() {
-                            viz.fx.animate($.merge(options, {
-                                modes: modes,
-                                onComplete: function() {
-                                    options.onComplete();
-                                }
-                            }));
-                        }
-                    }));
-                } else {
-                    viz.graph.eachNode(function(elem) {
-                        if (elem.id != root && elem.pos.isZero()) {
-                          elem.pos.set(elem.endPos); 
-                          elem.startPos.set(elem.endPos);
-                        }
-                    });
-                    viz.fx.animate($.merge(options, {
-                        modes: ['linear'].concat(modes)
-                    }));
-                }
-                break;
-
-            default: this.doError();
-        }
-    },
-    
-    /*
-       Method: morph
-    
-       This method will transform the current visualized graph into the new JSON representation passed in the method. 
-       The JSON object must at least have the root node in common with the current visualized graph.
-
-       Parameters:
-    
-       json - (object) A json tree or graph structure. See also <Loader.loadJSON>.
-       opt - (object) Animation options. It's an object with optional properties described below
-       type - (string) Default's *nothing*. Type of the animation. Can be "nothing", "replot", "fade:con".
-       duration - Described in <Options.Fx>.
-       fps - Described in <Options.Fx>.
-       transition - Described in <Options.Fx>.
-       hideLabels - (boolean) Default's *true*. Hide labels during the animation.
-       id - (string) The shared <Graph.Node> id between both graphs.
-       
-       extraModes - (optional|object) When morphing with an animation, dollar prefixed data parameters are added to 
-                    *endData* and not *data* itself. This way you can animate dollar prefixed parameters during your morphing operation. 
-                    For animating these extra-parameters you have to specify an object that has animation groups as keys and animation 
-                    properties as values, just like specified in <Graph.Plot.animate>.
-   
-      Example:
-      (start code js)
-        //...json contains a tree or graph structure...
-
-        var viz = new $jit.Viz(options);
-        viz.op.morph(json, {
-          type: 'fade',
-          duration: 1000,
-          hideLabels: false,
-          transition: $jit.Trans.Quart.easeOut
-        });
-        //or also
-        viz.op.morph(json, {
-          type: 'fade',
-          duration: 1500
-        });
-        //if the json data contains dollar prefixed params
-        //like $width or $height these too can be animated
-        viz.op.morph(json, {
-          type: 'fade',
-          duration: 1500
-        }, {
-          'node-property': ['width', 'height']
-        });
-      (end code)
-    
-    */
-    morph: function(json, opt, extraModes) {
-        extraModes = extraModes || {};
-        var viz = this.viz;
-        var options = $.merge(this.options, viz.controller, opt), root = viz.root;
-        var graph;
-        //TODO(nico) this hack makes morphing work with the Hypertree. 
-        //Need to check if it has been solved and this can be removed.
-        viz.root = opt.id || viz.root;
-        switch(options.type) {
-            case 'nothing':
-                graph = viz.construct(json);
-                graph.eachNode(function(elem) {
-                  var nodeExists = viz.graph.hasNode(elem.id);  
-                  elem.eachAdjacency(function(adj) {
-                    var adjExists = !!viz.graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
-                    viz.graph.addAdjacence(adj.nodeFrom, adj.nodeTo, adj.data);
-                    //Update data properties if the node existed
-                    if(adjExists) {
-                      var addedAdj = viz.graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
-                      for(var prop in (adj.data || {})) {
-                        addedAdj.data[prop] = adj.data[prop];
-                      }
-                    }
-                  });
-                  //Update data properties if the node existed
-                  if(nodeExists) {
-                    var addedNode = viz.graph.getNode(elem.id);
-                    for(var prop in (elem.data || {})) {
-                      addedNode.data[prop] = elem.data[prop];
-                    }
-                  }
-                });
-                viz.graph.eachNode(function(elem) {
-                    elem.eachAdjacency(function(adj) {
-                        if(!graph.getAdjacence(adj.nodeFrom.id, adj.nodeTo.id)) {
-                            viz.graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
-                        }
-                    });
-                    if(!graph.hasNode(elem.id)) viz.graph.removeNode(elem.id);
-                });
-                
-                break;
-            
-            case 'replot':
-                viz.labels.clearLabels(true);
-                this.morph(json, { type: 'nothing' });
-                viz.refresh(true);
-                viz.refresh(true);
-                break;
-                
-            case 'fade:seq': case 'fade': case 'fade:con':
-                that = this;
-                graph = viz.construct(json);
-                //preprocessing for nodes to delete.
-                //get node property modes to interpolate
-                var nodeModes = ('node-property' in extraModes) 
-                  && $.map($.splat(extraModes['node-property']), 
-                      function(n) { return '$' + n; });
-                viz.graph.eachNode(function(elem) {
-                  var graphNode = graph.getNode(elem.id);   
-                  if(!graphNode) {
-                      elem.setData('alpha', 1);
-                      elem.setData('alpha', 1, 'start');
-                      elem.setData('alpha', 0, 'end');
-                      elem.ignore = true;
-                    } else {
-                      //Update node data information
-                      var graphNodeData = graphNode.data;
-                      for(var prop in graphNodeData) {
-                        if(nodeModes && ($.indexOf(nodeModes, prop) > -1)) {
-                          elem.endData[prop] = graphNodeData[prop];
-                        } else {
-                          elem.data[prop] = graphNodeData[prop];
-                        }
-                      }
-                    }
-                }); 
-                viz.graph.eachNode(function(elem) {
-                    if(elem.ignore) return;
-                    elem.eachAdjacency(function(adj) {
-                        if(adj.nodeFrom.ignore || adj.nodeTo.ignore) return;
-                        var nodeFrom = graph.getNode(adj.nodeFrom.id);
-                        var nodeTo = graph.getNode(adj.nodeTo.id);
-                        if(!nodeFrom.adjacentTo(nodeTo)) {
-                            var adj = viz.graph.getAdjacence(nodeFrom.id, nodeTo.id);
-                            fadeEdges = true;
-                            adj.setData('alpha', 1);
-                            adj.setData('alpha', 1, 'start');
-                            adj.setData('alpha', 0, 'end');
-                            adj._hiding = true;
-                        } else if (adj.data.$direction && adj.data.$direction[0] === nodeFrom.id) {
-                            // only check one direction (from -> to)
-                            if (!nodeFrom.adjacentWithDirectionTo(nodeTo)) {
-                                adj._reversing = true;
-                            }
-                        }
-                    });
-                }); 
-                //preprocessing for adding nodes.
-                var fadeEdges = this.preprocessSum(graph);
-
-                var modes = !fadeEdges? ['node-property:alpha'] : 
-                                        ['node-property:alpha', 
-                                         'edge-property:alpha'];
-                //Append extra node-property animations (if any)
-                modes[0] = modes[0] + (('node-property' in extraModes)? 
-                    (':' + $.splat(extraModes['node-property']).join(':')) : '');
-                //Append extra edge-property animations (if any)
-                modes[1] = (modes[1] || 'edge-property:alpha') + (('edge-property' in extraModes)? 
-                    (':' + $.splat(extraModes['edge-property']).join(':')) : '');
-                //Add label-property animations (if any)
-                if('label-property' in extraModes) {
-                  modes.push('label-property:' + $.splat(extraModes['label-property']).join(':'))
-                }
-                //only use reposition if its implemented.
-                if (viz.reposition) {
-                  viz.reposition();
-                } else {
-                  viz.compute('end');
-                }
-                this._updateDirectedEdges();
-
-                viz.graph.eachNode(function(elem) {
-                    if (elem.id != root && elem.pos.getp().equals(Polar.KER)) {
-                      elem.pos.set(elem.endPos); elem.startPos.set(elem.endPos);
-                    }
-                });
-                viz.fx.animate($.merge(options, {
-                    modes: [extraModes.position || 'polar'].concat(modes),
-                    onComplete: function() {
-                        viz.graph.eachNode(function(elem) {
-                            if(elem.ignore) viz.graph.removeNode(elem.id);
-                        });
-                        viz.graph.eachNode(function(elem) {
-                            elem.eachAdjacency(function(adj) {
-                                if(adj.ignore) viz.graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
-                            });
-                        });
-                        options.onComplete();
-                    }
-                }));
-                break;
-
-            default:;
-        }
-    },
-
-    _updateDirectedEdges: function () {
-        var graph = this.viz.graph;
-        graph.eachNode(function(node) {
-            node.eachAdjacency(function (adj) {
-
-                var isDirectedEdge = adj.data.$direction;
-                if (isDirectedEdge && adj.nodeFrom.id !== adj.data.$direction[0]) {
-                    return;
-                }
-
-                if (adj._hiding) {
-                    graph.removeAdjacence(adj.nodeFrom.id, adj.nodeTo.id);
-                }
-
-                if (adj._reversing) {
-                    var from = adj.nodeFrom.id;
-                    var to = adj.nodeTo.id;
-//
-//                    // swap instead of adding and removing
-                    var edge1 = graph.edges[from][to];
-                    var edge2 = graph.edges[to][from];
-
-                    edge1.data.$direction = [to, from];
-                    edge2.data.$direction = [to, from];
-
-                    adj._reversing = undefined;
-                }
-            });
-        });
-    },
-    
-  /*
-    Method: contract
- 
-    Collapses the subtree of the given node. The node will have a _collapsed=true_ property.
-    
-    Parameters:
- 
-    node - (object) A <Graph.Node>.
-    opt - (object) An object containing options described below
-    type - (string) Whether to 'replot' or 'animate' the contraction.
-   
-    There are also a number of Animation options. For more information see <Options.Fx>.
-
-    Example:
-    (start code js)
-     var viz = new $jit.Viz(options);
-     viz.op.contract(node, {
-       type: 'animate',
-       duration: 1000,
-       hideLabels: true,
-       transition: $jit.Trans.Quart.easeOut
-     });
-   (end code)
- 
-   */
-    contract: function(node, opt) {
-      var viz = this.viz;
-      if(node.collapsed || !node.anySubnode($.lambda(true))) return;
-      opt = $.merge(this.options, viz.config, opt || {}, {
-        'modes': ['node-property:alpha:span', 'linear']
-      });
-      node.collapsed = true;
-      (function subn(n) {
-        n.eachSubnode(function(ch) {
-          ch.ignore = true;
-          ch.setData('alpha', 0, opt.type == 'animate'? 'end' : 'current');
-          subn(ch);
-        });
-      })(node);
-      if(opt.type == 'animate') {
-        viz.compute('end');
-        if(viz.rotated) {
-          viz.rotate(viz.rotated, 'none', {
-            'property':'end'
-          });
-        }
-        (function subn(n) {
-          n.eachSubnode(function(ch) {
-            ch.setPos(node.getPos('end'), 'end');
-            subn(ch);
-          });
-        })(node);
-        viz.fx.animate(opt);
-      } else if(opt.type == 'replot'){
-        viz.refresh();
-      }
-    },
-    
-    /*
-    Method: expand
- 
-    Expands the previously contracted subtree. The given node must have the _collapsed=true_ property.
-    
-    Parameters:
- 
-    node - (object) A <Graph.Node>.
-    opt - (object) An object containing options described below
-    type - (string) Whether to 'replot' or 'animate'.
-     
-    There are also a number of Animation options. For more information see <Options.Fx>.
-
-    Example:
-    (start code js)
-      var viz = new $jit.Viz(options);
-      viz.op.expand(node, {
-        type: 'animate',
-        duration: 1000,
-        hideLabels: true,
-        transition: $jit.Trans.Quart.easeOut
-      });
-    (end code)
- 
-   */
-    expand: function(node, opt) {
-      if(!('collapsed' in node)) return;
-      var viz = this.viz;
-      opt = $.merge(this.options, viz.config, opt || {}, {
-        'modes': ['node-property:alpha:span', 'linear']
-      });
-      delete node.collapsed;
-      (function subn(n) {
-        n.eachSubnode(function(ch) {
-          delete ch.ignore;
-          ch.setData('alpha', 1, opt.type == 'animate'? 'end' : 'current');
-          subn(ch);
-        });
-      })(node);
-      if(opt.type == 'animate') {
-        viz.compute('end');
-        if(viz.rotated) {
-          viz.rotate(viz.rotated, 'none', {
-            'property':'end'
-          });
-        }
-        viz.fx.animate(opt);
-      } else if(opt.type == 'replot'){
-        viz.refresh();
-      }
-    },
-
-    preprocessSum: function(graph) {
-        var viz = this.viz;
-        graph.eachNode(function(elem) {
-            if(!viz.graph.hasNode(elem.id)) {
-                viz.graph.addNode(elem);
-                var n = viz.graph.getNode(elem.id);
-                n.setData('alpha', 0);
-                n.setData('alpha', 0, 'start');
-                n.setData('alpha', 1, 'end');
-            }
-        }); 
-        var fadeEdges = false;
-        graph.eachNode(function(elem) {
-            elem.eachAdjacency(function(adj) {
-                var nodeFrom = viz.graph.getNode(adj.nodeFrom.id);
-                var nodeTo = viz.graph.getNode(adj.nodeTo.id);
-                if(!nodeFrom.adjacentTo(nodeTo)) {
-                    var adj = viz.graph.addAdjacence(nodeFrom, nodeTo, adj.data);
-                    if(nodeFrom.startAlpha == nodeFrom.endAlpha 
-                    && nodeTo.startAlpha == nodeTo.endAlpha) {
-                        fadeEdges = true;
-                        adj.setData('alpha', 0);
-                        adj.setData('alpha', 0, 'start');
-                        adj.setData('alpha', 1, 'end');
-                    } 
-                }
-            });
-        }); 
-        return fadeEdges;
-    }
-};
-
-
-
-/*
- File: Helpers.js
-
- Helpers are objects that contain rendering primitives (like rectangles, ellipses, etc), for plotting nodes and edges.
- Helpers also contain implementations of the *contains* method, a method returning a boolean indicating whether the mouse
- position is over the rendered shape.
-
- Helpers are very useful when implementing new NodeTypes, since you can access them through *this.nodeHelper* and
- *this.edgeHelper* <Graph.Plot> properties, providing you with simple primitives and mouse-position check functions.
-
- Example:
- (start code js)
- //implement a new node type
- $jit.Viz.Plot.NodeTypes.implement({
- 'customNodeType': {
- 'render': function(node, canvas) {
- this.nodeHelper.circle.render ...
- },
- 'contains': function(node, pos) {
- this.nodeHelper.circle.contains ...
- }
- }
- });
- //implement an edge type
- $jit.Viz.Plot.EdgeTypes.implement({
- 'customNodeType': {
- 'render': function(node, canvas) {
- this.edgeHelper.circle.render ...
- },
- //optional
- 'contains': function(node, pos) {
- this.edgeHelper.circle.contains ...
- }
- }
- });
- (end code)
-
- */
-
-/*
- Object: NodeHelper
-
- Contains rendering and other type of primitives for simple shapes.
- */
-var NodeHelper = {
-    'none': {
-        'render': $.empty,
-        'contains': $.lambda(false)
-    },
-    /*
-     Object: NodeHelper.circle
-     */
-    'circle': {
-        /*
-         Method: render
-
-         Renders a circle into the canvas.
-
-         Parameters:
-
-         type - (string) Possible options are 'fill' or 'stroke'.
-         pos - (object) An *x*, *y* object with the position of the center of the circle.
-         radius - (number) The radius of the circle to be rendered.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         NodeHelper.circle.render('fill', { x: 10, y: 30 }, 30, viz.canvas);
-         (end code)
-         */
-        'render': function(type, pos, radius, canvas){
-            var ctx = canvas.getCtx();
-            ctx.beginPath();
-            ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2, true);
-            ctx.closePath();
-            ctx[type]();
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         npos - (object) An *x*, *y* object with the <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         radius - (number) The radius of the rendered circle.
-
-         Example:
-         (start code js)
-         NodeHelper.circle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30); //true
-         (end code)
-         */
-        'contains': function(npos, pos, radius){
-            var diffx = npos.x - pos.x,
-                diffy = npos.y - pos.y,
-                diff = diffx * diffx + diffy * diffy;
-            return diff <= radius * radius;
-        }
-    },
-    /*
-     Object: NodeHelper.ellipse
-     */
-    'ellipse': {
-        /*
-         Method: render
-
-         Renders an ellipse into the canvas.
-
-         Parameters:
-
-         type - (string) Possible options are 'fill' or 'stroke'.
-         pos - (object) An *x*, *y* object with the position of the center of the ellipse.
-         width - (number) The width of the ellipse.
-         height - (number) The height of the ellipse.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         NodeHelper.ellipse.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas);
-         (end code)
-         */
-        'render': function(type, pos, width, height, canvas){
-            var ctx = canvas.getCtx(),
-                scalex = 1,
-                scaley = 1,
-                scaleposx = 1,
-                scaleposy = 1,
-                radius = 0;
-
-            if (width > height) {
-                radius = width / 2;
-                scaley = height / width;
-                scaleposy = width / height;
-            } else {
-                radius = height / 2;
-                scalex = width / height;
-                scaleposx = height / width;
-            }
-
-            ctx.save();
-            ctx.scale(scalex, scaley);
-            ctx.beginPath();
-            ctx.arc(pos.x * scaleposx, pos.y * scaleposy, radius, 0, Math.PI * 2, true);
-            ctx.closePath();
-            ctx[type]();
-            ctx.restore();
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         npos - (object) An *x*, *y* object with the <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         width - (number) The width of the rendered ellipse.
-         height - (number) The height of the rendered ellipse.
-
-         Example:
-         (start code js)
-         NodeHelper.ellipse.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40);
-         (end code)
-         */
-        'contains': function(npos, pos, width, height){
-            var radius = 0,
-                scalex = 1,
-                scaley = 1,
-                diffx = 0,
-                diffy = 0,
-                diff = 0;
-
-            if (width > height) {
-                radius = width / 2;
-                scaley = height / width;
-            } else {
-                radius = height / 2;
-                scalex = width / height;
-            }
-
-            diffx = (npos.x - pos.x) * (1 / scalex);
-            diffy = (npos.y - pos.y) * (1 / scaley);
-            diff = diffx * diffx + diffy * diffy;
-            return diff <= radius * radius;
-        }
-    },
-    /*
-     Object: NodeHelper.square
-     */
-    'square': {
-        /*
-         Method: render
-
-         Renders a square into the canvas.
-
-         Parameters:
-
-         type - (string) Possible options are 'fill' or 'stroke'.
-         pos - (object) An *x*, *y* object with the position of the center of the square.
-         dim - (number) The radius (or half-diameter) of the square.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         NodeHelper.square.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
-         (end code)
-         */
-        'render': function(type, pos, dim, canvas){
-            canvas.getCtx()[type + "Rect"](pos.x - dim, pos.y - dim, 2*dim, 2*dim);
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         npos - (object) An *x*, *y* object with the <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         dim - (number) The radius (or half-diameter) of the square.
-
-         Example:
-         (start code js)
-         NodeHelper.square.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
-         (end code)
-         */
-        'contains': function(npos, pos, dim){
-            return Math.abs(pos.x - npos.x) <= dim && Math.abs(pos.y - npos.y) <= dim;
-        }
-    },
-    /*
-     Object: NodeHelper.rectangle
-     */
-    'rectangle': {
-        /*
-         Method: render
-
-         Renders a rectangle into the canvas.
-
-         Parameters:
-
-         type - (string) Possible options are 'fill' or 'stroke'.
-         pos - (object) An *x*, *y* object with the position of the center of the rectangle.
-         width - (number) The width of the rectangle.
-         height - (number) The height of the rectangle.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         NodeHelper.rectangle.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas);
-         (end code)
-         */
-        'render': function(type, pos, width, height, canvas){
-            canvas.getCtx()[type + "Rect"](pos.x - width / 2, pos.y - height / 2,
-                width, height);
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         npos - (object) An *x*, *y* object with the <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         width - (number) The width of the rendered rectangle.
-         height - (number) The height of the rendered rectangle.
-
-         Example:
-         (start code js)
-         NodeHelper.rectangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40);
-         (end code)
-         */
-        'contains': function(npos, pos, width, height){
-            return Math.abs(pos.x - npos.x) <= width / 2
-                && Math.abs(pos.y - npos.y) <= height / 2;
-        }
-    },
-    /*
-     Object: NodeHelper.triangle
-     */
-    'triangle': {
-        /*
-         Method: render
-
-         Renders a triangle into the canvas.
-
-         Parameters:
-
-         type - (string) Possible options are 'fill' or 'stroke'.
-         pos - (object) An *x*, *y* object with the position of the center of the triangle.
-         dim - (number) Half the base and half the height of the triangle.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         NodeHelper.triangle.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
-         (end code)
-         */
-        'render': function(type, pos, dim, canvas){
-            var ctx = canvas.getCtx(),
-                c1x = pos.x,
-                c1y = pos.y - dim,
-                c2x = c1x - dim,
-                c2y = pos.y + dim,
-                c3x = c1x + dim,
-                c3y = c2y;
-            ctx.beginPath();
-            ctx.moveTo(c1x, c1y);
-            ctx.lineTo(c2x, c2y);
-            ctx.lineTo(c3x, c3y);
-            ctx.closePath();
-            ctx[type]();
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         npos - (object) An *x*, *y* object with the <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         dim - (number) Half the base and half the height of the triangle.
-
-         Example:
-         (start code js)
-         NodeHelper.triangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
-         (end code)
-         */
-        'contains': function(npos, pos, dim) {
-            return NodeHelper.circle.contains(npos, pos, dim);
-        }
-    },
-    /*
-     Object: NodeHelper.star
-     */
-    'star': {
-        /*
-         Method: render
-
-         Renders a star (concave decagon) into the canvas.
-
-         Parameters:
-
-         type - (string) Possible options are 'fill' or 'stroke'.
-         pos - (object) An *x*, *y* object with the position of the center of the star.
-         dim - (number) The length of a side of a concave decagon.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         NodeHelper.star.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
-         (end code)
-         */
-        'render': function(type, pos, dim, canvas){
-            var ctx = canvas.getCtx(),
-                pi5 = Math.PI / 5;
-            ctx.save();
-            ctx.translate(pos.x, pos.y);
-            ctx.beginPath();
-            ctx.moveTo(dim, 0);
-            for (var i = 0; i < 9; i++) {
-                ctx.rotate(pi5);
-                if (i % 2 == 0) {
-                    ctx.lineTo((dim / 0.525731) * 0.200811, 0);
-                } else {
-                    ctx.lineTo(dim, 0);
-                }
-            }
-            ctx.closePath();
-            ctx[type]();
-            ctx.restore();
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         npos - (object) An *x*, *y* object with the <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         dim - (number) The length of a side of a concave decagon.
-
-         Example:
-         (start code js)
-         NodeHelper.star.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
-         (end code)
-         */
-        'contains': function(npos, pos, dim) {
-            return NodeHelper.circle.contains(npos, pos, dim);
-        }
-    }
-};
-
-/*
- Object: EdgeHelper
-
- Contains rendering primitives for simple edge shapes.
- */
-var EdgeHelper = {
-    /*
-     Object: EdgeHelper.line
-     */
-    'line': {
-        /*
-         Method: render
-
-         Renders a line into the canvas.
-
-         Parameters:
-
-         from - (object) An *x*, *y* object with the starting position of the line.
-         to - (object) An *x*, *y* object with the ending position of the line.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         EdgeHelper.line.render({ x: 10, y: 30 }, { x: 10, y: 50 }, viz.canvas);
-         (end code)
-         */
-        'render': function(from, to, canvas){
-            var ctx = canvas.getCtx();
-            ctx.beginPath();
-            ctx.moveTo(from.x, from.y);
-            ctx.lineTo(to.x, to.y);
-            ctx.stroke();
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         posFrom - (object) An *x*, *y* object with a <Graph.Node> position.
-         posTo - (object) An *x*, *y* object with a <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         epsilon - (number) The dimension of the shape.
-
-         Example:
-         (start code js)
-         EdgeHelper.line.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
-         (end code)
-         */
-        'contains': function(posFrom, posTo, pos, epsilon) {
-            var min = Math.min,
-                max = Math.max,
-                minPosX = min(posFrom.x, posTo.x) - epsilon,
-                maxPosX = max(posFrom.x, posTo.x) + epsilon,
-                minPosY = min(posFrom.y, posTo.y) - epsilon,
-                maxPosY = max(posFrom.y, posTo.y) + epsilon;
-
-            if(pos.x >= minPosX && pos.x <= maxPosX
-                && pos.y >= minPosY && pos.y <= maxPosY) {
-                if(Math.abs(posTo.x - posFrom.x) <= epsilon) {
-                    return true;
-                }
-                var dist = (posTo.y - posFrom.y) / (posTo.x - posFrom.x) * (pos.x - posFrom.x) + posFrom.y;
-                return Math.abs(dist - pos.y) <= epsilon;
-            }
-            return false;
-        }
-    },
-    /*
-     Object: EdgeHelper.arrow
-     */
-    'arrow': {
-        /*
-         Method: render
-
-         Renders an arrow into the canvas.
-
-         Parameters:
-
-         from - (object) An *x*, *y* object with the starting position of the arrow.
-         to - (object) An *x*, *y* object with the ending position of the arrow.
-         dim - (number) The dimension of the arrow.
-         swap - (boolean) Whether to set the arrow pointing to the starting position or the ending position.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         EdgeHelper.arrow.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 13, false, viz.canvas);
-         (end code)
-         */
-        'render': function(from, to, dim, swap, canvas, arrowPosition){
-            var ctx = canvas.getCtx();
-            // invert edge direction
-            if (swap) {
-                var tmp = from;
-                from = to;
-                to = tmp;
-            }
-            var vect = new Complex(to.x - from.x, to.y - from.y);
-            vect.$scale(dim / vect.norm());
-            var posVect;
-            switch (arrowPosition) {
-                case 'end':    posVect = vect; break;
-                case 'center': posVect = new Complex((to.x - from.x)/2, (to.y - from.y)/2); break;
-            }
-            var intermediatePoint = new Complex(to.x - posVect.x, to.y - posVect.y),
-                normal = new Complex(-vect.y / 2, vect.x / 2),
-                endPoint = intermediatePoint.add(vect),
-                v1 = intermediatePoint.add(normal),
-                v2 = intermediatePoint.$add(normal.$scale(-1));
-
-            ctx.beginPath();
-            ctx.moveTo(from.x, from.y);
-            ctx.lineTo(to.x, to.y);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.moveTo(v1.x, v1.y);
-            ctx.moveTo(v1.x, v1.y);
-            ctx.lineTo(v2.x, v2.y);
-            ctx.lineTo(endPoint.x, endPoint.y);
-            ctx.closePath();
-            ctx.fill();
-        },
-        /*
-         Method: contains
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         posFrom - (object) An *x*, *y* object with a <Graph.Node> position.
-         posTo - (object) An *x*, *y* object with a <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         epsilon - (number) The dimension of the shape.
-
-         Example:
-         (start code js)
-         EdgeHelper.arrow.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
-         (end code)
-         */
-        'contains': function(posFrom, posTo, pos, epsilon) {
-            return EdgeHelper.line.contains(posFrom, posTo, pos, epsilon);
-        }
-    },
-    /*
-     Object: EdgeHelper.hyperline
-     */
-    'hyperline': {
-        /*
-         Method: render
-
-         Renders a hyperline into the canvas. A hyperline are the lines drawn for the <Hypertree> visualization.
-
-         Parameters:
-
-         from - (object) An *x*, *y* object with the starting position of the hyperline. *x* and *y* must belong to [0, 1).
-         to - (object) An *x*, *y* object with the ending position of the hyperline. *x* and *y* must belong to [0, 1).
-         r - (number) The scaling factor.
-         canvas - (object) A <Canvas> instance.
-
-         Example:
-         (start code js)
-         EdgeHelper.hyperline.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 100, viz.canvas);
-         (end code)
-         */
-        'render': function(from, to, r, canvas){
-            var ctx = canvas.getCtx();
-            var centerOfCircle = computeArcThroughTwoPoints(from, to);
-            if (centerOfCircle.a > 1000 || centerOfCircle.b > 1000
-                || centerOfCircle.ratio < 0) {
-                ctx.beginPath();
-                ctx.moveTo(from.x * r, from.y * r);
-                ctx.lineTo(to.x * r, to.y * r);
-                ctx.stroke();
-            } else {
-                var angleBegin = Math.atan2(to.y - centerOfCircle.y, to.x
-                    - centerOfCircle.x);
-                var angleEnd = Math.atan2(from.y - centerOfCircle.y, from.x
-                    - centerOfCircle.x);
-                var sense = sense(angleBegin, angleEnd);
-                ctx.beginPath();
-                ctx.arc(centerOfCircle.x * r, centerOfCircle.y * r, centerOfCircle.ratio
-                    * r, angleBegin, angleEnd, sense);
-                ctx.stroke();
-            }
-            /*
-             Calculates the arc parameters through two points.
-
-             More information in <http://en.wikipedia.org/wiki/Poincar%C3%A9_disc_model#Analytic_geometry_constructions_in_the_hyperbolic_plane>
-
-             Parameters:
-
-             p1 - A <Complex> instance.
-             p2 - A <Complex> instance.
-             scale - The Disk's diameter.
-
-             Returns:
-
-             An object containing some arc properties.
-             */
-            function computeArcThroughTwoPoints(p1, p2){
-                var aDen = (p1.x * p2.y - p1.y * p2.x), bDen = aDen;
-                var sq1 = p1.squaredNorm(), sq2 = p2.squaredNorm();
-                // Fall back to a straight line
-                if (aDen == 0)
-                    return {
-                        x: 0,
-                        y: 0,
-                        ratio: -1
-                    };
-
-                var a = (p1.y * sq2 - p2.y * sq1 + p1.y - p2.y) / aDen;
-                var b = (p2.x * sq1 - p1.x * sq2 + p2.x - p1.x) / bDen;
-                var x = -a / 2;
-                var y = -b / 2;
-                var squaredRatio = (a * a + b * b) / 4 - 1;
-                // Fall back to a straight line
-                if (squaredRatio < 0)
-                    return {
-                        x: 0,
-                        y: 0,
-                        ratio: -1
-                    };
-                var ratio = Math.sqrt(squaredRatio);
-                var out = {
-                    x: x,
-                    y: y,
-                    ratio: ratio > 1000? -1 : ratio,
-                    a: a,
-                    b: b
-                };
-
-                return out;
-            }
-            /*
-             Sets angle direction to clockwise (true) or counterclockwise (false).
-
-             Parameters:
-
-             angleBegin - Starting angle for drawing the arc.
-             angleEnd - The HyperLine will be drawn from angleBegin to angleEnd.
-
-             Returns:
-
-             A Boolean instance describing the sense for drawing the HyperLine.
-             */
-            function sense(angleBegin, angleEnd){
-                return (angleBegin < angleEnd)? ((angleBegin + Math.PI > angleEnd)? false
-                    : true) : ((angleEnd + Math.PI > angleBegin)? true : false);
-            }
-        },
-        /*
-         Method: contains
-
-         Not Implemented
-
-         Returns *true* if *pos* is contained in the area of the shape. Returns *false* otherwise.
-
-         Parameters:
-
-         posFrom - (object) An *x*, *y* object with a <Graph.Node> position.
-         posTo - (object) An *x*, *y* object with a <Graph.Node> position.
-         pos - (object) An *x*, *y* object with the position to check.
-         epsilon - (number) The dimension of the shape.
-
-         Example:
-         (start code js)
-         EdgeHelper.hyperline.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
-         (end code)
-         */
-        'contains': $.lambda(false)
-    }
-};
-
-
-	/*
- * File: Graph.Plot.js
- */
-
-/*
-   Object: Graph.Plot
-
-   <Graph> rendering and animation methods.
-   
-   Properties:
-   
-   nodeHelper - <NodeHelper> object.
-   edgeHelper - <EdgeHelper> object.
-*/
-Graph.Plot = {
-    //Default initializer
-    initialize: function(viz, klass){
-      this.viz = viz;
-      this.config = viz.config;
-      this.node = viz.config.Node;
-      this.edge = viz.config.Edge;
-      this.animation = new Animation;
-      this.nodeTypes = new klass.Plot.NodeTypes;
-      this.edgeTypes = new klass.Plot.EdgeTypes;
-      this.labels = viz.labels;
-   },
-
-    //Add helpers
-    nodeHelper: NodeHelper,
-    edgeHelper: EdgeHelper,
-    
-    Interpolator: {
-        //node/edge property parsers
-        'map': {
-          'border': 'color',
-          'color': 'color',
-          'width': 'number',
-          'height': 'number',
-          'dim': 'number',
-          'alpha': 'number',
-          'lineWidth': 'number',
-          'angularWidth':'number',
-          'span':'number',
-          'valueArray':'array-number',
-          'dimArray':'array-number',
-          'vertices':'polygon'
-          //'colorArray':'array-color'
-        },
-
-        //canvas specific parsers
-        'canvas': {
-          'globalAlpha': 'number',
-          'fillStyle': 'color',
-          'strokeStyle': 'color',
-          'lineWidth': 'number',
-          'shadowBlur': 'number',
-          'shadowColor': 'color',
-          'shadowOffsetX': 'number',
-          'shadowOffsetY': 'number',
-          'miterLimit': 'number'
-        },
-
-        //label parsers
-        'label': {
-          'size': 'number',
-          'color': 'color'
-        },
-
-        //Number interpolator
-        'compute': function(from, to, delta) {
-          return from + (to - from) * delta;
-        },
-
-        //Position interpolators
-        'moebius': function(elem, props, delta, vector) {
-          var v = vector.scale(-delta);
-          if(v.norm() < 1) {
-              var x = v.x, y = v.y;
-              var ans = elem.startPos
-                .getc().moebiusTransformation(v);
-              elem.pos.setc(ans.x, ans.y);
-              v.x = x; v.y = y;
-            }
-        },
-
-        'linear': function(elem, props, delta) {
-            var from = elem.startPos.getc(true);
-            var to = elem.endPos.getc(true);
-            elem.pos.setc(this.compute(from.x, to.x, delta),
-                          this.compute(from.y, to.y, delta));
-        },
-
-        'polar': function(elem, props, delta) {
-          var from = elem.startPos.getp(true);
-          var to = elem.endPos.getp();
-          var ans = to.interpolate(from, delta);
-          elem.pos.setp(ans.theta, ans.rho);
-        },
-
-        //Graph's Node/Edge interpolators
-        'number': function(elem, prop, delta, getter, setter) {
-          var from = elem[getter](prop, 'start');
-          var to = elem[getter](prop, 'end');
-          elem[setter](prop, this.compute(from, to, delta));
-        },
-
-        'color': function(elem, prop, delta, getter, setter) {
-          var from = $.hexToRgb(elem[getter](prop, 'start'));
-          var to = $.hexToRgb(elem[getter](prop, 'end'));
-          var comp = this.compute;
-          var val = $.rgbToHex([parseInt(comp(from[0], to[0], delta)),
-                                parseInt(comp(from[1], to[1], delta)),
-                                parseInt(comp(from[2], to[2], delta))]);
-
-          elem[setter](prop, val);
-        },
-
-        'array-number': function(elem, prop, delta, getter, setter) {
-          var from = elem[getter](prop, 'start'),
-              to = elem[getter](prop, 'end'),
-              cur = [];
-          for(var i=0, l=from.length; i<l; i++) {
-            var fromi = from[i], toi = to[i];
-            if(fromi.length) {
-              for(var j=0, len=fromi.length, curi=[]; j<len; j++) {
-                curi.push(this.compute(fromi[j], toi[j], delta));
-              }
-              cur.push(curi);
-            } else {
-              cur.push(this.compute(fromi, toi, delta));
-            }
-          }
-          elem[setter](prop, cur);
-        },
-
-        'node': function(elem, props, delta, map, getter, setter) {
-          map = this[map];
-          if(props) {
-            var len = props.length;
-            for(var i=0; i<len; i++) {
-              var pi = props[i];
-              this[map[pi]](elem, pi, delta, getter, setter);
-            }
-          } else {
-            for(var pi in map) {
-              this[map[pi]](elem, pi, delta, getter, setter);
-            }
-          }
-        },
-
-        'edge': function(elem, props, delta, mapKey, getter, setter) {
-            var adjs = elem.adjacencies;
-            for(var id in adjs) this['node'](adjs[id], props, delta, mapKey, getter, setter);
-        },
-
-        'node-property': function(elem, props, delta) {
-          this['node'](elem, props, delta, 'map', 'getData', 'setData');
-        },
-
-        'edge-property': function(elem, props, delta) {
-          this['edge'](elem, props, delta, 'map', 'getData', 'setData');
-        },
-
-        'label-property': function(elem, props, delta) {
-          this['node'](elem, props, delta, 'label', 'getLabelData', 'setLabelData');
-        },
-
-        'node-style': function(elem, props, delta) {
-          this['node'](elem, props, delta, 'canvas', 'getCanvasStyle', 'setCanvasStyle');
-        },
-
-        'edge-style': function(elem, props, delta) {
-          this['edge'](elem, props, delta, 'canvas', 'getCanvasStyle', 'setCanvasStyle');
-        },
-
-        'polygon': function(elem, prop, delta, getter, setter) {
-          var from = elem[getter](prop, 'start'),
-              to = elem[getter](prop, 'end'),
-              cur = [];
-          if (typeof from.offset == 'undefined') {
-            if (from === 0) {
-              from = $.map(to, function() {
-                return new $jit.Complex(0, 0);
-              });
-              from.offset = 0;
-            }
-            else {
-              if (from.length == 0) {
-                from.push(new $jit.Complex(0, 0));
-              }
-              while (from.length < to.length) {
-                from.push(from[0]);
-              }
-              while (from.length > to.length) {
-                to.push(to[0] || new $jit.Complex(0, 0));
-              }
-              if (from.length == 0) return;
-              var l = from.length;
-              var minDist = 1e300;
-              for (var offset = 0; offset < l; offset ++) {
-                var d = 0;
-                for (var i = 0; i < l; i++) {
-                  d +=Geometry.dist2(from[(offset + i) % l], to[i]);
-                }
-                if (d < minDist) {
-                  from.offset = offset;
-                  minDist = d;
-                }
-              }
-            }
-          }
-
-          for (var i = 0, l = from.length; i < l; i++) {
-            var fromi = from[(i + from.offset) % l], toi = to[i];
-            cur.push(new $jit.Complex(
-                this.compute(fromi.x, toi.x, delta),
-                this.compute(fromi.y, toi.y, delta)
-            ));
-          }
-          elem[setter](prop, cur);
-        }
-    },
-    
-  
-    /*
-       sequence
-    
-       Iteratively performs an action while refreshing the state of the visualization.
-
-       Parameters:
-
-       options - (object) An object containing some sequence options described below
-       condition - (function) A function returning a boolean instance in order to stop iterations.
-       step - (function) A function to execute on each step of the iteration.
-       onComplete - (function) A function to execute when the sequence finishes.
-       duration - (number) Duration (in milliseconds) of each step.
-
-      Example:
-       (start code js)
-        var rg = new $jit.RGraph(options);
-        var i = 0;
-        rg.fx.sequence({
-          condition: function() {
-           return i == 10;
-          },
-          step: function() {
-            alert(i++);
-          },
-          onComplete: function() {
-           alert('done!');
-          }
-        });
-       (end code)
-
-    */
-    sequence: function(options) {
-        var that = this;
-        options = $.merge({
-          condition: $.lambda(false),
-          step: $.empty,
-          onComplete: $.empty,
-          duration: 200
-        }, options || {});
-
-        var interval = setInterval(function() {
-          if(options.condition()) {
-            options.step();
-          } else {
-            clearInterval(interval);
-            options.onComplete();
-          }
-          that.viz.refresh(true);
-        }, options.duration);
-    },
-    
-    /*
-      prepare
- 
-      Prepare graph position and other attribute values before performing an Animation. 
-      This method is used internally by the Toolkit.
-      
-      See also:
-       
-       <Animation>, <Graph.Plot.animate>
-
-    */
-    prepare: function(modes) {
-      var graph = this.viz.graph,
-          accessors = {
-            'node-property': {
-              'getter': 'getData',
-              'setter': 'setData'
-            },
-            'edge-property': {
-              'getter': 'getData',
-              'setter': 'setData'
-            },
-            'node-style': {
-              'getter': 'getCanvasStyle',
-              'setter': 'setCanvasStyle'
-            },
-            'edge-style': {
-              'getter': 'getCanvasStyle',
-              'setter': 'setCanvasStyle'
-            }
-          };
-
-      //parse modes
-      var m = {};
-      if($.type(modes) == 'array') {
-        for(var i=0, len=modes.length; i < len; i++) {
-          var elems = modes[i].split(':');
-          m[elems.shift()] = elems;
-        }
-      } else {
-        for(var p in modes) {
-          if(p == 'position') {
-            m[modes.position] = [];
-          } else {
-            m[p] = $.splat(modes[p]);
-          }
-        }
-      }
-      
-      graph.eachNode(function(node) { 
-        node.startPos.set(node.pos);
-        $.each(['node-property', 'node-style'], function(p) {
-          if(p in m) {
-            var prop = m[p];
-            for(var i=0, l=prop.length; i < l; i++) {
-              node[accessors[p].setter](prop[i], node[accessors[p].getter](prop[i]), 'start');
-            }
-          }
-        });
-        $.each(['edge-property', 'edge-style'], function(p) {
-          if(p in m) {
-            var prop = m[p];
-            node.eachAdjacency(function(adj) {
-              for(var i=0, l=prop.length; i < l; i++) {
-                adj[accessors[p].setter](prop[i], adj[accessors[p].getter](prop[i]), 'start');
-              }
-            });
-          }
-        });
-      });
-      return m;
-    },
-    
-    /*
-       Method: animate
-    
-       Animates a <Graph> by interpolating some <Graph.Node>, <Graph.Adjacence> or <Graph.Label> properties.
-
-       Parameters:
-
-       opt - (object) Animation options. The object properties are described below
-       duration - (optional) Described in <Options.Fx>.
-       fps - (optional) Described in <Options.Fx>.
-       hideLabels - (optional|boolean) Whether to hide labels during the animation.
-       modes - (required|object) An object with animation modes (described below).
-
-       Animation modes:
-       
-       Animation modes are strings representing different node/edge and graph properties that you'd like to animate. 
-       They are represented by an object that has as keys main categories of properties to animate and as values a list 
-       of these specific properties. The properties are described below
-       
-       position - Describes the way nodes' positions must be interpolated. Possible values are 'linear', 'polar' or 'moebius'.
-       node-property - Describes which Node properties will be interpolated. These properties can be any of the ones defined in <Options.Node>.
-       edge-property - Describes which Edge properties will be interpolated. These properties can be any the ones defined in <Options.Edge>.
-       label-property - Describes which Label properties will be interpolated. These properties can be any of the ones defined in <Options.Label> like color or size.
-       node-style - Describes which Node Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc.
-       edge-style - Describes which Edge Canvas Styles will be interpolated. These are specific canvas properties like fillStyle, strokeStyle, lineWidth, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, etc.
-
-       Example:
-       (start code js)
-       var viz = new $jit.Viz(options);
-       //...tweak some Data, CanvasStyles or LabelData properties...
-       viz.fx.animate({
-         modes: {
-           'position': 'linear',
-           'node-property': ['width', 'height'],
-           'node-style': 'shadowColor',
-           'label-property': 'size'
-         },
-         hideLabels: false
-       });
-       //...can also be written like this...
-       viz.fx.animate({
-         modes: ['linear',
-                 'node-property:width:height',
-                 'node-style:shadowColor',
-                 'label-property:size'],
-         hideLabels: false
-       });
-       (end code)
-    */
-    animate: function(opt, versor) {
-      opt = $.merge(this.viz.config, opt || {});
-      var that = this,
-          viz = this.viz,
-          graph  = viz.graph,
-          interp = this.Interpolator,
-          animation =  opt.type === 'nodefx'? this.nodeFxAnimation : this.animation;
-      //prepare graph values
-      var m = this.prepare(opt.modes);
-      
-      //animate
-      if(opt.hideLabels) this.labels.hideLabels(true);
-      animation.setOptions($.extend(opt, {
-        $animating: false,
-        compute: function(delta) {
-          graph.eachNode(function(node) { 
-            for(var p in m) {
-              interp[p](node, m[p], delta, versor);
-            }
-          });
-          that.plot(opt, this.$animating, delta);
-          this.$animating = true;
-        },
-        complete: function() {
-          if(opt.hideLabels) that.labels.hideLabels(false);
-          that.plot(opt);
-          opt.onComplete();
-          //TODO(nico): This shouldn't be here!
-          //opt.onAfterCompute();
-        }       
-      })).start();
-    },
-    
-    /*
-      nodeFx
-   
-      Apply animation to node properties like color, width, height, dim, etc.
-  
-      Parameters:
-  
-      options - Animation options. This object properties is described below
-      elements - The Elements to be transformed. This is an object that has a properties
-      
-      (start code js)
-      'elements': {
-        //can also be an array of ids
-        'id': 'id-of-node-to-transform',
-        //properties to be modified. All properties are optional.
-        'properties': {
-          'color': '#ccc', //some color
-          'width': 10, //some width
-          'height': 10, //some height
-          'dim': 20, //some dim
-          'lineWidth': 10 //some line width
-        } 
-      }
-      (end code)
-      
-      - _reposition_ Whether to recalculate positions and add a motion animation. 
-      This might be used when changing _width_ or _height_ properties in a <Layouts.Tree> like layout. Default's *false*.
-      
-      - _onComplete_ A method that is called when the animation completes.
-      
-      ...and all other <Graph.Plot.animate> options like _duration_, _fps_, _transition_, etc.
-  
-      Example:
-      (start code js)
-       var rg = new RGraph(canvas, config); //can be also Hypertree or ST
-       rg.fx.nodeFx({
-         'elements': {
-           'id':'mynodeid',
-           'properties': {
-             'color':'#ccf'
-           },
-           'transition': Trans.Quart.easeOut
-         }
-       });
-      (end code)    
-   */
-   nodeFx: function(opt) {
-     if (this.nodeFxAnimation == undefined) {
-       this.nodeFxAnimation = new Animation();
-     }
-
-     var viz = this.viz,
-         graph  = viz.graph,
-         animation = this.nodeFxAnimation,
-         options = $.merge(this.viz.config, {
-           'elements': {
-             'id': false,
-             'properties': {}
-           },
-           'reposition': false
-         });
-     opt = $.merge(options, opt || {}, {
-       onBeforeCompute: $.empty,
-       onAfterCompute: $.empty
-     });
-     //check if an animation is running
-     animation.stopTimer();
-     var props = opt.elements.properties;
-     //set end values for nodes
-     if(!opt.elements.id) {
-       graph.eachNode(function(n) {
-         for(var prop in props) {
-           n.setData(prop, props[prop], 'end');
-         }
-       });
-     } else {
-       var ids = $.splat(opt.elements.id);
-       $.each(ids, function(id) {
-         var n = graph.getNode(id);
-         if(n) {
-           for(var prop in props) {
-             n.setData(prop, props[prop], 'end');
-           }
-         }
-       });
-     }
-     //get keys
-     var propnames = [];
-     for(var prop in props) propnames.push(prop);
-     //add node properties modes
-     var modes = ['node-property:' + propnames.join(':')];
-     //set new node positions
-     if(opt.reposition) {
-       modes.push('linear');
-       viz.compute('end');
-     }
-     //animate
-     this.animate($.merge(opt, {
-       modes: modes,
-       type: 'nodefx'
-     }));
-   },
-
-    
-    /*
-       Method: plot
-    
-       Plots a <Graph>.
-
-       Parameters:
-
-       opt - (optional) Plotting options. Most of them are described in <Options.Fx>.
-
-       Example:
-
-       (start code js)
-       var viz = new $jit.Viz(options);
-       viz.fx.plot(); 
-       (end code)
-
-    */
-   plot: function(opt, animating) {
-     var viz = this.viz, 
-         aGraph = viz.graph, 
-         canvas = viz.canvas, 
-         id = viz.root, 
-         that = this, 
-         ctx = canvas.getCtx(), 
-         min = Math.min,
-         opt = opt || this.viz.controller;
-     
-     opt.clearCanvas && canvas.clear();
-       
-     var root = aGraph.getNode(id);
-     if(!root) return;
-     
-     var T = !!root.visited;
-     aGraph.eachNode(function(node) {
-       var nodeAlpha = node.getData('alpha');
-       node.eachAdjacency(function(adj) {
-         var nodeTo = adj.nodeTo;
-         if(!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
-           !animating && opt.onBeforePlotLine(adj);
-           that.plotLine(adj, canvas, animating);
-           !animating && opt.onAfterPlotLine(adj);
-         }
-       });
-       if(node.drawn) {
-         !animating && opt.onBeforePlotNode(node);
-         that.plotNode(node, canvas, animating);
-         !animating && opt.onAfterPlotNode(node);
-       }
-       if(!that.labelsHidden && opt.withLabels) {
-         if(node.drawn && nodeAlpha >= 0.95) {
-           that.labels.plotLabel(canvas, node, opt);
-         } else {
-           that.labels.hideLabel(node, false);
-         }
-       }
-       node.visited = !T;
-     });
-    },
-
-  /*
-      Plots a Subtree.
-   */
-   plotTree: function(node, opt, animating) {
-       var that = this, 
-           viz = this.viz, 
-           canvas = viz.canvas,
-           config = this.config,
-           ctx = canvas.getCtx();
-       var nodeAlpha = node.getData('alpha');
-       node.eachSubnode(function(elem) {
-         if(opt.plotSubtree(node, elem) && elem.exist && elem.drawn) {
-             var adj = node.getAdjacency(elem.id);
-             !animating && opt.onBeforePlotLine(adj);
-             that.plotLine(adj, canvas, animating);
-             !animating && opt.onAfterPlotLine(adj);
-             that.plotTree(elem, opt, animating);
-         }
-       });
-       if(node.drawn) {
-           !animating && opt.onBeforePlotNode(node);
-           this.plotNode(node, canvas, animating);
-           !animating && opt.onAfterPlotNode(node);
-           if(!opt.hideLabels && opt.withLabels && nodeAlpha >= 0.95) 
-               this.labels.plotLabel(canvas, node, opt);
-           else 
-               this.labels.hideLabel(node, false);
-       } else {
-           this.labels.hideLabel(node, true);
-       }
-   },
-
-  /*
-       Method: plotNode
-    
-       Plots a <Graph.Node>.
-
-       Parameters:
-       
-       node - (object) A <Graph.Node>.
-       canvas - (object) A <Canvas> element.
-
-    */
-    plotNode: function(node, canvas, animating) {
-        var f = node.getData('type'), 
-            ctxObj = this.node.CanvasStyles;
-        if(f != 'none') {
-          var width = node.getData('lineWidth'),
-              color = node.getData('color'),
-              alpha = node.getData('alpha'),
-              ctx = canvas.getCtx();
-          ctx.save();
-          ctx.lineWidth = width;
-          ctx.fillStyle = ctx.strokeStyle = color;
-          ctx.globalAlpha = alpha;
-          
-          for(var s in ctxObj) {
-            ctx[s] = node.getCanvasStyle(s);
-          }
-
-          this.nodeTypes[f].render.call(this, node, canvas, animating);
-          ctx.restore();
-        }
-    },
-    
-    /*
-       Method: plotLine
-    
-       Plots a <Graph.Adjacence>.
-
-       Parameters:
-
-       adj - (object) A <Graph.Adjacence>.
-       canvas - (object) A <Canvas> instance.
-
-    */
-    plotLine: function(adj, canvas, animating) {
-      var f = adj.getData('type'),
-          ctxObj = this.edge.CanvasStyles;
-      if(f != 'none') {
-        var width = adj.getData('lineWidth'),
-            color = adj.getData('color'),
-            ctx = canvas.getCtx(),
-            nodeFrom = adj.nodeFrom,
-            nodeTo = adj.nodeTo;
-        
-        ctx.save();
-        ctx.lineWidth = width;
-        ctx.fillStyle = ctx.strokeStyle = color;
-        ctx.globalAlpha = Math.min(nodeFrom.getData('alpha'), 
-            nodeTo.getData('alpha'), 
-            adj.getData('alpha'));
-        
-        for(var s in ctxObj) {
-          ctx[s] = adj.getCanvasStyle(s);
-        }
-
-        this.edgeTypes[f].render.call(this, adj, canvas, animating);
-        ctx.restore();
-      }
-    }    
-  
-};
-
-/*
-  Object: Graph.Plot3D
-  
-  <Graph> 3D rendering and animation methods.
-  
-  Properties:
-  
-  nodeHelper - <NodeHelper> object.
-  edgeHelper - <EdgeHelper> object.
-
-*/
-Graph.Plot3D = $.merge(Graph.Plot, {
-  Interpolator: {
-    'linear': function(elem, props, delta) {
-      var from = elem.startPos.getc(true);
-      var to = elem.endPos.getc(true);
-      elem.pos.setc(this.compute(from.x, to.x, delta), 
-                    this.compute(from.y, to.y, delta),
-                    this.compute(from.z, to.z, delta));
-    }
-  },
-  
-  plotNode: function(node, canvas) {
-    if(node.getData('type') == 'none') return;
-    this.plotElement(node, canvas, {
-      getAlpha: function() {
-        return node.getData('alpha');
-      }
-    });
-  },
-  
-  plotLine: function(adj, canvas) {
-    if(adj.getData('type') == 'none') return;
-    this.plotElement(adj, canvas, {
-      getAlpha: function() {
-        return Math.min(adj.nodeFrom.getData('alpha'),
-                        adj.nodeTo.getData('alpha'),
-                        adj.getData('alpha'));
-      }
-    });
-  },
-  
-  plotElement: function(elem, canvas, opt) {
-    var gl = canvas.getCtx(),
-        viewMatrix = new Matrix4,
-        lighting = canvas.config.Scene.Lighting,
-        wcanvas = canvas.canvases[0],
-        program = wcanvas.program,
-        camera = wcanvas.camera;
-    
-    if(!elem.geometry) {
-      elem.geometry = new O3D[elem.getData('type')];
-    }
-    elem.geometry.update(elem);
-    if(!elem.webGLVertexBuffer) {
-      var vertices = [],
-          faces = [],
-          normals = [],
-          vertexIndex = 0,
-          geom = elem.geometry;
-      
-      for(var i=0, vs=geom.vertices, fs=geom.faces, fsl=fs.length; i<fsl; i++) {
-        var face = fs[i],
-            v1 = vs[face.a],
-            v2 = vs[face.b],
-            v3 = vs[face.c],
-            v4 = face.d? vs[face.d] : false,
-            n = face.normal;
-        
-        vertices.push(v1.x, v1.y, v1.z);
-        vertices.push(v2.x, v2.y, v2.z);
-        vertices.push(v3.x, v3.y, v3.z);
-        if(v4) vertices.push(v4.x, v4.y, v4.z);
-            
-        normals.push(n.x, n.y, n.z);
-        normals.push(n.x, n.y, n.z);
-        normals.push(n.x, n.y, n.z);
-        if(v4) normals.push(n.x, n.y, n.z);
-            
-        faces.push(vertexIndex, vertexIndex +1, vertexIndex +2);
-        if(v4) {
-          faces.push(vertexIndex, vertexIndex +2, vertexIndex +3);
-          vertexIndex += 4;
-        } else {
-          vertexIndex += 3;
-        }
-      }
-      //create and store vertex data
-      elem.webGLVertexBuffer = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLVertexBuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-      //create and store faces index data
-      elem.webGLFaceBuffer = gl.createBuffer();
-      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elem.webGLFaceBuffer);
-      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(faces), gl.STATIC_DRAW);
-      elem.webGLFaceCount = faces.length;
-      //calculate vertex normals and store them
-      elem.webGLNormalBuffer = gl.createBuffer();
-      gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLNormalBuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
-    }
-    viewMatrix.multiply(camera.matrix, elem.geometry.matrix);
-    //send matrix data
-    gl.uniformMatrix4fv(program.viewMatrix, false, viewMatrix.flatten());
-    gl.uniformMatrix4fv(program.projectionMatrix, false, camera.projectionMatrix.flatten());
-    //send normal matrix for lighting
-    var normalMatrix = Matrix4.makeInvert(viewMatrix);
-    normalMatrix.$transpose();
-    gl.uniformMatrix4fv(program.normalMatrix, false, normalMatrix.flatten());
-    //send color data
-    var color = $.hexToRgb(elem.getData('color'));
-    color.push(opt.getAlpha());
-    gl.uniform4f(program.color, color[0] / 255, color[1] / 255, color[2] / 255, color[3]);
-    //send lighting data
-    gl.uniform1i(program.enableLighting, lighting.enable);
-    if(lighting.enable) {
-      //set ambient light color
-      if(lighting.ambient) {
-        var acolor = lighting.ambient;
-        gl.uniform3f(program.ambientColor, acolor[0], acolor[1], acolor[2]);
-      }
-      //set directional light
-      if(lighting.directional) {
-        var dir = lighting.directional,
-            color = dir.color,
-            pos = dir.direction,
-            vd = new Vector3(pos.x, pos.y, pos.z).normalize().$scale(-1);
-        gl.uniform3f(program.lightingDirection, vd.x, vd.y, vd.z);
-        gl.uniform3f(program.directionalColor, color[0], color[1], color[2]);
-      }
-    }
-    //send vertices data
-    gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLVertexBuffer);
-    gl.vertexAttribPointer(program.position, 3, gl.FLOAT, false, 0, 0);
-    //send normals data
-    gl.bindBuffer(gl.ARRAY_BUFFER, elem.webGLNormalBuffer);
-    gl.vertexAttribPointer(program.normal, 3, gl.FLOAT, false, 0, 0);
-    //draw!
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elem.webGLFaceBuffer );
-    gl.drawElements(gl.TRIANGLES, elem.webGLFaceCount, gl.UNSIGNED_SHORT, 0);
-  }
-});
-
-
-/*
- * File: Graph.Label.js
- *
-*/
-
-/*
-   Object: Graph.Label
-
-   An interface for plotting/hiding/showing labels.
-
-   Description:
-
-   This is a generic interface for plotting/hiding/showing labels.
-   The <Graph.Label> interface is implemented in multiple ways to provide
-   different label types.
-
-   For example, the Graph.Label interface is implemented as <Graph.Label.HTML> to provide
-   HTML label elements. Also we provide the <Graph.Label.SVG> interface for SVG type labels. 
-   The <Graph.Label.Native> interface implements these methods with the native Canvas text rendering functions.
-   
-   All subclasses (<Graph.Label.HTML>, <Graph.Label.SVG> and <Graph.Label.Native>) implement the method plotLabel.
-*/
-
-Graph.Label = {};
-
-/*
-   Class: Graph.Label.Native
-
-   Implements labels natively, using the Canvas text API.
-*/
-Graph.Label.Native = new Class({
-    initialize: function(viz) {
-      this.viz = viz;
-    },
-
-    /*
-       Method: plotLabel
-
-       Plots a label for a given node.
-
-       Parameters:
-
-       canvas - (object) A <Canvas> instance.
-       node - (object) A <Graph.Node>.
-       controller - (object) A configuration object.
-       
-       Example:
-       
-       (start code js)
-       var viz = new $jit.Viz(options);
-       var node = viz.graph.getNode('nodeId');
-       viz.labels.plotLabel(viz.canvas, node, viz.config);
-       (end code)
-    */
-    plotLabel: function(canvas, node, controller) {
-      var ctx = canvas.getCtx();
-      var pos = node.pos.getc(true);
-
-      ctx.font = node.getLabelData('style') + ' ' + node.getLabelData('size') + 'px ' + node.getLabelData('family');
-      ctx.textAlign = node.getLabelData('textAlign');
-      ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color');
-      ctx.textBaseline = node.getLabelData('textBaseline');
-
-      this.renderLabel(canvas, node, controller);
-    },
-
-    /*
-       renderLabel
-
-       Does the actual rendering of the label in the canvas. The default
-       implementation renders the label close to the position of the node, this
-       method should be overriden to position the labels differently.
-
-       Parameters:
-
-       canvas - A <Canvas> instance.
-       node - A <Graph.Node>.
-       controller - A configuration object. See also <Hypertree>, <RGraph>, <ST>.
-    */
-    renderLabel: function(canvas, node, controller) {
-      var ctx = canvas.getCtx();
-      var pos = node.pos.getc(true);
-      ctx.fillText(node.name, pos.x, pos.y + node.getData("height") / 2);
-    },
-
-    /*
-       Method: hideLabel
-   
-       Hides the corresponding <Graph.Node> label.
-    
-       Parameters:
-   
-       node - (object) A <Graph.Node>. Can also be an array of <Graph.Nodes>.
-       show - (boolean) If *true*, nodes will be shown. Otherwise nodes will be hidden.
-   
-       Example:
-       (start code js)
-        var rg = new $jit.Viz(options);
-        viz.labels.hideLabel(viz.graph.getNode('someid'), false);
-       (end code)
-    */
-    hideLabel: function(node, show) {
-      node = $.splat(node);
-      var al = show ? false : true;
-      $.each(node, function(n) {
-        n._hideLabel = al;
-      });
-    },
-    hideLabels: $.empty
-});
-
-/*
-   Class: Graph.Label.DOM
-
-   Abstract Class implementing some DOM label methods.
-
-   Implemented by:
-
-   <Graph.Label.HTML> and <Graph.Label.SVG>.
-
-*/
-Graph.Label.DOM = new Class({
-    //A flag value indicating if node labels are being displayed or not.
-    labelsHidden: false,
-    //Label container
-    labelContainer: false,
-    //Label elements hash.
-    labels: {},
-
-    /*
-       Method: getLabelContainer
-
-       Lazy fetcher for the label container.
-
-       Returns:
-
-       The label container DOM element.
-
-       Example:
-
-      (start code js)
-        var viz = new $jit.Viz(options);
-        var labelContainer = viz.labels.getLabelContainer();
-        alert(labelContainer.innerHTML);
-      (end code)
-    */
-    getLabelContainer: function() {
-      return this.labelContainer ?
-        this.labelContainer :
-        this.labelContainer = document.getElementById(this.viz.config.labelContainer);
-    },
-
-    /*
-       Method: getLabel
-
-       Lazy fetcher for the label element.
-
-       Parameters:
-
-       id - (string) The label id (which is also a <Graph.Node> id).
-
-       Returns:
-
-       The label element.
-
-       Example:
-
-      (start code js)
-        var viz = new $jit.Viz(options);
-        var label = viz.labels.getLabel('someid');
-        alert(label.innerHTML);
-      (end code)
-
-    */
-    getLabel: function(id) {
-      return (id in this.labels && this.labels[id] != null) ?
-        this.labels[id] :
-        this.labels[id] = document.getElementById(id);
-    },
-
-    /*
-       Method: hideLabels
-
-       Hides all labels (by hiding the label container).
-
-       Parameters:
-
-       hide - (boolean) A boolean value indicating if the label container must be hidden or not.
-
-       Example:
-       (start code js)
-        var viz = new $jit.Viz(options);
-        rg.labels.hideLabels(true);
-       (end code)
-
-    */
-    hideLabels: function (hide) {
-      var container = this.getLabelContainer();
-      if(hide)
-        container.style.display = 'none';
-      else
-        container.style.display = '';
-      this.labelsHidden = hide;
-    },
-
-    /*
-       Method: clearLabels
-
-       Clears the label container.
-
-       Useful when using a new visualization with the same canvas element/widget.
-
-       Parameters:
-
-       force - (boolean) Forces deletion of all labels.
-
-       Example:
-       (start code js)
-        var viz = new $jit.Viz(options);
-        viz.labels.clearLabels();
-        (end code)
-    */
-    clearLabels: function(force) {
-      for(var id in this.labels) {
-        if (force || !this.viz.graph.hasNode(id)) {
-          this.disposeLabel(id);
-          delete this.labels[id];
-        }
-      }
-    },
-
-    /*
-       Method: disposeLabel
-
-       Removes a label.
-
-       Parameters:
-
-       id - (string) A label id (which generally is also a <Graph.Node> id).
-
-       Example:
-       (start code js)
-        var viz = new $jit.Viz(options);
-        viz.labels.disposeLabel('labelid');
-       (end code)
-    */
-    disposeLabel: function(id) {
-      var elem = this.getLabel(id);
-      if(elem && elem.parentNode) {
-        elem.parentNode.removeChild(elem);
-      }
-    },
-
-    /*
-       Method: hideLabel
-
-       Hides the corresponding <Graph.Node> label.
-
-       Parameters:
-
-       node - (object) A <Graph.Node>. Can also be an array of <Graph.Nodes>.
-       show - (boolean) If *true*, nodes will be shown. Otherwise nodes will be hidden.
-
-       Example:
-       (start code js)
-        var rg = new $jit.Viz(options);
-        viz.labels.hideLabel(viz.graph.getNode('someid'), false);
-       (end code)
-    */
-    hideLabel: function(node, show) {
-      node = $.splat(node);
-      var st = show ? "" : "none", lab, that = this;
-      $.each(node, function(n) {
-        lab = that.getLabel(n.id);
-        if (lab) {
-          lab.style.display = st;
-        }
-      });
-    },
-
-    /*
-       fitsInCanvas
-
-       Returns _true_ or _false_ if the label for the node is contained in the canvas dom element or not.
-
-       Parameters:
-
-       pos - A <Complex> instance (I'm doing duck typing here so any object with _x_ and _y_ parameters will do).
-       canvas - A <Canvas> instance.
-
-       Returns:
-
-       A boolean value specifying if the label is contained in the <Canvas> DOM element or not.
-
-    */
-    fitsInCanvas: function(pos, canvas) {
-      var size = canvas.getSize();
-      if (pos.w && pos.h) {
-      	if (pos.x >= size.width || pos.x < -pos.w
-         || pos.y >= size.height || pos.y < -pos.h) return false;      	
-      }
-      else {
-      	if (pos.x >= size.width || pos.x < 0
-         || pos.y >= size.height || pos.y < 0) return false;
-      }
-       return true;
-    }
-});
-
-/*
-   Class: Graph.Label.HTML
-
-   Implements HTML labels.
-
-   Extends:
-
-   All <Graph.Label.DOM> methods.
-
-*/
-Graph.Label.HTML = new Class({
-    Implements: Graph.Label.DOM,
-
-    /*
-       Method: plotLabel
-
-       Plots a label for a given node.
-
-       Parameters:
-
-       canvas - (object) A <Canvas> instance.
-       node - (object) A <Graph.Node>.
-       controller - (object) A configuration object.
-       
-      Example:
-       
-       (start code js)
-       var viz = new $jit.Viz(options);
-       var node = viz.graph.getNode('nodeId');
-       viz.labels.plotLabel(viz.canvas, node, viz.config);
-       (end code)
-
-
-    */
-    plotLabel: function(canvas, node, controller) {
-      var id = node.id, tag = this.getLabel(id);
-
-      if(!tag && !(tag = document.getElementById(id))) {
-        tag = document.createElement('div');
-        var container = this.getLabelContainer();
-        tag.id = id;
-        tag.className = 'node';
-        tag.style.position = 'absolute';
-        controller.onCreateLabel(tag, node);
-        container.appendChild(tag);
-        this.labels[node.id] = tag;
-      }
-
-      this.placeLabel(tag, node, controller);
-    }
-});
-
-/*
-   Class: Graph.Label.SVG
-
-   Implements SVG labels.
-
-   Extends:
-
-   All <Graph.Label.DOM> methods.
-*/
-Graph.Label.SVG = new Class({
-    Implements: Graph.Label.DOM,
-
-    /*
-       Method: plotLabel
-
-       Plots a label for a given node.
-
-       Parameters:
-
-       canvas - (object) A <Canvas> instance.
-       node - (object) A <Graph.Node>.
-       controller - (object) A configuration object.
-       
-       Example:
-       
-       (start code js)
-       var viz = new $jit.Viz(options);
-       var node = viz.graph.getNode('nodeId');
-       viz.labels.plotLabel(viz.canvas, node, viz.config);
-       (end code)
-
-
-    */
-    plotLabel: function(canvas, node, controller) {
-      var id = node.id, tag = this.getLabel(id);
-      if(!tag && !(tag = document.getElementById(id))) {
-        var ns = 'http://www.w3.org/2000/svg';
-          tag = document.createElementNS(ns, 'svg:text');
-        var tspan = document.createElementNS(ns, 'svg:tspan');
-        tag.appendChild(tspan);
-        var container = this.getLabelContainer();
-        tag.setAttribute('id', id);
-        tag.setAttribute('class', 'node');
-        container.appendChild(tag);
-        controller.onCreateLabel(tag, node);
-        this.labels[node.id] = tag;
-      }
-      this.placeLabel(tag, node, controller);
-    }
-});
-
-
-
-Graph.Geom = new Class({
-
-  initialize: function(viz) {
-    this.viz = viz;
-    this.config = viz.config;
-    this.node = viz.config.Node;
-    this.edge = viz.config.Edge;
-  },
-  /*
-    Applies a translation to the tree.
-  
-    Parameters:
-  
-    pos - A <Complex> number specifying translation vector.
-    prop - A <Graph.Node> position property ('pos', 'start' or 'end').
-  
-    Example:
-  
-    (start code js)
-      st.geom.translate(new Complex(300, 100), 'end');
-    (end code)
-  */  
-  translate: function(pos, prop) {
-     prop = $.splat(prop);
-     this.viz.graph.eachNode(function(elem) {
-         $.each(prop, function(p) { elem.getPos(p).$add(pos); });
-     });
-  },
-  /*
-    Hides levels of the tree until it properly fits in canvas.
-  */  
-  setRightLevelToShow: function(node, canvas, callback) {
-     var level = this.getRightLevelToShow(node, canvas), 
-         fx = this.viz.labels,
-         opt = $.merge({
-           execShow:true,
-           execHide:true,
-           onHide: $.empty,
-           onShow: $.empty
-         }, callback || {});
-     node.eachLevel(0, this.config.levelsToShow, function(n) {
-         var d = n._depth - node._depth;
-         if(d > level) {
-             opt.onHide(n);
-             if(opt.execHide) {
-               n.drawn = false; 
-               n.exist = false;
-               fx.hideLabel(n, false);
-             }
-         } else {
-             opt.onShow(n);
-             if(opt.execShow) {
-               n.exist = true;
-             }
-         }
-     });
-     node.drawn= true;
-  },
-  /*
-    Returns the right level to show for the current tree in order to fit in canvas.
-  */  
-  getRightLevelToShow: function(node, canvas) {
-     var config = this.config;
-     var level = config.levelsToShow;
-     var constrained = config.constrained;
-     if(!constrained) return level;
-     while(!this.treeFitsInCanvas(node, canvas, level) && level > 1) { level-- ; }
-     return level;
-  }
-});
-
-/*
- * File: Loader.js
- * 
- */
-
-/*
-   Object: Loader
-
-   Provides methods for loading and serving JSON data.
-*/
-var Loader = {
-     construct: function(json) {
-        var isGraph = ($.type(json) == 'array');
-        var ans = new Graph(this.graphOptions, this.config.Node, this.config.Edge, this.config.Label);
-        if(!isGraph) 
-            //make tree
-            (function (ans, json) {
-                ans.addNode(json);
-                if(json.children) {
-                  for(var i=0, ch = json.children; i<ch.length; i++) {
-                    ans.addAdjacence(json, ch[i]);
-                    arguments.callee(ans, ch[i]);
-                  }
-                }
-            })(ans, json);
-        else
-            //make graph
-            (function (ans, json) {
-                var getNode = function(id) {
-                  for(var i=0, l=json.length; i<l; i++) {
-                    if(json[i].id == id) {
-                      return json[i];
-                    }
-                  }
-                  // The node was not defined in the JSON
-                  // Let's create it
-                  var newNode = {
-                		"id" : id,
-                		"name" : id
-                	};
-                  return ans.addNode(newNode);
-                };
-
-                for(var i=0, l=json.length; i<l; i++) {
-                  ans.addNode(json[i]);
-                  var adj = json[i].adjacencies;
-                  if (adj) {
-                    for(var j=0, lj=adj.length; j<lj; j++) {
-                      var node = adj[j], data = {};
-                      if(typeof adj[j] != 'string') {
-                        data = $.merge(node.data, {});
-                        node = node.nodeTo;
-                      }
-                      ans.addAdjacence(json[i], getNode(node), data);
-                    }
-                  }
-                }
-            })(ans, json);
-
-        return ans;
-    },
-
-    /*
-     Method: loadJSON
-    
-     Loads a JSON structure to the visualization. The JSON structure can be a JSON *tree* or *graph* structure.
-     
-      A JSON tree or graph structure consists of nodes, each having as properties
-       
-       id - (string) A unique identifier for the node
-       name - (string) A node's name
-       data - (object) The data optional property contains a hash (i.e {}) 
-       where you can store all the information you want about this node.
-        
-      For JSON *Tree* structures, there's an extra optional property *children* of type Array which contains the node's children.
-      
-      Example:
-
-      (start code js)
-        var json = {  
-          "id": "aUniqueIdentifier",  
-          "name": "usually a nodes name",  
-          "data": {
-            "some key": "some value",
-            "some other key": "some other value"
-           },  
-          "children": [ *other nodes or empty* ]  
-        };  
-      (end code)
-        
-        JSON *Graph* structures consist of an array of nodes, each specifying the nodes to which the current node is connected. 
-        For JSON *Graph* structures, the *children* property is replaced by the *adjacencies* property.
-        
-        There are two types of *Graph* structures, *simple* and *extended* graph structures.
-        
-        For *simple* Graph structures, the adjacencies property contains an array of strings, each specifying the 
-        id of the node connected to the main node.
-        
-        Example:
-        
-        (start code js)
-        var json = [  
-          {  
-            "id": "aUniqueIdentifier",  
-            "name": "usually a nodes name",  
-            "data": {
-              "some key": "some value",
-              "some other key": "some other value"
-             },  
-            "adjacencies": ["anotherUniqueIdentifier", "yetAnotherUniqueIdentifier", 'etc']  
-          },
-
-          'other nodes go here...' 
-        ];          
-        (end code)
-        
-        For *extended Graph structures*, the adjacencies property contains an array of Adjacency objects that have as properties
-        
-        nodeTo - (string) The other node connected by this adjacency.
-        data - (object) A data property, where we can store custom key/value information.
-        
-        Example:
-        
-        (start code js)
-        var json = [  
-          {  
-            "id": "aUniqueIdentifier",  
-            "name": "usually a nodes name",  
-            "data": {
-              "some key": "some value",
-              "some other key": "some other value"
-             },  
-            "adjacencies": [  
-            {  
-              nodeTo:"aNodeId",  
-              data: {} //put whatever you want here  
-            },
-            'other adjacencies go here...'  
-          },
-
-          'other nodes go here...' 
-        ];          
-        (end code)
-       
-       About the data property:
-       
-       As described before, you can store custom data in the *data* property of JSON *nodes* and *adjacencies*. 
-       You can use almost any string as key for the data object. Some keys though are reserved by the toolkit, and 
-       have special meanings. This is the case for keys starting with a dollar sign, for example, *$width*.
-       
-       For JSON *node* objects, adding dollar prefixed properties that match the names of the options defined in 
-       <Options.Node> will override the general value for that option with that particular value. For this to work 
-       however, you do have to set *overridable = true* in <Options.Node>.
-       
-       The same thing is true for JSON adjacencies. Dollar prefixed data properties will alter values set in <Options.Edge> 
-       if <Options.Edge> has *overridable = true*.
-       
-       When loading JSON data into TreeMaps, the *data* property must contain a value for the *$area* key, 
-       since this is the value which will be taken into account when creating the layout. 
-       The same thing goes for the *$color* parameter.
-       
-       In JSON Nodes you can use also *$label-* prefixed properties to refer to <Options.Label> properties. For example, 
-       *$label-size* will refer to <Options.Label> size property. Also, in JSON nodes and adjacencies you can set 
-       canvas specific properties individually by using the *$canvas-* prefix. For example, *$canvas-shadowBlur* will refer 
-       to the *shadowBlur* property.
-       
-       These properties can also be accessed after loading the JSON data from <Graph.Nodes> and <Graph.Adjacences> 
-       by using <Accessors>. For more information take a look at the <Graph> and <Accessors> documentation.
-       
-       Finally, these properties can also be used to create advanced animations like with <Options.NodeStyles>. For more 
-       information about creating animations please take a look at the <Graph.Plot> and <Graph.Plot.animate> documentation.
-       
-       loadJSON Parameters:
-    
-        json - A JSON Tree or Graph structure.
-        i - For Graph structures only. Sets the indexed node as root for the visualization.
-
-    */
-    loadJSON: function(json, i) {
-      this.json = json;
-      //if they're canvas labels erase them.
-      if(this.labels && this.labels.clearLabels) {
-        this.labels.clearLabels(true);
-      }
-      this.graph = this.construct(json);
-      if($.type(json) != 'array'){
-        this.root = json.id;
-      } else {
-        this.root = json[i? i : 0].id;
-      }
-    },
-    
-    /*
-      Method: toJSON
-   
-      Returns a JSON tree/graph structure from the visualization's <Graph>. 
-      See <Loader.loadJSON> for the graph formats available.
-      
-      See also:
-      
-      <Loader.loadJSON>
-      
-      Parameters:
-      
-      type - (string) Default's "tree". The type of the JSON structure to be returned. 
-      Possible options are "tree" or "graph".
-    */    
-    toJSON: function(type) {
-      type = type || "tree";
-      if(type == 'tree') {
-        var ans = {};
-        var rootNode = this.graph.getNode(this.root);
-        var ans = (function recTree(node) {
-          var ans = {};
-          ans.id = node.id;
-          ans.name = node.name;
-          ans.data = node.data;
-          var ch =[];
-          node.eachSubnode(function(n) {
-            ch.push(recTree(n));
-          });
-          ans.children = ch;
-          return ans;
-        })(rootNode);
-        return ans;
-      } else {
-        var ans = [];
-        var T = !!this.graph.getNode(this.root).visited;
-        this.graph.eachNode(function(node) {
-          var ansNode = {};
-          ansNode.id = node.id;
-          ansNode.name = node.name;
-          ansNode.data = node.data;
-          var adjs = [];
-          node.eachAdjacency(function(adj) {
-            var nodeTo = adj.nodeTo;
-            if(!!nodeTo.visited === T) {
-              var ansAdj = {};
-              ansAdj.nodeTo = nodeTo.id;
-              ansAdj.data = adj.data;
-              adjs.push(ansAdj);
-            }
-          });
-          ansNode.adjacencies = adjs;
-          ans.push(ansNode);
-          node.visited = !T;
-        });
-        return ans;
-      }
-    }
-};
-
-
-
-/*
- * File: Layouts.js
- * 
- * Implements base Tree and Graph layouts.
- *
- * Description:
- *
- * Implements base Tree and Graph layouts like Radial, Tree, etc.
- * 
- */
-
-/*
- * Object: Layouts
- * 
- * Parent object for common layouts.
- *
- */
-var Layouts = $jit.Layouts = {};
-
-
-//Some util shared layout functions are defined here.
-var NodeDim = {
-  label: null,
-  
-  compute: function(graph, prop, opt) {
-    this.initializeLabel(opt);
-    var label = this.label, style = label.style;
-    graph.eachNode(function(n) {
-      var autoWidth  = n.getData('autoWidth'),
-          autoHeight = n.getData('autoHeight');
-      if(autoWidth || autoHeight) {
-        //delete dimensions since these are
-        //going to be overridden now.
-        delete n.data.$width;
-        delete n.data.$height;
-        delete n.data.$dim;
-        
-        var width  = n.getData('width'),
-            height = n.getData('height');
-        //reset label dimensions
-        style.width  = autoWidth? 'auto' : width + 'px';
-        style.height = autoHeight? 'auto' : height + 'px';
-        
-        //TODO(nico) should let the user choose what to insert here.
-        label.innerHTML = n.name;
-        
-        var offsetWidth  = label.offsetWidth,
-            offsetHeight = label.offsetHeight;
-        var type = n.getData('type');
-        if($.indexOf(['circle', 'square', 'triangle', 'star'], type) === -1) {
-          n.setData('width', offsetWidth);
-          n.setData('height', offsetHeight);
-        } else {
-          var dim = offsetWidth > offsetHeight? offsetWidth : offsetHeight;
-          n.setData('width', dim);
-          n.setData('height', dim);
-          n.setData('dim', dim); 
-        }
-      }
-    });
-  },
-  
-  initializeLabel: function(opt) {
-    if(!this.label) {
-      this.label = document.createElement('div');
-      document.body.appendChild(this.label);
-    }
-    this.setLabelStyles(opt);
-  },
-  
-  setLabelStyles: function(opt) {
-    $.extend(this.label.style, {
-      'visibility': 'hidden',
-      'position': 'absolute',
-      'width': 'auto',
-      'height': 'auto'
-    });
-    this.label.className = 'jit-autoadjust-label';
-  }
-};
-
-
-/*
- * Class: Layouts.Tree
- *
- * Implements a Tree Layout.
- *
- * Implemented By:
- *
- * <ST>
- *
- * Inspired by:
- *
- * Drawing Trees (Andrew J. Kennedy) <http://research.microsoft.com/en-us/um/people/akenn/fun/drawingtrees.pdf>
- *
- */
-Layouts.Tree = (function() {
-  //Layout functions
-  var slice = Array.prototype.slice;
-
-  /*
-     Calculates the max width and height nodes for a tree level
-  */
-  function getBoundaries(graph, config, level, orn, prop) {
-    var dim = config.Node;
-    var multitree = config.multitree;
-    if (dim.overridable) {
-      var w = -1, h = -1;
-      graph.eachNode(function(n) {
-        if (n._depth == level
-            && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) {
-          var dw = n.getData('width', prop);
-          var dh = n.getData('height', prop);
-          w = (w < dw) ? dw : w;
-          h = (h < dh) ? dh : h;
-        }
-      });
-      return {
-        'width' : w < 0 ? dim.width : w,
-        'height' : h < 0 ? dim.height : h
-      };
-    } else {
-      return dim;
-    }
-  }
-
-
-  function movetree(node, prop, val, orn) {
-    var p = (orn == "left" || orn == "right") ? "y" : "x";
-    node.getPos(prop)[p] += val;
-  }
-
-
-  function moveextent(extent, val) {
-    var ans = [];
-    $.each(extent, function(elem) {
-      elem = slice.call(elem);
-      elem[0] += val;
-      elem[1] += val;
-      ans.push(elem);
-    });
-    return ans;
-  }
-
-
-  function merge(ps, qs) {
-    if (ps.length == 0)
-      return qs;
-    if (qs.length == 0)
-      return ps;
-    var p = ps.shift(), q = qs.shift();
-    return [ [ p[0], q[1] ] ].concat(merge(ps, qs));
-  }
-
-
-  function mergelist(ls, def) {
-    def = def || [];
-    if (ls.length == 0)
-      return def;
-    var ps = ls.pop();
-    return mergelist(ls, merge(ps, def));
-  }
-
-
-  function fit(ext1, ext2, subtreeOffset, siblingOffset, i) {
-    if (ext1.length <= i || ext2.length <= i)
-      return 0;
-
-    var p = ext1[i][1], q = ext2[i][0];
-    return Math.max(fit(ext1, ext2, subtreeOffset, siblingOffset, ++i)
-        + subtreeOffset, p - q + siblingOffset);
-  }
-
-
-  function fitlistl(es, subtreeOffset, siblingOffset) {
-    function $fitlistl(acc, es, i) {
-      if (es.length <= i)
-        return [];
-      var e = es[i], ans = fit(acc, e, subtreeOffset, siblingOffset, 0);
-      return [ ans ].concat($fitlistl(merge(acc, moveextent(e, ans)), es, ++i));
-    }
-    ;
-    return $fitlistl( [], es, 0);
-  }
-
-
-  function fitlistr(es, subtreeOffset, siblingOffset) {
-    function $fitlistr(acc, es, i) {
-      if (es.length <= i)
-        return [];
-      var e = es[i], ans = -fit(e, acc, subtreeOffset, siblingOffset, 0);
-      return [ ans ].concat($fitlistr(merge(moveextent(e, ans), acc), es, ++i));
-    }
-    ;
-    es = slice.call(es);
-    var ans = $fitlistr( [], es.reverse(), 0);
-    return ans.reverse();
-  }
-
-
-  function fitlist(es, subtreeOffset, siblingOffset, align) {
-    var esl = fitlistl(es, subtreeOffset, siblingOffset), esr = fitlistr(es,
-        subtreeOffset, siblingOffset);
-
-    if (align == "left")
-      esr = esl;
-    else if (align == "right")
-      esl = esr;
-
-    for ( var i = 0, ans = []; i < esl.length; i++) {
-      ans[i] = (esl[i] + esr[i]) / 2;
-    }
-    return ans;
-  }
-
-
-  function design(graph, node, prop, config, orn) {
-    var multitree = config.multitree;
-    var auxp = [ 'x', 'y' ], auxs = [ 'width', 'height' ];
-    var ind = +(orn == "left" || orn == "right");
-    var p = auxp[ind], notp = auxp[1 - ind];
-
-    var cnode = config.Node;
-    var s = auxs[ind], nots = auxs[1 - ind];
-
-    var siblingOffset = config.siblingOffset;
-    var subtreeOffset = config.subtreeOffset;
-    var align = config.align;
-
-    function $design(node, maxsize, acum) {
-      var sval = node.getData(s, prop);
-      var notsval = maxsize
-          || (node.getData(nots, prop));
-
-      var trees = [], extents = [], chmaxsize = false;
-      var chacum = notsval + config.levelDistance;
-      node.eachSubnode(function(n) {
-            if (n.exist
-                && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) {
-
-              if (config.levelSpacing == 'even') {
-                if (!chmaxsize) {
-                  chmaxsize = getBoundaries(graph, config, n._depth, orn, prop);
-                }
-              } else {
-                chmaxsize = { width: n.getData('width'), height: n.getData('height') };
-              }
-
-
-              var s = $design(n, chmaxsize[nots], acum + chacum);
-              trees.push(s.tree);
-              extents.push(s.extent);
-            }
-          });
-      var positions = fitlist(extents, subtreeOffset, siblingOffset, align);
-      for ( var i = 0, ptrees = [], pextents = []; i < trees.length; i++) {
-        movetree(trees[i], prop, positions[i], orn);
-        pextents.push(moveextent(extents[i], positions[i]));
-      }
-      var resultextent = [ [ -sval / 2, sval / 2 ] ]
-          .concat(mergelist(pextents));
-      node.getPos(prop)[p] = 0;
-
-      if (orn == "top" || orn == "left") {
-        node.getPos(prop)[notp] = acum;
-      } else {
-        node.getPos(prop)[notp] = -acum;
-      }
-
-      return {
-        tree : node,
-        extent : resultextent
-      };
-    }
-
-    $design(node, false, 0);
-  }
-
-
-  return new Class({
-    /*
-    Method: compute
-
-    Computes nodes' positions.
-
-     */
-    compute : function(property, computeLevels) {
-      var prop = property || 'start';
-      var node = this.graph.getNode(this.root);
-      $.extend(node, {
-        'drawn' : true,
-        'exist' : true,
-        'selected' : true
-      });
-      NodeDim.compute(this.graph, prop, this.config);
-      if (!!computeLevels || !("_depth" in node)) {
-        this.graph.computeLevels(this.root, 0, "ignore");
-      }
-
-      this.computePositions(node, prop);
-    },
-
-    computePositions : function(node, prop) {
-      var config = this.config;
-      var multitree = config.multitree;
-      var align = config.align;
-      var indent = align !== 'center' && config.indent;
-      var orn = config.orientation;
-      var orns = multitree ? [ 'top', 'right', 'bottom', 'left' ] : [ orn ];
-      var that = this;
-      $.each(orns, function(orn) {
-        //calculate layout
-          design(that.graph, node, prop, that.config, orn, prop);
-          var i = [ 'x', 'y' ][+(orn == "left" || orn == "right")];
-          //absolutize
-          (function red(node) {
-            node.eachSubnode(function(n) {
-              if (n.exist
-                  && (!multitree || ('$orn' in n.data) && n.data.$orn == orn)) {
-
-                n.getPos(prop)[i] += node.getPos(prop)[i];
-                if (indent) {
-                  n.getPos(prop)[i] += align == 'left' ? indent : -indent;
-                }
-                red(n);
-              }
-            });
-          })(node);
-        });
-    }
-  });
-
-})();
-
-
-/*
- * File: Spacetree.js
- */
-
-/*
-   Class: ST
-
-  A Tree layout with advanced contraction and expansion animations.
-
-  Inspired by:
-
-  SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation (Catherine Plaisant, Jesse Grosjean, Benjamin B. Bederson)
-  <http://hcil.cs.umd.edu/trs/2002-05/2002-05.pdf>
-
-  Drawing Trees (Andrew J. Kennedy) <http://research.microsoft.com/en-us/um/people/akenn/fun/drawingtrees.pdf>
-
-  Note:
-
-  This visualization was built and engineered from scratch, taking only the papers as inspiration, and only shares some features with the visualization described in those papers.
-
-  Implements:
-
-  All <Loader> methods
-
-  Constructor Options:
-
-  Inherits options from
-
-  - <Options.Canvas>
-  - <Options.Controller>
-  - <Options.Tree>
-  - <Options.Node>
-  - <Options.Edge>
-  - <Options.Label>
-  - <Options.Events>
-  - <Options.Tips>
-  - <Options.NodeStyles>
-  - <Options.Navigation>
-
-  Additionally, there are other parameters and some default values changed
-
-  constrained - (boolean) Default's *true*. Whether to show the entire tree when loaded or just the number of levels specified by _levelsToShow_.
-  levelsToShow - (number) Default's *2*. The number of levels to show for a subtree. This number is relative to the selected node.
-  levelDistance - (number) Default's *30*. The distance between two consecutive levels of the tree.
-  Node.type - Described in <Options.Node>. Default's set to *rectangle*.
-  offsetX - (number) Default's *0*. The x-offset distance from the selected node to the center of the canvas.
-  offsetY - (number) Default's *0*. The y-offset distance from the selected node to the center of the canvas.
-  duration - Described in <Options.Fx>. It's default value has been changed to *700*.
-
-  Instance Properties:
-
-  canvas - Access a <Canvas> instance.
-  graph - Access a <Graph> instance.
-  op - Access a <ST.Op> instance.
-  fx - Access a <ST.Plot> instance.
-  labels - Access a <ST.Label> interface implementation.
-
- */
-
-$jit.ST= (function() {
-    // Define some private methods first...
-    // Nodes in path
-    var nodesInPath = [];
-    // Nodes to contract
-    function getNodesToHide(node) {
-      node = node || this.clickedNode;
-      if(!this.config.constrained) {
-        return [];
-      }
-      var Geom = this.geom;
-      var graph = this.graph;
-      var canvas = this.canvas;
-      var level = node._depth, nodeArray = [];
-  	  graph.eachNode(function(n) {
-          if(n.exist && !n.selected) {
-              if(n.isDescendantOf(node.id)) {
-                if(n._depth <= level) nodeArray.push(n);
-              } else {
-                nodeArray.push(n);
-              }
-          }
-  	  });
-  	  var leafLevel = Geom.getRightLevelToShow(node, canvas);
-  	  node.eachLevel(leafLevel, leafLevel, function(n) {
-          if(n.exist && !n.selected) nodeArray.push(n);
-  	  });
-
-  	  for (var i = 0; i < nodesInPath.length; i++) {
-  	    var n = this.graph.getNode(nodesInPath[i]);
-  	    if(!n.isDescendantOf(node.id)) {
-  	      nodeArray.push(n);
-  	    }
-  	  }
-  	  return nodeArray;
-    };
-    // Nodes to expand
-     function getNodesToShow(node) {
-        var nodeArray = [], config = this.config;
-        node = node || this.clickedNode;
-        this.clickedNode.eachLevel(0, config.levelsToShow, function(n) {
-            if(config.multitree && !('$orn' in n.data)
-            		&& n.anySubnode(function(ch){ return ch.exist && !ch.drawn; })) {
-            	nodeArray.push(n);
-            } else if(n.drawn && !n.anySubnode("drawn")) {
-              nodeArray.push(n);
-            }
-        });
-        return nodeArray;
-     };
-    // Now define the actual class.
-    return new Class({
-
-        Implements: [Loader, Extras, Layouts.Tree],
-
-        initialize: function(controller) {
-          var $ST = $jit.ST;
-
-          var config= {
-                levelsToShow: 2,
-                levelDistance: 30,
-                constrained: true,
-                Node: {
-                  type: 'rectangle'
-                },
-                duration: 700,
-                offsetX: 0,
-                offsetY: 0
-            };
-
-            this.controller = this.config = $.merge(
-                Options("Canvas", "Fx", "Tree", "Node", "Edge", "Controller",
-                    "Tips", "NodeStyles", "Events", "Navigation", "Label"), config, controller);
-
-            var canvasConfig = this.config;
-            if(canvasConfig.useCanvas) {
-              this.canvas = canvasConfig.useCanvas;
-              this.config.labelContainer = this.canvas.id + '-label';
-            } else {
-              if(canvasConfig.background) {
-                canvasConfig.background = $.merge({
-                  type: 'Circles'
-                }, canvasConfig.background);
-              }
-              this.canvas = new Canvas(this, canvasConfig);
-              this.config.labelContainer = (typeof canvasConfig.injectInto == 'string'? canvasConfig.injectInto : canvasConfig.injectInto.id) + '-label';
-            }
-
-            this.graphOptions = {
-                'klass': Complex
-            };
-            this.graph = new Graph(this.graphOptions, this.config.Node, this.config.Edge);
-            this.labels = new $ST.Label[canvasConfig.Label.type](this);
-            this.fx = new $ST.Plot(this, $ST);
-            this.op = new $ST.Op(this);
-            this.group = new $ST.Group(this);
-            this.geom = new $ST.Geom(this);
-            this.clickedNode=  null;
-            // initialize extras
-            this.initializeExtras();
-        },
-
-        /*
-         Method: plot
-
-         Plots the <ST>. This is a shortcut to *fx.plot*.
-
-        */
-        plot: function() { this.fx.plot(this.controller); },
-
-
-        /*
-         Method: switchPosition
-
-         Switches the tree orientation.
-
-         Parameters:
-
-        pos - (string) The new tree orientation. Possible values are "top", "left", "right" and "bottom".
-        method - (string) Set this to "animate" if you want to animate the tree when switching its position. You can also set this parameter to "replot" to just replot the subtree.
-        onComplete - (optional|object) This callback is called once the "switching" animation is complete.
-
-         Example:
-
-         (start code js)
-           st.switchPosition("right", "animate", {
-            onComplete: function() {
-              alert('completed!');
-            }
-           });
-         (end code)
-        */
-        switchPosition: function(pos, method, onComplete) {
-          var Geom = this.geom, Plot = this.fx, that = this;
-          if(!Plot.busy) {
-              Plot.busy = true;
-              this.contract({
-                  onComplete: function() {
-                      Geom.switchOrientation(pos);
-                      that.compute('end', false);
-                      Plot.busy = false;
-                      if(method == 'animate') {
-                    	  that.onClick(that.clickedNode.id, onComplete);
-                      } else if(method == 'replot') {
-                    	  that.select(that.clickedNode.id, onComplete);
-                      }
-                  }
-              }, pos);
-          }
-        },
-
-        /*
-        Method: switchAlignment
-
-        Switches the tree alignment.
-
-        Parameters:
-
-       align - (string) The new tree alignment. Possible values are "left", "center" and "right".
-       method - (string) Set this to "animate" if you want to animate the tree after aligning its position. You can also set this parameter to "replot" to just replot the subtree.
-       onComplete - (optional|object) This callback is called once the "switching" animation is complete.
-
-        Example:
-
-        (start code js)
-          st.switchAlignment("right", "animate", {
-           onComplete: function() {
-             alert('completed!');
-           }
-          });
-        (end code)
-       */
-       switchAlignment: function(align, method, onComplete) {
-        this.config.align = align;
-        if(method == 'animate') {
-        	this.select(this.clickedNode.id, onComplete);
-        } else if(method == 'replot') {
-        	this.onClick(this.clickedNode.id, onComplete);
-        }
-       },
-
-       /*
-        Method: addNodeInPath
-
-        Adds a node to the current path as selected node. The selected node will be visible (as in non-collapsed) at all times.
-
-
-        Parameters:
-
-       id - (string) A <Graph.Node> id.
-
-        Example:
-
-        (start code js)
-          st.addNodeInPath("nodeId");
-        (end code)
-       */
-       addNodeInPath: function(id) {
-           nodesInPath.push(id);
-           this.select((this.clickedNode && this.clickedNode.id) || this.root);
-       },
-
-       /*
-       Method: clearNodesInPath
-
-       Removes all nodes tagged as selected by the <ST.addNodeInPath> method.
-
-       See also:
-
-       <ST.addNodeInPath>
-
-       Example:
-
-       (start code js)
-         st.clearNodesInPath();
-       (end code)
-      */
-       clearNodesInPath: function(id) {
-           nodesInPath.length = 0;
-           this.select((this.clickedNode && this.clickedNode.id) || this.root);
-       },
-
-       /*
-         Method: refresh
-
-         Computes positions and plots the tree.
-
-       */
-       refresh: function() {
-           this.reposition();
-           this.select((this.clickedNode && this.clickedNode.id) || this.root);
-       },
-
-       reposition: function() {
-            this.graph.computeLevels(this.root, 0, "ignore");
-            this.geom.setRightLevelToShow(this.clickedNode, this.canvas);
-            this.graph.eachNode(function(n) {
-                if(n.exist) n.drawn = true;
-            });
-            this.compute('end');
-            if (this.clickedNode) {
-              var offset = {
-                  x: this.canvas.translateOffsetX + this.config.offsetX || 0, 
-                  y: this.canvas.translateOffsetY + this.config.offsetY || 0
-              };
-              this.geom.translate(this.clickedNode.endPos.add(offset).$scale(-1), 'end');
-            }
-        },
-
-        requestNodes: function(node, onComplete) {
-          var handler = $.merge(this.controller, onComplete),
-          lev = this.config.levelsToShow;
-          if(handler.request) {
-              var leaves = [], d = node._depth;
-              node.eachLevel(0, lev, function(n) {
-                  if(n.drawn &&
-                   !n.anySubnode()) {
-                   leaves.push(n);
-                   n._level = lev - (n._depth - d);
-                  }
-              });
-              this.group.requestNodes(leaves, handler);
-          }
-            else
-              handler.onComplete();
-        },
-
-        contract: function(onComplete, switched) {
-          var orn  = this.config.orientation;
-          var Geom = this.geom, Group = this.group;
-          if(switched) Geom.switchOrientation(switched);
-          var nodes = getNodesToHide.call(this);
-          if(switched) Geom.switchOrientation(orn);
-          Group.contract(nodes, $.merge(this.controller, onComplete));
-        },
-
-         move: function(node, onComplete) {
-            this.compute('end', false);
-            var move = onComplete.Move, offset = {
-                'x': move.offsetX,
-                'y': move.offsetY
-            };
-            if(move.enable) {
-                this.geom.translate(node.endPos.add(offset).$scale(-1), "end");
-            } else {
-                this.geom.translate($C(offset.x, offset.y).$scale(-1), "end");
-            }
-            this.fx.animate($.merge(this.controller, { modes: ['linear'] }, onComplete));
-         },
-
-        expand: function (node, onComplete) {
-            var nodeArray = getNodesToShow.call(this, node);
-            this.group.expand(nodeArray, $.merge(this.controller, onComplete));
-        },
-
-        selectPath: function(node) {
-          var that = this;
-          this.graph.eachNode(function(n) { n.selected = false; });
-          function path(node) {
-              if(node == null || node.selected) return;
-              node.selected = true;
-              $.each(that.group.getSiblings([node])[node.id],
-              function(n) {
-                   n.exist = true;
-                   n.drawn = true;
-              });
-              var parents = node.getParents();
-              parents = (parents.length > 0)? parents[0] : null;
-              path(parents);
-          };
-          for(var i=0, ns = [node.id].concat(nodesInPath); i < ns.length; i++) {
-              path(this.graph.getNode(ns[i]));
-          }
-        },
-
-        /*
-        Method: setRoot
-
-         Switches the current root node. Changes the topology of the Tree.
-
-        Parameters:
-           id - (string) The id of the node to be set as root.
-           method - (string) Set this to "animate" if you want to animate the tree after adding the subtree. You can also set this parameter to "replot" to just replot the subtree.
-           onComplete - (optional|object) An action to perform after the animation (if any).
-
-        Example:
-
-        (start code js)
-          st.setRoot('nodeId', 'animate', {
-             onComplete: function() {
-               alert('complete!');
-             }
-          });
-        (end code)
-     */
-     setRoot: function(id, method, onComplete) {
-        	if(this.busy) return;
-        	this.busy = true;
-          var that = this, canvas = this.canvas;
-        	var rootNode = this.graph.getNode(this.root);
-        	var clickedNode = this.graph.getNode(id);
-        	function $setRoot() {
-            	if(this.config.multitree && clickedNode.data.$orn) {
-            		var orn = clickedNode.data.$orn;
-            		var opp = {
-            				'left': 'right',
-            				'right': 'left',
-            				'top': 'bottom',
-            				'bottom': 'top'
-            		}[orn];
-            		rootNode.data.$orn = opp;
-            		(function tag(rootNode) {
-                		rootNode.eachSubnode(function(n) {
-                			if(n.id != id) {
-                				n.data.$orn = opp;
-                				tag(n);
-                			}
-                		});
-            		})(rootNode);
-            		delete clickedNode.data.$orn;
-            	}
-            	this.root = id;
-            	this.clickedNode = clickedNode;
-            	this.graph.computeLevels(this.root, 0, "ignore");
-            	this.geom.setRightLevelToShow(clickedNode, canvas, {
-            	  execHide: false,
-            	  onShow: function(node) {
-            	    if(!node.drawn) {
-                    node.drawn = true;
-                    node.setData('alpha', 1, 'end');
-                    node.setData('alpha', 0);
-                    node.pos.setc(clickedNode.pos.x, clickedNode.pos.y);
-            	    }
-            	  }
-            	});
-              this.compute('end');
-              this.busy = true;
-              this.fx.animate({
-                modes: ['linear', 'node-property:alpha'],
-                onComplete: function() {
-                  that.busy = false;
-                  that.onClick(id, {
-                    onComplete: function() {
-                      onComplete && onComplete.onComplete();
-                    }
-                  });
-                }
-              });
-        	}
-
-        	// delete previous orientations (if any)
-        	delete rootNode.data.$orns;
-
-        	if(method == 'animate') {
-        	  $setRoot.call(this);
-        	  that.selectPath(clickedNode);
-        	} else if(method == 'replot') {
-        		$setRoot.call(this);
-        		this.select(this.root);
-        	}
-     },
-
-     /*
-           Method: addSubtree
-
-            Adds a subtree.
-
-           Parameters:
-              subtree - (object) A JSON Tree object. See also <Loader.loadJSON>.
-              method - (string) Set this to "animate" if you want to animate the tree after adding the subtree. You can also set this parameter to "replot" to just replot the subtree.
-              onComplete - (optional|object) An action to perform after the animation (if any).
-
-           Example:
-
-           (start code js)
-             st.addSubtree(json, 'animate', {
-                onComplete: function() {
-                  alert('complete!');
-                }
-             });
-           (end code)
-        */
-        addSubtree: function(subtree, method, onComplete) {
-            if(method == 'replot') {
-                this.op.sum(subtree, $.extend({ type: 'replot' }, onComplete || {}));
-            } else if (method == 'animate') {
-                this.op.sum(subtree, $.extend({ type: 'fade:seq' }, onComplete || {}));
-            }
-        },
-
-        /*
-           Method: removeSubtree
-
-            Removes a subtree.
-
-           Parameters:
-              id - (string) The _id_ of the subtree to be removed.
-              removeRoot - (boolean) Default's *false*. Remove the root of the subtree or only its subnodes.
-              method - (string) Set this to "animate" if you want to animate the tree after removing the subtree. You can also set this parameter to "replot" to just replot the subtree.
-              onComplete - (optional|object) An action to perform after the animation (if any).
-
-          Example:
-
-          (start code js)
-            st.removeSubtree('idOfSubtreeToBeRemoved', false, 'animate', {
-              onComplete: function() {
-                alert('complete!');
-              }
-            });
-          (end code)
-
-        */
-        removeSubtree: function(id, removeRoot, method, onComplete) {
-            var node = this.graph.getNode(id), subids = [];
-            node.eachLevel(+!removeRoot, false, function(n) {
-                subids.push(n.id);
-            });
-            if(method == 'replot') {
-                this.op.removeNode(subids, $.extend({ type: 'replot' }, onComplete || {}));
-            } else if (method == 'animate') {
-                this.op.removeNode(subids, $.extend({ type: 'fade:seq'}, onComplete || {}));
-            }
-        },
-
-        /*
-           Method: select
-
-            Selects a node in the <ST> without performing an animation. Useful when selecting
-            nodes which are currently hidden or deep inside the tree.
-
-          Parameters:
-            id - (string) The id of the node to select.
-            onComplete - (optional|object) an onComplete callback.
-
-          Example:
-          (start code js)
-            st.select('mynodeid', {
-              onComplete: function() {
-                alert('complete!');
-              }
-            });
-          (end code)
-        */
-        select: function(id, onComplete) {
-            var group = this.group, geom = this.geom;
-            var node=  this.graph.getNode(id), canvas = this.canvas;
-            var root  = this.graph.getNode(this.root);
-            var complete = $.merge(this.controller, onComplete);
-            var that = this;
-
-            complete.onBeforeCompute(node);
-            this.selectPath(node);
-            this.clickedNode= node;
-            this.requestNodes(node, {
-                onComplete: function(){
-                    group.hide(group.prepare(getNodesToHide.call(that)), complete);
-                    geom.setRightLevelToShow(node, canvas);
-                    that.compute("current");
-                    that.graph.eachNode(function(n) {
-                        var pos = n.pos.getc(true);
-                        n.startPos.setc(pos.x, pos.y);
-                        n.endPos.setc(pos.x, pos.y);
-                        n.visited = false;
-                    });
-                    var offset = { x: complete.offsetX, y: complete.offsetY };
-                    that.geom.translate(node.endPos.add(offset).$scale(-1), ["start", "current", "end"]);
-                    group.show(getNodesToShow.call(that));
-                    that.plot();
-                    complete.onAfterCompute(that.clickedNode);
-                    complete.onComplete();
-                }
-            });
-        },
-
-      /*
-         Method: onClick
-
-        Animates the <ST> to center the node specified by *id*.
-
-        Parameters:
-
-        id - (string) A node id.
-        options - (optional|object) A group of options and callbacks described below.
-        onComplete - (object) An object callback called when the animation finishes.
-        Move - (object) An object that has as properties _offsetX_ or _offsetY_ for adding some offset position to the centered node.
-
-        Example:
-
-        (start code js)
-          st.onClick('mynodeid', {
-	          Move: {
-	          	enable: true,
-	            offsetX: 30,
-	            offsetY: 5
-	          },
-	          onComplete: function() {
-	              alert('yay!');
-	          }
-          });
-        (end code)
-
-        */
-      onClick: function (id, options) {
-        var canvas = this.canvas, that = this, Geom = this.geom, config = this.config;
-        var innerController = {
-            Move: {
-        	    enable: true,
-              offsetX: canvas.translateOffsetX + config.offsetX || 0,
-              offsetY: canvas.translateOffsetY + config.offsetY || 0
-            },
-            setRightLevelToShowConfig: false,
-            onBeforeRequest: $.empty,
-            onBeforeContract: $.empty,
-            onBeforeMove: $.empty,
-            onBeforeExpand: $.empty
-        };
-        var complete = $.merge(this.controller, innerController, options);
-
-        if(!this.busy) {
-            this.busy = true;
-            var node = this.graph.getNode(id);
-            this.selectPath(node, this.clickedNode);
-           	this.clickedNode = node;
-            complete.onBeforeCompute(node);
-            complete.onBeforeRequest(node);
-            this.requestNodes(node, {
-                onComplete: function() {
-                    complete.onBeforeContract(node);
-                    that.contract({
-                        onComplete: function() {
-                            Geom.setRightLevelToShow(node, canvas, complete.setRightLevelToShowConfig);
-                            complete.onBeforeMove(node);
-                            that.move(node, {
-                                Move: complete.Move,
-                                onComplete: function() {
-                                    complete.onBeforeExpand(node);
-                                    that.expand(node, {
-                                        onComplete: function() {
-                                            that.busy = false;
-                                            complete.onAfterCompute(id);
-                                            complete.onComplete();
-                                        }
-                                    }); // expand
-                                }
-                            }); // move
-                        }
-                    });// contract
-                }
-            });// request
-        }
-      }
-    });
-
-})();
-
-$jit.ST.$extend = true;
-
-/*
-   Class: ST.Op
-
-   Custom extension of <Graph.Op>.
-
-   Extends:
-
-   All <Graph.Op> methods
-
-   See also:
-
-   <Graph.Op>
-
-*/
-$jit.ST.Op = new Class({
-
-  Implements: Graph.Op
-
-});
-
-/*
-
-     Performs operations on group of nodes.
-
-*/
-$jit.ST.Group = new Class({
-
-    initialize: function(viz) {
-        this.viz = viz;
-        this.canvas = viz.canvas;
-        this.config = viz.config;
-        this.animation = new Animation;
-        this.nodes = null;
-    },
-
-    /*
-
-       Calls the request method on the controller to request a subtree for each node.
-    */
-    requestNodes: function(nodes, controller) {
-        var counter = 0, len = nodes.length, nodeSelected = {};
-        var complete = function() { controller.onComplete(); };
-        var viz = this.viz;
-        if(len == 0) complete();
-        for(var i=0; i<len; i++) {
-            nodeSelected[nodes[i].id] = nodes[i];
-            controller.request(nodes[i].id, nodes[i]._level, {
-                onComplete: function(nodeId, data) {
-                    if(data && data.children) {
-                        data.id = nodeId;
-                        viz.op.sum(data, { type: 'nothing' });
-                    }
-                    if(++counter == len) {
-                        viz.graph.computeLevels(viz.root, 0);
-                        complete();
-                    }
-                }
-            });
-        }
-    },
-
-    /*
-
-       Collapses group of nodes.
-    */
-    contract: function(nodes, controller) {
-        var viz = this.viz;
-        var that = this;
-
-        nodes = this.prepare(nodes);
-        this.animation.setOptions($.merge(controller, {
-            $animating: false,
-            compute: function(delta) {
-              if(delta == 1) delta = 0.99;
-              that.plotStep(1 - delta, controller, this.$animating);
-              this.$animating = 'contract';
-            },
-
-            complete: function() {
-                that.hide(nodes, controller);
-            }
-        })).start();
-    },
-
-    hide: function(nodes, controller) {
-        var viz = this.viz;
-        for(var i=0; i<nodes.length; i++) {
-            // TODO nodes are requested on demand, but not
-            // deleted when hidden. Would that be a good feature?
-            // Currently that feature is buggy, so I'll turn it off
-            // Actually this feature is buggy because trimming should take
-            // place onAfterCompute and not right after collapsing nodes.
-            if (true || !controller || !controller.request) {
-                nodes[i].eachLevel(1, false, function(elem){
-                    if (elem.exist) {
-                        $.extend(elem, {
-                            'drawn': false,
-                            'exist': false
-                        });
-                    }
-                });
-            } else {
-                var ids = [];
-                nodes[i].eachLevel(1, false, function(n) {
-                    ids.push(n.id);
-                });
-                viz.op.removeNode(ids, { 'type': 'nothing' });
-                viz.labels.clearLabels();
-            }
-        }
-        controller.onComplete();
-    },
-
-
-    /*
-       Expands group of nodes.
-    */
-    expand: function(nodes, controller) {
-        var that = this;
-        this.show(nodes);
-        this.animation.setOptions($.merge(controller, {
-            $animating: false,
-            compute: function(delta) {
-                that.plotStep(delta, controller, this.$animating);
-                this.$animating = 'expand';
-            },
-
-            complete: function() {
-                that.plotStep(undefined, controller, false);
-                controller.onComplete();
-            }
-        })).start();
-
-    },
-
-    show: function(nodes) {
-        var config = this.config;
-        this.prepare(nodes);
-        $.each(nodes, function(n) {
-        	// check for root nodes if multitree
-        	if(config.multitree && !('$orn' in n.data)) {
-        		delete n.data.$orns;
-        		var orns = ' ';
-        		n.eachSubnode(function(ch) {
-        			if(('$orn' in ch.data)
-        					&& orns.indexOf(ch.data.$orn) < 0
-        					&& ch.exist && !ch.drawn) {
-        				orns += ch.data.$orn + ' ';
-        			}
-        		});
-        		n.data.$orns = orns;
-        	}
-            n.eachLevel(0, config.levelsToShow, function(n) {
-            	if(n.exist) n.drawn = true;
-            });
-        });
-    },
-
-    prepare: function(nodes) {
-        this.nodes = this.getNodesWithChildren(nodes);
-        return this.nodes;
-    },
-
-    /*
-       Filters an array of nodes leaving only nodes with children.
-    */
-    getNodesWithChildren: function(nodes) {
-        var ans = [], config = this.config, root = this.viz.root;
-        nodes.sort(function(a, b) { return (a._depth <= b._depth) - (a._depth >= b._depth); });
-        for(var i=0; i<nodes.length; i++) {
-            if(nodes[i].anySubnode("exist")) {
-            	for (var j = i+1, desc = false; !desc && j < nodes.length; j++) {
-                    if(!config.multitree || '$orn' in nodes[j].data) {
-                		desc = desc || nodes[i].isDescendantOf(nodes[j].id);
-                    }
-                }
-                if(!desc) ans.push(nodes[i]);
-            }
-        }
-        return ans;
-    },
-
-    plotStep: function(delta, controller, animating) {
-        var viz = this.viz,
-        config = this.config,
-        canvas = viz.canvas,
-        ctx = canvas.getCtx(),
-        nodes = this.nodes;
-        var i, node;
-        // hide nodes that are meant to be collapsed/expanded
-        var nds = {};
-        for(i=0; i<nodes.length; i++) {
-          node = nodes[i];
-          nds[node.id] = [];
-          var root = config.multitree && !('$orn' in node.data);
-          var orns = root && node.data.$orns;
-          node.eachSubgraph(function(n) {
-            // TODO(nico): Cleanup
-        	  // special check for root node subnodes when
-        	  // multitree is checked.
-        	  if(root && orns && orns.indexOf(n.data.$orn) > 0
-        			  && n.drawn) {
-        		  n.drawn = false;
-                  nds[node.id].push(n);
-              } else if((!root || !orns) && n.drawn) {
-                n.drawn = false;
-                nds[node.id].push(n);
-              }
-            });
-            node.drawn = true;
-        }
-        // plot the whole (non-scaled) tree
-        if(nodes.length > 0) viz.fx.plot();
-        // show nodes that were previously hidden
-        for(i in nds) {
-          $.each(nds[i], function(n) { n.drawn = true; });
-        }
-        // plot each scaled subtree
-        for(i=0; i<nodes.length; i++) {
-          node = nodes[i];
-          ctx.save();
-          viz.fx.plotSubtree(node, controller, delta, animating);
-          ctx.restore();
-        }
-      },
-
-      getSiblings: function(nodes) {
-        var siblings = {};
-        $.each(nodes, function(n) {
-            var par = n.getParents();
-            if (par.length == 0) {
-                siblings[n.id] = [n];
-            } else {
-                var ans = [];
-                par[0].eachSubnode(function(sn) {
-                    ans.push(sn);
-                });
-                siblings[n.id] = ans;
-            }
-        });
-        return siblings;
-    }
-});
-
-/*
-   ST.Geom
-
-   Performs low level geometrical computations.
-
-   Access:
-
-   This instance can be accessed with the _geom_ parameter of the st instance created.
-
-   Example:
-
-   (start code js)
-    var st = new ST(canvas, config);
-    st.geom.translate //or can also call any other <ST.Geom> method
-   (end code)
-
-*/
-
-$jit.ST.Geom = new Class({
-    Implements: Graph.Geom,
-    /*
-       Changes the tree current orientation to the one specified.
-
-       You should usually use <ST.switchPosition> instead.
-    */
-    switchOrientation: function(orn) {
-    	this.config.orientation = orn;
-    },
-
-    /*
-       Makes a value dispatch according to the current layout
-       Works like a CSS property, either _top-right-bottom-left_ or _top|bottom - left|right_.
-     */
-    dispatch: function() {
-    	  // TODO(nico) should store Array.prototype.slice.call somewhere.
-        var args = Array.prototype.slice.call(arguments);
-        var s = args.shift(), len = args.length;
-        var val = function(a) { return typeof a == 'function'? a() : a; };
-        if(len == 2) {
-            return (s == "top" || s == "bottom")? val(args[0]) : val(args[1]);
-        } else if(len == 4) {
-            switch(s) {
-                case "top": return val(args[0]);
-                case "right": return val(args[1]);
-                case "bottom": return val(args[2]);
-                case "left": return val(args[3]);
-            }
-        }
-        return undefined;
-    },
-
-    /*
-       Returns label height or with, depending on the tree current orientation.
-    */
-    getSize: function(n, invert) {
-        var data = n.data, config = this.config;
-        var siblingOffset = config.siblingOffset;
-        var s = (config.multitree
-        		&& ('$orn' in data)
-        		&& data.$orn) || config.orientation;
-        var w = n.getData('width') + siblingOffset;
-        var h = n.getData('height') + siblingOffset;
-        if(!invert)
-            return this.dispatch(s, h, w);
-        else
-            return this.dispatch(s, w, h);
-    },
-
-    /*
-       Calculates a subtree base size. This is an utility function used by _getBaseSize_
-    */
-    getTreeBaseSize: function(node, level, leaf) {
-        var size = this.getSize(node, true), baseHeight = 0, that = this;
-        if(leaf(level, node)) return size;
-        if(level === 0) return 0;
-        node.eachSubnode(function(elem) {
-            baseHeight += that.getTreeBaseSize(elem, level -1, leaf);
-        });
-        return (size > baseHeight? size : baseHeight) + this.config.subtreeOffset;
-    },
-
-
-    /*
-       getEdge
-
-       Returns a Complex instance with the begin or end position of the edge to be plotted.
-
-       Parameters:
-
-       node - A <Graph.Node> that is connected to this edge.
-       type - Returns the begin or end edge position. Possible values are 'begin' or 'end'.
-
-       Returns:
-
-       A <Complex> number specifying the begin or end position.
-    */
-    getEdge: function(node, type, s) {
-    	var $C = function(a, b) {
-          return function(){
-            return node.pos.add(new Complex(a, b));
-          };
-        };
-        var dim = this.node;
-        var w = node.getData('width');
-        var h = node.getData('height');
-
-        if(type == 'begin') {
-            if(dim.align == "center") {
-                return this.dispatch(s, $C(0, h/2), $C(-w/2, 0),
-                                     $C(0, -h/2),$C(w/2, 0));
-            } else if(dim.align == "left") {
-                return this.dispatch(s, $C(0, h), $C(0, 0),
-                                     $C(0, 0), $C(w, 0));
-            } else if(dim.align == "right") {
-                return this.dispatch(s, $C(0, 0), $C(-w, 0),
-                                     $C(0, -h),$C(0, 0));
-            } else throw "align: not implemented";
-
-
-        } else if(type == 'end') {
-            if(dim.align == "center") {
-                return this.dispatch(s, $C(0, -h/2), $C(w/2, 0),
-                                     $C(0, h/2),  $C(-w/2, 0));
-            } else if(dim.align == "left") {
-                return this.dispatch(s, $C(0, 0), $C(w, 0),
-                                     $C(0, h), $C(0, 0));
-            } else if(dim.align == "right") {
-                return this.dispatch(s, $C(0, -h),$C(0, 0),
-                                     $C(0, 0), $C(-w, 0));
-            } else throw "align: not implemented";
-        }
-    },
-
-    /*
-       Adjusts the tree position due to canvas scaling or translation.
-    */
-    getScaledTreePosition: function(node, scale) {
-        var dim = this.node;
-        var w = node.getData('width');
-        var h = node.getData('height');
-        var s = (this.config.multitree
-        		&& ('$orn' in node.data)
-        		&& node.data.$orn) || this.config.orientation;
-
-        var $C = function(a, b) {
-          return function(){
-            return node.pos.add(new Complex(a, b)).$scale(1 - scale);
-          };
-        };
-        if(dim.align == "left") {
-            return this.dispatch(s, $C(0, h), $C(0, 0),
-                                 $C(0, 0), $C(w, 0));
-        } else if(dim.align == "center") {
-            return this.dispatch(s, $C(0, h / 2), $C(-w / 2, 0),
-                                 $C(0, -h / 2),$C(w / 2, 0));
-        } else if(dim.align == "right") {
-            return this.dispatch(s, $C(0, 0), $C(-w, 0),
-                                 $C(0, -h),$C(0, 0));
-        } else throw "align: not implemented";
-    },
-
-    /*
-       treeFitsInCanvas
-
-       Returns a Boolean if the current subtree fits in canvas.
-
-       Parameters:
-
-       node - A <Graph.Node> which is the current root of the subtree.
-       canvas - The <Canvas> object.
-       level - The depth of the subtree to be considered.
-    */
-    treeFitsInCanvas: function(node, canvas, level) {
-        var csize = canvas.getSize();
-        var s = (this.config.multitree
-        		&& ('$orn' in node.data)
-        		&& node.data.$orn) || this.config.orientation;
-
-        var size = this.dispatch(s, csize.width, csize.height);
-        var baseSize = this.getTreeBaseSize(node, level, function(level, node) {
-          return level === 0 || !node.anySubnode();
-        });
-        return (baseSize < size);
-    }
-});
-
-/*
-  Class: ST.Plot
-
-  Custom extension of <Graph.Plot>.
-
-  Extends:
-
-  All <Graph.Plot> methods
-
-  See also:
-
-  <Graph.Plot>
-
-*/
-$jit.ST.Plot = new Class({
-
-    Implements: Graph.Plot,
-
-    /*
-       Plots a subtree from the spacetree.
-    */
-    plotSubtree: function(node, opt, scale, animating) {
-        var viz = this.viz, canvas = viz.canvas, config = viz.config;
-        scale = Math.min(Math.max(0.001, scale), 1);
-        if(scale >= 0) {
-            node.drawn = false;
-            var ctx = canvas.getCtx();
-            var diff = viz.geom.getScaledTreePosition(node, scale);
-            ctx.translate(diff.x, diff.y);
-            ctx.scale(scale, scale);
-        }
-        this.plotTree(node, $.merge(opt, {
-          'withLabels': true,
-          'hideLabels': !!scale,
-          'plotSubtree': function(n, ch) {
-            var root = config.multitree && !('$orn' in node.data);
-            var orns = root && node.getData('orns');
-            return !root || orns.indexOf(node.getData('orn')) > -1;
-          }
-        }), animating);
-        if(scale >= 0) node.drawn = true;
-    },
-
-    /*
-        Method: getAlignedPos
-
-        Returns a *x, y* object with the position of the top/left corner of a <ST> node.
-
-        Parameters:
-
-        pos - (object) A <Graph.Node> position.
-        width - (number) The width of the node.
-        height - (number) The height of the node.
-
-     */
-    getAlignedPos: function(pos, width, height) {
-        var nconfig = this.node;
-        var square, orn;
-        if(nconfig.align == "center") {
-            square = {
-                x: pos.x - width / 2,
-                y: pos.y - height / 2
-            };
-        } else if (nconfig.align == "left") {
-            orn = this.config.orientation;
-            if(orn == "bottom" || orn == "top") {
-                square = {
-                    x: pos.x - width / 2,
-                    y: pos.y
-                };
-            } else {
-                square = {
-                    x: pos.x,
-                    y: pos.y - height / 2
-                };
-            }
-        } else if(nconfig.align == "right") {
-            orn = this.config.orientation;
-            if(orn == "bottom" || orn == "top") {
-                square = {
-                    x: pos.x - width / 2,
-                    y: pos.y - height
-                };
-            } else {
-                square = {
-                    x: pos.x - width,
-                    y: pos.y - height / 2
-                };
-            }
-        } else throw "align: not implemented";
-
-        return square;
-    },
-
-    getOrientation: function(adj) {
-    	var config = this.config;
-    	var orn = config.orientation;
-
-    	if(config.multitree) {
-        	var nodeFrom = adj.nodeFrom;
-        	var nodeTo = adj.nodeTo;
-    		orn = (('$orn' in nodeFrom.data)
-        		&& nodeFrom.data.$orn)
-        		|| (('$orn' in nodeTo.data)
-        		&& nodeTo.data.$orn);
-    	}
-
-    	return orn;
-    }
-});
-
-/*
-  Class: ST.Label
-
-  Custom extension of <Graph.Label>.
-  Contains custom <Graph.Label.SVG>, <Graph.Label.HTML> and <Graph.Label.Native> extensions.
-
-  Extends:
-
-  All <Graph.Label> methods and subclasses.
-
-  See also:
-
-  <Graph.Label>, <Graph.Label.Native>, <Graph.Label.HTML>, <Graph.Label.SVG>.
- */
-$jit.ST.Label = {};
-
-/*
-   ST.Label.Native
-
-   Custom extension of <Graph.Label.Native>.
-
-   Extends:
-
-   All <Graph.Label.Native> methods
-
-   See also:
-
-   <Graph.Label.Native>
-*/
-$jit.ST.Label.Native = new Class({
-  Implements: Graph.Label.Native,
-
-  renderLabel: function(canvas, node, controller) {
-    var ctx = canvas.getCtx(),
-        coord = node.pos.getc(true),
-        width = node.getData('width'),
-        height = node.getData('height'),
-        pos = this.viz.fx.getAlignedPos(coord, width, height);
-    ctx.fillText(node.name, pos.x + width / 2, pos.y + height / 2);
-  }
-});
-
-$jit.ST.Label.DOM = new Class({
-  Implements: Graph.Label.DOM,
-
-  /*
-      placeLabel
-
-      Overrides abstract method placeLabel in <Graph.Plot>.
-
-      Parameters:
-
-      tag - A DOM label element.
-      node - A <Graph.Node>.
-      controller - A configuration/controller object passed to the visualization.
-
-    */
-    placeLabel: function(tag, node, controller) {
-        var pos = node.pos.getc(true),
-            config = this.viz.config,
-            dim = config.Node,
-            canvas = this.viz.canvas,
-            w = node.getData('width'),
-            h = node.getData('height'),
-            radius = canvas.getSize(),
-            labelPos, orn;
-
-        var ox = canvas.translateOffsetX,
-            oy = canvas.translateOffsetY,
-            sx = canvas.scaleOffsetX,
-            sy = canvas.scaleOffsetY,
-            posx = pos.x * sx + ox,
-            posy = pos.y * sy + oy;
-
-        if(dim.align == "center") {
-            labelPos= {
-                x: Math.round(posx - w / 2 + radius.width/2),
-                y: Math.round(posy - h / 2 + radius.height/2)
-            };
-        } else if (dim.align == "left") {
-            orn = config.orientation;
-            if(orn == "bottom" || orn == "top") {
-                labelPos= {
-                    x: Math.round(posx - w / 2 + radius.width/2),
-                    y: Math.round(posy + radius.height/2)
-                };
-            } else {
-                labelPos= {
-                    x: Math.round(posx + radius.width/2),
-                    y: Math.round(posy - h / 2 + radius.height/2)
-                };
-            }
-        } else if(dim.align == "right") {
-            orn = config.orientation;
-            if(orn == "bottom" || orn == "top") {
-                labelPos= {
-                    x: Math.round(posx - w / 2 + radius.width/2),
-                    y: Math.round(posy - h + radius.height/2)
-                };
-            } else {
-                labelPos= {
-                    x: Math.round(posx - w + radius.width/2),
-                    y: Math.round(posy - h / 2 + radius.height/2)
-                };
-            }
-        } else throw "align: not implemented";
-
-		labelPos.w=w;
-		labelPos.h=h;
-
-        var style = tag.style;
-        style.left = labelPos.x + 'px';
-        style.top  = labelPos.y + 'px';
-        style.display = this.fitsInCanvas(labelPos, canvas)? '' : 'none';
-        controller.onPlaceLabel(tag, node);
-    }
-});
-
-/*
-  ST.Label.SVG
-
-  Custom extension of <Graph.Label.SVG>.
-
-  Extends:
-
-  All <Graph.Label.SVG> methods
-
-  See also:
-
-  <Graph.Label.SVG>
-*/
-$jit.ST.Label.SVG = new Class({
-  Implements: [$jit.ST.Label.DOM, Graph.Label.SVG],
-
-  initialize: function(viz) {
-    this.viz = viz;
-  }
-});
-
-/*
-   ST.Label.HTML
-
-   Custom extension of <Graph.Label.HTML>.
-
-   Extends:
-
-   All <Graph.Label.HTML> methods.
-
-   See also:
-
-   <Graph.Label.HTML>
-
-*/
-$jit.ST.Label.HTML = new Class({
-  Implements: [$jit.ST.Label.DOM, Graph.Label.HTML],
-
-  initialize: function(viz) {
-    this.viz = viz;
-  }
-});
-
-
-/*
-  Class: ST.Plot.NodeTypes
-
-  This class contains a list of <Graph.Node> built-in types.
-  Node types implemented are 'none', 'circle', 'rectangle', 'ellipse' and 'square'.
-
-  You can add your custom node types, customizing your visualization to the extreme.
-
-  Example:
-
-  (start code js)
-    ST.Plot.NodeTypes.implement({
-      'mySpecialType': {
-        'render': function(node, canvas) {
-          //print your custom node to canvas
-        },
-        //optional
-        'contains': function(node, pos) {
-          //return true if pos is inside the node or false otherwise
-        }
-      }
-    });
-  (end code)
-
-*/
-$jit.ST.Plot.NodeTypes = new Class({
-  'none': {
-    'render': $.empty,
-    'contains': $.lambda(false)
-  },
-  'circle': {
-    'render': function(node, canvas) {
-      var dim  = node.getData('dim'),
-          pos = this.getAlignedPos(node.pos.getc(true), dim, dim),
-          dim2 = dim/2;
-      this.nodeHelper.circle.render('fill', {x:pos.x+dim2, y:pos.y+dim2}, dim2, canvas);
-    },
-    'contains': function(node, pos) {
-      var dim  = node.getData('dim'),
-          npos = this.getAlignedPos(node.pos.getc(true), dim, dim),
-          dim2 = dim/2;
-      return this.nodeHelper.circle.contains({x:npos.x+dim2, y:npos.y+dim2}, pos, dim2);
-    }
-  },
-  'square': {
-    'render': function(node, canvas) {
-      var dim  = node.getData('dim'),
-          dim2 = dim/2,
-          pos = this.getAlignedPos(node.pos.getc(true), dim, dim);
-      this.nodeHelper.square.render('fill', {x:pos.x+dim2, y:pos.y+dim2}, dim2, canvas);
-    },
-    'contains': function(node, pos) {
-      var dim  = node.getData('dim'),
-          npos = this.getAlignedPos(node.pos.getc(true), dim, dim),
-          dim2 = dim/2;
-      return this.nodeHelper.square.contains({x:npos.x+dim2, y:npos.y+dim2}, pos, dim2);
-    }
-  },
-  'ellipse': {
-    'render': function(node, canvas) {
-      var width = node.getData('width'),
-          height = node.getData('height'),
-          pos = this.getAlignedPos(node.pos.getc(true), width, height);
-      this.nodeHelper.ellipse.render('fill', {x:pos.x+width/2, y:pos.y+height/2}, width, height, canvas);
-    },
-    'contains': function(node, pos) {
-      var width = node.getData('width'),
-          height = node.getData('height'),
-          npos = this.getAlignedPos(node.pos.getc(true), width, height);
-      return this.nodeHelper.ellipse.contains({x:npos.x+width/2, y:npos.y+height/2}, pos, width, height);
-    }
-  },
-  'rectangle': {
-    'render': function(node, canvas) {
-      var width = node.getData('width'),
-          height = node.getData('height'),
-          pos = this.getAlignedPos(node.pos.getc(true), width, height);
-      this.nodeHelper.rectangle.render('fill', {x:pos.x+width/2, y:pos.y+height/2}, width, height, canvas);
-    },
-    'contains': function(node, pos) {
-      var width = node.getData('width'),
-          height = node.getData('height'),
-          npos = this.getAlignedPos(node.pos.getc(true), width, height);
-      return this.nodeHelper.rectangle.contains({x:npos.x+width/2, y:npos.y+height/2}, pos, width, height);
-    }
-  }
-});
-
-/*
-  Class: ST.Plot.EdgeTypes
-
-  This class contains a list of <Graph.Adjacence> built-in types.
-  Edge types implemented are 'none', 'line', 'arrow', 'quadratic:begin', 'quadratic:end', 'bezier'.
-
-  You can add your custom edge types, customizing your visualization to the extreme.
-
-  Example:
-
-  (start code js)
-    ST.Plot.EdgeTypes.implement({
-      'mySpecialType': {
-        'render': function(adj, canvas) {
-          //print your custom edge to canvas
-        },
-        //optional
-        'contains': function(adj, pos) {
-          //return true if pos is inside the arc or false otherwise
-        }
-      }
-    });
-  (end code)
-
-*/
-$jit.ST.Plot.EdgeTypes = new Class({
-    'none': $.empty,
-    'line': {
-      'render': function(adj, canvas) {
-        var orn = this.getOrientation(adj),
-            nodeFrom = adj.nodeFrom,
-            nodeTo = adj.nodeTo,
-            rel = nodeFrom._depth < nodeTo._depth,
-            from = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
-            to =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn);
-        this.edgeHelper.line.render(from, to, canvas);
-      },
-      'contains': function(adj, pos) {
-        var orn = this.getOrientation(adj),
-            nodeFrom = adj.nodeFrom,
-            nodeTo = adj.nodeTo,
-            rel = nodeFrom._depth < nodeTo._depth,
-            from = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
-            to =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn);
-        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
-      }
-    },
-     'arrow': {
-       'render': function(adj, canvas) {
-         var orn = this.getOrientation(adj),
-             node = adj.nodeFrom,
-             child = adj.nodeTo,
-             rel = (node._depth < child._depth),
-             dim = adj.getData('dim'),
-             from = this.viz.geom.getEdge((rel?node:child), 'begin', orn),
-             to = this.viz.geom.getEdge((rel?child:node), 'end', orn),
-             direction = adj.data.$direction,
-             inv = (direction && direction.length>1 && direction[0] != node.id);
-         this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
-       },
-       'contains': function(adj, pos) {
-         var orn = this.getOrientation(adj),
-             nodeFrom = adj.nodeFrom,
-             nodeTo = adj.nodeTo,
-             rel = nodeFrom._depth < nodeTo._depth,
-             from = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
-             to =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn);
-         return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
-       }
-     },
-    'quadratic:begin': {
-       'render': function(adj, canvas) {
-          var orn = this.getOrientation(adj);
-          var nodeFrom = adj.nodeFrom,
-              nodeTo = adj.nodeTo,
-              rel = nodeFrom._depth < nodeTo._depth,
-              begin = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
-              end =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn),
-              dim = adj.getData('dim'),
-              ctx = canvas.getCtx();
-          ctx.beginPath();
-          ctx.moveTo(begin.x, begin.y);
-          switch(orn) {
-            case "left":
-              ctx.quadraticCurveTo(begin.x + dim, begin.y, end.x, end.y);
-              break;
-            case "right":
-              ctx.quadraticCurveTo(begin.x - dim, begin.y, end.x, end.y);
-              break;
-            case "top":
-              ctx.quadraticCurveTo(begin.x, begin.y + dim, end.x, end.y);
-              break;
-            case "bottom":
-              ctx.quadraticCurveTo(begin.x, begin.y - dim, end.x, end.y);
-              break;
-          }
-          ctx.stroke();
-        }
-     },
-    'quadratic:end': {
-       'render': function(adj, canvas) {
-          var orn = this.getOrientation(adj);
-          var nodeFrom = adj.nodeFrom,
-              nodeTo = adj.nodeTo,
-              rel = nodeFrom._depth < nodeTo._depth,
-              begin = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
-              end =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn),
-              dim = adj.getData('dim'),
-              ctx = canvas.getCtx();
-          ctx.beginPath();
-          ctx.moveTo(begin.x, begin.y);
-          switch(orn) {
-            case "left":
-              ctx.quadraticCurveTo(end.x - dim, end.y, end.x, end.y);
-              break;
-            case "right":
-              ctx.quadraticCurveTo(end.x + dim, end.y, end.x, end.y);
-              break;
-            case "top":
-              ctx.quadraticCurveTo(end.x, end.y - dim, end.x, end.y);
-              break;
-            case "bottom":
-              ctx.quadraticCurveTo(end.x, end.y + dim, end.x, end.y);
-              break;
-          }
-          ctx.stroke();
-       }
-     },
-    'bezier': {
-       'render': function(adj, canvas) {
-         var orn = this.getOrientation(adj),
-             nodeFrom = adj.nodeFrom,
-             nodeTo = adj.nodeTo,
-             rel = nodeFrom._depth < nodeTo._depth,
-             begin = this.viz.geom.getEdge(rel? nodeFrom:nodeTo, 'begin', orn),
-             end =  this.viz.geom.getEdge(rel? nodeTo:nodeFrom, 'end', orn),
-             dim = adj.getData('dim'),
-             ctx = canvas.getCtx();
-         ctx.beginPath();
-         ctx.moveTo(begin.x, begin.y);
-         switch(orn) {
-           case "left":
-             ctx.bezierCurveTo(begin.x + dim, begin.y, end.x - dim, end.y, end.x, end.y);
-             break;
-           case "right":
-             ctx.bezierCurveTo(begin.x - dim, begin.y, end.x + dim, end.y, end.x, end.y);
-             break;
-           case "top":
-             ctx.bezierCurveTo(begin.x, begin.y + dim, end.x, end.y - dim, end.x, end.y);
-             break;
-           case "bottom":
-             ctx.bezierCurveTo(begin.x, begin.y - dim, end.x, end.y + dim, end.x, end.y);
-             break;
-         }
-         ctx.stroke();
-       }
-    }
-});
-
-
-
-
-
- })();
diff --git a/style/client.css b/style/client.css
index 30a36c213..f3a8b94b1 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1006,12 +1006,20 @@ a.ilink:hover {
 
 .tournament-bracket {
 	max-height: 200px;
-	overflow: auto;
+	padding: 10px;
+	overflow: hidden;
 	font-size: 8pt;
 }
+.tournament-bracket-overflowing {
+	height: 200px;
+	padding: 0;
+	position: relative;
+	left: 0;
+	top: 0;
+}
 
 .tournament-bracket-table {
-	margin: 10px auto;
+	margin: 0 auto;
 	empty-cells: hide;
 	border-bottom: 1px #aaa solid;
 	border-collapse: collapse;
@@ -1037,48 +1045,47 @@ a.ilink:hover {
 	background-color: rgba(255, 0, 0, 0.2)
 }
 
-.tournament-bracket-tree {
-	width: 100%;
-	height: 200px;
+.tournament-bracket-tree-link {
+	fill: none;
+	stroke: #aaa;
 }
-.tournament-bracket-tree-node-match, .tournament-bracket-tree-node-team {
-	height: 27px;
-	width: 148px;
-	border: 1px solid rgba(178, 183, 191, 0.7);
-	border-radius: 5px 5px 5px 5px;
-	background-color: rgba(225, 232, 242, 0.7);
-	color: #000;
+.tournament-bracket-tree-link-active {
+	stroke: #aa0;
+	stroke-width: 3px;
+}
+.tournament-bracket-tree-node > rect {
+	/* Note: Due to SVG limitations, dimensions and border radii are in client-tournament.js (nodeSize) */
+	fill: rgba(225, 232, 242, 0.7);
+	stroke: rgba(178, 183, 191, 0.7);
+}
+.tournament-bracket-tree-node-win > rect {
+	fill: rgba(0, 255, 0, 0.2);
+	stroke: rgba(0, 255, 0, 0.5);
+}
+.tournament-bracket-tree-node-draw > rect {
+	fill: rgba(255, 255, 0, 0.2);
+	stroke: rgba(255, 255, 0, 0.5);
+}
+.tournament-bracket-tree-node-loss > rect {
+	fill: rgba(255, 0, 0, 0.2);
+	stroke: rgba(255, 0, 0, 0.5);
+}
+.tournament-bracket-tree-node > text {
 	font-size: 0.8em;
-	line-height: 1.5em;
-	text-align: center;
-	cursor: default;
-	user-select: none;
+	text-anchor: middle;
+	dominant-baseline: central;
 }
-.tournament-bracket-tree-node-team {
-	height: 17px;
-	line-height: 17px;
+.tournament-bracket-tree-node > text > a {
+	fill: #248;
 }
-.tournament-bracket-tree-node-match-unavailable {
-	line-height: 27px;
+.tournament-bracket-tree-node > text > a:hover {
+	fill: #68c;
 }
 .tournament-bracket-tree-node-match-team {
 	font-weight: bold;
 }
 .tournament-bracket-tree-node-match-team-draw, .tournament-bracket-tree-node-match-team-loss {
-	color: #aaa;
-}
-
-.tournament-bracket-tree-node-win {
-	background-color: rgba(0, 255, 0, 0.2);
-	border-color: rgba(0, 255, 0, 0.5);
-}
-.tournament-bracket-tree-node-draw {
-	background-color: rgba(255, 255, 0, 0.2);
-	border-color: rgba(255, 255, 0, 0.5);
-}
-.tournament-bracket-tree-node-loss {
-	background-color: rgba(255, 0, 0, 0.2);
-	border-color: rgba(255, 0, 0, 0.5);
+	fill: #aaa;
 }
 
 .tournament-tools {
@@ -1120,9 +1127,15 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 .tournament-message-end-bracket {
 	font-weight: normal !important;
 	max-height: 400px;
-	overflow: auto;
+	overflow: hidden;
 	text-align: center;
 }
+.tournament-message-end-bracket-overflowing {
+	height: 400px;
+	position: relative;
+	left: 0;
+	top: 0;
+}
 
 /* Messages */
 
diff --git a/testclient.html b/testclient.html
index edef66435..f1bd7ba6f 100644
--- a/testclient.html
+++ b/testclient.html
@@ -73,7 +73,7 @@
 		<script src="js/lib/html-sanitizer-minified.js"></script>
 		<script src="js/lib/lodash.compat.js"></script>
 		<script src="js/lib/backbone.js"></script>
-		<script src="js/lib/infovis-spacetree-2.0.1.js"></script>
+		<script src="js/lib/d3.v3.min.js"></script>
 
 		<script>
 			document.getElementById('loading-message').innerHTML += ' DONE<br />Loading client...';

From f0f953ba19d260902a595a468f62d36a366aaa74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Tue, 17 Sep 2013 21:12:28 +1000
Subject: [PATCH 23/33] Fix minor display bug where incorrect links are
 highlighted

---
 js/client-tournament.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 71bd418c7..e627199b6 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -402,7 +402,7 @@
 					.attr('d', link)
 					.classed('tournament-bracket-tree-link', true)
 					.classed('tournament-bracket-tree-link-active', function (link) {
-						return link.source.team === link.target.team;
+						return link.target.state === 'finished' && link.source.team === link.target.team;
 					});
 
 				var nodeGroup = layoutRoot.selectAll('g.tournament-bracket-tree-node').data(nodes).enter()

From 13df8331497752d6be01712ee6a03fe4ca2fd5fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Tue, 17 Sep 2013 22:24:50 +1000
Subject: [PATCH 24/33] Do the last fix properly

---
 js/client-tournament.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index e627199b6..5836353d7 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -402,7 +402,7 @@
 					.attr('d', link)
 					.classed('tournament-bracket-tree-link', true)
 					.classed('tournament-bracket-tree-link-active', function (link) {
-						return link.target.state === 'finished' && link.source.team === link.target.team;
+						return link.source.state === 'finished' && link.source.team === link.target.team;
 					});
 
 				var nodeGroup = layoutRoot.selectAll('g.tournament-bracket-tree-node').data(nodes).enter()

From 4c7efed9c3595c9c4739297a035484212bd40ed1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Thu, 19 Sep 2013 16:31:28 +1000
Subject: [PATCH 25/33] Update team location to match latest commits

---
 js/client-tournament.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 5836353d7..2520f22f7 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -124,12 +124,12 @@
 				self.room.send('/tournament leave');
 			});
 			this.$challengeChallenge.on('click', function() {
-				var team = app.user.teams[self.$challengeTeam.children().val()];
+				var team = Storage.teams[self.$challengeTeam.children().val()];
 				self.room.send('/utm ' + JSON.stringify(team ? team.team : null));
 				self.room.send('/tournament challenge ' + self.$challengeUser.children().val());
 			});
 			this.$challengeAccept.on('click', function() {
-				var team = app.user.teams[self.$challengeTeam.children().val()];
+				var team = Storage.teams[self.$challengeTeam.children().val()];
 				self.room.send('/utm ' + JSON.stringify(team ? team.team : null));
 				self.room.send('/tournament acceptchallenge');
 			});

From b6deff3b9c4155c82e91a7741a9299eb685ad4b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 20 Oct 2013 20:31:15 +1100
Subject: [PATCH 26/33] Clamp the bracket position to inside the box, so it
 always is visible

---
 js/client-tournament.js | 38 +++++++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 2520f22f7..d8779370d 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -7,12 +7,31 @@
 		return array.slice(0, -1).join(", ") + " " + finalSeparator + " " + array.slice(-1)[0];
 	}
 
+	function clampPosition(element, position) {
+		var $element = $(element);
+
+		var elementWidth = $element.width();
+		var parentWidth = $element.parent().width();
+		if (parentWidth >= elementWidth)
+			position.left = parentWidth / 2 - elementWidth / 2;
+		else if (position.left < parentWidth - elementWidth)
+			position.left = parentWidth - elementWidth;
+		else if (position.left > 0)
+			position.left = 0;
+
+		var elementHeight = $element.height();
+		var parentHeight = $element.parent().height();
+		if (parentHeight >= elementHeight)
+			position.top = parentHeight / 2 - elementHeight / 2;
+		else if (position.top < parentHeight - elementHeight)
+			position.top = parentHeight - elementHeight;
+		else if (position.top > 0)
+			position.top = 0;
+	}
+
 	function makeDraggable(element, position) {
 		var $element = $(element);
 		position = position || {};
-		var isMouseDown = false;
-		var innerX = 0;
-		var innerY = 0;
 
 		$element.css({
 			'user-select': 'none',
@@ -26,11 +45,16 @@
 			position.isDefault = true;
 		}
 
+		clampPosition(element, position);
 		$element.css({
 			left: position.left,
 			top: position.top
 		});
 
+		var isMouseDown = false;
+		var innerX = 0;
+		var innerY = 0;
+
 		$element.on('mousedown', function (e) {
 			innerX = e.pageX - this.offsetLeft;
 			innerY = e.pageY - this.offsetTop;
@@ -44,6 +68,7 @@
 				position.left = e.pageX - innerX;
 				position.top = e.pageY - innerY;
 				delete position.isDefault;
+				clampPosition(element, position);
 				$element.css({
 					left: position.left,
 					top: position.top
@@ -137,6 +162,13 @@
 
 		TournamentBox.prototype.updateLayout = function () {
 			this.$box.css('max-height', this.$box.hasClass('active') ? this.$box[0].scrollHeight: '');
+			if (this.$bracket.hasClass('tournament-bracket-overflowing')) {
+				clampPosition(this.$bracket.children(), this.savedBracketPosition);
+				this.$bracket.children().css({
+					left: this.savedBracketPosition.left,
+					top: this.savedBracketPosition.top
+				});
+			}
 		};
 		TournamentBox.prototype.setBoxVisibility = function (isVisible) {
 			if (isVisible) {

From 9d8a005e13b2402f871edbe588ec1b0f0e7542f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Sun, 20 Oct 2013 20:46:34 +1100
Subject: [PATCH 27/33] Allow releasing mouse anywhere to stop bracket dragging

We can do this now since the bracket is now clamped inside it's area,
so releasing the mouse outside of it won't hide the bracket
---
 js/client-tournament.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index d8779370d..e93d876ff 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -59,8 +59,6 @@
 			innerX = e.pageX - this.offsetLeft;
 			innerY = e.pageY - this.offsetTop;
 			isMouseDown = true;
-		}).on('mouseup', function () {
-			isMouseDown = false;
 		});
 
 		$(document).on('mousemove', function (e) {
@@ -74,6 +72,8 @@
 					top: position.top
 				});
 			}
+		}).on('mouseup', function () {
+			isMouseDown = false;
 		});
 	}
 

From cf48b94fa3c793bca76b03f3c92a99f9a0dc07d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Wed, 13 Nov 2013 18:32:38 +1100
Subject: [PATCH 28/33] Fix tournament bracket being unscrollable when it is
 updated when the user has another tab open

---
 js/client-tournament.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index e93d876ff..46cc69a58 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -168,6 +168,12 @@
 					left: this.savedBracketPosition.left,
 					top: this.savedBracketPosition.top
 				});
+			} else {
+				if (this.$bracket[0].offsetHeight < this.$bracket[0].scrollHeight ||
+					this.$bracket[0].offsetWidth < this.$bracket[0].scrollWidth) {
+					this.$bracket.addClass('tournament-bracket-overflowing');
+					makeDraggable(this.$bracket.children().first(), this.savedBracketPosition);
+				}
 			}
 		};
 		TournamentBox.prototype.setBoxVisibility = function (isVisible) {
@@ -260,11 +266,7 @@
 						var $bracket = this.generateBracket(this.bracketData);
 						if ($bracket) {
 							this.$bracket.append($bracket);
-							if (this.$bracket[0].offsetHeight < this.$bracket[0].scrollHeight ||
-								this.$bracket[0].offsetWidth < this.$bracket[0].scrollWidth) {
-								this.$bracket.addClass('tournament-bracket-overflowing');
-								makeDraggable($bracket, this.savedBracketPosition);
-							}
+							this.updateLayout();
 						}
 						break;
 

From 4b08cc1f5c7f3804f805792056fd248c65b5da83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Mon, 9 Dec 2013 11:59:25 +1100
Subject: [PATCH 29/33] Restrict usage of Tournaments to TBT only (for now)

This is because this is still in alpha so the intended purpose of use for now is just for testing on TBT rather than releasing it for use on all servers.
---
 js/client-tournament.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/client-tournament.js b/js/client-tournament.js
index 46cc69a58..32c9d08cd 100644
--- a/js/client-tournament.js
+++ b/js/client-tournament.js
@@ -194,6 +194,7 @@
 		};
 
 		TournamentBox.prototype.parseMessage = function (data, isBroadcast) {
+			if (Config.server.id !== "battletower") return true;
 			if (isBroadcast) {
 				// TODO
 				return true;

From 8ec4a07c5240627de78f5a2a0a2109e945d5f95c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Mon, 9 Dec 2013 12:00:48 +1100
Subject: [PATCH 30/33] Add tournament includes to index.template.html

---
 index.template.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.template.html b/index.template.html
index a3c1f9aab..7de0ebd35 100644
--- a/index.template.html
+++ b/index.template.html
@@ -103,6 +103,7 @@
 		<script src="//play.pokemonshowdown.com/js/lib/html-sanitizer-minified.js?"></script>
 		<script src="//play.pokemonshowdown.com/js/lib/lodash.compat.js?"></script>
 		<script src="//play.pokemonshowdown.com/js/lib/backbone.js?"></script>
+		<script src="//play.pokemonshowdown.com/js/lib/d3.v3.min.js"></script>
 
 		<script>
 			document.getElementById('loading-message').innerHTML += ' DONE<br />Loading data...';
@@ -126,6 +127,7 @@
 		<script src="//play.pokemonshowdown.com/js/client-chat.js?"></script>
 		<script src="//play.pokemonshowdown.com/js/client-battle.js?"></script>
 		<script src="//play.pokemonshowdown.com/js/client-rooms.js?"></script>
+		<script src="//play.pokemonshowdown.com/js/client-tournament.js"></script>
 		<script src="//play.pokemonshowdown.com/js/storage.js?"></script>
 		<script src="//play.pokemonshowdown.com/data/graphics.js?"></script>
 

From ef69e954c2a10afb7aae874b94c4cdd0ca0f9c65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Mon, 9 Dec 2013 16:16:11 +1100
Subject: [PATCH 31/33] Rename client-tournament.js to
 client-chat-tournament.js

---
 index.template.html                                    | 2 +-
 js/{client-tournament.js => client-chat-tournament.js} | 0
 testclient.html                                        | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename js/{client-tournament.js => client-chat-tournament.js} (100%)

diff --git a/index.template.html b/index.template.html
index 7de0ebd35..0275e41a7 100644
--- a/index.template.html
+++ b/index.template.html
@@ -125,9 +125,9 @@
 		<script src="//play.pokemonshowdown.com/js/client-teambuilder.js?"></script>
 		<script src="//play.pokemonshowdown.com/js/client-ladder.js?"></script>
 		<script src="//play.pokemonshowdown.com/js/client-chat.js?"></script>
+		<script src="//play.pokemonshowdown.com/js/client-chat-tournament.js"></script>
 		<script src="//play.pokemonshowdown.com/js/client-battle.js?"></script>
 		<script src="//play.pokemonshowdown.com/js/client-rooms.js?"></script>
-		<script src="//play.pokemonshowdown.com/js/client-tournament.js"></script>
 		<script src="//play.pokemonshowdown.com/js/storage.js?"></script>
 		<script src="//play.pokemonshowdown.com/data/graphics.js?"></script>
 
diff --git a/js/client-tournament.js b/js/client-chat-tournament.js
similarity index 100%
rename from js/client-tournament.js
rename to js/client-chat-tournament.js
diff --git a/testclient.html b/testclient.html
index 39c888ddc..4fc74e058 100644
--- a/testclient.html
+++ b/testclient.html
@@ -108,9 +108,9 @@
 		<script src="js/client-teambuilder.js"></script>
 		<script src="js/client-ladder.js"></script>
 		<script src="js/client-chat.js"></script>
+		<script src="js/client-chat-tournament.js"></script>
 		<script src="js/client-battle.js"></script>
 		<script src="js/client-rooms.js"></script>
-		<script src="js/client-tournament.js"></script>
 		<script src="js/storage.js"></script>
 		<script src="data/graphics.js"></script>
 

From 59ccc575a94455d9f4476c1cf76e6cdc94f44717 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Mon, 9 Dec 2013 16:38:01 +1100
Subject: [PATCH 32/33] Add a comment explaining the fallthrough in
 client-chat.js

And clean up a bit of trailing whitespace
---
 js/client-chat.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/client-chat.js b/js/client-chat.js
index bfc199556..e6bd81707 100644
--- a/js/client-chat.js
+++ b/js/client-chat.js
@@ -394,7 +394,7 @@
 			switch (cmd.toLowerCase()) {
 			case 'challenge':
 				var targets = target.split(',').map($.trim);
-				
+
 				if (!targets[0]) targets[0] = prompt('Who?');
 				target = toId(targets[0]);
 				this.challengeData = { userid: target, format: targets[1] || '', team: targets[2] || '' };
@@ -828,6 +828,7 @@
 				case 'tournaments':
 					if (!this.tournamentBox.parseMessage(row.slice(1), row[0] === 'tournaments'))
 						break;
+					// fallthrough in case of unparsed message
 
 				case '':
 					this.$chat.append('<div class="notice">' + Tools.escapeHTML(row.slice(1).join('|')) + '</div>');

From 2cbc43d22d2d82ebef4c30cb5c041de2c4c113ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= <nospam@xiaotai.org>
Date: Mon, 9 Dec 2013 16:38:50 +1100
Subject: [PATCH 33/33] Only initialise the tournament box when a tournament
 packet is detected, rather than for every room

---
 js/client-chat.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/js/client-chat.js b/js/client-chat.js
index e6bd81707..2ad1f6729 100644
--- a/js/client-chat.js
+++ b/js/client-chat.js
@@ -644,7 +644,7 @@
 			this.$chatbox = null;
 
 			this.$tournamentWrapper = this.$('.tournament-wrapper');
-			this.tournamentBox = new TournamentBox(this, this.$tournamentWrapper);
+			this.tournamentBox = null;
 
 			this.users = {};
 			this.userCount = {};
@@ -674,7 +674,7 @@
 				this.$tournamentWrapper.removeClass('hasuserlist');
 			}
 			this.$chatFrame.scrollTop(this.$chat.height());
-			this.tournamentBox.updateLayout();
+			if (this.tournamentBox) this.tournamentBox.updateLayout();
 		},
 		show: function() {
 			Room.prototype.show.apply(this, arguments);
@@ -826,6 +826,7 @@
 
 				case 'tournament':
 				case 'tournaments':
+					if (!this.tournamentBox) this.tournamentBox = new TournamentBox(this, this.$tournamentWrapper);
 					if (!this.tournamentBox.parseMessage(row.slice(1), row[0] === 'tournaments'))
 						break;
 					// fallthrough in case of unparsed message
@@ -841,7 +842,7 @@
 			}
 		},
 		tournamentButton: function(val, button) {
-			this.tournamentBox[$(button).data('type')](val, button);
+			if (this.tournamentBox) this.tournamentBox[$(button).data('type')](val, button);
 		},
 		parseUserList: function(userList) {
 			this.userCount = {};